Import des sources angular à partir de 'headup_app'

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

@@ -0,0 +1,114 @@
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } 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-settings-page',
+    standalone: true,
+    imports: [
+        RouterLink, FormsModule, ReactiveFormsModule,
+        MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatDividerModule,
+        ListErrorsComponent
+    ],
+    styleUrl: './settings.component.scss',
+    templateUrl: './settings.component.html'
+})
+export class SettingsComponent implements OnInit, OnDestroy {
+    private _user: Subscription = new Subscription();
+    title = 'Vos paramètres';
+    bannerTitle = '';
+    btnUpdateTitle = 'Mettre à jour';
+    btnLogoutTitle = 'Se déconnecter';
+    btnPasswordTitle = 'Changer le mot de passe';
+    user: Partial<User> = {} as Partial<User>;
+    settingsForm: UntypedFormGroup;
+    errors: Errors = { errors: {} };
+    isSubmitting = false;
+    destroyRef = inject(DestroyRef);
+
+    constructor(
+        private router: Router,
+        private titleService: Title,
+        private userService: UserService,
+        private fb: UntypedFormBuilder
+    ) {
+        // create form group using the form builder
+        this.settingsForm = this.fb.group({
+            username: ['', Validators.required],
+            email: ['', [Validators.required, Validators.email]],
+            firstname: ['', Validators.required],
+            lastname: ['', Validators.required],
+            phone: ['', Validators.required],
+            licence: '',
+            poids: '',
+            image: '',
+            bg_image: ''
+        });
+        // Optional: subscribe to changes on the form :
+        // this.settingsForm.valueChanges.pipe(this._scavenger.collect()).subscribe(values => this.updateUser(values));
+    }
+
+    get f() {
+        return this.settingsForm.controls;
+    }
+
+    ngOnInit() {
+        this.titleService.setTitle(`Head Up - ${this.title}`);
+        // Make a fresh copy of the current user's object to place in editable form fields
+        Object.assign(this.user, this.userService.getCurrentUser());
+        // Fill the form
+        this.settingsForm.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();
+    }
+
+    logout() {
+        this.userService.purgeAuth();
+        this.router.navigateByUrl('/login');
+    }
+
+    updatePass() {
+        this.router.navigateByUrl('/settings/credentials');
+    }
+
+    submitForm() {
+        this.isSubmitting = true;
+
+        // update the model
+        this.updateUser(this.settingsForm.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);
+    }
+
+}