isa44.74/brief-la-belle-plante2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

signin + signup

Browse source
This commit is contained in:
Julian Tomczyk 2022-01-18 14:20:04 +01:00
parent c86246599e
commit f655a6843f
9 changed files with 235 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
db.json
View file

@ -6059,6 +6059,18 @@
"email": "coco@mail.com",
"password": "$2a$10$UdJi398SK6x93IFAWNbYK.KlhZ.20E6vF7v/Va1HplivYQWrMMl2G",
"id": 2
},
{
"email": "julian@mail.com",
"password": "$2a$10$Zvontm1V.XFZRRR7wE6vnuFlRBknKOZEPKnI1sLKes4uSa8HM7ci6",
"id": 3
},
{
"email": "zfzz@efzefz.com",
"password": "$2a$10$KVxyOURcblApZM4QvdxbzeodcCm9y3sxJHTsEdiI/nNxK36mHIMQy",
"firstName": "zfzfz",
"lastName": "fzfzfz",
"id": 4
}
]
}
}

5
src/app/modules/account/account.module.ts
View file

@ -6,7 +6,7 @@ import { PageSigninComponent } from './pages/page-signin/page-signin.component';
import { PageSignupnComponent } from './pages/page-signupn/page-signupn.component';
import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
@ -19,7 +19,8 @@ import { FormsModule } from '@angular/forms';
imports: [
CommonModule,
AccountRoutingModule,
FormsModule
FormsModule,
ReactiveFormsModule
]
})
export class AccountModule { }

6
src/app/modules/account/models/user.ts Normal file
View file

@ -0,0 +1,6 @@
export interface User {
firstName: string;
lastName: string;
email: string;
password?: string;
}

45
src/app/modules/account/pages/page-signin/page-signin.component.html
View file

@ -1 +1,44 @@
<p>page-signin works!</p>
<!--**********************************
Formulaire Signin :
- champ email et password obligatoire
- bouton submit disable si le formulaire est invalid
- doit envoyer les données vers l'url /login
**********************************-->
<div class="signin-form text-center">
<main class="form-signin">
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
<h1>Merci de vous connecter</h1>
<div class="form-floating">
<input type="email"
class="form-control"
id="floatingInput"
placeholder=""
name="email"
required ngModel
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
<label for="floatingInput">Adresse email</label>
</div>
<div class="form-floating">
<input type="password"
class="form-control"
id="floatingPassword"
placeholder=""
name="password"
required ngModel
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
<label for="floatingPassword">Mot de passe</label>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit" [disabled]="signinForm.invalid">Je me connecte !</button>
</form>
<div *ngIf="errorForm">
<p class="text-danger">Il manque des informations dans le formulaire...</p>
</div>
</main>
</div>

32
src/app/modules/account/pages/page-signin/page-signin.component.scss
View file

@ -0,0 +1,32 @@
.signin-form {
height: 100vh;
padding-top: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

23
src/app/modules/account/pages/page-signin/page-signin.component.ts
View file

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
@Component({
selector: 'app-page-signin',
@ -7,9 +8,29 @@ import { Component, OnInit } from '@angular/core';
})
export class PageSigninComponent implements OnInit {
constructor() { }
public errorForm: boolean;
constructor(
private authService: AuthService) {
this.errorForm = false;
}
ngOnInit(): void {
}
onSubmit(objectForm: any): void {
console.log(objectForm.form.value);
const email = objectForm.form.value.email;
const password = objectForm.form.value.password;
if(email !== '' && password !== '') {
this.authService.signin(email, password).subscribe(
resp => console.log(resp)
);
} else {
//Afficher une erreur à l'utilisateur
this.errorForm = true;
}
}
}

60
src/app/modules/account/pages/page-signupn/page-signupn.component.html
View file

@ -1,18 +1,66 @@
<div class="signup-form text-center">
<main class="form-signup">
<form (ngSubmit)="onSubmit(signupForm)" #signupForm="ngForm">
<form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
<h1>Merci de vous inscrire</h1>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="" name="email" required ngModel>
<label for="floatingInput">Adresse email</label>
<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="password" class="form-control" id="floatingPassword" placeholder="" name="password"
required ngModel>
<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="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 *ngIf="signupForm.controls['emailFc'].status == 'INVALID' &&
signupForm.controls['emailFc'].touched == true"
class="alert alert-danger">Champ obligatoire !</div> -->
</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 *ngIf="signupForm.controls['passwordFc'].status == 'INVALID' &&
signupForm.controls['passwordFc'].touched == true"
class="alert alert-danger">Il faut au moins 8 caractères !</div> -->
</div>
<button class="w-100 btn btn-lg btn-success" type="submit" [disabled]="signupForm.invalid">Je m'inscris !</button>
<button class="w-100 btn btn-lg btn-success"
type="submit"
>Je m'inscris !</button>
</form>
</main>
</div>

46
src/app/modules/account/pages/page-signupn/page-signupn.component.ts
View file

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../../services/auth.service';
@Component({
@ -8,19 +10,53 @@ import { AuthService } from '../../services/auth.service';
})
export class PageSignupnComponent implements OnInit {
constructor(private authService: AuthService) { }
signupForm : FormGroup;
constructor(
private authService: AuthService,
private router: Router
) {
this.signupForm = new FormGroup({});
}
ngOnInit(): void {
this.signupForm = new FormGroup({
firstNameFc: new FormControl(''),
lastNameFc: new FormControl(''),
emailFc: new FormControl('', [Validators.required, Validators.email, Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/igm)]),
passwordFc: new FormControl('', [Validators.minLength(8), Validators.required])
});
}
public onSubmit(objectForm: any): void {
console.log(objectForm.form.value);
const email = objectForm.form.value.email;
public onSubmit(): void {
console.log("value : ", this.signupForm.value);
console.log(this.signupForm);
const firstName = this.signupForm.value['firstNameFc'];
const lastName = this.signupForm.value['lastNameFc'];
const email = this.signupForm.value['emailFc'];
const password = this.signupForm.value['passwordFc'];
const user = {
firstName: firstName,
lastName: lastName,
email: email,
password: password
}
if(email !== '' && password !== '') {
this.authService.signup(user).subscribe(
resp => {
this.router.navigate(['account/signin']);
}
)
} else {
}
/*const email = objectForm.form.value.email;
const password = objectForm.form.value.password;
this.authService.signup(email, password).subscribe(
resp => console.log(resp)
);
);*/
}
}

26
src/app/modules/account/services/auth.service.ts
View file

@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { User } from '../models/user';
@Injectable({
providedIn: 'root'
@ -13,12 +14,25 @@ export class AuthService {
this.apiUrl = environment.apiUrl;
}
signup(email: string, password: string): Observable<any> {
const body = {
email: email,
password: password
};
signup(newUser: User): Observable<any> {
// const body = {
// firstName: firstName,
// lastName: lastName,
// email: email,
// password: password
// };
return this.http.post(`${this.apiUrl}/register`, body);
console.log("newUser : ", newUser);
return this.http.post(`${this.apiUrl}/register`, newUser);
}
signin(email: string, password: string): Observable<any> {
const body = {
email: email,
password: password
};
return this.http.post(`${this.apiUrl}/login`, body);
}
}