FEAT #8883 TIME 3:30 add update password front

src/frontend/app/app.module.ts

@@ -47,6 +47,7 @@ import { RejectInfoBottomSheetComponent } from './modal/reject-info.component';
 // SERVICES
 import { NotificationService, CustomSnackbarComponent } from './service/notification.service';
 import { SignaturesContentService } from './service/signatures.service';
+import { UpdatePasswordComponent } from './login/updatePassword/updatePassword.component';
 
 
 
@@ -55,6 +56,7 @@ import { SignaturesContentService } from './service/signatures.service';
     AppComponent,
     LoginComponent,
     ForgotPasswordComponent,
+    UpdatePasswordComponent,
     SignaturesComponent,
     SignaturePadPageComponent,
     DrawerComponent,
@@ -95,6 +97,7 @@ import { SignaturesContentService } from './service/signatures.service';
       { path: 'documents', component: DocumentComponent },
       { path: 'login', component: LoginComponent },
       { path: 'forgotPassword', component: ForgotPasswordComponent },
+      { path: 'updatePassword', component: UpdatePasswordComponent },
       { path: '**', redirectTo: 'login', pathMatch: 'full' },
     ], { useHash: true }),
   ],

src/frontend/app/login/forgotPassword/forgotPassword.component.scss

@@ -11,7 +11,7 @@
 }
 
 .login-form {
-  max-width: 768px;
+  max-width: 600px;
   text-align: center;
 }
 

src/frontend/app/login/updatePassword/updatePassword.component.html

+<div class="login-content">
+    <mat-icon svgIcon="maarchLogo" class="maarchLogo"></mat-icon>
+    <mat-card class="login-form">
+        <form (ngSubmit)="updatePassword()">
+            <div class="alert-message alert-message-info" role="alert">
+                Vous serez amené à vous connecter une fois la modification du mot de passe effectuée.
+            </div>
+            <mat-form-field class="input-row">
+                <input name="newPassword" matInput [(ngModel)]="password.newPassword"
+                    placeholder="{{'lang.newPassword' | translate}}" [type]="hideNewPassword ? 'password' : 'text'"
+                    (keyup)="checkPasswordValidity(password.newPassword)">
+                <mat-icon matSuffix (click)="hideNewPassword = !hideNewPassword" class="fa fa-2x"
+                    [ngClass]="[hideNewPassword ? 'fa-eye-slash' : 'fa-eye']">
+                </mat-icon>
+                <mat-hint style="color:red;">{{handlePassword.errorMsg | translate}}</mat-hint>
+            </mat-form-field>
+            <mat-form-field class="input-row">
+                <input name="passwordConfirmation" matInput [(ngModel)]="password.passwordConfirmation"
+                    placeholder="{{'lang.passwordConfirmation' | translate}}"
+                    [type]="hideNewPasswordConfirm ? 'password' : 'text'">
+                <mat-icon matSuffix (click)="hideNewPasswordConfirm = !hideNewPasswordConfirm" class="fa fa-2x"
+                    [ngClass]="[hideNewPasswordConfirm ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
+                <mat-hint style="color:red;" *ngIf="password.passwordConfirmation !== password.newPassword">
+                    {{'lang.passwordNotMatch' | translate}}</mat-hint>
+                <mat-hint style="color:green;"
+                    *ngIf="password.passwordConfirmation === password.newPassword && password.newPassword.length > 0 && password.passwordConfirmation.length> 0">
+                    {{'lang.samePassword' | translate}}</mat-hint>
+            </mat-form-field>
+            <button type="submit" mat-button [disabled]="allowValidate() || loadingConnexion">{{labelButton}}</button>
+            <button mat-button routerLink="/login">Annuler</button>
+        </form>
+    </mat-card>
+</div>
\ No newline at end of file

src/frontend/app/login/updatePassword/updatePassword.component.scss

+@import '../../../css/vars.scss';
+
+.login-content {
+  background-color: $primary;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-form {
+  max-width: 600px;
+  text-align: center;
+}
+
+.input-row {
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.maarchLogo {
+  position: absolute;
+  transition: all 1s ease-in-out;
+  width: 250px;
+  height: auto;
+  padding-bottom: 10px;
+  transform: translateY(-230px);
+}
+
+footer {
+  color: white;
+  position: absolute;
+  bottom: 5px;
+  font-size: 10px;
+  opacity: 0.5;
+}

src/frontend/app/login/updatePassword/updatePassword.component.ts

+import { Component, AfterViewInit, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material';
+import { HttpClient } from '@angular/common/http';
+import { Router, ActivatedRoute } from '@angular/router';
+import { NotificationService } from '../../service/notification.service';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+    templateUrl: 'updatePassword.component.html',
+    styleUrls: ['updatePassword.component.scss'],
+})
+export class UpdatePasswordComponent implements OnInit, AfterViewInit {
+
+    loadingForm: boolean = false;
+    loadingConnexion: boolean = false;
+
+    token: string = '';
+
+    password: any = {
+        newPassword: '',
+        passwordConfirmation: ''
+    };
+    labelButton: string = 'Modifier';
+
+    hideNewPassword: Boolean = true;
+    hideNewPasswordConfirm: Boolean = true;
+
+    // HANDLE PASSWORD
+    passwordRules: any = {
+        minLength: { enabled: false, value: 0 },
+        complexityUpper: { enabled: false, value: 0 },
+        complexityNumber: { enabled: false, value: 0 },
+        complexitySpecial: { enabled: false, value: 0 },
+        renewal: { enabled: false, value: 0 },
+        historyLastUse: { enabled: false, value: 0 },
+    };
+
+    handlePassword: any = {
+        error: false,
+        errorMsg: ''
+    };
+
+    ruleText = '';
+    otherRuleText = '';
+
+
+    constructor(private translate: TranslateService, private router: Router, private route: ActivatedRoute, public http: HttpClient, iconReg: MatIconRegistry, sanitizer: DomSanitizer, public notificationService: NotificationService) {
+        iconReg.addSvgIcon('maarchLogo', sanitizer.bypassSecurityTrustResourceUrl('../src/frontend/assets/logo_white.svg'));
+        this.route.queryParams
+            .subscribe(params => {
+                this.token = params.token;
+            });
+    }
+
+    ngOnInit(): void { }
+
+    ngAfterViewInit(): void { }
+
+    updatePassword() {
+        this.labelButton = 'Envoi ...';
+        this.loadingConnexion = true;
+
+        this.http.put('../rest/password', { 'token': this.token, 'password': this.password.newPassword })
+            .subscribe((data: any) => {
+                this.loadingForm = true;
+                this.notificationService.success('Votre mot de passe a été modifié.');
+                this.router.navigate(['/login']);
+            }, (err: any) => {
+                this.notificationService.handleErrors(err);
+
+                this.labelButton = 'Modifier';
+                this.loadingConnexion = false;
+            });
+    }
+
+    checkPasswordValidity(password: string) {
+        this.handlePassword.error = true;
+
+        if (!password.match(/[A-Z]/g) && this.passwordRules.complexityUpper.enabled) {
+            this.handlePassword.errorMsg = 'lang.upperRequired';
+        } else if (!password.match(/[0-9]/g) && this.passwordRules.complexityNumber.enabled) {
+            this.handlePassword.errorMsg = 'lang.numberRequired';
+        } else if (!password.match(/[^A-Za-z0-9]/g) && this.passwordRules.complexitySpecial.enabled) {
+            this.handlePassword.errorMsg = 'lang.specialCharRequired';
+        } else if (password.length < this.passwordRules.minLength.value && this.passwordRules.minLength.enabled) {
+            this.translate.get('lang.minLengthChar', { charLength: this.passwordRules.minLength.value }).subscribe((res: string) => {
+                this.handlePassword.errorMsg = res;
+            });
+        } else {
+            this.handlePassword.error = false;
+            this.handlePassword.errorMsg = '';
+        }
+    }
+
+    getPassRules() {
+        this.handlePassword.error = false;
+        this.handlePassword.errorMsg = '';
+
+        this.http.get('../rest/passwordRules')
+            .subscribe((data: any) => {
+                const ruleTextArr: String[] = [];
+                const otherRuleTextArr: String[] = [];
+
+                data.rules.forEach((rule: any) => {
+                    if (rule.label === 'minLength') {
+                        this.passwordRules.minLength.enabled = rule.enabled;
+                        this.passwordRules.minLength.value = rule.value;
+                        if (rule.enabled) {
+                            this.translate.get('lang.minLengthChar', { charLength: rule.value }).subscribe((res: string) => {
+                                ruleTextArr.push(res);
+                            });
+                        }
+
+                    } else if (rule.label === 'complexityUpper') {
+                        this.passwordRules.complexityUpper.enabled = rule.enabled;
+                        this.passwordRules.complexityUpper.value = rule.value;
+                        if (rule.enabled) {
+                            ruleTextArr.push('lang.upperRequired');
+                        }
+
+                    } else if (rule.label === 'complexityNumber') {
+                        this.passwordRules.complexityNumber.enabled = rule.enabled;
+                        this.passwordRules.complexityNumber.value = rule.value;
+                        if (rule.enabled) {
+                            ruleTextArr.push('lang.numberRequired');
+                        }
+
+                    } else if (rule.label === 'complexitySpecial') {
+                        this.passwordRules.complexitySpecial.enabled = rule.enabled;
+                        this.passwordRules.complexitySpecial.value = rule.value;
+                        if (rule.enabled) {
+                            ruleTextArr.push('lang.specialCharRequired');
+                        }
+                    } else if (rule.label === 'renewal') {
+                        this.passwordRules.renewal.enabled = rule.enabled;
+                        this.passwordRules.renewal.value = rule.value;
+                        if (rule.enabled) {
+                            this.translate.get('lang.renewalInfo', { time: rule.value }).subscribe((res: string) => {
+                                otherRuleTextArr.push(res);
+                            });
+                        }
+                    } else if (rule.label === 'historyLastUse') {
+                        this.passwordRules.historyLastUse.enabled = rule.enabled;
+                        this.passwordRules.historyLastUse.value = rule.value;
+                        if (rule.enabled) {
+                            this.translate.get('lang.historyUseInfo', { countPwd: rule.value }).subscribe((res: string) => {
+                                otherRuleTextArr.push(res);
+                            });
+                        }
+                    }
+                });
+                this.ruleText = ruleTextArr.join(', ');
+                this.otherRuleText = otherRuleTextArr.join('<br/>');
+            }, (err) => {
+                this.notificationService.handleErrors(err);
+            });
+    }
+
+    allowValidate() {
+        if ((this.handlePassword.error || this.password.newPassword !== this.password.passwordConfirmation || this.password.newPassword.length === 0 || this.password.passwordConfirmation.length === 0)) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+}

src/frontend/css/maarch-material-alert.scss

@@ -3,7 +3,7 @@
 .alert-message {
     margin: 20px 0;
     padding: 10px;
-    max-width: 450px;
+    //max-width: 450px;
     border-left: 3px solid #eee;
     font-size: 14px;
     text-align: justify;