#3527 - Main menu

César Calvo

2017-03-15 199b9ae1c2818713bbb1a33831c46fb505e997d4

#3527 - Main menu

 securis/src/main/webapp/src/app/app.module.ts
..
..
@@ -23,6 +23,10 @@
23
23
 import { PackListComponent }  from './pack.list.component';
24
24
 import { HeroDetailComponent } from './detail.component';
25
25
 import { LoginFormComponent } from './login.form.component';
26
+import { MenuComponent }  from './menu.component';
27
+import { NoMenuComponent }  from './nomenu.component';
28
+import { FooterComponent }  from './footer.component';
29
+
26
30
 
27
31
 import { appRoutes, appRoutingProviders } from './app.routes';
28
32
 import { requestOptionsProvider, requestBackendProvider } from './common/default.requests.options';
..
..
@@ -53,7 +57,10 @@
53
57
     LoginFormComponent,
54
58
     ErrorCheckerComponent,
55
59
     I18nDirective,
56
-    HomeComponent
60
+    HomeComponent,
61
+    MenuComponent,
62
+    NoMenuComponent,
63
+    FooterComponent    
57
64
   ],
58
65
   bootstrap: [ HomeComponent ],
59
66
   entryComponents: [ PackFormComponent ],
 securis/src/main/webapp/src/app/app.routes.ts
..
..
@@ -1,13 +1,23 @@
1
1
 import { Routes, RouterModule } from '@angular/router';
2
2
 
3
3
 import { HomeComponent } from './home.component';
4
+import { MenuComponent } from './menu.component';
5
+import { NoMenuComponent } from './nomenu.component';
4
6
 import { PackListComponent } from './pack.list.component';
5
7
 import { LoginFormComponent } from './login.form.component';
6
8
 
7
9
 const routes: Routes = [
8
10
  // {path: '', redirectTo: '/packs', pathMatch: 'full'}, 
9
-  {path: 'packs', component: PackListComponent },
10
-  {path: 'login', component: LoginFormComponent }
11
+  {path: 'menu', component: MenuComponent,
12
+    children: [
13
+      {path: 'packs', component: PackListComponent }
14
+    ]
15
+  },
16
+  {path: 'nomenu', component: NoMenuComponent,
17
+    children: [
18
+      {path: 'login', component: LoginFormComponent }
19
+    ]
20
+  }
11
21
 ];
12
22
 /*    {path: 'product', component: DashboardProductComponent, children: [
13
23
       {path: '', component: ProductOverviewComponent},
 securis/src/main/webapp/src/app/footer.component.html
..
..
@@ -0,0 +1,7 @@
1
+  <td-layout-footer>
2
+	<div layout="row" layout-align="start center" flex>
3
+		<div flex layout="row" layout-align="start center">v.  {{securisVersion}}</div>
4
+		<div flex layout="row" layout-align="center center"><a href="http://www.curistec.com/" target="_blank">CurisTec</a>&nbsp;©2017</div>
5
+		<div flex></div>
6
+	</div>
7
+  </td-layout-footer>
 securis/src/main/webapp/src/app/footer.component.ts
..
..
@@ -0,0 +1,28 @@
1
+import { Component } from '@angular/core';
2
+import { BaseRequestOptions, Http } from '@angular/http';
3
+
4
+
5
+@Component({
6
+  selector: 'app-footer',
7
+  templateUrl: 'src/app/footer.component.html' 
8
+})
9
+export class FooterComponent {
10
+
11
+  securisVersion : string = '0.0.0';
12
+
13
+  constructor(
14
+              private http: Http,
15
+              ) {
16
+  }
17
+
18
+  ngOnInit(): void {
19
+            //TODO Move to service
20
+      this.http.get("version", /* workaround to avoid OPTIONS method request*/ new BaseRequestOptions())
21
+        .map((res) => <string>res.json().version)
22
+        .subscribe(
23
+          version => this.securisVersion = version,
24
+          err => this.securisVersion = '0.0.0'
25
+        );
26
+  }
27
+
28
+}
 securis/src/main/webapp/src/app/home.component.html
..
..
@@ -1,54 +1,2 @@
1
-<td-layout *ngIf="isLoggedIn">
2
-  <td-navigation-drawer #mainMenu sidenavTitle="SeCuris">
3
-  </td-navigation-drawer>
4
1
 
5
-  <md-nav-list td-sidenav-content>
6
-    <a routerLink="/packs" md-list-item (click)="closeMenu()">
7
-      <md-icon md-list-avatar>view_compact</md-icon>
8
-      <h3 md-line i18n="menu.packs">  </h3>
9
-      <p md-line i18n="menu.packs.description"> </p>
10
-    </a>
11
-    <a routerLink="/packs" md-list-item (click)="closeMenu()">
12
-      <md-icon md-list-avatar>view_compact</md-icon>
13
-      <h3 md-line i18n="menu.applications">  </h3>
14
-      <p md-line i18n="menu.applications.description"> </p>
15
-    </a>
16
-    <a routerLink="/packs" md-list-item (click)="closeMenu()">
17
-      <md-icon md-list-avatar>view_compact</md-icon>
18
-      <h3 md-line i18n="menu.license_types">  </h3>
19
-      <p md-line i18n="menu.license_types.description"> </p>
20
-    </a>
21
-    <a routerLink="/packs" md-list-item (click)="closeMenu()">
22
-      <md-icon md-list-avatar>view_compact</md-icon>
23
-      <h3 md-line i18n="menu.organizations">  </h3>
24
-      <p md-line i18n="menu.organizations.description"> </p>
25
-    </a>
26
-    <a routerLink="/packs" md-list-item (click)="closeMenu()">
27
-      <md-icon md-list-avatar>view_compact</md-icon>
28
-      <h3 md-line i18n="menu.users">  </h3>
29
-      <p md-line i18n="menu.users.description"> </p>
30
-    </a>                
31
-  </md-nav-list>
32
-
33
-<td-layout-nav toolbarTitle="SeCuris" logo="assets:logo-white">
34
2
 	<router-outlet></router-outlet>
35
-  <td-layout-footer>
36
-	<div layout="row" layout-align="start center" flex>
37
-		<div flex layout="row" layout-align="start center">v. {{securisVersion}}</div>
38
-		<div flex layout="row" layout-align="center center"><a href="http://www.curistec.com/" target="_blank">CurisTec</a>&nbsp;©2017</div>
39
-		<div flex></div>
40
-	</div>
41
-  </td-layout-footer>
42
-</td-layout-nav>
43
-</td-layout>
44
-
45
-<td-layout-nav *ngIf="!isLoggedIn" toolbarTitle="SeCuris" logo="assets:logo-white">
46
-	<router-outlet></router-outlet>
47
-  <td-layout-footer>
48
-	<div layout="row" layout-align="start center" flex>
49
-		<div flex layout="row" layout-align="start center">v. {{securisVersion}}</div>
50
-		<div flex layout="row" layout-align="center center"><a href="http://www.curistec.com/" target="_blank">CurisTec</a>&nbsp;©2017</div>
51
-		<div flex></div>
52
-	</div>
53
-  </td-layout-footer>
54
-</td-layout-nav>
 securis/src/main/webapp/src/app/home.component.ts
..
..
@@ -28,20 +28,12 @@
28
28
               toaster: ToastsManager,
29
29
               vRef: ViewContainerRef,
30
30
               private router: Router,
31
-              http: Http,
32
31
               private media: TdMediaService,
33
32
               private _iconRegistry: MdIconRegistry,
34
33
               private _domSanitizer: DomSanitizer,
35
34
               private store: LocalStorageService) {
36
35
       this.registerIcons();
37
36
       toaster.setRootViewContainerRef(vRef);
38
-      http.get("version", /* workaround to avoid OPTIONS method request*/ new BaseRequestOptions())
39
-        .map((res) => <string>res.json().version)
40
-        .subscribe(
41
-          version => this.securisVersion = version,
42
-          err => this.securisVersion = '0.0.0'
43
-        );
44
-
45
37
   }
46
38
 
47
39
   private registerIcons() : void {
..
..
@@ -61,11 +53,7 @@
61
53
   }
62
54
 
63
55
   ngOnInit(): void {
64
-      this.userService.isLoggedIn().subscribe(authOk => {
65
-        this.isLoggedIn = true//authOk.valueOf();
66
-        this.router.navigateByUrl(this.isLoggedIn ? 'packs' : 'login');
67
-      }  , 
68
-      err => /* Show message */ this.router.navigateByUrl('login'));  
56
+      this.router.navigateByUrl('nomenu/login');
69
57
   }
70
58
 
71
59
   ngAfterViewInit(): void {
 securis/src/main/webapp/src/app/login.form.component.ts
..
..
@@ -26,7 +26,7 @@
26
26
   public login() {
27
27
     this.userService.login(this.data.username, this.data.password).subscribe(
28
28
       token => {
29
-        this.router.navigateByUrl("packs");
29
+        this.router.navigateByUrl("menu/packs");
30
30
       },
31
31
       errMsg => this.toaster.error(errMsg, 'Login error'));
32
32
   }
 securis/src/main/webapp/src/app/menu.component.html
..
..
@@ -0,0 +1,38 @@
1
+<td-layout>
2
+  <td-navigation-drawer #mainMenu sidenavTitle="SeCuris">
3
+  </td-navigation-drawer>
4
+
5
+  <md-nav-list td-sidenav-content>
6
+    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
7
+      <md-icon md-list-avatar>view_compact</md-icon>
8
+      <h3 md-line i18n="menu.packs">  </h3>
9
+      <p md-line i18n="menu.packs.description"> </p>
10
+    </a>
11
+    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
12
+      <md-icon md-list-avatar>view_compact</md-icon>
13
+      <h3 md-line i18n="menu.applications">  </h3>
14
+      <p md-line i18n="menu.applications.description"> </p>
15
+    </a>
16
+    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
17
+      <md-icon md-list-avatar>view_compact</md-icon>
18
+      <h3 md-line i18n="menu.license_types">  </h3>
19
+      <p md-line i18n="menu.license_types.description"> </p>
20
+    </a>
21
+    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
22
+      <md-icon md-list-avatar>view_compact</md-icon>
23
+      <h3 md-line i18n="menu.organizations">  </h3>
24
+      <p md-line i18n="menu.organizations.description"> </p>
25
+    </a>
26
+    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
27
+      <md-icon md-list-avatar>view_compact</md-icon>
28
+      <h3 md-line i18n="menu.users">  </h3>
29
+      <p md-line i18n="menu.users.description"> </p>
30
+    </a>                
31
+  </md-nav-list>
32
+
33
+<td-layout-nav toolbarTitle="SeCuris" logo="assets:logo-white">
34
+	<router-outlet></router-outlet>
35
+  <app-footer></app-footer>
36
+</td-layout-nav>
37
+</td-layout>
38
+
 securis/src/main/webapp/src/app/menu.component.ts
..
..
@@ -0,0 +1,35 @@
1
+import { Observable } from 'rxjs/Observable';
2
+import { BaseRequestOptions, Http } from '@angular/http';
3
+import { Component, ViewChild } from '@angular/core';
4
+import { UserService } from './user.service';
5
+import { Router } from '@angular/router';
6
+import { TdNavigationDrawerComponent } from '@covalent/core'
7
+
8
+
9
+@Component({
10
+  templateUrl: 'src/app/menu.component.html' 
11
+})
12
+export class MenuComponent {
13
+
14
+  @ViewChild('mainMenu') mainMenu: TdNavigationDrawerComponent;
15
+
16
+
17
+  constructor(private userService: UserService,
18
+              private router: Router) {
19
+  }
20
+
21
+  ngOnInit(): void {
22
+      this.userService.isLoggedIn().subscribe(authOk => {
23
+        let isLoggedIn = authOk.valueOf();
24
+        if (!isLoggedIn) {
25
+          this.router.navigateByUrl('nomenu/login');
26
+        }
27
+      }  , 
28
+      err => /* Show message */ this.router.navigateByUrl('nomenu/login'));  
29
+  }
30
+
31
+  public closeMenu() {
32
+    this.mainMenu.close();
33
+  }
34
+
35
+}
 securis/src/main/webapp/src/app/nomenu.component.html
..
..
@@ -0,0 +1,4 @@
1
+<td-layout-nav toolbarTitle="SeCuris" logo="assets:logo-white">
2
+	<router-outlet></router-outlet>
3
+  <app-footer></app-footer>
4
+</td-layout-nav>
 securis/src/main/webapp/src/app/nomenu.component.ts
..
..
@@ -0,0 +1,29 @@
1
+import { Observable } from 'rxjs/Observable';
2
+import { BaseRequestOptions, Http } from '@angular/http';
3
+import { ToastsManager } from 'ng2-toastr/ng2-toastr';
4
+import { AfterViewInit, Component, ViewContainerRef, ViewChild } from '@angular/core';
5
+import { DomSanitizer } from '@angular/platform-browser';
6
+import { MdIconRegistry } from '@angular/material';
7
+import { UserService } from './user.service';
8
+import { LocalStorageService } from 'angular-2-local-storage';
9
+import { TdMediaService } from '@covalent/core';
10
+import { Router } from '@angular/router';
11
+import { TdNavigationDrawerComponent } from '@covalent/core'
12
+
13
+// https://github.com/Teradata/covalent-quickstart/tree/develop/src/app
14
+// https://teradata.github.io/covalent-quickstart/#/
15
+
16
+@Component({
17
+  templateUrl: 'src/app/nomenu.component.html' 
18
+})
19
+export class NoMenuComponent {
20
+
21
+
22
+  securisVersion : string;
23
+
24
+  constructor() {
25
+
26
+  }
27
+
28
+
29
+}
 securis/src/main/webapp/src/app/user.service.ts
..
..
@@ -12,6 +12,8 @@
12
12
 @Injectable()
13
13
 export class UserService {
14
14
 
15
+  count : number = 0;
16
+
15
17
   constructor(private $L: LocaleService,
16
18
               private router: Router,
17
19
               private store: LocalStorageService, 
..
..
@@ -25,31 +27,35 @@
25
27
     params.append('password', password);
26
28
     let options = new RequestOptions({ headers: new Headers({ "Content-Type": "application/x-www-form-urlencoded" })});
27
29
     return this.http.post('user/login', params.toString(), options)
28
-                    .map((res: Response) => {
29
-                        let data = res.json();
30
-                        this.store.set('username', username);
31
-				                this.store.set('token', data.token);
32
-                        return <string>data.token;
33
-                      })
34
-                    .catch((r) => this.handleError(r));
30
+                    .map(this.mapLogin)
31
+                    .catch(this.handleError);
35
32
   }
33
+
34
+  private mapLogin(res : Response) {
35
+    let data = res.json();
36
+    //this.store.set('username', data.username);
37
+		//this.store.set('token', data.token);
38
+    return <string>data.token;
39
+  }    
36
40
 
37
41
   isLoggedIn() : Observable<Boolean> {
38
42
     if (!this.existsToken()) {
39
43
       return Observable.of(false);
40
44
     }
41
45
     var token = this.store.get("token");
42
-    return this.http.get('check', new RequestOptions({ headers: new Headers({ 'X-SECURIS-TOKEN': token }) }))
43
-                    .map((res: Response) => {
44
-                        let body = res.json();
45
-                        if (body.valid) {
46
-                          this.store.set('user', body.user);
47
-                        }
48
-                        return body.valid;
49
-                      })
50
-                    .catch((r) => this.handleError(r))
51
-                    .catch(() => Observable.of(false));
46
+    let option = new RequestOptions({ headers: new Headers({ 'X-SECURIS-TOKEN': token }) });
47
+    return this.http.get('check', option)
48
+                    .map(this.mapCheck)
49
+                    .catch(this.handleError);
52
50
   }
51
+
52
+  private mapCheck(res : Response) {
53
+    let body = res.json();
54
+    if (body.valid) {
55
+      //this.store.set('user', body.user);
56
+    }
57
+    return body.valid;
58
+  }  
53
59
 
54
60
   existsToken() : Boolean {
55
61
     return this.store.get("token") !== null;
..
..
@@ -60,6 +66,9 @@
60
66
     this.router.navigate(['Login']);
61
67
   }
62
68
 
69
+
70
+
71
+
63
72
   private handleError (error: Response | any) {
64
73
     // In a real world app, we might use a remote logging infrastructure
65
74
     let errMsg: string;