authentification / signup /signin
This commit is contained in:
AlineRinquin
parent
1ba991e959
commit
68e1df8eb7
18 changed files with 517 additions and 15 deletions
|
|
@ -1 +1,2 @@
|
|||
<app-header></app-header>
|
||||
<app-signin></app-signin>
|
||||
|
|
@ -1 +1,109 @@
|
|||
<app-header></app-header>
|
||||
<div class="signup-form text-center">
|
||||
<main class="form-signup">
|
||||
<form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
|
||||
<h1>Merci de vous inscrire</h1>
|
||||
<div class="form-floating">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="floatingInputlastName"
|
||||
placeholder=""
|
||||
name="lastName"
|
||||
formControlName="lastNameFc"
|
||||
[ngClass]="{'is-valid' : signupForm.controls['lastNameFc'].touched && signupForm.controls['lastNameFc'].valid,
|
||||
'is-invalid': signupForm.controls['lastNameFc'].touched && !signupForm.controls['lastNameFc'].valid}">
|
||||
<label for="floatingInputlastName">Nom</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="floatingInputfirstName"
|
||||
placeholder=""
|
||||
name="firstName"
|
||||
formControlName="firstNameFc"
|
||||
[ngClass]="{'is-valid' : signupForm.controls['firstNameFc'].touched && signupForm.controls['firstNameFc'].valid,
|
||||
'is-invalid': signupForm.controls['firstNameFc'].touched && !signupForm.controls['firstNameFc'].valid}">
|
||||
<label for="floatingInputfirstName">Prénom</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="date"
|
||||
class="form-control"
|
||||
id="floatingInputdateNaissance"
|
||||
placeholder=""
|
||||
name="dateNaissance"
|
||||
formControlName="dateNaissanceFc"
|
||||
[ngClass]="{'is-valid' : signupForm.controls['dateNaissanceFc'].touched && signupForm.controls['dateNaissanceFc'].valid,
|
||||
'is-invalid': signupForm.controls['dateNaissanceFc'].touched && !signupForm.controls['dateNaissanceFc'].valid}">
|
||||
<label for="floatingInputfirstName">Date de naissance</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="floatingInputteamName"
|
||||
placeholder=""
|
||||
name="teamName"
|
||||
formControlName="teamNameFc"
|
||||
[ngClass]="{'is-valid' : signupForm.controls['teamNameFc'].touched && signupForm.controls['teamNameFc'].valid,
|
||||
'is-invalid': signupForm.controls['teamNameFc'].touched && !signupForm.controls['teamNameFc'].valid}">
|
||||
<label for="floatingInputfirstName">Ma team</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<select type="text"
|
||||
class="form-control"
|
||||
id="floatingInputprofil"
|
||||
name="profil"
|
||||
formControlName="profilFc"
|
||||
[ngClass]="{'is-valid' : signupForm.controls['profilFc'].touched && signupForm.controls['profilFc'].valid,
|
||||
'is-invalid': signupForm.controls['profilFc'].touched && !signupForm.controls['profilFc'].valid}">
|
||||
<option>Adulte</option>
|
||||
<option>Enfant</option>
|
||||
</select>
|
||||
<label for="floatingInputfirstName">Profil</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
id="floatingInput"
|
||||
placeholder=""
|
||||
name="email"
|
||||
formControlName="emailFc"
|
||||
[ngClass]="{'is-valid' : signupForm.controls['emailFc'].touched && signupForm.controls['emailFc'].valid,
|
||||
'is-invalid': signupForm.controls['emailFc'].touched && !signupForm.controls['emailFc'].valid}">
|
||||
<label for="floatingInput">Adresse email</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="floatingPassword"
|
||||
placeholder=""
|
||||
name="password"
|
||||
formControlName="passwordFc"
|
||||
[ngClass]="{'is-valid' : signupForm.controls['passwordFc'].touched && signupForm.controls['passwordFc'].valid,
|
||||
'is-invalid': signupForm.controls['passwordFc'].touched && !signupForm.controls['passwordFc'].valid}">
|
||||
<label for="floatingPassword">Mot de passe</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="passwordConfirm"
|
||||
class="form-control"
|
||||
id="floatingpasswordConfirm"
|
||||
placeholder=""
|
||||
name="passwordConfirm"
|
||||
formControlName="passwordConfirmFc"
|
||||
[ngClass]="{'is-valid' : signupForm.controls['passwordConfirmFc'].touched && signupForm.controls['passwordConfirmFc'].valid,
|
||||
'is-invalid': signupForm.controls['passwordConfirmFc'].touched && !signupForm.controls['passwordConfirmFc'].valid}">
|
||||
<label for="floatingPassword">Confirmer mot de passe</label>
|
||||
</div>
|
||||
|
||||
<button class="w-100 btn btn-lg btn-success"
|
||||
type="submit"
|
||||
[disabled]="signupForm.invalid">Je m'inscris !</button>
|
||||
<p>
|
||||
Value : {{ signupForm.value | json }}
|
||||
</p>
|
||||
<p>
|
||||
Form valid : {{ signupForm.valid }}
|
||||
</p>
|
||||
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
.login-form {
|
||||
height: 100vh;
|
||||
padding-top: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-signup {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.form-signup .checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-signup .form-floating:focus-within {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.form-signup input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-signup input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
|
@ -1,15 +1,105 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {
|
||||
FormBuilder,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
Validators,
|
||||
} from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { Membre } from '../../models/membre';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-signup',
|
||||
templateUrl: './page-signup.component.html',
|
||||
styleUrls: ['./page-signup.component.scss']
|
||||
styleUrls: ['./page-signup.component.scss'],
|
||||
})
|
||||
export class PageSignupComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
public signupForm: FormGroup;
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private router: Router,
|
||||
private fb: FormBuilder
|
||||
) {
|
||||
this.signupForm = new FormGroup({});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
// *********************************pensser a changer group car déprécié********************************
|
||||
this.signupForm = this.fb.group(
|
||||
{
|
||||
firstNameFc: new FormControl('', [Validators.required]),
|
||||
lastNameFc: new FormControl('', [Validators.required]),
|
||||
dateNaissanceFc: new FormControl('', [Validators.required]),
|
||||
teamNameFc: new FormControl('', [Validators.required]),
|
||||
profilFc: new FormControl('', [Validators.required]),
|
||||
emailFc: new FormControl('', [
|
||||
Validators.email,
|
||||
Validators.required,
|
||||
Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/gim),
|
||||
]), // chercher une meilleure regex
|
||||
passwordFc: new FormControl('', [
|
||||
Validators.minLength(8),
|
||||
Validators.required,
|
||||
]),
|
||||
passwordConfirmFc: new FormControl('', [
|
||||
Validators.minLength(8),
|
||||
Validators.required,
|
||||
]),
|
||||
},
|
||||
{
|
||||
validator: this.ConfirmedValidator('passwordFc', 'passwordConfirmFc'),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
public onSubmit(): void {
|
||||
console.log('value : ', this.signupForm.value);
|
||||
console.log('form : ', this.signupForm);
|
||||
const firstNameValue = this.signupForm.value['firstNameFc'];
|
||||
const lastNameValue = this.signupForm.value['lastNameFc'];
|
||||
const emailValue = this.signupForm.value['emailFc'];
|
||||
const passwordValue = this.signupForm.value['passwordFc'];
|
||||
const dateNaissanceValue = this.signupForm.value['dateNaissanceFc'];
|
||||
const teamNameValue = this.signupForm.value['teamNameFc'];
|
||||
const profilValue = this.signupForm.value['profilFc'];
|
||||
const passwordConfirmValue = this.signupForm.value['passwordConfirmFc'];
|
||||
|
||||
const membre: Membre = {
|
||||
firstName: firstNameValue,
|
||||
lastName: lastNameValue,
|
||||
email: emailValue,
|
||||
password: passwordValue,
|
||||
dateNaissance: dateNaissanceValue,
|
||||
teamName: teamNameValue,
|
||||
profil: profilValue,
|
||||
passwordConfirm: passwordConfirmValue,
|
||||
};
|
||||
|
||||
if (membre.email !== '' && membre.password !== '') {
|
||||
this.authService.signup(membre).subscribe((resp) => {
|
||||
this.router.navigate(['account/signin']);
|
||||
});
|
||||
} else {
|
||||
// affichage erreur
|
||||
}
|
||||
}
|
||||
|
||||
ConfirmedValidator(controlName: string, matchingControlName: string) {
|
||||
return (formGroup: FormGroup) => {
|
||||
const control = formGroup.controls[controlName];
|
||||
const matchingControl = formGroup.controls[matchingControlName];
|
||||
if (
|
||||
matchingControl.errors &&
|
||||
!matchingControl.errors['confirmedValidator']
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (control.value !== matchingControl.value) {
|
||||
matchingControl.setErrors({ confirmedValidator: true });
|
||||
} else {
|
||||
matchingControl.setErrors(null);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue