Merge pull request #2 from AlineRinquin/dev

Dev
This commit is contained in:
AlineRinquin 2022-01-19 16:19:58 +01:00 committed by GitHub
commit 559be4fbd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 596 additions and 33 deletions

5
package-lock.json generated
View File

@ -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",

View File

@ -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"

View File

@ -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 {}

View File

@ -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],
})

View 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
View 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;
}
}
}

View File

@ -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>

View File

@ -0,0 +1,4 @@
.navbar-brand {
position: absolute;
margin-left: 10%;
}

View File

@ -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>

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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
View File

@ -0,0 +1,10 @@
export interface Membre {
firstName: string;
lastName: string;
email: string;
password: string;
dateNaissance: Date;
teamName: string;
profil: boolean;
passwordConfirm: string;
}

View File

@ -1 +1,2 @@
<p>page-account works!</p>
<app-header></app-header>
<app-side-bar></app-side-bar>

View File

@ -1 +1,2 @@
<p>page-accueil works!</p>
<app-header></app-header>
<app-signin></app-signin>

View File

@ -1 +1 @@
<p>page-add-member works!</p>
<app-header></app-header>

View File

@ -1 +1,2 @@
<p>page-agenda works!</p>
<app-header></app-header>
<app-side-bar></app-side-bar>

View File

@ -1 +1,2 @@
<p>page-dashboard works!</p>
<app-header></app-header>
<app-side-bar></app-side-bar>

View File

@ -1 +1 @@
<p>page-delete-member works!</p>
<app-header></app-header>

View File

@ -1 +1,2 @@
<p>page-forgot-password works!</p>
<app-header></app-header>

View File

@ -1 +1,2 @@
<p>page-menu-semaine works!</p>
<app-header></app-header>
<app-side-bar></app-side-bar>

View File

@ -1 +1,2 @@
<p>page-not-found works!</p>
<app-header></app-header>
<p>Error 404 Page Not FOUND!!!!!!!!!!!</p>

View File

@ -1 +1,2 @@
<p>page-repertoire works!</p>
<app-header></app-header>
<app-side-bar></app-side-bar>

View File

@ -1 +1 @@
<p>page-reset-password works!</p>
<app-header></app-header>

View File

@ -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>

View File

@ -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;
}

View File

@ -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);
}
};
}
}

View File

@ -1 +1,2 @@
<p>page-to-do-list works!</p>
<app-header></app-header>
<app-side-bar></app-side-bar>

View File

@ -1 +1 @@
<p>page-update-member works!</p>
<app-header></app-header>

View 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();
});
});

View 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);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -1,3 +1,5 @@
export const environment = {
production: true
production: true,
apiUrl: '',
tokenKey: '',
};

View File

@ -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',
};
/*