yann
/
AIT_appIA
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

normalisation des securiters

master
trauchessec 1 viikko sitten
vanhempi
9de9315047
commit
a00a009cde
3 muutettua tiedostoa jossa 220 lisäystä ja 177 poistoa
Jaettu näkymä Näytä diff tilastot
  1. +1
    -1
      src/app/pages/login/login.html
  2. +191
    -168
      src/app/pages/register/register.component.html
  3. +28
    -8
      src/app/pages/register/register.component.ts

+ 1
- 1
src/app/pages/login/login.html Näytä tiedosto

@@ -74,7 +74,7 @@
<input type="checkbox" formControlName="rememberMe">
<span class="checkbox-label">Se souvenir de moi</span>
</label>
<a href="/forgot-password" class="forgot-password-link">Mot de passe oublié ?</a>
<a href="/reset/request" class="forgot-password-link">Mot de passe oublié ?</a>
</div>

<!-- Submit Button -->

+ 191
- 168
src/app/pages/register/register.component.html Näytä tiedosto

@@ -1,191 +1,214 @@
<div class="auth-page-container register-page">
<div class="auth-card">
<div class="auth-header">
<div class="logo">AIT</div>
<div class="logo">{{APP_CONFIG.app.name}}</div>
<h1 class="auth-title">Créer un compte</h1>
<p class="auth-subtitle">Rejoignez-nous dès maintenant et commencez votre aventure.</p>
</div>

<div class="auth-content">
<!-- Success Message -->
<div class="alert alert-success" *ngIf="success()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<div>
<strong>Inscription réussie !</strong>
<p>Un email de confirmation vous a été envoyé. Veuillez vérifier votre boîte de réception.</p>
@if (success()) {
<div class="alert alert-success">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<div>
<strong>Inscription réussie !</strong>
<p>Un email de confirmation vous a été envoyé. Veuillez vérifier votre boîte de réception.</p>
</div>
</div>
</div>
}

<!-- Error Messages -->
<div class="alert alert-danger" *ngIf="error()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p>Une erreur s'est produite lors de l'inscription. Veuillez réessayer.</p>
</div>

<div class="alert alert-danger" *ngIf="errorUserExists()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p>Ce nom d'utilisateur est déjà utilisé. Veuillez en choisir un autre.</p>
</div>

<div class="alert alert-danger" *ngIf="errorEmailExists()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p>Cette adresse email est déjà utilisée. Veuillez vous connecter ou utiliser une autre adresse.</p>
</div>

<div class="alert alert-danger" *ngIf="doNotMatch()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p>Les mots de passe ne correspondent pas.</p>
</div>

<form [formGroup]="registerForm" (ngSubmit)="register()" class="auth-form" *ngIf="!success()">

<!-- Login/Username Field -->
<div class="form-field">
<label for="login" class="form-label">Nom d'utilisateur</label>
<div class="input-wrapper">
<input
#login
id="login"
type="text"
formControlName="login"
class="form-input"
placeholder="Votre nom d'utilisateur"
[class.error]="registerForm.get('login')?.invalid && registerForm.get('login')?.touched"
>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<span class="error-message" *ngIf="registerForm.get('login')?.hasError('required') && registerForm.get('login')?.touched">
Le nom d'utilisateur est requis.
</span>
<span class="error-message" *ngIf="registerForm.get('login')?.hasError('minlength') && registerForm.get('login')?.touched">
Le nom d'utilisateur doit contenir au moins 1 caractère.
</span>
<span class="error-message" *ngIf="registerForm.get('login')?.hasError('maxlength') && registerForm.get('login')?.touched">
Le nom d'utilisateur ne peut pas dépasser 50 caractères.
</span>
<span class="error-message" *ngIf="registerForm.get('login')?.hasError('pattern') && registerForm.get('login')?.touched">
Le nom d'utilisateur contient des caractères invalides.
</span>
@if (error()) {
<div class="alert alert-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p>Une erreur s'est produite lors de l'inscription. Veuillez réessayer.</p>
</div>

<!-- Email Field -->
<div class="form-field">
<label for="email" class="form-label">Email</label>
<div class="input-wrapper">
<input
id="email"
type="email"
formControlName="email"
class="form-input"
placeholder="votre.email@exemple.com"
[class.error]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched"
>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<span class="error-message" *ngIf="registerForm.get('email')?.hasError('required') && registerForm.get('email')?.touched">
L'adresse email est requise.
</span>
<span class="error-message" *ngIf="registerForm.get('email')?.hasError('email') && registerForm.get('email')?.touched">
Veuillez entrer une adresse email valide.
</span>
<span class="error-message" *ngIf="registerForm.get('email')?.hasError('minlength') && registerForm.get('email')?.touched">
L'email doit contenir au moins 5 caractères.
</span>
<span class="error-message" *ngIf="registerForm.get('email')?.hasError('maxlength') && registerForm.get('email')?.touched">
L'email ne peut pas dépasser 254 caractères.
</span>
}

@if (errorUserExists()) {
<div class="alert alert-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p>Ce nom d'utilisateur est déjà utilisé. Veuillez en choisir un autre.</p>
</div>

<!-- Password Field -->
<div class="form-field">
<label for="password" class="form-label">Mot de passe</label>
<div class="input-wrapper">
<input
id="password"
type="password"
formControlName="password"
class="form-input"
placeholder="••••••••"
[class.error]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched"
>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<span class="error-message" *ngIf="registerForm.get('password')?.hasError('required') && registerForm.get('password')?.touched">
Le mot de passe est requis.
</span>
<span class="error-message" *ngIf="registerForm.get('password')?.hasError('minlength') && registerForm.get('password')?.touched">
Le mot de passe doit contenir au moins 4 caractères.
</span>
<span class="error-message" *ngIf="registerForm.get('password')?.hasError('maxlength') && registerForm.get('password')?.touched">
Le mot de passe ne peut pas dépasser 50 caractères.
</span>

}

@if (errorEmailExists()) {
<div class="alert alert-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p>Cette adresse email est déjà utilisée. Veuillez vous connecter ou utiliser une autre adresse.</p>
</div>
}

@if (doNotMatch()) {
<div class="alert alert-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p>{{ validationMessages.password.mismatch }}</p>
</div>
}

@if (!success()) {
<form [formGroup]="registerForm" (ngSubmit)="register()" class="auth-form">

<!-- Login/Username Field -->
<div class="form-field">
<label for="login" class="form-label">Nom d'utilisateur</label>
<div class="input-wrapper">
<input
#login
id="login"
type="text"
formControlName="login"
class="form-input"
placeholder="Votre nom d'utilisateur"
[class.error]="registerForm.get('login')?.invalid && registerForm.get('login')?.touched"
>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
@if (registerForm.get('login')?.hasError('required') && registerForm.get('login')?.touched) {
<span class="error-message">{{ validationMessages.username.required }}</span>
}
@if (registerForm.get('login')?.hasError('minlength') && registerForm.get('login')?.touched) {
<span class="error-message">{{ validationMessages.username.minLength }}</span>
}
@if (registerForm.get('login')?.hasError('maxlength') && registerForm.get('login')?.touched) {
<span class="error-message">{{ validationMessages.username.maxLength }}</span>
}
@if (registerForm.get('login')?.hasError('pattern') && registerForm.get('login')?.touched) {
<span class="error-message">{{ validationMessages.username.pattern }}</span>
}
</div>

<!-- Confirm Password Field -->
<div class="form-field">
<label for="confirmPassword" class="form-label">Confirmer le mot de passe</label>
<div class="input-wrapper">
<input
id="confirmPassword"
type="password"
formControlName="confirmPassword"
class="form-input"
placeholder="••••••••"
[class.error]="registerForm.get('confirmPassword')?.invalid && registerForm.get('confirmPassword')?.touched"
>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
<!-- Email Field -->
<div class="form-field">
<label for="email" class="form-label">Email</label>
<div class="input-wrapper">
<input
id="email"
type="email"
formControlName="email"
class="form-input"
placeholder="votre.email@exemple.com"
[class.error]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched"
>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
@if (registerForm.get('email')?.hasError('required') && registerForm.get('email')?.touched) {
<span class="error-message">{{ validationMessages.email.required }}</span>
}
@if (registerForm.get('email')?.hasError('email') && registerForm.get('email')?.touched) {
<span class="error-message">{{ validationMessages.email.invalid }}</span>
}
@if (registerForm.get('email')?.hasError('minlength') && registerForm.get('email')?.touched) {
<span class="error-message">{{ validationMessages.email.minLength }}</span>
}
@if (registerForm.get('email')?.hasError('maxlength') && registerForm.get('email')?.touched) {
<span class="error-message">{{ validationMessages.email.maxLength }}</span>
}
</div>
<span class="error-message" *ngIf="registerForm.get('confirmPassword')?.hasError('required') && registerForm.get('confirmPassword')?.touched">
La confirmation du mot de passe est requise.
</span>
<span class="error-message" *ngIf="registerForm.get('confirmPassword')?.hasError('minlength') && registerForm.get('confirmPassword')?.touched">
La confirmation doit contenir au moins 4 caractères.
</span>
</div>

<!-- Submit Button -->
<button
type="submit"
[disabled]="registerForm.invalid"
class="auth-btn"
>
<span>Créer mon compte</span>
</button>
<!-- Password Field -->
<div class="form-field">
<label for="password" class="form-label">Mot de passe</label>
<div class="input-wrapper">
<input
id="password"
type="password"
formControlName="password"
class="form-input"
placeholder="••••••••"
[class.error]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched"
>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
@if (registerForm.get('password')?.hasError('required') && registerForm.get('password')?.touched) {
<span class="error-message">{{ validationMessages.password.required }}</span>
}
@if (registerForm.get('password')?.hasError('minlength') && registerForm.get('password')?.touched) {
<span class="error-message">{{ validationMessages.password.minLength }}</span>
}
@if (registerForm.get('password')?.hasError('maxlength') && registerForm.get('password')?.touched) {
<span class="error-message">{{ validationMessages.password.maxLength }}</span>
}
<p class="info-message">
Le mot de passe doit contenir entre {{ passwordConfig.minLength }} et {{ passwordConfig.maxLength }}
caractères.
</p>
</div>

<!-- Confirm Password Field -->
<div class="form-field">
<label for="confirmPassword" class="form-label">Confirmer le mot de passe</label>
<div class="input-wrapper">
<input
id="confirmPassword"
type="password"
formControlName="confirmPassword"
class="form-input"
placeholder="••••••••"
[class.error]="registerForm.get('confirmPassword')?.invalid && registerForm.get('confirmPassword')?.touched"
>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
@if (registerForm.get('confirmPassword')?.hasError('required') && registerForm.get('confirmPassword')?.touched) {
<span class="error-message">{{ validationMessages.password.required }}</span>
}
@if (registerForm.get('confirmPassword')?.hasError('minlength') && registerForm.get('confirmPassword')?.touched) {
<span class="error-message">{{ validationMessages.password.minLength }}</span>
}
</div>

</form>
<!-- Submit Button -->
<button
type="submit"
[disabled]="registerForm.invalid"
class="auth-btn"
>
<span>Créer mon compte</span>
</button>

</form>
}

</div>


+ 28
- 8
src/app/pages/register/register.component.ts Näytä tiedosto

@@ -3,10 +3,10 @@ import { HttpErrorResponse } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';


import { RegisterService } from './register.service';
import SharedModule from '../../shared/shared.module';
import {EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE} from '../../config/error.constants';
import { EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE } from '../../config/error.constants';
import {APP_CONFIG, VALIDATION_MESSAGES} from '../../app.config';

@Component({
selector: 'jhi-register',
@@ -22,27 +22,45 @@ export default class RegisterComponent implements AfterViewInit {
errorUserExists = signal(false);
success = signal(false);

readonly validationMessages = VALIDATION_MESSAGES;
readonly passwordConfig = APP_CONFIG.password;
readonly emailConfig = APP_CONFIG.email;
readonly usernameConfig = APP_CONFIG.user.username;

registerForm = new FormGroup({
login: new FormControl('', {
nonNullable: true,
validators: [
Validators.required,
Validators.minLength(1),
Validators.maxLength(50),
Validators.pattern('^[a-zA-Z0-9!$&*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$|^[_.@A-Za-z0-9-]+$'),
Validators.minLength(APP_CONFIG.user.username.minLength),
Validators.maxLength(APP_CONFIG.user.username.maxLength),
Validators.pattern(APP_CONFIG.user.username.pattern),
],
}),
email: new FormControl('', {
nonNullable: true,
validators: [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email],
validators: [
Validators.required,
Validators.minLength(APP_CONFIG.email.minLength),
Validators.maxLength(APP_CONFIG.email.maxLength),
Validators.email
],
}),
password: new FormControl('', {
nonNullable: true,
validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
validators: [
Validators.required,
Validators.minLength(APP_CONFIG.password.minLength),
Validators.maxLength(APP_CONFIG.password.maxLength)
],
}),
confirmPassword: new FormControl('', {
nonNullable: true,
validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
validators: [
Validators.required,
Validators.minLength(APP_CONFIG.password.minLength),
Validators.maxLength(APP_CONFIG.password.maxLength)
],
}),
});

@@ -78,4 +96,6 @@ export default class RegisterComponent implements AfterViewInit {
this.error.set(true);
}
}

protected readonly APP_CONFIG = APP_CONFIG;
}

Write Preview
Loading…
Peruuta
Tallenna