Ajout des sources

2023-09-12 21:46:56 +02:00
parent fa2288b8ed
commit 747948a422
235 changed files with 45064 additions and 0 deletions
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NoAuthGuard } from 'src/app/core/services/no-auth-guard.service';
+import { AuthComponent } from './auth.component';
+
+const routes: Routes = [
+    {
+        path: 'login',
+        component: AuthComponent,
+        canActivate: [NoAuthGuard]
+    },
+    {
+        path: 'register',
+        component: AuthComponent,
+        canActivate: [NoAuthGuard]
+    },
+    {
+        path: 'authenticate',
+        component: AuthComponent,
+        canActivate: [NoAuthGuard]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class AuthRoutingModule { }
@@ -0,0 +1,71 @@
+<div class="container page auth-page">
+    <div class="row">
+        <div class="col-md-6 offset-md-3 col-xs-12">
+            <h1 class="text-xs-center">{{ title }}</h1>
+            <p class="text-xs-center">
+                <a [routerLink]="['/login']" *ngIf="authType === 'register'">Vous avez déjà un compte ?</a>
+                <a [routerLink]="['/register']" *ngIf="authType === 'login'">Vous n'avez pas encore de compte ?</a>
+            </p>
+            <huapp-list-errors [errors]="errors"></huapp-list-errors>
+            <form [formGroup]="authForm" (ngSubmit)="submitForm()">
+                <fieldset [disabled]="isSubmitting" class="w-100">
+                    <legend [hidden]="true">Informations personnelles</legend>
+                    <div class="col-12">
+                        <mat-form-field appearance="fill" class="w-100">
+                            <input matInput type="text" placeholder="Votre adresse email" formControlName="email" required>
+                            <mat-error *ngIf="this.authForm.controls['email'].status === 'INVALID'">{{getErrorMessage('email')}}</mat-error>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12" *ngIf="authType === 'register'">
+                        <mat-form-field appearance="fill" class="w-100">
+                            <input matInput type="text" placeholder="Votre nom" formControlName="lastname" required>
+                            <mat-error *ngIf="this.authForm.controls['lastname'].status === 'INVALID'">{{getErrorMessage('lastname')}}</mat-error>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12" *ngIf="authType === 'register'">
+                        <mat-form-field appearance="fill" class="w-100">
+                            <input matInput type="text" placeholder="Votre prénom" formControlName="firstname" required>
+                            <mat-error *ngIf="this.authForm.controls['firstname'].status === 'INVALID'">{{getErrorMessage('firstname')}}</mat-error>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12" *ngIf="authType === 'register'">
+                        <mat-form-field appearance="fill" class="w-100">
+                            <input matInput type="text" placeholder="Numéro de téléphone" formControlName="phone" required>
+                            <mat-error *ngIf="this.authForm.controls['phone'].status === 'INVALID'">{{getErrorMessage('phone')}}</mat-error>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12" *ngIf="authType === 'register'">
+                        <mat-form-field appearance="fill" class="w-100">
+                            <input matInput type="text" placeholder="Pseudo" formControlName="username">
+                            <mat-error *ngIf="this.authForm.controls['username'].status === 'INVALID'">{{getErrorMessage('username')}}</mat-error>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12" *ngIf="authType === 'register'">
+                        <mat-form-field appearance="fill" class="w-100">
+                            <input matInput type="text" placeholder="Numéro de licence FFP" formControlName="licence">
+                            <mat-error *ngIf="this.authForm.controls['licence'].status === 'INVALID'">{{getErrorMessage('licence')}}</mat-error>
+                        </mat-form-field>
+                    </div>
+                </fieldset>
+                <fieldset [disabled]="isSubmitting" class="w-100">
+                    <legend [hidden]="true">Informations de connexion</legend>
+                    <div class="col-12">
+                        <mat-form-field appearance="fill" class="w-100">
+                            <input matInput type="password" placeholder="Mot de passe" formControlName="password" required>
+                            <mat-error *ngIf="this.authForm.controls['password'].status === 'INVALID'">{{getErrorMessage('password')}}</mat-error>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12" *ngIf="authType === 'register'">
+                        <mat-form-field appearance="fill" class="w-100">
+                            <input matInput type="password" placeholder="Confirmez votre nouveau mot de passe" formControlName="confirmPassword" required>
+                            <mat-error *ngIf="this.authForm.controls['confirmPassword'].status === 'INVALID'">{{getErrorMessage('confirmPassword')}}</mat-error>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12">
+                        <button mat-raised-button color="primary" [disabled]="!authForm.valid" type="submit" class="float-sm-end">{{ btnTitle }}</button>
+                    </div>
+                </fieldset>
+            </form>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,6 @@
+fieldset {
+    border-style: none;
+    border-width: 0;
+    margin: 0;
+    padding: 0;
+}
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthComponent } from './auth.component';
+
+describe('AuthComponent', () => {
+  let component: AuthComponent;
+  let fixture: ComponentFixture<AuthComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuthComponent]
+    });
+    fixture = TestBed.createComponent(AuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,157 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { UntypedFormBuilder, UntypedFormGroup, AbstractControl, Validators, ValidatorFn, ValidationErrors, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { Observable, Observer, Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { Errors } from 'src/app/core/models';
+import { UserService } from 'src/app/core/services';
+import { ListErrorsComponent, ShowAuthedDirective } from 'src/app/components/shared';
+
+@Component({
+    standalone: true,
+    imports: [
+        NgIf, RouterLink, FormsModule, ReactiveFormsModule,
+        MatFormFieldModule, MatInputModule, MatButtonModule,
+        ListErrorsComponent, ShowAuthedDirective
+    ],
+    selector: 'huapp-auth',
+    templateUrl: './auth.component.html',
+    styleUrls: ['./auth.component.scss']
+})
+export class AuthComponent implements OnInit, OnDestroy {
+    private _url: Subscription = new Subscription();
+    private _user: Subscription = new Subscription();
+    authType = '';
+    title = '';
+    btnTitle = '';
+    errors!: Errors;
+    isSubmitting = false;
+    authForm!: UntypedFormGroup;
+
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private titleService: Title,
+        private userService: UserService,
+        private fb: UntypedFormBuilder
+    ) {
+        this._resetErrors();
+        // use FormBuilder to create a form group
+        this.authForm = this.fb.group({
+            email: ['', [Validators.required, Validators.email]],
+            username: '',
+            firstname: '',
+            lastname: '',
+            phone: '',
+            password: ['', Validators.required],
+            confirmPassword: ''
+        }, { validators: this.checkPasswords });
+    }
+
+    ngOnInit() {
+        // you would normally unsubscribe from this observable subscription
+        // the active route observables are exemptions from unsubribe always rule
+        // see notes on: https://angular.io/guide/router#observable-parammap-and-component-reuse
+        this.route.url.pipe(take(1))
+        .subscribe(data => {
+            // Get the last piece of the URL (it's either 'login' or 'register')
+            this.authType = data[data.length - 1].path;
+            // Set a title for the page accordingly
+            if (this.authType === 'register') {
+                this.title = 'Création de compte';
+                this.btnTitle = 'Créer le compte';
+                this.titleService.setTitle(`Head Up - Créer un compte`);
+            } else {
+                this.title = 'Se connecter';
+                this.btnTitle = 'Se connecter';
+                this.titleService.setTitle(`Head Up - Connexion`);
+            }
+            // add form control for username if this is the register page
+            if (this.authType === 'register') {
+                this.authForm.controls["firstname"].setValidators([Validators.required]);
+                this.authForm.controls["lastname"].setValidators([Validators.required]);
+                this.authForm.controls["phone"].setValidators([Validators.required]);
+                this.authForm.controls["confirmPassword"].setValidators([Validators.minLength(8), Validators.required]);
+            }
+        });
+    }
+
+    ngOnDestroy() {
+        this._user.unsubscribe();
+        //this._url.unsubscribe();
+    }
+
+    submitForm() {
+        this.isSubmitting = true;
+
+        if (this.authForm.valid) {
+            this._resetErrors();
+            const credentials = this.authForm.value;
+            const user$ = this.userService.attemptAuth(this.authType, credentials).pipe(take(1));
+            this._user = user$.subscribe({
+                    next: () => this.router.navigateByUrl('/'),
+                    error: (err) => {
+                        this.errors = err;
+                        this.isSubmitting = false;
+                    }
+                });
+        }
+    }
+
+    getErrorMessage(name: string) {
+        switch (name) {
+            case 'email':
+                if (this.authForm.controls['email'].errors !== null) {
+                    return 'Indiquez votre adresse email';
+                }
+                break;
+            case 'firstname':
+                if (this.authForm.controls['firstname'].errors !== null) {
+                    return 'Vous devez indiquer votre prénnom';
+                }
+                break;
+            case 'lastname':
+                if (this.authForm.controls['lastname'].errors !== null) {
+                    return 'Vous devez indiquer votre nom';
+                }
+                break;
+            case 'phone':
+                if (this.authForm.controls['phone'].errors !== null) {
+                    return 'Vous devez indiquer votre numéro de téléphone';
+                }
+                break;
+            case 'password':
+                if (this.authForm.controls['password'].errors !== null) {
+                    return 'Un mot de passe est obligatoire';
+                }
+                break;
+            case 'confirmPassword':
+                if (this.authForm.controls['confirmPassword'].errors !== null) {
+                    return 'Une confirmation du mot de passe est obligatoire';
+                }
+                break;
+        }
+        return '';
+    }
+
+    checkPasswords: ValidatorFn = (group: AbstractControl): ValidationErrors | null => {
+        if (this.authType !== 'register') {
+            return null;
+        }
+        const pass = group.get('password')!.value;
+        const confirmPass = group.get('confirmPassword')!.value
+        return (pass === confirmPass && pass !== '') ? null : { notSame: true }
+    }
+
+    private _resetErrors(): void {
+        this.errors = { errors: {} };
+    }
+
+}
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+
+import { NoAuthGuard } from 'src/app/core/services/no-auth-guard.service';
+import { AuthComponent } from './auth.component';
+import { AuthRoutingModule } from './auth-routing.module';
+
+@NgModule({
+    imports: [
+        AuthRoutingModule,
+        AuthComponent
+    ],
+    providers: [NoAuthGuard]
+})
+export class AuthModule { }