début de la logique login + création du register

src/app/app.component.html

@@ -1 +1,5 @@
+@if (1) {
     <router-outlet></router-outlet>
+} @else {
+    redirectLogin();
+}

src/app/app.component.ts

@@ -1,8 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Router, RouterOutlet} from '@angular/router';
-import {LoginFormComponent} from "./pages/login-form/login-form.component";
-import {MessagesInfoUser} from "./pages/messages/messages-infouser/messages-infouser.component";
-import {MessagesMain} from "./pages/messages/messages-main/messages-main.component";
 
 
 @Component({
@@ -12,5 +9,12 @@ import {MessagesMain} from "./pages/messages/messages-main/messages-main.compone
   styleUrl: './app.component.css'
 })
 export class AppComponent {
+
+  private router = inject(Router)
+
+  redirectLogin() {
+    this.router.navigate(['/login']);
+  }
+
   title = 'Knots-Front';
 }

src/app/app.routes.ts

@@ -34,4 +34,9 @@ export const routes: Routes = [
         path:'login',
         loadComponent: () => import('./pages/login-form/login-form.component').then(x => x.LoginFormComponent)
     },
+
+    {
+        path:'register',
+        loadComponent: () => import('./pages/register-form/register-form.component').then(x => x.RegisterFormComponent)
+    },
 ];

src/app/login.service.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import {tap} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  /*
+  login(credentials: { name: string; password: string }) {
+    return this.http.post<LoginResponse>(`${this.apiUrl}/login`, credentials).pipe(
+        tap(response => this.setSession(response.token))
+    );
+  }
+  */
+
+  /*
+  refreshToken(): Observable<RefreshResponse> {
+    this.isRefreshing = true;
+
+    return this.http.post<RefreshResponse>(`${this.apiUrl}/refresh`, {})
+        .pipe(
+            tap(response => {
+              this.setSession(response.token);
+            }),
+            finalize(() => {
+              this.isRefreshing = false;
+            })
+        );
+  }
+  */
+
+  /*
+  logout(){
+    return localStorage.removeItem('token');
+    this.currentUser.set(null);
+    this.router.navigate(['/login']);
+  }
+  */
+
+}

src/app/pages/login-form/login-form.component.ts

@@ -1,17 +1,69 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {
   IonButton,
   IonCard,
   IonCardContent,
   IonCardHeader,
-  IonCardSubtitle,
   IonCardTitle,
 } from '@ionic/angular/standalone';
+import {CommonModule} from "@angular/common";
+import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
+import {Router} from "@angular/router";
+import {LoginService} from "../../login.service";
 
 @Component({
   selector: 'login-form',
   templateUrl: 'login-form.component.html',
   styleUrls: ['login-form.component.css'],
-  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, CommonModule, ReactiveFormsModule,],
 })
-export class LoginFormComponent {}
+export class LoginFormComponent {
+
+  private fb = inject(FormBuilder);
+  private loginService = inject(LoginService);
+  private router = inject(Router);
+
+  isLoading = false;
+
+  loginForm = this.fb.group({
+    name: ['', [Validators.required]],
+    password: ['', [Validators.required]]
+  });
+
+  submitForm(): void {
+    if (this.loginForm.valid) {
+      this.isLoading = true;
+
+      const request = {
+        name: this.loginForm.value.name!,
+        password: this.loginForm.value.password!
+      };
+
+      /*this.authService.login(request).subscribe({
+        next: () => {
+          this.isLoading = false;
+          this.notification.success('Succès', 'Connexion réussie !');
+
+          this.router.navigate(['/main/discussions']);
+        },
+        error: (err) => {
+          this.isLoading = false;
+          // Gestion des erreurs (inchangée)
+          if (err.status === 401) {
+            this.notification.error('Erreur', 'Identifiant ou mot de passe incorrect.');
+          } else {
+            this.notification.error('Erreur', 'Impossible de contacter le serveur.');
+          }
+        }
+      });
+    } else {
+      // Affiche les erreurs de validation visuelles
+      Object.values(this.loginForm.controls).forEach(control => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({ onlySelf: true });
+        }
+      });*/
+    }
+  }
+}

src/app/pages/register-form/register-form.component.html

@@ -0,0 +1,22 @@
+<ion-card>
+    <ion-card-header>
+        <ion-card-title>Inscrivez-vous à Knots !</ion-card-title><br>
+        <ion-card-subtitle>Commencez à nouer des liens !</ion-card-subtitle><br>
+    </ion-card-header>
+
+    <ion-card-content>
+        Nom d'utilisateur
+        <br>
+        <input type="text">
+        <br><br>
+        Mot de Passe
+        <br>
+        <input type="password" id="password">
+        <br><br>
+        Confirmez votre mot de passe
+        <br>
+        <input type="password" id="confirmPassword">
+    </ion-card-content><br>
+
+    <ion-button fill="clear">Créer son compte</ion-button>
+</ion-card>

src/app/pages/register-form/register-form.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle
+} from "@ionic/angular/standalone";
+
+@Component({
+  selector: 'app-register-form',
+  imports: [
+    IonButton,
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle
+  ],
+  templateUrl: './register-form.component.html',
+  styleUrl: './register-form.component.css'
+})
+export class RegisterFormComponent {
+
+}