Ajout d'une page de mise à jour du

profile utilisateur

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);
+  }
+}