commit
559be4fbd9
5
package-lock.json
generated
5
package-lock.json
generated
@ -5102,6 +5102,11 @@
|
||||
"integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
|
||||
"dev": true
|
||||
},
|
||||
"jwt-decode": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
|
||||
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
|
||||
},
|
||||
"karma": {
|
||||
"version": "6.3.11",
|
||||
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.11.tgz",
|
||||
|
@ -19,6 +19,7 @@
|
||||
"@angular/platform-browser-dynamic": "~13.0.0",
|
||||
"@angular/router": "~13.0.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"rxjs": "~7.4.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
|
@ -1,10 +1,40 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { PageAccountComponent } from './pages/page-account/page-account.component';
|
||||
import { PageAccueilComponent } from './pages/page-accueil/page-accueil.component';
|
||||
import { PageAddMemberComponent } from './pages/page-add-member/page-add-member.component';
|
||||
import { PageAgendaComponent } from './pages/page-agenda/page-agenda.component';
|
||||
import { PageDashboardComponent } from './pages/page-dashboard/page-dashboard.component';
|
||||
import { PageDeleteMemberComponent } from './pages/page-delete-member/page-delete-member.component';
|
||||
import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
|
||||
import { PageMenuSemaineComponent } from './pages/page-menu-semaine/page-menu-semaine.component';
|
||||
import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
|
||||
import { PageRepertoireComponent } from './pages/page-repertoire/page-repertoire.component';
|
||||
import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
|
||||
import { PageSignupComponent } from './pages/page-signup/page-signup.component';
|
||||
import { PageToDoListComponent } from './pages/page-to-do-list/page-to-do-list.component';
|
||||
import { PageUpdateMemberComponent } from './pages/page-update-member/page-update-member.component';
|
||||
|
||||
const routes: Routes = [];
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'accueil', pathMatch: 'full' },
|
||||
{ path: 'compte', component: PageAccountComponent },
|
||||
{ path: 'accueil', component: PageAccueilComponent },
|
||||
{ path: 'ajout-membre', component: PageAddMemberComponent },
|
||||
{ path: 'agenda', component: PageAgendaComponent },
|
||||
{ path: 'tableau-de-bord', component: PageDashboardComponent },
|
||||
{ path: 'supprimer-membre', component: PageDeleteMemberComponent },
|
||||
{ path: 'password-oublie', component: PageForgotPasswordComponent },
|
||||
{ path: 'menu', component: PageMenuSemaineComponent },
|
||||
{ path: 'repertoire', component: PageRepertoireComponent },
|
||||
{ path: 'reinitialisation-password', component: PageResetPasswordComponent },
|
||||
{ path: 'creation-compte', component: PageSignupComponent },
|
||||
{ path: 'to-do-list', component: PageToDoListComponent },
|
||||
{ path: 'modifier-membre', component: PageUpdateMemberComponent },
|
||||
{ path: '**', component: PageNotFoundComponent },
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
export class AppRoutingModule {}
|
||||
|
@ -31,6 +31,8 @@ import { CardMenuComponent } from './components/card-menu/card-menu.component';
|
||||
import { FicheContactComponent } from './components/fiche-contact/fiche-contact.component';
|
||||
import { PaginationComponent } from './components/pagination/pagination.component';
|
||||
import { CreneauComponent } from './components/creneau/creneau.component';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -64,7 +66,13 @@ import { CreneauComponent } from './components/creneau/creneau.component';
|
||||
PaginationComponent,
|
||||
CreneauComponent,
|
||||
],
|
||||
imports: [BrowserModule, AppRoutingModule],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
ReactiveFormsModule,
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
|
16
src/app/auth.guard.spec.ts
Normal file
16
src/app/auth.guard.spec.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AuthGuard } from './auth.guard';
|
||||
|
||||
describe('AuthGuard', () => {
|
||||
let guard: AuthGuard;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
guard = TestBed.inject(AuthGuard);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(guard).toBeTruthy();
|
||||
});
|
||||
});
|
55
src/app/auth.guard.ts
Normal file
55
src/app/auth.guard.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import {
|
||||
ActivatedRouteSnapshot,
|
||||
CanActivate,
|
||||
Router,
|
||||
RouterStateSnapshot,
|
||||
UrlTree,
|
||||
} from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import jwt_decode from 'jwt-decode';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class AuthGuard implements CanActivate {
|
||||
private tokenKey: string;
|
||||
constructor(private router: Router) {
|
||||
this.tokenKey = environment.tokenKey;
|
||||
}
|
||||
|
||||
canActivate(
|
||||
route: ActivatedRouteSnapshot,
|
||||
state: RouterStateSnapshot
|
||||
):
|
||||
| Observable<boolean | UrlTree>
|
||||
| Promise<boolean | UrlTree>
|
||||
| boolean
|
||||
| UrlTree {
|
||||
const token = localStorage.getItem(this.tokenKey);
|
||||
|
||||
if (token) {
|
||||
const decodedToken = jwt_decode<any>(token);
|
||||
|
||||
console.log('decodedToken : ', decodedToken);
|
||||
|
||||
if (decodedToken.exp) {
|
||||
console.log("Date d'exp decodedToken : ", decodedToken.exp);
|
||||
const dateExp = new Date(decodedToken.exp * 1000);
|
||||
if (new Date() >= dateExp) {
|
||||
// le token a expiré, je n'autorise pas l'accès
|
||||
this.router.navigate(['account/signin']);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("C'est ok ! ");
|
||||
return true;
|
||||
} else {
|
||||
console.log('You shall not pass !!!!');
|
||||
this.router.navigate(['account/signin']); // redirection de notre utilisateur vers une url de notre application (dans notre code TS)
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
@ -1 +1,10 @@
|
||||
<p>header works!</p>
|
||||
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light shadow py-0 ">
|
||||
<div class="container-fluid">
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<img routerLink="accueil" routerLinkActive="active-custom" class="nav-link" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-organizee.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-brand" href="#">Organizee</a>
|
||||
</div>
|
||||
</nav>
|
@ -0,0 +1,4 @@
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
margin-left: 10%;
|
||||
}
|
@ -1 +1,11 @@
|
||||
<p>side-bar works!</p>
|
||||
<nav class="custom-side-bar flex-shrink-0 bg-white border-end">
|
||||
<div id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>
|
||||
<a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
|
||||
<a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
|
||||
<a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
|
||||
<a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">Agenda</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
@ -1 +1,45 @@
|
||||
<p>signin works!</p>
|
||||
|
||||
<div class="signin-form text-center">
|
||||
<main class="form-signin">
|
||||
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
|
||||
<div class="form-floating">
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
id="floatingInput"
|
||||
placeholder=""
|
||||
name="email"
|
||||
ngModel
|
||||
required
|
||||
[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"
|
||||
ngModel
|
||||
required
|
||||
[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">Se connecter</button>
|
||||
|
||||
|
||||
<button class="w-100 btn btn-lg btn-success"
|
||||
routerLink="../creation-compte" routerLinkActive="active-custom"
|
||||
>S'inscrire</button>
|
||||
|
||||
</form>
|
||||
|
||||
<div *ngIf="errorForm">
|
||||
<p class="text-danger">Il manque des informations dans le formulaire...</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
@ -0,0 +1,31 @@
|
||||
.signin-form {
|
||||
height: 100vh;
|
||||
padding-top: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
.checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-floating:focus-within {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
@ -1,15 +1,38 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import {
|
||||
FormBuilder,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
Validators,
|
||||
} from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-signin',
|
||||
templateUrl: './signin.component.html',
|
||||
styleUrls: ['./signin.component.scss']
|
||||
styleUrls: ['./signin.component.scss'],
|
||||
})
|
||||
export class SigninComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
public errorForm: boolean;
|
||||
constructor(private authService: AuthService, private router: Router) {
|
||||
this.errorForm = false;
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
public onSubmit(submittedForm: any): void {
|
||||
console.log(submittedForm.form.value);
|
||||
const email = submittedForm.form.value['email'];
|
||||
const password = submittedForm.form.value['password'];
|
||||
if (email !== '' && password !== '') {
|
||||
this.authService.signin(email, password).subscribe((resp) => {
|
||||
console.log('Component Signin: ', resp);
|
||||
this.router.navigate(['tableau-de-bord']);
|
||||
});
|
||||
} else {
|
||||
// afficher une erreur à l'utilisateur
|
||||
this.errorForm = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
10
src/app/models/membre.ts
Normal file
10
src/app/models/membre.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export interface Membre {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
password: string;
|
||||
dateNaissance: Date;
|
||||
teamName: string;
|
||||
profil: boolean;
|
||||
passwordConfirm: string;
|
||||
}
|
@ -1 +1,2 @@
|
||||
<p>page-account works!</p>
|
||||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
@ -1 +1,2 @@
|
||||
<p>page-accueil works!</p>
|
||||
<app-header></app-header>
|
||||
<app-signin></app-signin>
|
@ -1 +1 @@
|
||||
<p>page-add-member works!</p>
|
||||
<app-header></app-header>
|
||||
|
@ -1 +1,2 @@
|
||||
<p>page-agenda works!</p>
|
||||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
@ -1 +1,2 @@
|
||||
<p>page-dashboard works!</p>
|
||||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
@ -1 +1 @@
|
||||
<p>page-delete-member works!</p>
|
||||
<app-header></app-header>
|
||||
|
@ -1 +1,2 @@
|
||||
<p>page-forgot-password works!</p>
|
||||
<app-header></app-header>
|
||||
|
||||
|
@ -1 +1,2 @@
|
||||
<p>page-menu-semaine works!</p>
|
||||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
@ -1 +1,2 @@
|
||||
<p>page-not-found works!</p>
|
||||
<app-header></app-header>
|
||||
<p>Error 404 Page Not FOUND!!!!!!!!!!!</p>
|
@ -1 +1,2 @@
|
||||
<p>page-repertoire works!</p>
|
||||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
@ -1 +1 @@
|
||||
<p>page-reset-password works!</p>
|
||||
<app-header></app-header>
|
||||
|
@ -1 +1,109 @@
|
||||
<p>page-signup works!</p>
|
||||
<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);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -1 +1,2 @@
|
||||
<p>page-to-do-list works!</p>
|
||||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
@ -1 +1 @@
|
||||
<p>page-update-member works!</p>
|
||||
<app-header></app-header>
|
||||
|
16
src/app/services/auth.service.spec.ts
Normal file
16
src/app/services/auth.service.spec.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AuthService } from './auth.service';
|
||||
|
||||
describe('AuthService', () => {
|
||||
let service: AuthService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(AuthService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
58
src/app/services/auth.service.ts
Normal file
58
src/app/services/auth.service.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { map, Observable } from 'rxjs';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { Membre } from '../models/membre';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class AuthService {
|
||||
private apiUrl: string;
|
||||
private tokenKey: string;
|
||||
|
||||
constructor(private http: HttpClient) {
|
||||
// On se sert des variables d'environnement de notre application
|
||||
this.apiUrl = environment.apiUrl;
|
||||
this.tokenKey = environment.tokenKey;
|
||||
}
|
||||
|
||||
signup(membre: Membre): Observable<any> {
|
||||
console.log(membre);
|
||||
|
||||
return this.http.post(`${this.apiUrl}/creation-compte`, membre);
|
||||
}
|
||||
|
||||
signin(email: string, password: string): Observable<any> {
|
||||
const body = {
|
||||
email: email,
|
||||
password: password,
|
||||
};
|
||||
|
||||
console.log('Mon body : ', body);
|
||||
|
||||
// Modifier cette partie ci-dessous :
|
||||
// - pour pouvoir stocker dans le localstorage notre accesstoken
|
||||
// - Sous la clé "TOKEN-LBP"
|
||||
|
||||
return this.http.post(`${this.apiUrl}/login`, body).pipe(
|
||||
map((x: any) => {
|
||||
console.log('Service : ', x.accessToken);
|
||||
// Modification à faire ici
|
||||
localStorage.setItem(this.tokenKey, x.accessToken);
|
||||
return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
forgotPassword(email: string, password: string): Observable<any> {
|
||||
const body = {
|
||||
email: email,
|
||||
password: password,
|
||||
};
|
||||
|
||||
console.log('Mon body : ', body);
|
||||
|
||||
return this.http.post(`${this.apiUrl}/forgot-psw`, body);
|
||||
}
|
||||
}
|
BIN
src/assets/images/logo-organizee.png
Normal file
BIN
src/assets/images/logo-organizee.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 48 KiB |
@ -1,3 +1,5 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
production: true,
|
||||
apiUrl: '',
|
||||
tokenKey: '',
|
||||
};
|
||||
|
@ -3,7 +3,9 @@
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
production: false,
|
||||
apiUrl: 'http://localhost:3306',
|
||||
tokenKey: 'TOKEN-ORGANIZEE',
|
||||
};
|
||||
|
||||
/*
|
||||
|
Loading…
Reference in New Issue
Block a user