Import des sources angular à partir de 'headup_app'

src/app/components/settings/credentials/credentials.component.ts

@@ -0,0 +1,95 @@
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { AbstractControl, FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators, ValidatorFn, ValidationErrors } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+
+import { Observable, Subscription } from 'rxjs';
+
+import { Errors, User } from 'src/app/core/models';
+import { UserService } from 'src/app/core/services';
+import { ListErrorsComponent } from 'src/app/components/shared';
+
+@Component({
+    selector: 'app-credentials',
+    standalone: true,
+    imports: [
+        RouterLink, FormsModule, ReactiveFormsModule,
+        MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatDividerModule,
+        ListErrorsComponent
+    ],
+    templateUrl: './credentials.component.html',
+    styleUrl: './credentials.component.scss'
+})
+export class CredentialsComponent implements OnInit, OnDestroy {
+    private _user: Subscription = new Subscription();
+    title = 'Modifier le mot de passe';
+    bannerTitle = '';
+    btnUpdateTitle = 'Mettre à jour';
+    btnLogoutTitle = 'Se déconnecter';
+    user: Partial<User> = {} as Partial<User>;
+    credentialsForm: UntypedFormGroup;
+    errors: Errors = { errors: {} };
+    isSubmitting = false;
+    destroyRef = inject(DestroyRef);
+
+    constructor(
+        private router: Router,
+        private titleService: Title,
+        private userService: UserService,
+        private fb: UntypedFormBuilder
+    ) {
+        this.credentialsForm = this.fb.group({
+            password: ['', Validators.required],
+            confirmPassword: ['', Validators.required]
+        }, { validators: this.checkPasswords });
+    }
+
+    get f() {
+        return this.credentialsForm.controls;
+    }
+
+    ngOnInit() {
+        this.titleService.setTitle(`Head Up - ${this.title}`);
+        Object.assign(this.user, this.userService.getCurrentUser());
+        this.credentialsForm.patchValue(this.user);
+        if (this.user.username) {
+            this.bannerTitle = `@${this.user.username}`;
+        } else {
+            this.bannerTitle = `${this.user.firstname} ${this.user.lastname}`;
+        }
+    }
+
+    ngOnDestroy() {
+        this._user.unsubscribe();
+    }
+
+    submitForm() {
+        this.isSubmitting = true;
+        this.updateUser(this.credentialsForm.value);
+        const user$: Observable<{ user: User }> = this.userService.update(this.user).pipe(takeUntilDestroyed(this.destroyRef));
+        this._user = user$.subscribe({
+            next: ({ user }) => void this.router.navigateByUrl('/profile/' + user.username),
+            error: (err) => {
+                this.errors = err;
+                this.isSubmitting = false;
+            }
+        });
+    }
+
+    updateUser(values: NonNullable<unknown>) {
+        Object.assign(this.user, values);
+    }
+
+    checkPasswords: ValidatorFn = (group: AbstractControl): ValidationErrors | null => {
+        const pass = group.get('password')!.value;
+        const confirmPass = group.get('confirmPassword')!.value
+        return pass === confirmPass ? null : { notSame: true }
+    }
+
+}