Init Wallet Incomplete 2

Init Wallet Incomplete: Vertical Stepper

src/app/pages/unlock-lnd/unlock-lnd.component.html

@@ -25,32 +25,67 @@
             </form>                              
           </div>
           <ng-template #initBlock>
-            <form fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between" class="mt-2">
+            <div *ngIf="insecureLND && !warnRes">
-              <mat-form-field fxFlex="49" fxLayoutAlign="start">
+              <form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="mt-2">
-                <input matInput type="password" placeholder="Password" name="initWalletPassword" min="8" [(ngModel)]="initWalletPassword" tabindex="6" required>
+                <div fxFlex="65" fxLayoutAlign="start" class="insecure-message">Warning: Your connection is unsecure, it's not safe to generate private keys over this connection.Are you sure you want to proceed?</div>
+                <button mat-raised-button fxFlex="15" color="primary" (click)="proceed=true;warnRes=true" tabindex="4">Proceed</button>
+                <button fxFlex="15" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="5" type="reset" (click)="proceed=false;warnRes=true">Cancel</button>
+              </form>                              
+            </div>
+            <div *ngIf="warnRes && !proceed" fxFlex="100" fxLayoutAlign="start" class="insecure-message mt-2">Please reconfig & restart RTL after securing your LND connction. You can close this window now.</div>
+            <mat-vertical-stepper *ngIf="warnRes && proceed" [linear]="true" #stepper>
+              <mat-step [stepControl]="passwordFormGroup" label="Wallet Password" state="password">
+                <form [formGroup]="passwordFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between">
+                  <mat-form-field fxFlex="44" fxLayoutAlign="start">
+                    <input matInput type="password" placeholder="Password" name="initWalletPassword" formControlName="initWalletPassword" tabindex="6" required>
                     <mat-hint>Enter Wallet Password</mat-hint>
                   </mat-form-field>
-              <mat-form-field fxFlex="49" fxLayoutAlign="start">
+                  <mat-form-field fxFlex="44" fxLayoutAlign="start">
-                <input matInput type="password" placeholder="Confirm Password" name="initWalletConfirmPassword" min="8" [(ngModel)]="initWalletConfirmPassword" tabindex="7" required>
+                    <input matInput type="password" placeholder="Confirm Password" name="initWalletConfirmPassword" formControlName="initWalletConfirmPassword" tabindex="7" required>
                     <mat-hint>Confirm Wallet Password</mat-hint>
                   </mat-form-field>
-              <div fxFlex="18" fxFlex.gt-lg="10" tabindex="8" fxLayoutAlign="start center" class="chkbox-wallet">
+                  <button mat-raised-button color="primary" fxFlex="10" [disabled]="!passwordFormGroup.valid" matStepperNext>Next</button>
-                <mat-checkbox [(ngModel)]="existingCypher" name="existingCypher" (change)="onExistingCypherChange($event)">Existing Cypher</mat-checkbox>
+                  <div *ngIf="passwordFormGroup.controls.initWalletPassword.errors?.minlength && (passwordFormGroup.controls.initWalletPassword.touched || passwordFormGroup.controls.initWalletPassword.dirty)" class="validation-error-message">
+                    <mat-icon class="validation-error-icon red">cancel</mat-icon>Password must be at least 8 characters in length.
                   </div>
-              <mat-form-field fxFlex="80" fxFlex.gt-lg="88" fxLayoutAlign="start">
+                  <div *ngIf="passwordFormGroup.errors?.unmatchedPasswords && (passwordFormGroup.controls.initWalletPassword.touched || passwordFormGroup.controls.initWalletPassword.dirty) && (passwordFormGroup.controls.initWalletConfirmPassword.touched || passwordFormGroup.controls.initWalletConfirmPassword.dirty)" class="validation-error-message">
-                <input matInput type="input" placeholder="Cypher seed" name="cypherSeed" [(ngModel)]="cypherSeed" tabindex="9" required>
+                    <mat-icon class="validation-error-icon red">cancel</mat-icon>Passwords do not match.
-                <mat-hint>Cypher Seed</mat-hint>
+                  </div>
+                </form>
+              </mat-step>
+              <mat-step [stepControl]="cipherFormGroup" label="Cipher" state="cipher">
+                <form [formGroup]="cipherFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between">
+                  <mat-checkbox fxFlex="20" fxFlex.gt-lg="10" tabindex="8" fxLayoutAlign="start center" class="chkbox-wallet" formControlName="existingCipher" name="existingCipher">Existing Cipher</mat-checkbox>
+                  <mat-form-field fxFlex="58" fxFlex.gt-lg="58" fxLayoutAlign="start">
+                    <input matInput type="input" placeholder="Cipher seed" name="cipherSeed" formControlName="cipherSeed" tabindex="9" required>
+                    <mat-hint>Cipher Seed</mat-hint>
                   </mat-form-field>
-              <div fxFlex="18" fxFlex.gt-lg="10" tabindex="10" fxLayoutAlign="start center" class="chkbox-wallet">
+                  <button mat-raised-button color="primary" fxFlex="10" [disabled]="!cipherFormGroup.valid" matStepperNext>Next</button>
-                <mat-checkbox [(ngModel)]="enterPassphrase" name="enterPassphrase" (change)="onEnterPassphraseChange($event)">Enter Passphrase</mat-checkbox>
+                  <button mat-raised-button color="accent" fxFlex="10" matStepperPrevious>Back</button>
-              </div>
+                </form>
-              <mat-form-field fxFlex="80" fxFlex.gt-lg="88" fxLayoutAlign="start">
+              </mat-step>
-                <input matInput type="input" placeholder="Passphrase" name="passphrase" [(ngModel)]="passphrase" tabindex="11" required>
+              <mat-step [stepControl]="passphraseFormGroup" label="Passphrase" state="passphrase">
+                <form [formGroup]="passphraseFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between">
+                  <mat-checkbox fxFlex="20" fxFlex.gt-lg="10" tabindex="10" fxLayoutAlign="start center" class="chkbox-wallet" formControlName="enterPassphrase" name="enterPassphrase">Enter Passphrase</mat-checkbox>
+                  <mat-form-field fxFlex="43" fxFlex.gt-lg="58" fxLayoutAlign="start">
+                    <input matInput type="input" placeholder="Passphrase" name="passphrase" formControlName="passphrase" tabindex="11" required>
                     <mat-hint>Enter Passphrase</mat-hint>
                   </mat-form-field>
-              <button mat-raised-button fxFlex="49" color="primary" [disabled]="initWalletPassword == ''" (click)="onInitWallet()" tabindex="12">Initialize Wallet</button>
+                  <button mat-raised-button fxFlex="15" color="primary" [disabled]="!passphraseFormGroup.valid" (click)="onInitWallet()" tabindex="12">Initialize Wallet</button>
-              <button fxFlex="49" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="13" type="reset" (click)="resetData()">Clear</button>
+                  <button mat-raised-button fxFlex="10" color="accent" matStepperPrevious>Back</button>
+                  <button fxFlex="10" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="13" type="reset" (click)="resetData()">Clear</button>
                 </form>
+              </mat-step>
+              <ng-template matStepperIcon="password">
+                <mat-icon>fingerprint</mat-icon>
+              </ng-template>
+              <ng-template matStepperIcon="cipher">
+                <mat-icon>swap_calls</mat-icon>
+              </ng-template>
+              <ng-template matStepperIcon="passphrase">
+                <mat-icon>waves</mat-icon>
+              </ng-template>
+            </mat-vertical-stepper>
           </ng-template>
         </div>
       </mat-card-content>

src/app/pages/unlock-lnd/unlock-lnd.component.ts

@@ -1,29 +1,87 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
+import { FormBuilder, FormGroup, Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
+import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
+import { MatStepper } from '@angular/material';
 
 import * as RTLActions from '../../shared/store/rtl.actions';
 import * as fromRTLReducer from '../../shared/store/rtl.reducers';
 
+export const matchedPasswords: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
+  const initWalletPassword = control.get('initWalletPassword');
+  const initWalletConfirmPassword = control.get('initWalletConfirmPassword');
+  return initWalletPassword && initWalletConfirmPassword && initWalletPassword.value !== initWalletConfirmPassword.value ? { 'unmatchedPasswords': true } : null;
+};
+
 @Component({
   selector: 'rtl-unlock-lnd',
   templateUrl: './unlock-lnd.component.html',
-  styleUrls: ['./unlock-lnd.component.scss']
+  styleUrls: ['./unlock-lnd.component.scss'],
+  providers: [{
+    provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
+  }]
 })
 export class UnlockLNDComponent implements OnInit, OnDestroy {
+  @ViewChild(MatStepper) stepper: MatStepper;
+  public insecureLND = false;
   walletOperation = 'init';
   walletPassword = '';
-  initWalletPassword = '';
+  passwordFormGroup: FormGroup;
-  existingCypher = false;
+  cipherFormGroup: FormGroup;
-  cypherSeed = '';
+  passphraseFormGroup: FormGroup;
-  enterPassphrase = false;
+  private unsubs = [new Subject(), new Subject(), new Subject()];
-  passphrase = '';
-  private unsub = new Subject();
 
-  constructor(private store: Store<fromRTLReducer.State>) {}
+  constructor(private store: Store<fromRTLReducer.State>, private formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.walletPassword = '';
+    // this.passwordFormGroup = this.formBuilder.group({
+    //   initWalletPassword: ['', [Validators.required, Validators.minLength(8)]],
+    //   initWalletConfirmPassword: ['', [Validators.required, Validators.minLength(8)]]
+    // }, {updateOn: 'blur', validators: matchedPasswords});
+    this.passwordFormGroup = this.formBuilder.group({
+      initWalletPassword: ['', [Validators.required, Validators.minLength(8)]],
+      initWalletConfirmPassword: ['', [Validators.required, Validators.minLength(8)]]
+    }, {validators: matchedPasswords});
+    this.cipherFormGroup = this.formBuilder.group({
+      existingCipher: [false],
+      cipherSeed: [{value: '', disabled: true}]
+    });
+    this.passphraseFormGroup = this.formBuilder.group({
+      enterPassphrase: [false],
+      passphrase: [{value: '', disabled: true}]
+    });
+
+    this.cipherFormGroup.controls.existingCipher.valueChanges.pipe(takeUntil(this.unsubs[0])).subscribe(checked => {
+      if (checked) {
+        this.cipherFormGroup.controls.cipherSeed.setValue('');
+        this.cipherFormGroup.controls.cipherSeed.enable();
+      } else {
+        this.cipherFormGroup.controls.cipherSeed.setValue('');
+        this.cipherFormGroup.controls.cipherSeed.disable();
+      }
+    });
+
+    this.passphraseFormGroup.controls.enterPassphrase.valueChanges.pipe(takeUntil(this.unsubs[1])).subscribe(checked => {
+      if (checked) {
+        this.passphraseFormGroup.controls.passphrase.setValue('');
+        this.passphraseFormGroup.controls.passphrase.enable();
+      } else {
+        this.passphraseFormGroup.controls.passphrase.setValue('');
+        this.passphraseFormGroup.controls.passphrase.disable();
+      }
+    });
+
+    this.store.select('rtlRoot')
+    .pipe(takeUntil(this.unsubs[2]))
+    .subscribe((rtlStore: fromRTLReducer.State) => {
+      if (rtlStore.selNode.settings.lndServerUrl) {
+        this.insecureLND = rtlStore.selNode.settings.lndServerUrl.includes('https://');
+      }
+    });
+
   }
 
   onOperateWallet() {
@@ -36,27 +94,17 @@ export class UnlockLNDComponent implements OnInit, OnDestroy {
     // this.store.dispatch(new RTLActions.OperateWallet({operation: 'init', pwd: this.initWalletPassword}));
   }
 
-  onExistingCypherChange(event: any) {
-
-  }
-
-  onEnterPassphraseChange(event: any) {
-
-  }
-
   resetData() {
     this.walletOperation = 'init';
     this.walletPassword = '';
-    this.initWalletPassword = '';
+    this.stepper.reset();
-    this.existingCypher = false;
-    this.cypherSeed = '';
-    this.enterPassphrase = false;
-    this.passphrase = '';
   }
 
   ngOnDestroy() {
-    this.unsub.next();
+    this.unsubs.forEach(unsub => {
-    this.unsub.complete();
+      unsub.next();
+      unsub.complete();
+    });
   }
 
 }

src/app/shared/models/RTLconfig.ts

@@ -13,7 +13,9 @@ export class Settings {
     public menuType: string,
     public theme: string,
     public satsToBTC: boolean,
-    public bitcoindConfigPath?: string
+    public bitcoindConfigPath?: string,
+    public enableLogging?: boolean,
+    public lndServerUrl?: string
   ) { }
 }
 

src/app/shared/shared.module.ts

@@ -6,7 +6,7 @@ import {
     MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatDialogModule, MatExpansionModule, MatGridListModule, MatDatepickerModule,
     MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatTreeModule, MatNativeDateModule,
     MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSortModule, MatTableModule, MatToolbarModule, MatTooltipModule, MAT_DIALOG_DEFAULT_OPTIONS, MatBadgeModule,
-    MatPaginatorModule
+    MatPaginatorModule, MatStepperModule
 } from '@angular/material';
 import { QRCodeModule } from 'angularx-qrcode';
 import { AlertMessageComponent } from './components/alert-message/alert-message.component';
@@ -50,6 +50,7 @@ import { RemoveLeadingZerosPipe } from './pipes/remove-leading-zero.pipe';
         MatTooltipModule,
         MatBadgeModule,
         MatPaginatorModule,
+        MatStepperModule,
         QRCodeModule
     ],
     exports: [
@@ -80,6 +81,7 @@ import { RemoveLeadingZerosPipe } from './pipes/remove-leading-zero.pipe';
         MatTooltipModule,
         MatBadgeModule,
         MatPaginatorModule,
+        MatStepperModule,
         AlertMessageComponent,
         ConfirmationMessageComponent,
         SpinnerDialogComponent,

src/app/shared/theme/styles/change-theme.scss

@@ -73,4 +73,27 @@
 
   .material-icons.accent { color: mat-color($accent); }
 
+  .validation-error-message {
+    position: relative;
+    margin-top: 0.5rem;
+    width:100%;
+    color: mat-color($accent);
+  }
+
+  .validation-error-icon {
+    font-size: 16px;
+    position: relative;
+    top: 2px;
+    left: 4px;
+  }
+
+  .insecure-message {
+    width:100%;
+    color: mat-color($accent);
+    font-size: 120%;
+  }
+
+  .mat-vertical-content {
+    padding: 0 4px 0 12px;
+  }
 }

src/app/shared/theme/styles/root.scss

@@ -660,6 +660,10 @@ html, body {
   font-size: 30px;
 }
 
+.size-16 {
+  font-size: 16px;
+}
+
 .mt-minus-5 {
   position: relative;
   margin-top: -5px;