Compare commits
2 Commits
052073f793
...
fdcceaa8b0
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fdcceaa8b0 | ||
|
|
ea2b4c4dd2 |
@@ -1 +1,5 @@
|
|||||||
<router-outlet/>
|
@if (1) {
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
} @else {
|
||||||
|
redirectLogin();
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { Component } from '@angular/core';
|
import {Component, inject} from '@angular/core';
|
||||||
import { RouterOutlet } from '@angular/router';
|
import {Router, RouterOutlet} from '@angular/router';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
@@ -8,5 +9,12 @@ import { RouterOutlet } from '@angular/router';
|
|||||||
styleUrl: './app.component.css'
|
styleUrl: './app.component.css'
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
|
|
||||||
|
private router = inject(Router)
|
||||||
|
|
||||||
|
redirectLogin() {
|
||||||
|
this.router.navigate(['/login']);
|
||||||
|
}
|
||||||
|
|
||||||
title = 'Knots-Front';
|
title = 'Knots-Front';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,4 +34,9 @@ export const routes: Routes = [
|
|||||||
path:'login',
|
path:'login',
|
||||||
loadComponent: () => import('./pages/login-form/login-form.component').then(x => x.LoginFormComponent)
|
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)
|
||||||
|
},
|
||||||
];
|
];
|
||||||
41
src/app/login.service.ts
Normal file
41
src/app/login.service.ts
Normal file
@@ -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']);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
}
|
||||||
@@ -1,17 +1,69 @@
|
|||||||
import { Component } from '@angular/core';
|
import {Component, inject} from '@angular/core';
|
||||||
import {
|
import {
|
||||||
IonButton,
|
IonButton,
|
||||||
IonCard,
|
IonCard,
|
||||||
IonCardContent,
|
IonCardContent,
|
||||||
IonCardHeader,
|
IonCardHeader,
|
||||||
IonCardSubtitle,
|
|
||||||
IonCardTitle,
|
IonCardTitle,
|
||||||
} from '@ionic/angular/standalone';
|
} 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({
|
@Component({
|
||||||
selector: 'login-form',
|
selector: 'login-form',
|
||||||
templateUrl: 'login-form.component.html',
|
templateUrl: 'login-form.component.html',
|
||||||
styleUrls: ['login-form.component.css'],
|
styleUrls: ['login-form.component.css'],
|
||||||
imports: [IonButton, IonCard, IonCardContent, IonCardHeader, 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 });
|
||||||
|
}
|
||||||
|
});*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
22
src/app/pages/register-form/register-form.component.html
Normal file
22
src/app/pages/register-form/register-form.component.html
Normal file
@@ -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>
|
||||||
26
src/app/pages/register-form/register-form.component.ts
Normal file
26
src/app/pages/register-form/register-form.component.ts
Normal file
@@ -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 {
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user