Improving validator key validation (#237)

* wip fixing validation * fixing status change: * fixing disabled button * removing console logs
prysmaticlabs · Oct 18, 2022 · bb453e0 · bb453e0
1 parent bd1dc76
commit bb453e0
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 25 deletions.
diff --git a/src/app/modules/onboarding/pages/hd-wallet-wizard/hd-wallet-wizard.component.html b/src/app/modules/onboarding/pages/hd-wallet-wizard/hd-wallet-wizard.component.html
@@ -53,7 +53,7 @@
                       color="primary"
                       mat-raised-button
                       (click)="createWallet($event)"
-                      [disabled]="walletPasswordFormGroup.invalid">
+                      [disabled]="!walletPasswordFormGroup.valid">
                       Create Wallet
                     </button>
                   </span>

diff --git a/src/app/modules/onboarding/pages/nonhd-wallet-wizard/nonhd-wallet-wizard.component.html b/src/app/modules/onboarding/pages/nonhd-wallet-wizard/nonhd-wallet-wizard.component.html
@@ -18,7 +18,7 @@
               <app-import-protection #slashingProtection></app-import-protection>
               <div class="mt-6">
                 <button color="accent" mat-raised-button (click)="resetOnboarding()">Back to Wallets</button>
-                <span class="ml-4"><button color="primary" mat-raised-button (click)="nextStep($event, states.UnlockAccounts)" [disabled]="keystoresFormGroup.invalid || slashingProtection.invalid">Continue</button></span>
+                <span class="ml-4"><button color="primary" mat-raised-button (click)="nextStep($event, states.UnlockAccounts)" [disabled]="!keystoresFormGroup.valid || slashingProtection.invalid">Continue</button></span>
               </div>
             </mat-step>
             <mat-step [stepControl]="walletPasswordFormGroup" label="Wallet">

diff --git a/src/app/modules/shared/components/import-accounts-form/import-accounts-form.component.ts b/src/app/modules/shared/components/import-accounts-form/import-accounts-form.component.ts
@@ -38,22 +38,47 @@ export class ImportAccountsFormComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.uniqueToggleFormControl.valueChanges.subscribe((value) => {
+    this.uniqueToggleFormControl.valueChanges.subscribe((value:boolean) => {
       this.keystorePasswordDefaultFormGroup.reset(this.keystorePasswordDefaultFormGroupInit);
+      if (value == true) {
+        this.keystoresImported.controls.forEach(fg => {
+          fg.addAsyncValidators([this.keystoreValidator.correctPassword()])
+          fg.updateValueAndValidity()
+
+        });
+        this.keystorePasswordDefaultFormGroup.clearAsyncValidators();
+        this.keystorePasswordDefaultFormGroup.updateValueAndValidity();
+      } else {
+        let keystores: string[] = this.keystoresImported.controls.map((fg) => {
+          fg.clearAsyncValidators()
+          fg.updateValueAndValidity();
+          return JSON.stringify(fg.get('keystore')?.value)
+        });
+        this.keystorePasswordDefaultFormGroup.addAsyncValidators([this.keystoreValidator.correctPassword(keystores)]);
+        this.keystorePasswordDefaultFormGroup.updateValueAndValidity();
+      }
       this.keystoresImported.controls.forEach(fg => {
         fg.get('keystorePassword')?.markAsPristine();
       });
+
       // Angular doesn't detect changes fast enough after so we need to check for changes again...
       this.changeDetectorRef.detectChanges();
     });
-    this.keystorePasswordDefaultFormGroup.get('keystorePassword')?.valueChanges.pipe(
-      debounceTime(250),
-    ).subscribe(password =>{
-      this.keystoresImported.controls.forEach(fg => {
-        fg.get('keystorePassword')?.setValue(password);
-        fg.get('keystorePassword')?.updateValueAndValidity();
-        fg.get('keystorePassword')?.markAsPristine();
-      });
+
+    this.keystorePasswordDefaultFormGroup.get('keystorePassword')?.statusChanges.subscribe(status =>{
+      if (status === "VALID"){
+        this.keystoresImported.controls.forEach(fg => {
+          fg.get('keystorePassword')?.setValue(this.keystorePasswordDefaultFormGroup.get('keystorePassword')?.value);
+          fg.get('keystorePassword')?.updateValueAndValidity();
+          fg.get('keystorePassword')?.markAsPristine();
+        });
+      } else {
+        this.keystoresImported.controls.forEach(fg => {
+          fg.get('keystorePassword')?.setValue("");
+          fg.get('keystorePassword')?.updateValueAndValidity();
+          fg.get('keystorePassword')?.markAsPristine();
+        });
+      }
     });
   }
 
@@ -149,21 +174,22 @@ export class ImportAccountsFormComponent implements OnInit {
       fileName: [fileName],
       keystore: [jsonFile],
       keystorePassword: ['', [Validators.required,  Validators.minLength(8)]],
-    },{
-      asyncValidators: [this.keystoreValidator.correctPassword()]
     });
+    if (this.uniqueToggleFormControl.value === true) {
+      keystoresFormGroup.addAsyncValidators([this.keystoreValidator.correctPassword()]);
+      this.keystorePasswordDefaultFormGroup.updateValueAndValidity();
+    }
 
     this.keystoresImported?.push(keystoresFormGroup);
-
-    // updates the keystorePasswordDefaultFormGroup based on each keystore
-    this.keystoresImported.controls.forEach((fg) => {
-      fg.get('keystorePassword')?.statusChanges.subscribe(status =>{
-        if(status === 'INVALID'){
-          this.keystorePasswordDefaultFormGroup.get('keystorePassword')?.setErrors( fg.get('keystorePassword')?.errors || {});
-        }
-      });
-    })
-
+    let keystores: string[] = this.keystoresImported.controls.map((fg) => {
+      return JSON.stringify(fg.get('keystore')?.value)
+    });
+    if (this.uniqueToggleFormControl.value === false) {
+      this.keystorePasswordDefaultFormGroup.clearAsyncValidators();
+      this.keystorePasswordDefaultFormGroup.addAsyncValidators([this.keystoreValidator.correctPassword(keystores)]);
+      this.keystorePasswordDefaultFormGroup.updateValueAndValidity();
+    } 
+
   }
 
   private isKeystoreFileValid(jsonFile: object): boolean {

diff --git a/src/app/modules/shared/validators/keystore.validator.ts b/src/app/modules/shared/validators/keystore.validator.ts
@@ -24,7 +24,7 @@ export class KeystoreValidator {
     return null;
   }
 
-  correctPassword(): AsyncValidatorFn {
+  correctPassword(keystores?:string[]): AsyncValidatorFn {
     return (
       control: AbstractControl
     ): Observable<{ [key: string]: any } | null> => {
@@ -39,7 +39,7 @@ export class KeystoreValidator {
             return of(null);
           }
           const req: ValidateKeystoresRequest = {
-            keystores: [JSON.stringify(keystoreFG.keystore)],
+            keystores: keystores ?? [JSON.stringify(keystoreFG.keystore)],
             keystores_password: keystoresPassword,
           };
           return this.walletService.validateKeystores(req).pipe(