CP #2 Se connecter, Déconnecter et suivi de connexion

README.md

@@ -25,3 +25,10 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+## Models Generation using Swagger
+Copy paste result of /swagger/v1/swagger.json file
+
+Run `node_modules/.bin/ng-swagger-gen --gen-config -i swagger.json` once to generate the generation file
+
+then Run `node_modules/.bin/ng-swagger-gen` to generate models 

src/app/app.component.html

@@ -1,17 +1,16 @@
 <p-toolbar id="Mytoolbar">
     
     <div class="ui-toolbar-group-left">
-            <img src="../assets/images/home-page/logoNew.png" class="img-rounded img-responsive"
-            alt="MyMirror">
+            <img src="../assets/images/home-page/logoNew.png" class="img-rounded img-responsive" alt="MyMirror" (click)="GoHome()">
     </div>
     
     <div class="ui-toolbar-group-right">
-        <button pButton type="button" label="ABOUT" (click)="Logout()"></button>
+        <button pButton type="button" label="ABOUT"></button>
         <button pButton type="button" label="TEAM" ></button>
         <button pButton type="button" label="CONTACT" ></button>
         <button *ngIf="!Connected" pButton type="button" label="SIGN UP" icon="pi pi-pencil" iconPos="right" (click)="SignUp()"></button>
         <button *ngIf="!Connected" pButton type="button" label="LOG IN" icon="pi pi-sign-in" iconPos="right" (click)="DisplayLoginModal = true"></button>
-        <p-splitButton *ngIf="Connected" class="btnDeMerde"  type="button" label="Nom du gars"></p-splitButton>
+        <p-splitButton *ngIf="Connected" class="btnDeMerde"  type="button" [label]="ConnectedUser.firstName" [model]="itemsUserDropDown"></p-splitButton>
     </div>
 
     
@@ -19,7 +18,7 @@
 
 <p-dialog id="modalLogIn" [modal]=true [(visible)]="DisplayLoginModal">
     <p-header translate>
-        App.Login
+        App.Home.Login
     </p-header>
 
     <div class="ui-inputgroup">

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationService } from './_services/authentication.service';
 import { Router } from '@angular/router';
 import { first } from 'rxjs/operators';
+import { UserInfo } from './_api/models';
 
 
 @Component({
@@ -15,7 +16,9 @@ import { first } from 'rxjs/operators';
 export class AppComponent implements OnInit {
   title = 'MyControlPanel';
 
-  items: MenuItem[];
+  itemsUserDropDown: MenuItem[];
+
+  public ConnectedUser: UserInfo;
 
   public Connected = false;
   public DisplayLoginModal = false;
@@ -28,6 +31,10 @@ export class AppComponent implements OnInit {
 
   public birthday: Date;
 
+  // Label
+  public LabelDropDownLogout: string;
+  public LabelDropDownModifyUser: string;
+
   constructor(
     private _appService: AppService,
     private _translateService: TranslateService,
@@ -36,17 +43,30 @@ export class AppComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.items = [
-      {label: 'Update', icon: 'pi pi-refresh'},
-      {label: 'Delete', icon: 'pi pi-times'}
-    ];
+
     // To Include in a fonction of a dropdown language chose
-    this._translateService.setDefaultLang('fr');
+    this._translateService.setDefaultLang('en');
+
+    // To test
+    this._translateService.get('App.Home.UserDropDown.ModifyUser').subscribe(modifyLabel => {
+      this._translateService.get('App.Home.UserDropDown.Logout').subscribe(logoutLabel => {
+        this.itemsUserDropDown = [
+          {label: modifyLabel, icon: 'fa fa-edit', command: () => {
+            // route get param => navigate vers profile
+            this._router.navigate(['/profile/01']);
+          }},
+          {label: logoutLabel, icon: 'fa fa-sign-out', command: () => {
+              this.Logout();
+          }}
+        ];
+      });
+    });
 
     const currentUser = this._authService.currentUserValue;
     console.log(currentUser);
 
     if (currentUser && currentUser.token) {
+      this.ConnectedUser = currentUser;
       this.Connected = true;
       this.DisplayLoginModal = false;
       this.Username = null;
@@ -78,6 +98,7 @@ export class AppComponent implements OnInit {
             .subscribe(
                 data => {
                     console.log(data);
+                    this.ConnectedUser = data;
                     this.Connected = true;
                     this.DisplayLoginModal = false;
                     this.Username = null;
@@ -100,7 +121,12 @@ export class AppComponent implements OnInit {
     this._authService.IsLoggedIn = false;
     this._router.navigate(['/home']);
   }
+
   public SignUp() {
     this.DisplaySignInModal = true;
   }
+
+  public GoHome() {
+    this._router.navigate(['/home']);
+  }
 }

src/assets/i18n/en.json

@@ -1,5 +1,17 @@
 {
     "App":{
-        "Login":"LOGIN"
+        "Home": {
+            "Login":"LOGIN",
+            "UserDropDown": {
+                "Logout": "Logout",
+                "ModifyUser": "Edit profile"
+            }
+        },
+        "NotFound": {
+        },
+        "Profile": {
+            "Edit": {
+            }
+        }
     }
 }

src/assets/i18n/fr.json

@@ -1,5 +1,17 @@
 {
     "App":{
-        "Login":"Se Connecter"
+        "Home": {
+            "Login":"Se connecter",
+            "UserDropDown": {
+                "Logout": "Se déconnecter",
+                "ModifyUser": "Modifier profil"
+            }
+        },
+        "NotFound": {
+        },
+        "Profile": {
+            "Edit": {
+            }
+        }
     }
 }