Rampeur
96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
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(`Ad Astra - ${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 }
|
|
}
|
|
|
|
}
|