Added login page

2026-05-28 14:27:46 +01:00
parent 4de58d6f6e
commit 82aef7da0a
19 changed files with 628 additions and 250 deletions
@@ -0,0 +1,46 @@
+<div class="grid grid-cols-9 min-h-screen bg-blue-950">
+    <div class="col-span-6 w-full h-full border rounded-r-4xl overflow-hidden">
+        <img src="https://www.pyro-fetes.com/wp-content/uploads/2023/03/5I9A3180-scaled.jpg"
+             class="w-full h-full object-cover"
+             alt=""
+        />
+    </div>
+
+    <div class="col-span-3 w-full flex items-center justify-center">
+
+        <div class="flex flex-col items-center">
+            <img src="https://www.pyro-fetes.com/wp-content/uploads/2020/10/PyroFetes-logo-OR.png"
+                 class="w-9/12 mb-10"
+                 alt=""
+            />
+
+            <div class="bg-white border rounded-2xl p-8 w-80 shadow-lg">
+                <form nz-form nzLayout="vertical" [formGroup]="loginForm">
+                    <nz-form-item>
+                        <nz-form-label nzRequired>
+                            Nom d'utilisateur
+                        </nz-form-label>
+                        <nz-form-control nzErrorTip="Ce champ est requis">
+                            <input nz-input placeholder="Nom d'utilisateur" formControlName="name">
+                        </nz-form-control>
+                    </nz-form-item>
+
+                    <nz-form-item>
+                        <nz-form-label nzRequired class="mt-3">
+                            Mot de passe
+                        </nz-form-label>
+                        <nz-form-control nzErrorTip="Ce champ est requis">
+                            <input nz-input type="password" placeholder="Mot de passe" formControlName="password">
+                        </nz-form-control>
+                    </nz-form-item>
+
+                    <button class="mt-4 rounded-xl w-full" nz-button nzType="primary" (click)="connectUser()">
+                        Connexion
+                    </button>
+
+                </form>
+            </div>
+
+        </div>
+    </div>
+</div>
@@ -0,0 +1,43 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {AuthService} from "../../services/auth.service";
+import {Router} from "@angular/router";
+
+@Component({
+    selector: 'app-login',
+    imports: [
+        NzColDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule,
+        NzButtonComponent
+    ],
+    templateUrl: './login.html',
+    styleUrl: './login.css',
+})
+export class Login implements OnInit {
+    private authService = inject(AuthService);
+    private router = inject(Router);
+
+    ngOnInit() {
+        this.authService.logout();
+    }
+
+    loginForm: FormGroup = new FormGroup({
+        name: new FormControl<string>(null, [Validators.required]),
+        password: new FormControl<string>(null, [Validators.required])
+    })
+
+    async connectUser() {
+        if (this.loginForm.invalid) return;
+        const ok = await this.authService.connectUser(this.loginForm.value.name, this.loginForm.value.password);
+        if (ok) await this.router.navigate(['/dashboard']);
+    }
+}