vincent/Kine-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mise en forme de l'onglet "account"

Browse Source
This commit is contained in:
Vincent BENOIT
2022-10-06 10:36:31 +02:00
parent d18a1ccdb5
commit fb47267030
8 changed files with 132 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/app-routing.module.ts
+15 -1
View File
@@ -4,6 +4,9 @@ import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { AccountComponent } from './components/home/workspace/account/account.component';
import { ParametresComponent } from './components/home/workspace/parametres/parametres.component';
import { InfosComponent } from './components/home/workspace/infos/infos.component';
import { HoursComponent } from './components/home/workspace/hours/hours.component';
import { ProfileService } from './services/profile/profile.service';
@@ -19,8 +22,19 @@ const routes: Routes = [
{
path:"account",
component:AccountComponent
},
{
path:"parameters",
component:ParametresComponent
},
{
path:"infos",
component:InfosComponent
},
{
path:"hours",
component:HoursComponent
}
],
canActivate: [ProfileService]
},
src/app/components/home/home.component.html
+1 -1
View File
@@ -22,7 +22,7 @@
<!--<a (click)="sidenav.toggle()" href="" mat-list-item>Fermer</a>
<mat-divider></mat-divider>-->
<div fxLayout="column" fxLayoutAlign="center start">
<button mat-button routerLink="/compte" class="menu-button">
<button mat-button routerLink="/account" class="menu-button">
<mat-icon>account_circle</mat-icon>
<span> Compte</span>
</button>
src/app/components/home/workspace/account/account.component.css
+38
View File
@@ -0,0 +1,38 @@
.container {
/*display: flex;*/
/*background-color: #b8b8b8;*/
margin: 10px;
}
form {
/*margin-left: 100px;*/
width: 50%;
min-width: 50%;
}
mat-label {
font-size: smaller;
}
input {
font-size: smaller;
}
button {
display: block;
width: 100%;
margin-top: 2rem;
}
.myError {
display: block;
width: 100%;
font-size: smaller;
}
.cred {
display: block;
width: 100%;
text-align: center;
font-size: smaller;
margin-top: 1rem;
}
src/app/components/home/workspace/account/account.component.html
+31 -1
View File
@@ -1 +1,31 @@
<p>account works!</p>
<div class="container"
fxLayout="column"
fxLayoutAlign="space-around center">
<!-- Password Form -->
<form [formGroup]="passwdFG"
fxLayout="column">
<mat-form-field>
<mat-label>Ancien mot de passe</mat-label>
<input matInput type="password" formControlName="old_passwd" class="form-control" name="old_passwd" placeholder="Ancien mot de passe" [ngClass]="{'is-invalid':submitted && passwdFG.controls['old_passwd'].errors}">
<mat-error class="myError" *ngIf="passwdFG.controls['old_passwd'].hasError('required')">L'ancien mot de passe est requis !</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Nouveau mot de passe</mat-label>
<input matInput type="password" formControlName="new_passwd" class="form-control" name="new_password" placeholder="Nouveau mot de passe" [ngClass]="{'is-invalid':submitted && passwdFG.controls['new_passwd'].errors}">
<mat-error class="myError" *ngIf="passwdFG.controls['new_passwd'].hasError('required')">Le nouveau mot de passe est requis !</mat-error>
<mat-error class="myError" *ngIf="passwdFG.controls['new_passwd'].hasError('pattern')">Le mot de passe doit avoir minimum {{minPw}} caractères et maximum {{maxPw}} avec 1 caratère minuscule, 1 majuscule et 1 chiffre</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Confirmation</mat-label>
<input matInput type="password" formControlName="confirmation" class="form-control" name="confirmation" placeholder="Confirmation" [ngClass]="{'is-invalid':submitted && passwdFG.controls['confirmation'].errors}">
<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('required')">La confirmation du nouveau mot de passe est requis !</mat-error>
<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('pattern')">Le mot de passe doit avoir minimum {{minPw}} caractères et maximum {{maxPw}} avec 1 caratère minuscule, 1 majuscule et 1 chiffre</mat-error>
<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('mismatch')">La confirmation doit correspondre au mot de passe</mat-error>
</mat-form-field>
<button mat-raised-button color="primary" (click)="onUpdate()">Mise à jour</button>
<!-- <mat-error class="cred" *ngIf="wrongCredentials">Mauvais couple Identifiant/Mot de passe, Recommencez ....</mat-error>
<mat-error class="cred" *ngIf="userConnected">Un autre utilisateur ({{usernameConn}}) est déjà connecté, veuillez recommencer ultérieurement ...</mat-error>
<mat-error class="cred" *ngIf="errorProcess">Erreur de connexion avec le backend ...</mat-error>
-->
</form>
</div>
src/app/components/home/workspace/account/account.component.ts
+33 -1
View File
@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
import { Router } from '@angular/router';
import { BackendService } from '../../../../services/backend/backend.service';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-account',
@@ -6,10 +10,38 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./account.component.css']
})
export class AccountComponent implements OnInit {
passwdFG:FormGroup;
submitted:boolean=false;
minPw:number = 8;
maxPw:number = 24;
constructor() { }
constructor(private fb:FormBuilder,
private bs:BackendService,
private router:Router,
private toast:ToastrService) { }
ngOnInit(): void {
this.passwdFG=this.fb.group({
old_passwd:["", Validators.required],
new_passwd:["", [
Validators.required,
Validators.pattern('(?=\\D*\\d)(?=[^a-z])(?=[^A-Z]*[A-Z]).{' + this.minPw + ',' + this.maxPw + '}')
]],
confirmation:["", [
Validators.required,
Validators.pattern('(?=\\D*\\d)(?=[^a-z])(?=[^A-Z]*[A-Z]).{' + this.minPw + ',' + this.maxPw + '}'),
passwordMatchValidator
]],
});
}
onUpdate(): void {
}
}
export const passwordMatchValidator: ValidatorFn = (fg: AbstractControl): ValidationErrors | null => {
let pt = fg.parent as FormGroup;
if(!pt) return null;
return pt.get('new_passwd')?.value === pt.get('confirmation')?.value ? null : { 'mismatch' : true };
}
src/app/components/home/workspace/hours/hours.component.ts
+6 -6
View File
@@ -1,15 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hours',
templateUrl: './hours.component.html',
styleUrls: ['./hours.component.css']
selector: 'app-hours',
templateUrl: './hours.component.html',
styleUrls: ['./hours.component.css']
})
export class HoursComponent implements OnInit {
constructor() { }
constructor() { }
ngOnInit(): void {
}
ngOnInit(): void {
}
}
src/app/components/home/workspace/infos/infos.component.ts
+6 -6
View File
@@ -1,15 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-infos',
templateUrl: './infos.component.html',
styleUrls: ['./infos.component.css']
selector: 'app-infos',
templateUrl: './infos.component.html',
styleUrls: ['./infos.component.css']
})
export class InfosComponent implements OnInit {
constructor() { }
constructor() { }
ngOnInit(): void {
}
ngOnInit(): void {
}
}
src/styles.css
+2 -1
View File
@@ -6,5 +6,6 @@ html, body { height: 100%; }
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
background-color: #f5f5f5 !important;
overflow-y: hidden;
/*background-color: #f5f5f5 !important;*/
}