diff --git a/src/app/reset-password/reset-password.component.html b/src/app/reset-password/reset-password.component.html
index 6257275a9c7eecf07bb51dcb2b52245193a4897d..c242e2554cf47872a68d431f1fd8e6a09663c3d1 100644
--- a/src/app/reset-password/reset-password.component.html
+++ b/src/app/reset-password/reset-password.component.html
@@ -27,182 +27,6 @@
</div>
</form>
</div>
- <form *ngIf="token" [formGroup]="accountForm" (ngSubmit)="onSubmitPassword()">
- <div class="form-group" fxLayout="column">
- <label for="password">Création de mot de passe</label>
- Le mot de passe doit contenir au minimum :
- <ul>
- <li
- [ngClass]="{
- invalid: accountForm.get('password').value.length < 8,
- valid: accountForm.get('password').value.length >= 8
- }"
- class=""
- >
- <app-svg-icon
- *ngIf="accountForm.get('password').value.length >= 8"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'validate'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="accountForm.get('password').value.length < 8"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- <p>8 caractères</p>
- </li>
- <li
- [ngClass]="{
- invalid: !checkIfPasswordHasSpecialChar(accountForm.get('password').value),
- valid: checkIfPasswordHasSpecialChar(accountForm.get('password').value)
- }"
- >
- <app-svg-icon
- *ngIf="checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'validate'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="!checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- <p>un caractère spécial</p>
- </li>
- <li
- [ngClass]="{
- invalid: !checkIfPasswordHasLowerCase(accountForm.get('password').value),
- valid: checkIfPasswordHasLowerCase(accountForm.get('password').value)
- }"
- >
- <app-svg-icon
- *ngIf="checkIfPasswordHasLowerCase(accountForm.get('password').value)"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'validate'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="!checkIfPasswordHasLowerCase(accountForm.get('password').value); s"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- <p>un caractère en minuscule</p>
- </li>
- <li
- [ngClass]="{
- invalid: !checkIfPasswordHasUpperCase(accountForm.get('password').value),
- valid: checkIfPasswordHasUpperCase(accountForm.get('password').value)
- }"
- >
- <app-svg-icon
- *ngIf="checkIfPasswordHasUpperCase(accountForm.get('password').value)"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'validate'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="!checkIfPasswordHasUpperCase(accountForm.get('password').value); s"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- <p>un caractère en majuscule</p>
- </li>
- <li
- [ngClass]="{
- invalid: !checkIfPasswordHasDigit(accountForm.get('password').value),
- valid: checkIfPasswordHasDigit(accountForm.get('password').value)
- }"
- >
- <app-svg-icon
- *ngIf="checkIfPasswordHasDigit(accountForm.get('password').value)"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'validate'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="!checkIfPasswordHasDigit(accountForm.get('password').value)"
- [iconClass]="'validation-small'"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- <p>un chiffre</p>
- </li>
- </ul>
- <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <input
- [type]="isShowPassword ? 'text' : 'password'"
- formControlName="password"
- class="form-input password"
- (input)="setValidationsForm()"
- autocomplete="on"
- />
- <app-svg-icon
- [iconClass]="'validation grey hover'"
- [type]="'form'"
- [icon]="'eyePassword'"
- (click)="showPassword()"
- ></app-svg-icon>
-
- <app-svg-icon
- *ngIf="accountForm.get('password').valid"
- [iconClass]="'validation'"
- [type]="'form'"
- [icon]="'validate'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="accountForm.get('password').invalid && accountForm.get('password').value"
- [iconClass]="'validation'"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <label for="confirmPassword">Vérification du mot de passe</label>
- <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <input
- [type]="isShowConfirmPassword ? 'text' : 'password'"
- formControlName="confirmPassword"
- class="form-input password"
- (input)="setValidationsForm()"
- autocomplete="on"
- />
- <app-svg-icon
- [iconClass]="'validation grey hover'"
- [type]="'form'"
- [icon]="'eyePassword'"
- (click)="showConfirmPassword()"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="accountForm.get('confirmPassword').valid && accountForm.get('confirmPassword').value"
- [iconClass]="'validation'"
- [type]="'form'"
- [icon]="'validate'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="accountForm.get('confirmPassword').invalid && accountForm.get('confirmPassword').value"
- [iconClass]="'validation'"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- </div>
- </div>
- <div class="form-group">
- <button
- [disabled]="loading"
- class="btn btn-primary"
- [disabled]="accountForm.get('confirmPassword').invalid || accountForm.get('password').invalid"
- >
- <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
- Enregistrer
- </button>
- </div>
- </form>
+ <app-password-form *ngIf="token" (passwordForm)="onSubmitPassword($event)"></app-password-form>
</div>
</div>
diff --git a/src/app/reset-password/reset-password.component.scss b/src/app/reset-password/reset-password.component.scss
index 2ebbc815c8593fb938492098448884f2541df013..74a6e2327d69d543a3b0269ded79b23cce1f89b2 100644
--- a/src/app/reset-password/reset-password.component.scss
+++ b/src/app/reset-password/reset-password.component.scss
@@ -16,24 +16,4 @@
.form-input {
width: 256px;
}
-
- ul {
- padding-left: 0;
- }
-
- li {
- display: flex;
- margin-left: 1%;
- font-size: small;
- align-items: center;
- p {
- margin: 0 10px;
- }
- &.valid {
- color: $green;
- }
- &.invalid {
- color: $orange-warning;
- }
- }
}
diff --git a/src/app/reset-password/reset-password.component.ts b/src/app/reset-password/reset-password.component.ts
index 86eb3c24f8fae559b80bc0c1581c09008c2cd520..627cff9ba6559c3f4f2c4427c8144e6d58648620 100644
--- a/src/app/reset-password/reset-password.component.ts
+++ b/src/app/reset-password/reset-password.component.ts
@@ -2,8 +2,6 @@ import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
-import { MustMatch } from '../shared/validator/form';
-import { CustomRegExp } from '../utils/CustomRegExp';
@Component({
selector: 'app-reset-password',
@@ -12,7 +10,6 @@ import { CustomRegExp } from '../utils/CustomRegExp';
})
export class ResetPasswordComponent implements OnInit {
public resetForm: FormGroup;
- public accountForm: FormGroup;
public token: string;
public loading = false;
public submitted = false;
@@ -32,31 +29,16 @@ export class ResetPasswordComponent implements OnInit {
this.token = params['token'];
});
- this.initPasswordForm();
this.resetForm = this.formBuilder.group({
email: ['', Validators.required],
});
}
- private initPasswordForm(): void {
- this.accountForm = this.formBuilder.group(
- {
- password: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
- confirmPassword: [''],
- },
- { validator: MustMatch('password', 'confirmPassword') }
- );
- }
-
// getter for form fields
get f(): { [key: string]: AbstractControl } {
return this.resetForm.controls;
}
- get fPassword(): { [key: string]: AbstractControl } {
- return this.accountForm.controls;
- }
-
public onSubmit(): void {
this.submitted = true;
@@ -76,16 +58,8 @@ export class ResetPasswordComponent implements OnInit {
);
}
- public onSubmitPassword(): void {
- this.submitted = true;
-
- // stop here if form is invalid
- if (this.accountForm.invalid) {
- return;
- }
-
- this.loading = true;
- this.authService.resetPasswordApply(this.token, this.fPassword.password.value).subscribe(
+ public onSubmitPassword(password: string[]): void {
+ this.authService.resetPasswordApply(this.token, password[0]).subscribe(
() => {
this.router.navigate(['']);
},
@@ -94,32 +68,4 @@ export class ResetPasswordComponent implements OnInit {
}
);
}
-
- public checkIfPasswordHasSpecialChar(password: string): boolean {
- if (password.match(CustomRegExp.SPECHAR)) return true;
- return false;
- }
-
- public checkIfPasswordHasDigit(password: string): boolean {
- if (password.match(CustomRegExp.DIGIT)) return true;
- return false;
- }
-
- public checkIfPasswordHasUpperCase(password: string): boolean {
- if (password.match(CustomRegExp.UPPERCASE)) return true;
- return false;
- }
-
- public checkIfPasswordHasLowerCase(password: string): boolean {
- if (password.match(CustomRegExp.LOWERCASE)) return true;
- return false;
- }
-
- public showPassword(): void {
- this.isShowPassword = !this.isShowPassword;
- }
-
- public showConfirmPassword(): void {
- this.isShowConfirmPassword = !this.isShowConfirmPassword;
- }
}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 1b135b0434953e6a4df2c462451832b238a7a4a2..a797e721135c9fbd92b35583df9ee1c537e33ad6 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -15,6 +15,7 @@ import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmat
import { StructureOptionsModalComponent } from './structure-options-modal/structure-options-modal.component';
import { ModalOptionsComponent } from './modal-options/modal-options.component';
import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
+import { PasswordFormComponent } from './password-form/password-form.component';
// tslint:disable-next-line: max-line-length
export {
@@ -35,6 +36,7 @@ export {
StructureOptionsModalComponent,
ModalOptionsComponent,
TextInputModalComponent,
+ PasswordFormComponent,
};
// tslint:disable-next-line:variable-name
@@ -56,4 +58,5 @@ export const SharedComponents = [
StructureOptionsModalComponent,
ModalOptionsComponent,
TextInputModalComponent,
+ PasswordFormComponent,
];
diff --git a/src/app/shared/components/password-form/password-form.component.html b/src/app/shared/components/password-form/password-form.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..e7fd2bb3fd656679d0adb5342e5a06fba677e22e
--- /dev/null
+++ b/src/app/shared/components/password-form/password-form.component.html
@@ -0,0 +1,192 @@
+<form [formGroup]="accountForm" (ngSubmit)="onSubmitPassword()">
+ <div *ngIf="oldPasswordNeeded" class="form-group" fxLayout="column">
+ <label for="oldPassword">Ancien mot de passe</label>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input
+ [type]="isShowOldPassword ? 'text' : 'password'"
+ formControlName="oldPassword"
+ class="form-input password"
+ autocomplete="on"
+ />
+ <app-svg-icon
+ (click)="showOldPassword()"
+ [type]="'form'"
+ [iconClass]="'grey'"
+ [icon]="'eyePassword'"
+ ></app-svg-icon>
+ <app-svg-icon *ngIf="passwordError" [type]="'form'" [icon]="'notValidate'"></app-svg-icon>
+ </div>
+ </div>
+ <div class="form-group" fxLayout="column">
+ <label for="password">Création de mot de passe</label>
+ Le mot de passe doit contenir au minimum :
+ <ul>
+ <li
+ [ngClass]="{
+ invalid: accountForm.get('password').value.length < 8,
+ valid: accountForm.get('password').value.length >= 8
+ }"
+ class=""
+ >
+ <app-svg-icon
+ *ngIf="accountForm.get('password').value.length >= 8"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('password').value.length < 8"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>8 caractères</p>
+ </li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasSpecialChar(accountForm.get('password').value),
+ valid: checkIfPasswordHasSpecialChar(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un caractère spécial</p>
+ </li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasLowerCase(accountForm.get('password').value),
+ valid: checkIfPasswordHasLowerCase(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasLowerCase(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasLowerCase(accountForm.get('password').value); s"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un caractère en minuscule</p>
+ </li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasUpperCase(accountForm.get('password').value),
+ valid: checkIfPasswordHasUpperCase(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasUpperCase(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasUpperCase(accountForm.get('password').value); s"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un caractère en majuscule</p>
+ </li>
+ <li
+ [ngClass]="{
+ invalid: !checkIfPasswordHasDigit(accountForm.get('password').value),
+ valid: checkIfPasswordHasDigit(accountForm.get('password').value)
+ }"
+ >
+ <app-svg-icon
+ *ngIf="checkIfPasswordHasDigit(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="!checkIfPasswordHasDigit(accountForm.get('password').value)"
+ [iconClass]="'validation-small'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ <p>un chiffre</p>
+ </li>
+ </ul>
+ <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
+ <input
+ [type]="isShowPassword ? 'text' : 'password'"
+ formControlName="password"
+ class="form-input password"
+ autocomplete="on"
+ />
+ <app-svg-icon
+ [iconClass]="'validation grey hover'"
+ [type]="'form'"
+ [icon]="'eyePassword'"
+ (click)="showPassword()"
+ ></app-svg-icon>
+
+ <app-svg-icon
+ *ngIf="accountForm.get('password').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('password').invalid && accountForm.get('password').value"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ </div>
+ </div>
+ <div class="form-group" fxLayout="column">
+ <label for="confirmPassword">Vérification du mot de passe</label>
+ <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
+ <input
+ [type]="isShowConfirmPassword ? 'text' : 'password'"
+ formControlName="confirmPassword"
+ class="form-input password"
+ autocomplete="on"
+ />
+ <app-svg-icon
+ [iconClass]="'validation grey hover'"
+ [type]="'form'"
+ [icon]="'eyePassword'"
+ (click)="showConfirmPassword()"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('confirmPassword').valid && accountForm.get('confirmPassword').value"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('confirmPassword').invalid && accountForm.get('confirmPassword').value"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ </div>
+ </div>
+ <div class="form-group" fxLayout="column" fxLayoutAlign="center center">
+ <button
+ class="btn btn-primary"
+ [disabled]="accountForm.get('confirmPassword').invalid || accountForm.get('password').invalid"
+ >
+ <span class="spinner-border spinner-border-sm mr-1"></span>
+ Enregistrer
+ </button>
+ </div>
+</form>
diff --git a/src/app/shared/components/password-form/password-form.component.scss b/src/app/shared/components/password-form/password-form.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..25461318be322b86a40a9cf69f5c498076551c90
--- /dev/null
+++ b/src/app/shared/components/password-form/password-form.component.scss
@@ -0,0 +1,34 @@
+@import '../../../../assets/scss/color';
+.form-group {
+ margin-bottom: 26px;
+ label {
+ color: $grey-2;
+ }
+ .resetPasswordForm {
+ max-width: 500px;
+ }
+
+ .button {
+ margin-top: 20px;
+ }
+
+ ul {
+ padding-left: 0;
+ }
+
+ li {
+ display: flex;
+ margin-left: 1%;
+ font-size: small;
+ align-items: center;
+ p {
+ margin: 0 10px;
+ }
+ &.valid {
+ color: $green;
+ }
+ &.invalid {
+ color: $orange-warning;
+ }
+ }
+}
diff --git a/src/app/shared/components/password-form/password-form.component.spec.ts b/src/app/shared/components/password-form/password-form.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ec4f0cc5ef2b2cc66594fc3759b770b6745394e
--- /dev/null
+++ b/src/app/shared/components/password-form/password-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordFormComponent } from './password-form.component';
+
+describe('PasswordFormComponent', () => {
+ let component: PasswordFormComponent;
+ let fixture: ComponentFixture<PasswordFormComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ PasswordFormComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PasswordFormComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/password-form/password-form.component.ts b/src/app/shared/components/password-form/password-form.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..76fbeb38a80e06c3504f2c47332ee1e58498928f
--- /dev/null
+++ b/src/app/shared/components/password-form/password-form.component.ts
@@ -0,0 +1,95 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup, Validators, AbstractControl, FormBuilder } from '@angular/forms';
+import { CustomRegExp } from '../../../utils/CustomRegExp';
+import { MustMatch } from '../../validator/form';
+@Component({
+ selector: 'app-password-form',
+ templateUrl: './password-form.component.html',
+ styleUrls: ['./password-form.component.scss'],
+})
+export class PasswordFormComponent implements OnInit {
+ public accountForm: FormGroup;
+ // Condition form
+ public isShowOldPassword = false;
+ public isShowConfirmPassword = false;
+ public isShowPassword = false;
+ // Form output
+ @Input() oldPasswordNeeded: boolean = false;
+ @Output() passwordForm = new EventEmitter<string[]>();
+
+ constructor(private formBuilder: FormBuilder) {}
+
+ ngOnInit(): void {
+ this.initPasswordForm();
+ }
+
+ private initPasswordForm(): void {
+ if (!this.oldPasswordNeeded) {
+ this.accountForm = this.formBuilder.group(
+ {
+ password: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
+ confirmPassword: [''],
+ },
+ { validator: MustMatch('password', 'confirmPassword') }
+ );
+ } else {
+ this.accountForm = this.formBuilder.group(
+ {
+ oldPassword: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
+ password: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
+ confirmPassword: [''],
+ },
+ { validator: MustMatch('password', 'confirmPassword') }
+ );
+ }
+ }
+
+ get fPassword(): { [key: string]: AbstractControl } {
+ return this.accountForm.controls;
+ }
+
+ public showPassword(): void {
+ this.isShowPassword = !this.isShowPassword;
+ }
+
+ public showConfirmPassword(): void {
+ this.isShowConfirmPassword = !this.isShowConfirmPassword;
+ }
+
+ public showOldPassword(): void {
+ this.isShowOldPassword = !this.isShowOldPassword;
+ }
+
+ public checkIfPasswordHasSpecialChar(password: string): boolean {
+ if (password.match(CustomRegExp.SPECHAR)) return true;
+ return false;
+ }
+
+ public checkIfPasswordHasDigit(password: string): boolean {
+ if (password.match(CustomRegExp.DIGIT)) return true;
+ return false;
+ }
+
+ public checkIfPasswordHasUpperCase(password: string): boolean {
+ if (password.match(CustomRegExp.UPPERCASE)) return true;
+ return false;
+ }
+
+ public checkIfPasswordHasLowerCase(password: string): boolean {
+ if (password.match(CustomRegExp.LOWERCASE)) return true;
+ return false;
+ }
+
+ public onSubmitPassword(): void {
+ // stop here if form is invalid
+ if (this.accountForm.invalid) {
+ return;
+ }
+
+ if (this.oldPasswordNeeded) {
+ this.passwordForm.emit([this.accountForm.value.password, this.accountForm.value.oldPassword]);
+ } else {
+ this.passwordForm.emit([this.accountForm.value.password]);
+ }
+ }
+}
diff --git a/src/app/shared/components/structure-options-modal/structure-options-modal.component.html b/src/app/shared/components/structure-options-modal/structure-options-modal.component.html
index dd0db6ea1f48bdcd182843b5893ce2bd78f79fb4..87739f4797e849ffade723da9210a3b054cfbbaf 100644
--- a/src/app/shared/components/structure-options-modal/structure-options-modal.component.html
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.html
@@ -17,9 +17,8 @@
</nav>
<div *ngIf="editModal" class="modalBackground">
<div class="modal" (clickOutside)="closeModalOptsProfile()">
- <form
+ <div
*ngIf="editModal == typeModalProfile.password"
- [formGroup]="formPassword"
class="contentModal"
fxLayout="column"
fxLayoutAlign="center start"
@@ -29,90 +28,9 @@
<h2>Changer de mot de passe</h2>
<div class="ico-close-details" (click)="closeModalOptsProfile()"></div>
</div>
- <div class="form-group" fxLayout="column" fxLayoutGap="4px">
- <label for="oldPassword">Ancien mot de passe</label>
- <p *ngIf="passwordError" class="special invalid">Votre ancien mot de passe est incorrect.</p>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- [type]="isShowOldPassword ? 'text' : 'password'"
- formControlName="oldPassword"
- class="form-input password"
- autocomplete="on"
- />
- <app-svg-icon
- (click)="showOldPassword()"
- [type]="'form'"
- [iconClass]="'grey'"
- [icon]="'eyePassword'"
- ></app-svg-icon>
- <app-svg-icon *ngIf="passwordError" [type]="'form'" [icon]="'notValidate'"></app-svg-icon>
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <label for="password">Nouveau mot de passe</label>
- <p class="special" [ngClass]="{ invalid: fpass.password.invalid && fpass.password.value }">
- Le mot de passe doit contenir au minimum : 8 caractères dont un caractère spécial, un caractère en majuscule
- et un chiffre.
- </p>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- [type]="isShowPassword ? 'text' : 'password'"
- formControlName="password"
- class="form-input password"
- autocomplete="on"
- />
- <app-svg-icon
- (click)="showPassword()"
- [type]="'form'"
- [iconClass]="'grey'"
- [icon]="'eyePassword'"
- ></app-svg-icon>
- <app-svg-icon *ngIf="fpass.password.valid" [type]="'form'" [icon]="'validate'"></app-svg-icon>
- <app-svg-icon
- *ngIf="fpass.password.invalid && fpass.password.value"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- </div>
- </div>
- <div class="form-group" fxLayout="column">
- <label for="confirmPassword">Confirmation du mot de passe</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input
- [type]="isShowConfirmPassword ? 'text' : 'password'"
- formControlName="confirmPassword"
- class="form-input password"
- autocomplete="on"
- />
- <app-svg-icon
- (click)="showConfirmPassword()"
- [type]="'form'"
- [iconClass]="'grey'"
- [icon]="'eyePassword'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="fpass.confirmPassword.valid && fpass.password.value"
- [type]="'form'"
- [icon]="'validate'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="fpass.confirmPassword.invalid && fpass.confirmPassword.value"
- [type]="'form'"
- [icon]="'notValidate'"
- ></app-svg-icon>
- </div>
- </div>
- <div class="footerModal" fxLayout="row" fxLayoutAlign="center center">
- <button
- type="submit"
- [ngClass]="{ invalid: formPassword.invalid }"
- class="btn-primary small leave"
- (click)="submitPassword()"
- >
- Valider
- </button>
- </div>
- </form>
+ <app-password-form [oldPasswordNeeded]="true" (passwordForm)="submitPassword($event)"></app-password-form>
+ <p *ngIf="passwordError" class="special invalid">Votre ancien mot de passe est incorrect.</p>
+ </div>
<form
*ngIf="editModal == typeModalProfile.email"
[formGroup]="formEmail"
diff --git a/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss b/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
index 781140e04316a1e16e177c8f18ab9501e8a9cf58..2463a8f52cf3fdc2379d80cbf8fef02ea48146ba 100644
--- a/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
@@ -49,6 +49,9 @@ button {
.headerModal {
width: 100%;
}
+ h2 {
+ margin-right: 20px;
+ }
p {
&.special {
margin: 8px 0;
diff --git a/src/app/shared/components/structure-options-modal/structure-options-modal.component.ts b/src/app/shared/components/structure-options-modal/structure-options-modal.component.ts
index ef6eea1711ee2e9177bd66f74ff3540eeabc6fdd..e87901d8b1f754432b3871e96bf648a9e0634a12 100644
--- a/src/app/shared/components/structure-options-modal/structure-options-modal.component.ts
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.ts
@@ -27,10 +27,6 @@ export class StructureOptionsModalComponent implements OnInit {
public active: boolean;
// Password profile
- public formPassword: FormGroup;
- public isShowOldPassword = false;
- public isShowPassword = false;
- public isShowConfirmPassword = false;
public passwordError = false;
// AddAccount
@@ -57,14 +53,6 @@ export class StructureOptionsModalComponent implements OnInit {
) {}
ngOnInit(): void {
- this.formPassword = this.formBuilder.group(
- {
- oldPassword: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
- password: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
- confirmPassword: [''],
- },
- { validator: MustMatch('password', 'confirmPassword') }
- );
this.formEmail = this.formBuilder.group({
email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
});
@@ -88,21 +76,6 @@ export class StructureOptionsModalComponent implements OnInit {
return this.formAddAccount.controls;
}
- // getter for form fields
- get fpass(): { [key: string]: AbstractControl } {
- return this.formPassword.controls;
- }
-
- public showOldPassword(): void {
- this.isShowOldPassword = !this.isShowOldPassword;
- }
- public showPassword(): void {
- this.isShowPassword = !this.isShowPassword;
- }
- public showConfirmPassword(): void {
- this.isShowConfirmPassword = !this.isShowConfirmPassword;
- }
-
public closeModalOpts(functionType: number): void {
switch (functionType) {
case FunctionTypeModalOptions.changeEmail:
@@ -138,14 +111,12 @@ export class StructureOptionsModalComponent implements OnInit {
public closeModalOptsProfile(): void {
this.editModal = null;
this.formEmail.reset();
- this.formPassword.reset();
}
public closeModalOptsProfileAndRefresh(): void {
this.editModal = null;
//this.formAddAccount.reset();
this.formEmail.reset();
- this.formPassword.reset();
this.closedWithRefresh.emit();
}
@@ -178,15 +149,12 @@ export class StructureOptionsModalComponent implements OnInit {
this.authService.logout();
}
- public submitPassword(): void {
+ public submitPassword(passwords: string[]): void {
// stop here if form is invalid
- if (this.formPassword.invalid) {
- return;
- }
- this.profileService.changePassword(this.formPassword.value.password, this.formPassword.value.oldPassword).subscribe(
+ this.passwordError = false;
+ this.profileService.changePassword(passwords[0], passwords[1]).subscribe(
() => {
this.closeModalOptsProfile();
- this.formPassword.reset();
this.passwordError = false;
},
(error) => {