Ajout d'une page de mise à jour du

profile utilisateur

Front/skydivelogs-app/package.json

@@ -12,34 +12,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.0.1",
-    "@angular/cdk": "~9.0.0",
-    "@angular/common": "^9.0.1",
-    "@angular/compiler": "^9.0.1",
-    "@angular/core": "^9.0.1",
-    "@angular/forms": "^9.0.1",
-    "@angular/material": "^9.0.0",
-    "@angular/platform-browser": "^9.0.1",
-    "@angular/platform-browser-dynamic": "^9.0.1",
-    "@angular/router": "^9.0.1",
+    "@angular/animations": "^9.1.3",
+    "@angular/cdk": "^9.2.1",
+    "@angular/common": "^9.1.3",
+    "@angular/compiler": "^9.1.3",
+    "@angular/core": "^9.1.3",
+    "@angular/forms": "^9.1.3",
+    "@angular/material": "^9.2.1",
+    "@angular/platform-browser": "^9.1.3",
+    "@angular/platform-browser-dynamic": "^9.1.3",
+    "@angular/router": "^9.1.3",
     "core-js": "^2.6.11",
-    "rxjs": "^6.5.4",
-    "rxjs-compat": "^6.5.4",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "rxjs": "^6.5.5",
+    "rxjs-compat": "^6.5.5",
+    "tslib": "^1.11.1",
+    "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.1",
-    "@angular/cli": "^9.0.1",
-    "@angular/compiler-cli": "^9.0.1",
-    "@angular/language-service": "^9.0.1",
+    "@angular-devkit/build-angular": "^0.900.7",
+    "@angular/cli": "^9.1.3",
+    "@angular/compiler-cli": "^9.1.3",
+    "@angular/language-service": "^9.1.3",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
+    "@types/node": "^12.12.37",
+    "codelyzer": "^5.2.2",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^4.4.1",
+    "karma": "^5.0.2",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",

Front/skydivelogs-app/src/app/app.component.html

@@ -12,8 +12,10 @@
         <h2 style="display: inline;">{{ title }}</h2>
       </div>
       <div>
-        <h2 style="display: inline;" *ngIf="currentUser">{{ this.currentUser.firstName }}
-          {{ this.currentUser.lastName }}</h2>
+        <a routerLink="/user" routerLinkActive="active" skipLocationChange>
+          <h2 style="display: inline;" *ngIf="currentUser">{{ this.currentUser.firstName }}
+            {{ this.currentUser.lastName }}</h2>
+        </a>
         <a *ngIf="currentUser" (click)="logout()" style="cursor: pointer; margin-left:15px;">Logout</a>
       </div>
     </div>

Front/skydivelogs-app/src/app/app.module.ts

@@ -55,6 +55,7 @@ import { CachingInterceptor } from "../interceptor/caching.interceptor";
 //import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor';
 import { JwtAuthInterceptor } from "../interceptor/jwt-auth.interceptor";
 import { ErrorInterceptor } from "../interceptor/error.interceptor";
+import { UserProfileComponent } from "./user-profile/user-profile.component";
 
 const appRoutes: Routes = [
   { path: "", component: DefaultComponent, canActivate: [AuthGuardService] },
@@ -94,6 +95,11 @@ const appRoutes: Routes = [
     component: ListOfGearsComponent,
     canActivate: [AuthGuardService],
   },
+  {
+    path: "user",
+    component: UserProfileComponent,
+    canActivate: [AuthGuardService],
+  },
 
   { path: "login", component: LoginComponent },
 
@@ -118,6 +124,7 @@ const appRoutes: Routes = [
     LoginComponent,
     CreateUserComponent,
     LoginUserComponent,
+    UserProfileComponent,
   ],
   imports: [
     RouterModule.forRoot(

Front/skydivelogs-app/src/app/user-profile/user-profile.component.html

@@ -0,0 +1,41 @@
+<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
+  <p>
+    <mat-form-field>
+      <mat-label>Login</mat-label>
+      <input matInput type="text" formControlName="login" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Firstname</mat-label>
+      <input matInput type="text" formControlName="firstName" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Lastname</mat-label>
+      <input matInput type="text" formControlName="lastName" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>E-mail</mat-label>
+      <input matInput type="text" formControlName="email" />
+    </mat-form-field>
+  </p>
+
+  <p>
+    <mat-form-field>
+      <mat-label>Current password</mat-label>
+      <input matInput type="text" formControlName="currentPassword" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>New password</mat-label>
+      <input matInput type="text" formControlName="newPassword" />
+    </mat-form-field>
+  </p>
+
+  <button type="submit" mat-raised-button color="accent">Update my profile</button>
+</form>

Front/skydivelogs-app/src/app/user-profile/user-profile.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserProfileComponent } from './user-profile.component';
+
+describe('UserProfileComponent', () => {
+  let component: UserProfileComponent;
+  let fixture: ComponentFixture<UserProfileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserProfileComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit } from "@angular/core";
+import { FormGroup, FormControl, Validators } from "@angular/forms";
+import { AuthenticationService } from "../../services/authentication.service";
+import { User } from "../../models/user";
+
+@Component({
+  selector: "app-user-profile",
+  templateUrl: "./user-profile.component.html",
+  styleUrls: ["./user-profile.component.css"],
+})
+export class UserProfileComponent implements OnInit {
+  public userForm: FormGroup;
+
+  constructor(private authenticationService: AuthenticationService) {}
+
+  ngOnInit(): void {
+    let currentUser = this.authenticationService.currentUserValue;
+
+    this.userForm = new FormGroup(
+      {
+        login: new FormControl(currentUser.login, Validators.required),
+        firstName: new FormControl(currentUser.firstName, [
+          Validators.required,
+          Validators.minLength(3),
+        ]),
+        lastName: new FormControl(currentUser.lastName, [
+          Validators.required,
+          Validators.minLength(3),
+        ]),
+        email: new FormControl(currentUser.email, [
+          Validators.required,
+          Validators.email,
+        ]),
+        currentPassword: new FormControl(
+          "",
+          Validators.pattern("^[A-Za-z0-9_-]{8,15}$")
+        ),
+        newPassword: new FormControl(
+          "",
+          Validators.pattern("^[A-Za-z0-9_-]{8,15}$")
+        ),
+      },
+      { updateOn: "blur" }
+    );
+  }
+
+  onSubmit(formData) {
+    if (this.userForm.invalid) {
+      return;
+    }
+
+    let updatedUser = new User();
+    updatedUser.login = formData.username;
+    updatedUser.password = formData.password;
+    updatedUser.firstName = formData.firstname;
+    updatedUser.lastName = formData.lastname;
+    updatedUser.email = formData.email;
+
+    this.authenticationService.create(updatedUser);
+  }
+}