refactor passwordcomponent to show password for both text field using…

src/app/modals/createwallet/createwallet.component.html

@@ -131,7 +131,9 @@
           #passwordElement
           label="Recovery Password (optional)"
           [emitPassword]="true"
+          [showPass]="toggleShowPass"
           (passwordEmitter)="passwordFromEmitter($event)"
+          (showPasswordToggle)="showPasswordToggle($event)"
           [showStakeOnly]="false">
         </app-password>
       </div>
@@ -141,6 +143,8 @@
             #passwordElementVerify
             label="Verify Password"
             [emitPassword]="true"
+            [showPass]="toggleShowPass"
+            [showPassword]="true"
             (passwordEmitter)="passwordFromEmitter($event, true)"
             [showStakeOnly]="false">
           </app-password>

src/app/modals/createwallet/createwallet.component.ts

@@ -34,6 +34,7 @@ export class CreateWalletComponent {
   password: string;
   passwordVerify: string;
   words: string[];
+  toggleShowPass: boolean = false;
 
   @ViewChild('passphraseComponent') passphraseComponent: ComponentRef<PassphraseComponent>;
   @ViewChild('passwordElement') passwordElement: PasswordComponent;
@@ -233,6 +234,11 @@ export class CreateWalletComponent {
     }
   }
 
+  /** Triggered when showPassword is emitted from PasswordComponent */
+  showPasswordToggle(show: boolean) {
+    this.toggleShowPass = show;
+  }
+
   /** verify if passwords match */
   verifyPasswords() {
     if (!this.validating) {

src/app/modals/shared/password/password.component.html

@@ -17,8 +17,8 @@
             placeholder="{{ label }}" />
   </mat-form-field>
 
-  <span *ngIf="!isDisabled || isDisabled && !!password" class="show-password">
-    <mat-checkbox type="checkbox" name="showpass" value="password" [(ngModel)]="showPass">Show password</mat-checkbox>
+  <span *ngIf="!isDisabled && !showPassword || isDisabled && !!password" class="show-password">
+    <mat-checkbox type="checkbox" name="showpass" value="password" [(ngModel)]="showPass" tabindex="-1" (change)="toggle()">Show password</mat-checkbox>
   </span>
 
   <span *ngIf="showStakeOnly" class="stake-only">

src/app/modals/shared/password/password.component.ts

@@ -18,22 +18,23 @@ export class PasswordComponent {
   // UI State
   password: string;
   stakeOnly: boolean = false;
-  showPass: boolean = false;
 
+  @Input() showPass: boolean = false;
   @Input() label: string = 'Your Wallet password';
   @Input() buttonText: string;
   @Input() unlockTimeout: number = 60;
   @Input() showStakeOnly: boolean = true;
   @Input() isDisabled: boolean = false;
   @Input() isButtonDisable: boolean = false;
+  @Input() showPassword: boolean = false;
 
   /**
     * The password emitter will send over an object with the password and stakingOnly info.
     * This is useful as a building block in the initial setup, where we want to have the actual value of the password.
     */
   @Input() emitPassword: boolean = false;
   @Output() passwordEmitter: EventEmitter<IPassword> = new EventEmitter<IPassword>();
-
+  @Output() showPasswordToggle: EventEmitter<boolean> = new EventEmitter<boolean>();
   /**
     * The unlock emitter will automatically unlock the wallet for a given time and emit the JSON result
     * of 'getwalletinfo'. This can be used to automatically request an unlock and instantly do a certain things:
@@ -149,6 +150,11 @@ export class PasswordComponent {
     this.password = '';
   }
 
+  // emit showpassword change
+  toggle(): void {
+    this.showPasswordToggle.emit(this.showPass);
+  }
+
   // capture the enter button
   @HostListener('window:keydown', ['$event'])
     keyDownEvent(event: any) {