correction validateur password confirmation

PnX-SI · Sep 18, 2019 · 598dcaa · 598dcaa
1 parent 392d131
commit 598dcaa
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 20 deletions.
diff --git a/frontend/src/app/components/new-password/new-password.component.html b/frontend/src/app/components/new-password/new-password.component.html
@@ -39,12 +39,11 @@
                         <small *ngIf="form.get('password_confirmation').hasError('required') && form.get('password_confirmation').touched">
                           Ce champ est nécessaire
                         </small>
-                        <small *ngIf="form.get('password_confirmation').hasError('similarError') && form.get('password_confirmation').touched">
+                        <small *ngIf="form.hasError('similarError') && !form.get('password_confirmation').pristine">
                           Erreur de confirmation
                         </small>
                       </div>
-
-                      <button class="btn btn-lg btn-success btn-block text-uppercase" type="submit">Modifier</button>
+                      <button [disabled]="form.invalid" class="btn btn-lg btn-success btn-block text-uppercase" type="submit">Modifier</button>
                     </form>
 
                   </div>

diff --git a/frontend/src/app/components/new-password/new-password.component.ts b/frontend/src/app/components/new-password/new-password.component.ts
@@ -37,8 +37,9 @@ export class NewPasswordComponent implements OnInit {
   setForm() {
     this.form = this.fb.group({
       password: ['', [Validators.required]],
-      password_confirmation: ['', [Validators.required, similarValidator('password')]]
+      password_confirmation: ['', [Validators.required]]
     });
+    this.form.setValidators([similarValidator('password', 'password_confirmation')]);
   }
 
   submit() {

diff --git a/frontend/src/app/components/sign-up/sign-up.component.html b/frontend/src/app/components/sign-up/sign-up.component.html
@@ -108,7 +108,7 @@ <h5> Compte </h5>
                   <small *ngIf="form.get('password_confirmation').hasError('required') && form.get('password_confirmation').touched">
                     Ce champ est nécessaire
                   </small>
-                  <small *ngIf="form.get('password_confirmation').hasError('similarError') && form.get('password_confirmation').touched">
+                  <small *ngIf="form.hasError('similarError') && form.get('password_confirmation').touched">
                     Erreur de confirmation
                   </small>
                 </div>
@@ -156,6 +156,7 @@ <h5> Informations complémentaires </h5>
                 </button>
               </div>
 
+
             </form>
           </div>
         </div>

diff --git a/frontend/src/app/components/sign-up/sign-up.component.ts b/frontend/src/app/components/sign-up/sign-up.component.ts
@@ -44,11 +44,12 @@ export class SignUpComponent implements OnInit {
         '',
         [Validators.pattern('^[a-z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}$'), Validators.required]
       ],
-      password: ['', Validators.required],
-      password_confirmation: ['', [Validators.required, similarValidator('password')]],
+      password: ['', [Validators.required]],
+      password_confirmation: ['', [Validators.required]],
       remarques: ['', null],
       organisme: ['', null]
     });
+    this.form.setValidators([similarValidator('password', 'password_confirmation')]);
     this.dynamicFormGroup = this.fb.group({});
   }
 

diff --git a/frontend/src/app/services/validators/validators.ts b/frontend/src/app/services/validators/validators.ts
@@ -1,16 +1,13 @@
-import { ValidatorFn, AbstractControl } from '@angular/forms';
+import { ValidatorFn, AbstractControl, FormGroup } from '@angular/forms';
 
-export function similarValidator(compared: string): ValidatorFn {
-  return (control: AbstractControl): { [key: string]: any } => {
-    const valeur = control.value;
-    const group = control.parent;
-    let valid = false;
-    if (group) {
-      const comparedValue = group.controls[compared].value;
-      valid = comparedValue == valeur ? true : false;
+export function similarValidator(pass: string, passConfirm: string): ValidatorFn {
+  return (control: FormGroup): { [key: string]: any } => {
+    const passControl = control.get(pass);
+    const confirPassControl = control.get(passConfirm);
+    if (passControl && confirPassControl && passControl.value === confirPassControl.value) {
+      return null;
     }
-
-    return valid ? null : { similarError: { valeur } };
+    return { similarError: true };
   };
 }
 

diff --git a/frontend/src/app/userModule/password/password.component.html b/frontend/src/app/userModule/password/password.component.html
@@ -45,7 +45,7 @@ <h3 class="underlined main-color"> Changement de mot de passe </h3>
           <small *ngIf="form.get('password_confirmation').hasError('required') && form.get('password_confirmation').touched">
             Ce champ est nécessaire
           </small>
-          <small *ngIf="form.get('password_confirmation').hasError('similarError') && form.get('password_confirmation').touched">
+          <small *ngIf="form.hasError('similarError') && !form.get('password_confirmation').pristine">
             Erreur de confirmation
           </small>
         </div>

diff --git a/frontend/src/app/userModule/password/password.component.ts b/frontend/src/app/userModule/password/password.component.ts
@@ -28,8 +28,9 @@ export class PasswordComponent implements OnInit {
     this.form = this.fb.group({
       init_password: ['', Validators.required],
       password: ['', Validators.required],
-      password_confirmation: ['', [Validators.required, similarValidator('password')]]
+      password_confirmation: ['', Validators.required]
     });
+    this.form.setValidators([similarValidator('password', 'password_confirmation')]);
   }
 
   save() {