CP #2 S'inscrire, modifier profil et supprimer profil + Notifications service

src/app/_api/models/user-info.ts

@@ -2,7 +2,7 @@
 import { ScreenConfiguration } from './screen-configuration';
 import { Device } from './device';
 export interface UserInfo {
-  address?: string;
+  dateCreation?: string;
   id?: string;
   email?: string;
   password?: string;
@@ -11,6 +11,7 @@ export interface UserInfo {
   token?: string;
   birthday?: string;
   role?: string;
+  address?: string;
   city?: string;
   state?: string;
   language?: string;

src/app/_api/services/user.service.ts

@@ -13,8 +13,10 @@ import { UserInfo } from '../models/user-info';
 })
 class UserService extends __BaseService {
   static readonly GetPath = '/api/user';
+  static readonly UpdateUserPath = '/api/user';
   static readonly CreateUserPath = '/api/user';
   static readonly Get_1Path = '/api/user/{id}';
+  static readonly DeleteUserPath = '/api/user/{id}';
 
   constructor(
     config: __Configuration,
@@ -56,6 +58,42 @@ class UserService extends __BaseService {
     );
   }
 
+  /**
+   * @param updatedUser undefined
+   * @return Success
+   */
+  UpdateUserResponse(updatedUser?: UserInfo): __Observable<__StrictHttpResponse<UserInfo>> {
+    let __params = this.newParams();
+    let __headers = new HttpHeaders();
+    let __body: any = null;
+    __body = updatedUser;
+    let req = new HttpRequest<any>(
+      'PUT',
+      this.rootUrl + `/api/user`,
+      __body,
+      {
+        headers: __headers,
+        params: __params,
+        responseType: 'json'
+      });
+
+    return this.http.request<any>(req).pipe(
+      __filter(_r => _r instanceof HttpResponse),
+      __map((_r) => {
+        return _r as __StrictHttpResponse<UserInfo>;
+      })
+    );
+  }
+  /**
+   * @param updatedUser undefined
+   * @return Success
+   */
+  UpdateUser(updatedUser?: UserInfo): __Observable<UserInfo> {
+    return this.UpdateUserResponse(updatedUser).pipe(
+      __map(_r => _r.body as UserInfo)
+    );
+  }
+
   /**
    * @param newUser undefined
    * @return Success
@@ -127,6 +165,40 @@ class UserService extends __BaseService {
       __map(_r => _r.body as UserInfo)
     );
   }
+
+  /**
+   * @param id undefined
+   */
+  DeleteUserResponse(id: string): __Observable<__StrictHttpResponse<null>> {
+    let __params = this.newParams();
+    let __headers = new HttpHeaders();
+    let __body: any = null;
+
+    let req = new HttpRequest<any>(
+      'DELETE',
+      this.rootUrl + `/api/user/${id}`,
+      __body,
+      {
+        headers: __headers,
+        params: __params,
+        responseType: 'json'
+      });
+
+    return this.http.request<any>(req).pipe(
+      __filter(_r => _r instanceof HttpResponse),
+      __map((_r) => {
+        return _r as __StrictHttpResponse<null>;
+      })
+    );
+  }
+  /**
+   * @param id undefined
+   */
+  DeleteUser(id: string): __Observable<null> {
+    return this.DeleteUserResponse(id).pipe(
+      __map(_r => _r.body as null)
+    );
+  }
 }
 
 module UserService {

src/app/_services/app.service.ts

@@ -1,7 +1,8 @@
-import { Injectable } from '@angular/core';
+import { Injectable, EventEmitter } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { BooksService } from '../_api/services/books.service';
+import { DatePipe } from '@angular/common';
 
 
 @Injectable({
@@ -14,8 +15,18 @@ export class AppService {
     private _bookService: BooksService
   ) { }
 
+  OpenSignInModal = new EventEmitter<boolean>();
+
   public ConnectionTest(): Observable<any> {
     return this._bookService.Get();
   }
 
+  FormatDate(iDate: Date) {
+    const inputDate = new Date(iDate);
+    const formattedDate = inputDate.getFullYear() + '-' + (inputDate.getMonth() + 1) + '-' + inputDate.getDate();
+    const datePipe = new DatePipe('en');
+
+    return datePipe.transform(formattedDate, 'yyyy-MM-dd');
+ }
+
 }

src/app/_services/notifications.service.ts

@@ -0,0 +1,23 @@
+import { Injectable, EventEmitter, Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { BooksService } from '../_api/services/books.service';
+import { DatePipe } from '@angular/common';
+import { MessageService } from 'primeng/api';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+
+export class NotificationsService {
+  constructor(
+    private messageService: MessageService
+  ) { }
+
+  addMessage(severity, summary, detail) {
+    console.log('hello from notifications', severity, summary, detail);
+    this.messageService.add({severity: severity, summary: summary, detail: detail});
+  }
+
+}

src/app/app.component.html

@@ -1,126 +1,97 @@
-<p-toolbar id="Mytoolbar">
+<!-- TOOLBAR -->
+<p-toolbar>
     
     <div class="ui-toolbar-group-left">
-            <img src="../assets/images/home-page/logoNew.png" class="img-rounded img-responsive" alt="MyMirror" (click)="GoHome()">
+        <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"></button>
+        <button pButton type="button" [label]="LabelHeaderAbout"></button>
-        <button pButton type="button" label="TEAM" ></button>
+        <button pButton type="button" [label]="LabelHeaderTeam" ></button>
-        <button pButton type="button" label="CONTACT" ></button>
+        <button pButton type="button" [label]="LabelHeaderContact" ></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="{{LabelHeaderSignIn}}" 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>
+        <button *ngIf="!Connected" pButton type="button" label="{{LabelHeaderLogIn}}" icon="pi pi-sign-in" iconPos="right" (click)="DisplayLoginModal = true"></button>
-        <p-splitButton *ngIf="Connected" class="btnDeMerde"  type="button" [label]="ConnectedUser.firstName" [model]="itemsUserDropDown"></p-splitButton>
+        <p-splitButton *ngIf="Connected" type="button" [label]="ConnectedUser.firstName" [model]="itemsUserDropDown"></p-splitButton>
     </div>
-
     
 </p-toolbar>
+<!-- END TOOLBAR -->
 
-<p-dialog id="modalLogIn" [modal]=true [(visible)]="DisplayLoginModal">
+<router-outlet></router-outlet>
+
+<!-- LOGIN DIALOG -->
+
+<p-dialog id="modalLogIn" [modal]=true [(visible)]="DisplayLoginModal" [responsive]="true" (onHide)="ResetLogInModal()">
     <p-header translate>
-        App.Home.Login
+        App.Home.Login.Label
     </p-header>
 
-    <div class="ui-inputgroup">
+    <div class="ui-inputgroup" style="width:50%; margin: 0px 40px">
         <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
-        <input type="text" [(ngModel)]="Email" pInputText placeholder="Email" >         
+        <input type="text" [(ngModel)]="Email" pInputText [placeholder]="LabelFormEmail" >         
     </div>
-    <div class="ui-inputgroup">
+    <div class="ui-inputgroup" style="width:50%; margin: 0px 40px">
         <span class="ui-inputgroup-addon"><i class="fa fa-lock"></i></span>
-        <input type="password" [(ngModel)]="Password" pInputText placeholder="Password" >         
+        <input type="password" [(ngModel)]="Password" pInputText [placeholder]="LabelFormPassword" >         
+    </div>
+    <div class="ui-inputgroup" *ngIf="ErrorTextLogin.trim() != ''">
+        <label style="color: red">{{ErrorTextLogin}}</label>
     </div>
 
+
     <p-footer>
-            <button pButton type="button" label="Identify" (click)="LogIn()"></button>
+        <button pButton type="button" [label]="LabelLoginIdentify" (click)="LogIn(this.Email, this.Password)"></button>
     </p-footer>
 </p-dialog>
 
-<p-dialog [style]="{'width': '450px'}" [modal]=true id="modalSignIn"[(visible)]="DisplaySignInModal">
+<!-- END LOGIN DIALOG -->
-    <p-header>
+
-        Sign In
+<!-- SIGN IN DIALOG -->
+
+<p-dialog [style]="{'width': '450px'}" [modal]=true id="modalSignIn" [(visible)]="DisplaySignInModal" (onHide)="ResetSignInModal()">
+    <p-header translate>
+        App.Home.SignIn.Label
     </p-header>
 
     <div class="ui-inputgroup">
         <div>
             <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
-            <input type="text" [(ngModel)]="CreateUser.lastName" pInputText placeholder="Last name">   
+            <input type="text" [(ngModel)]="CreateUser.firstName" pInputText [placeholder]="LabelFormFirstName">    
-        </div>
+        </div>     
     </div>
     <div class="ui-inputgroup">
         <div>
             <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
-            <input type="text" [(ngModel)]="CreateUser.firstName" pInputText placeholder="First name">    
+            <input type="text" [(ngModel)]="CreateUser.lastName" pInputText [placeholder]="LabelFormLastName">   
-        </div>     
-    </div>
-    <div class="ui-inputgroup" *ngIf="Connected">
-        <div>
-            <span class="ui-inputgroup-addon"><i class="fas fa-gift"></i></span>
-            <input type="date" pInputText placeholder="Birthday"> 
         </div>
-             
     </div>
     <div class="ui-inputgroup">
         <div>
             <span class="ui-inputgroup-addon"><i class="fas fa-at"></i></span>
-            <input type="email" [(ngModel)]="CreateUser.email" pInputText placeholder="E-mail">         
+            <input type="email" [(ngModel)]="CreateUser.email" pInputText [placeholder]="LabelFormEmail">         
-        </div>
-    </div>
-   
-    <div class="ui-inputgroup" *ngIf="Connected">
-        <div>
-            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
-            <input type="text" pInputText placeholder="Address">    
-        </div>
-    </div>
-    <div class="ui-inputgroup" *ngIf="Connected">
-        <div>
-            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
-            <input type="text" pInputText placeholder="City">    
-        </div>
-    </div>
-    <div class="ui-inputgroup" *ngIf="Connected">
-        <div>
-            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
-            <input type="text" pInputText placeholder="State">    
-        </div>
-    </div>
-    <div class="ui-inputgroup" *ngIf="Connected">
-        <div>
-            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
-            <input type="text" pInputText placeholder="Postcode">    
-        </div>
-    </div>
-    <div class="ui-inputgroup" *ngIf="Connected">
-        <div>
-            <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
-            <input type="text" pInputText placeholder="Country">    
-        </div>
-    </div>
-    <div class="ui-inputgroup" *ngIf="Connected">
-        <div>
-            <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
-            <input type="text" pInputText placeholder="Timezone">    
         </div>
     </div>
     <div class="ui-inputgroup">
         <div>
             <span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
-            <input type="password" [(ngModel)]="CreateUser.password" pInputText placeholder="Password">    
+            <input type="password" [(ngModel)]="CreateUser.password" pInputText [placeholder]="LabelFormPassword">    
         </div>
     </div>
     <div class="ui-inputgroup">
         <div>
             <span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
-            <!-- TO UPDATE TO CHECK-->
+            <input type="password" [(ngModel)]="ConfirmPassword" pInputText [placeholder]="LabelFormConfirmPassword">    
-            <input type="password" [(ngModel)]="CreateUser.password" pInputText placeholder="Confirm password">    
         </div>
     </div>
-
+    <div style="text-align: center">
+        <label *ngIf="ErrorTextSignIn.trim() != ''" style="color: red">{{ErrorTextSignIn}}</label>
+    </div>
     <p-footer>
-            <button pButton type="button" label="Create profile" (click)="CreateProfile()"></button>
+        <button pButton type="button" [label]="LabelSignInCreateProfile" (click)="CreateProfile()"></button>
     </p-footer>
 </p-dialog>
-    
+
-   
+<!-- END SIGN IN DIALOG -->
-    
+
-<router-outlet></router-outlet>
+<!-- TOAST MESSAGES--> 
+<p-toast></p-toast>

src/app/app.component.ts

@@ -4,9 +4,10 @@ import { AppService } from './_services/app.service';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationService } from './_services/authentication.service';
 import { Router } from '@angular/router';
-import { first } from 'rxjs/operators';
+import { first, catchError } from 'rxjs/operators';
 import { UserInfo } from './_api/models';
 import { UserService } from './_api/services';
+import { throwError } from 'rxjs';
 
 
 @Component({
@@ -29,15 +30,37 @@ export class AppComponent implements OnInit {
   // Login
   public Email: string = null;
   public Password: string = null;
-
+  public ErrorTextLogin = '';
-  public birthday: Date;
 
   public CreateUser: UserInfo = {};
+  public ConfirmPassword: string;
   public UserTryingToLogin: UserInfo = {};
 
-  // Label
+  // Sign in
-  public LabelDropDownLogout: string;
+  public ErrorTextSignIn = '';
-  public LabelDropDownModifyUser: string;
+
+  // Form Label
+  public LabelFormLastName: string;
+  public LabelFormFirstName: string;
+  public LabelFormEmail: string;
+  public LabelFormPassword: string;
+  public LabelFormConfirmPassword: string;
+  public LabelFormCreate: string;
+
+  // Labels
+    // Headers
+    public LabelHeaderLogIn: string;
+    public LabelHeaderSignIn: string;
+    public LabelHeaderAbout: string;
+    public LabelHeaderTeam: string;
+    public LabelHeaderContact: string;
+    // LogIn
+    public LabelLoginIdentify: string;
+    // SignIn
+    public LabelSignInCreateProfile: string;
+    // DropDown
+    public LabelDropDownLogout: string;
+    public LabelDropDownModifyUser: string;
 
   constructor(
     private _appService: AppService,
@@ -52,13 +75,23 @@ export class AppComponent implements OnInit {
     // To Include in a fonction of a dropdown language chose
     this._translateService.setDefaultLang('en');
 
+    this.InitLabels();
+
+    this._appService.OpenSignInModal.subscribe(
+      value => {
+        if (value) {
+          this.DisplaySignInModal = true;
+        }
+      }
+    );
+
     // 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']);
+            this._router.navigate(['/profile/' + this.ConnectedUser.id + '/edit']);
           }},
           {label: logoutLabel, icon: 'fa fa-sign-out', command: () => {
               this.Logout();
@@ -68,7 +101,7 @@ export class AppComponent implements OnInit {
     });
 
     const currentUser = this._authService.currentUserValue;
-    console.log(currentUser);
+    console.log('currentUser', currentUser);
 
     if (currentUser && currentUser.token) {
       this.ConnectedUser = currentUser;
@@ -81,23 +114,9 @@ export class AppComponent implements OnInit {
   }
 
 
-  public LogIn() {
+  public LogIn(email, password) {
-    /*this._appService.GetToken(this.Username, this.Password)
+    this.UserTryingToLogin.email = email;
-    .subscribe(res => {
+    this.UserTryingToLogin.password = password;
-      console.log(res.Token);
-      this.Connected = true;
-      this.DisplayLoginModal = false;
-      this.Username = null;
-      this.Password = null;
-      this._authService.IsLoggedIn = true;
-
-      this._router.navigate(['/profile/01']);
-    }, () => {
-      console.log('ERROR');
-    });*/
-
-    this.UserTryingToLogin.email = this.Email;
-    this.UserTryingToLogin.password = this.Password;
     this._authService.Login(this.UserTryingToLogin)
             .pipe(first())
             .subscribe(
@@ -109,10 +128,13 @@ export class AppComponent implements OnInit {
                     this.Email = null;
                     this.Password = null;
                     this._authService.IsLoggedIn = true;
-                    this._router.navigate(['/profile/01']);
+                    this._router.navigate(['/profile/' + this.ConnectedUser.id]);
+                    this.ErrorTextLogin = '';
                 },
                 error => {
-                  console.log('ERROR');
+                  this._translateService.get('App.Home.Login.ErrorText').subscribe(loginErrorText => {
+                    this.ErrorTextLogin = loginErrorText;
+                  });
                 });
 
     // change route -> /config view
@@ -136,25 +158,111 @@ export class AppComponent implements OnInit {
   }
 
   public CreateProfile() {
-    // ADD FIELDS VERIFICATION
+    if (this.CorrectForm()) {
-    console.log('GHelfoudlkfhj');
+      this.CreateUser.deviceIds = [];
-    this.CreateUser.deviceIds = [];
+      this._userService.CreateUser(this.CreateUser)
-    this._userService.CreateUser(this.CreateUser)
+
-    .subscribe(
+      .subscribe(
-        data => {
+          data => {
-          // TO CHANGE
+            // TO CHANGE
-          console.log(data);
+            this.ErrorTextSignIn = '';
-          this.ConnectedUser = data;
+            this.UserTryingToLogin.email = data.email;
-          this.Connected = true;
+            this.UserTryingToLogin.password = data.password;
-          this.DisplayLoginModal = false;
+            this.DisplaySignInModal = false;
-          this.Email = null;
+            /*this.ConnectedUser = data;
-          this.Password = null;
+            this.Connected = true;*/
-          this._authService.IsLoggedIn = true;
+            this.LogIn(data.email, data.password);
-          // this._router.navigate(['/profile/01']);
+          },
-        },
+          error => {
-        error => {
+            if (error !== null && error === 'Conflict') {
-          console.log('ERROR');
+              this._translateService.get('App.Home.SignIn.ErrorAlreadyExist').subscribe(text => {
-        });
+                this.ErrorTextSignIn = text;
+              });
+            } else {
+              this._translateService.get('App.Home.SignIn.ErrorUnknown').subscribe(text => {
+                this.ErrorTextSignIn = text;
+              });
+            }
+          });
+      }
   }
 
+  public CorrectForm(): boolean {
+    if (this.CreateUser.firstName == null || this.CreateUser.lastName == null ||
+      this.CreateUser.email == null || this.CreateUser.password == null) {
+        this._translateService.get('App.Home.SignIn.ErrorFieldsMissing').subscribe(text => {
+          this.ErrorTextSignIn = text;
+        });
+      return false;
+    }
+    if (this.ConfirmPassword !== this.CreateUser.password) {
+      this._translateService.get('App.Home.SignIn.ErrorConfirmPassword').subscribe(text => {
+        this.ErrorTextSignIn = text;
+      });
+      return false;
+    }
+    this.ErrorTextSignIn = '';
+    return true;
+  }
+
+  public ResetLogInModal() {
+    this.ErrorTextLogin = '';
+    this.Email = '';
+    this.Password = '';
+  }
+
+  public ResetSignInModal() {
+    this.ErrorTextSignIn = '';
+    this.CreateUser = {};
+    this.ConfirmPassword = '';
+  }
+
+  public InitLabels() {
+    // HEADERS
+    this._translateService.get('App.Home.Login.Header').subscribe(label => {
+      this.LabelHeaderLogIn = label;
+    });
+    this._translateService.get('App.Home.SignIn.Header').subscribe(label => {
+      this.LabelHeaderSignIn = label;
+    });
+    this._translateService.get('App.Home.About.Header').subscribe(label => {
+      this.LabelHeaderAbout = label;
+    });
+    this._translateService.get('App.Home.Team.Header').subscribe(label => {
+      this.LabelHeaderTeam = label;
+    });
+    this._translateService.get('App.Home.Contact.Header').subscribe(label => {
+      this.LabelHeaderContact = label;
+    });
+
+    // LOGIN
+    this._translateService.get('App.Home.Login.Identify').subscribe(label => {
+      this.LabelLoginIdentify = label;
+    });
+
+    // SIGN IN
+    this._translateService.get('App.Home.SignIn.CreateProfile').subscribe(label => {
+      this.LabelSignInCreateProfile = label;
+    });
+
+    // FORM
+    this._translateService.get('App.Common.Form.LastName').subscribe(label => {
+      this.LabelFormLastName = label;
+    });
+    this._translateService.get('App.Common.Form.FirstName').subscribe(label => {
+      this.LabelFormFirstName = label;
+    });
+    this._translateService.get('App.Common.Form.Email').subscribe(label => {
+      this.LabelFormEmail = label;
+    });
+    this._translateService.get('App.Common.Form.Password').subscribe(label => {
+      this.LabelFormPassword = label;
+    });
+    this._translateService.get('App.Common.Form.ConfirmPassword').subscribe(label => {
+      this.LabelFormConfirmPassword = label;
+    });
+    this._translateService.get('App.Common.Form.Create').subscribe(label => {
+      this.LabelFormCreate = label;
+    });
+  }
 }

src/app/app.module.ts

@@ -21,6 +21,8 @@ import { ApiConfiguration } from './_api/api-configuration';
 import { AppService } from './_services/app.service';
 import { FormsModule } from '@angular/forms';
 import { CalendarModule } from 'primeng/calendar';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmationService, MessageService } from 'primeng/api';
 
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@@ -31,6 +33,8 @@ import { ProfileComponent } from './control-panel/profile/profile/profile.compon
 import { EditProfileComponent } from './control-panel/profile/edit-profile/edit-profile.component';
 import { JwtInterceptor } from './_helpers/jwt.interceptor';
 import { ErrorInterceptor } from './_helpers/error.interceptor';
+import { NotificationsService } from './_services/notifications.service';
+import { ToastModule } from 'primeng/toast';
 
 
 
@@ -80,6 +84,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     HttpClientModule,
     FormsModule,
     CalendarModule,
+    ConfirmDialogModule,
+    ToastModule,
     TranslateModule.forRoot({
       loader: {
           provide: TranslateLoader,
@@ -92,6 +98,9 @@ export function HttpLoaderFactory(http: HttpClient) {
     INIT_API_CONFIGURATION,
     AppService,
     AuthenticationService,
+    ConfirmationService,
+    NotificationsService,
+    MessageService,
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
   ],

src/app/control-panel/home/home.component.html

@@ -33,7 +33,7 @@
 <alert type="info" style="text-align: center">
   <h4 class="alert-heading">Still not registered?</h4>
   <p>Sign in now to access to your configuration panel</p>
-  <button type="button" class="btn btn-primary btn-primary">
+  <button type="button" class="btn btn-primary btn-primary" (click)="OpenSignInModal()">
     Sign in !
     <i class="fas fa-pencil-alt"></i>
   </button>

src/app/control-panel/home/home.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { Router } from '@angular/router'
+import { Router } from '@angular/router';
+import { AppService } from '../../_services/app.service';
 
 
 
@@ -9,11 +10,16 @@ import { Router } from '@angular/router'
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-
+  @Output() someEvent = new EventEmitter<string>();
-  constructor() { }
+  constructor(
+    private _appService: AppService) { }
 
   ngOnInit() {
-    
+
   }
 
+  public OpenSignInModal() {
+    this.someEvent.next('someExample');
+    this._appService.OpenSignInModal.emit(true);
+  }
 }

src/app/control-panel/profile/config/config.component.html

@@ -1,3 +1,3 @@
 <p>
-  config works!
+  This is the config page. => Existing one. 
 </p>

src/app/control-panel/profile/edit-profile/edit-profile.component.css

@@ -0,0 +1,9 @@
+.ui-inputgroup{
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.middleOfPage{
+    width: 45%; 
+    text-align: center;
+}

src/app/control-panel/profile/edit-profile/edit-profile.component.html

@@ -1,3 +1,102 @@
-<p>
+<!-- THIS NEED TO BE UPDATED PROPERLY -->
-  edit-profile works!
+<div class="blankSpace">
-</p>
+  <br>
+  <br>
+  <br>
+</div>
+
+<div class="ui-g ui-fluid" style="justify-content: center">
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
+      <input type="text" [(ngModel)]="CurrentUser.firstName" pInputText [placeholder]="LabelFormFirstName">    
+    </div>     
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
+      <input type="text" [(ngModel)]="CurrentUser.lastName" pInputText [placeholder]="LabelFormLastName">   
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fas fa-gift"></i></span>
+      <input type="date" [(ngModel)]="CurrentUser.birthday" dateFormat="dd/mm/yy" pInputText placeholder="Birthday"> 
+    </div>   
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fas fa-at"></i></span>
+      <input type="email" [(ngModel)]="CurrentUser.email" pInputText [placeholder]="LabelFormEmail" [disabled]="true">         
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+      <input type="text" [(ngModel)]="CurrentUser.address" pInputText placeholder="Address">    
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+      <input type="text" [(ngModel)]="CurrentUser.city" pInputText placeholder="City">    
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+      <input type="text" [(ngModel)]="CurrentUser.state" pInputText placeholder="State">    
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+      <input type="number" [(ngModel)]="CurrentUser.postalCode" pInputText placeholder="Postcode">    
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
+      <input type="text" [(ngModel)]="CurrentUser.country" pInputText placeholder="Country">    
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
+      <input type="text" [(ngModel)]="CurrentUser.timezone" pInputText placeholder="Timezone">    
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
+      <input type="password" [(ngModel)]="CurrentUser.password" pInputText [placeholder]="LabelFormPassword">    
+    </div>
+  </div>
+  <div class="ui-g-12 middleOfPage">
+    <div class="ui-inputgroup">
+      <span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
+      <input type="password" [(ngModel)]="ConfirmPassword" pInputText [placeholder]="LabelFormConfirmPassword">    
+    </div>
+  </div>
+  <div style="text-align: center">
+    <label *ngIf="ErrorTextForm.trim() != ''" style="color: red">{{ErrorTextForm}}</label>
+  </div>
+</div>
+
+<div class="buttons pull-right">
+  <button type="button" class="btn btn-secondary" (click)="CancelChange()" style="margin-right:5px">
+    Cancel
+    <i class="fa fa-remove"></i>
+  </button>
+  <button type="button" class="btn btn-primary" (click)="SubmitChange()" style="margin-right:5px">
+    Submit
+    <i class="fa fa-send"></i>
+  </button>
+</div>
+
+<button type="button" class="btn btn-sm btn-danger" (click)="DeleteProfil()" style="margin-left:5px">
+  Delete Profile
+  <i class="fa fa-trash-o"></i>
+</button>
+
+<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>

src/app/control-panel/profile/edit-profile/edit-profile.component.ts

@@ -1,4 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { AppService } from '../../../_services/app.service';
+import { TranslateService } from '@ngx-translate/core';
+import { AuthenticationService } from '../../../_services/authentication.service';
+import { UserService } from '../../../_api/services';
+import { Router } from '@angular/router';
+import { UserInfo } from '../../../_api/models';
+import { ConfirmationService } from 'primeng/api';
+import { NotificationsService } from '../../../_services/notifications.service';
 
 @Component({
   selector: 'app-edit-profile',
@@ -7,9 +15,158 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EditProfileComponent implements OnInit {
 
-  constructor() { }
+  public CurrentUser: UserInfo = {};
+  public ErrorTextForm = '';
+  public ConfirmPassword = '';
+
+  // Form Label
+  public LabelFormLastName: string;
+  public LabelFormFirstName: string;
+  public LabelFormEmail: string;
+  public LabelFormPassword: string;
+  public LabelFormConfirmPassword: string;
+  public LabelFormCreate: string;
+
+  constructor(
+    private _appService: AppService,
+    private _translateService: TranslateService,
+    private _authService: AuthenticationService,
+    private _userService: UserService,
+    private _notifications: NotificationsService,
+    private _confirmationService: ConfirmationService,
+    private _router: Router) { }
 
   ngOnInit() {
+    this.LoadUser(this._authService.currentUserValue.id, false);
+    this.InitLabels();
+  }
+
+  public SubmitChange() {
+    if (this.CorrectForm()) {
+      this.CurrentUser.deviceIds = [];
+      this._userService.UpdateUser(this.CurrentUser)
+      .subscribe(
+          data => {
+            console.log('Update the user profile - success');
+            this.CurrentUser = data;
+            const newDate = new Date(this.CurrentUser.birthday);
+            this.CurrentUser.birthday = this._appService.FormatDate(newDate);
+            this.ErrorTextForm = '';
+            this._translateService.get('App.Common.Notifications.Update').subscribe(message => {
+              this._translateService.get('App.Profile.Edit.Notifications.ChangedSuccess').subscribe(detail => {
+                this._notifications.addMessage('success', message, detail);
+              });
+            });
+          },
+          error => {
+            if (error !== null && error === 'Conflict') {
+              this._translateService.get('App.Home.SignIn.ErrorAlreadyExist').subscribe(text => {
+                this.ErrorTextForm = text;
+              });
+            } else {
+              this._translateService.get('App.Home.SignIn.ErrorUnknown').subscribe(text => {
+                this.ErrorTextForm = text;
+              });
+            }
+          });
+      }
+  }
+
+  public CorrectForm(): boolean {
+    if (this.CurrentUser.firstName == null || this.CurrentUser.lastName == null ||
+      this.CurrentUser.email == null || this.CurrentUser.password == null) {
+        this._translateService.get('App.Home.SignIn.ErrorFieldsMissing').subscribe(text => {
+          this.ErrorTextForm = text;
+        });
+      return false;
+    }
+    if (this.ConfirmPassword !== this.CurrentUser.password) {
+      this._translateService.get('App.Home.SignIn.ErrorConfirmPassword').subscribe(text => {
+        this.ErrorTextForm = text;
+      });
+      return false;
+    }
+    this.ErrorTextForm = '';
+    return true;
+  }
+
+  public CancelChange() {
+    this.LoadUser(this._authService.currentUserValue.id, true);
+  }
+
+  public DeleteProfil() {
+    console.log('delete profil');
+
+    this._translateService.get('App.Common.Form.DeleteConfirm').subscribe(confirmMessage => {
+      this._translateService.get('App.Common.Yes').subscribe(yes => {
+        this._translateService.get('App.Common.No').subscribe(no => {
+          this._confirmationService.confirm({
+            message: confirmMessage,
+            acceptLabel: yes,
+            rejectLabel: no,
+            accept: () => {
+              this._userService.DeleteUser(this._authService.currentUserValue.id)
+              .subscribe(
+                data => {
+                  this._authService.Logout();
+                  this._authService.IsLoggedIn = false;
+                  location.reload();
+                },
+                error => {
+                  this._translateService.get('App.Home.SignIn.ErrorUnknown').subscribe(text => {
+                    this.ErrorTextForm = text;
+                  });
+              });
+            }
+          });
+        });
+      });
+    });
+  }
+
+  public LoadUser(id, cancelChange) {
+    this._userService.Get_1(id)
+      .subscribe(
+        data => {
+          console.log('Loading the user - success');
+          this.CurrentUser = data;
+          const newDate = new Date(this.CurrentUser.birthday);
+          this.CurrentUser.birthday = this._appService.FormatDate(newDate);
+
+          if (cancelChange) {
+            this._translateService.get('App.Common.Notifications.Update').subscribe(message => {
+              this._translateService.get('App.Profile.Edit.Notifications.CancelModification').subscribe(detail => {
+                this._notifications.addMessage('success', message, detail);
+              });
+            });
+          }
+        },
+        error => {
+
+      });
+  }
+
+  public InitLabels() {
+    // FORM
+    this._translateService.get('App.Common.Form.LastName').subscribe(label => {
+      this.LabelFormLastName = label;
+    });
+    this._translateService.get('App.Common.Form.FirstName').subscribe(label => {
+      this.LabelFormFirstName = label;
+    });
+    this._translateService.get('App.Common.Form.Email').subscribe(label => {
+      this.LabelFormEmail = label;
+    });
+    this._translateService.get('App.Common.Form.Password').subscribe(label => {
+      this.LabelFormPassword = label;
+    });
+    this._translateService.get('App.Common.Form.ConfirmPassword').subscribe(label => {
+      this.LabelFormConfirmPassword = label;
+    });
+    this._translateService.get('App.Common.Form.Create').subscribe(label => {
+      this.LabelFormCreate = label;
+    });
+
   }
 
 }

src/app/control-panel/profile/profile/profile.component.html

@@ -1,3 +1,3 @@
 <p>
-  profile works!
+  This is your profile view => You can see all your devices (the availability, params?), all your playlists, and links to create new configuration
 </p>

src/app/control-panel/profile/profile/profile.component.ts

@@ -21,7 +21,6 @@ export class ProfileComponent implements OnInit {
     this._appService.ConnectionTest().subscribe(
       res => {
         console.log(res);
-        console.log('SUCCESS !!');
       }, () => {
         console.log('error in test');
       }

src/assets/i18n/en.json

@@ -1,7 +1,30 @@
 {
     "App":{
         "Home": {
-            "Login":"LOGIN",
+            "Login": {
+                "Header": "LOGIN",
+                "Label": "Login",
+                "ErrorText": "Wrong email and password combination",
+                "Identify": "Identify"
+            },
+            "SignIn": {
+                "Header": "SIGN IN",
+                "Label": "Sign In",
+                "ErrorAlreadyExist": "This email is already used",
+                "ErrorConfirmPassword": "The passwords don't match",
+                "ErrorFieldsMissing": "Please fill all the fields",
+                "ErrorUnknown": "Unknown error occurred",
+                "CreateProfile": "Create profile"
+            },
+            "About": {
+                "Header": "ABOUT"
+            },
+            "Team": {
+                "Header": "TEAM"
+            },
+            "Contact": {
+                "Header": "CONTACT"
+            },
             "UserDropDown": {
                 "Logout": "Logout",
                 "ModifyUser": "Edit profile"
@@ -11,6 +34,27 @@
         },
         "Profile": {
             "Edit": {
+                "Notifications": {
+                    "ChangedSuccess": "The user profile has been successfully updated",
+                    "CancelModification": "The modifications has been cancelled"
+                }
+            }
+        }, 
+        "Common": {
+            "Ok": "Ok",
+            "Yes": "Yes", 
+            "No": "No",
+            "Form": {
+                "LastName": "Last name",
+                "FirstName": "First name",
+                "Email": "Email",
+                "Password": "Password",
+                "ConfirmPassword": "Confirm password", 
+                "Create": "Créer",
+                "DeleteConfirm": "Are you sure to delete this user?"
+            },
+            "Notifications": {
+                "Update": "Updated"
             }
         }
     }