Init Wallet Incomplete 1

Init Wallet Incomplete 1

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

@@ -3,18 +3,56 @@
     <mat-card>
       <mat-card-header>
         <mat-card-subtitle>
-          <h2>Unlock LND Wallet</h2>
+          <h2>Unlock/Initialize Wallet</h2>
         </mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-        <form fxLayout="row" fxFlex="70" fxLayoutAlign="space-between">
-          <mat-form-field fxFlex="65" fxLayoutAlign="start">
-            <input matInput type="password" placeholder="Password" name="walletPassword" [(ngModel)]="walletPassword" tabindex="1" required>
-            <mat-hint>Enter LND Wallet Password</mat-hint>
-          </mat-form-field>
-          <button mat-raised-button fxFlex="15" color="primary" [disabled]="walletPassword == ''" (click)="onOperateWallet('unlock')" tabindex="2">Unlock Wallet</button>
-          <button fxFlex="15" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="3" type="reset" (click)="resetData()">Clear</button>
-        </form>                              
+        <div fxLayout="column" fxFlex="100" fxLayoutAlign="start">
+          <div fxLayout="row" fxFlex.gt-sm="100"><div fxLayout="column" fxFlex="40" fxFlex.lt-sm="100">
+            <mat-radio-group [(ngModel)]="walletOperation" aria-label="Select an option" fxLayoutAlign="space-between">
+              <mat-radio-button value="unlock" tabindex="1">Unlock</mat-radio-button>
+              <mat-radio-button value="init" tabindex="2">Initialize</mat-radio-button>
+            </mat-radio-group>
+          </div></div>
+          <div *ngIf="walletOperation === 'unlock'; else initBlock">
+            <form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="mt-2">
+              <mat-form-field fxFlex="65" fxLayoutAlign="start">
+                <input matInput type="password" placeholder="Password" name="walletPassword" [(ngModel)]="walletPassword" tabindex="3" required>
+                <mat-hint>Enter Wallet Password</mat-hint>
+              </mat-form-field>
+              <button mat-raised-button fxFlex="15" color="primary" [disabled]="walletPassword == ''" (click)="onOperateWallet()" tabindex="4">Unlock Wallet</button>
+              <button fxFlex="15" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="5" type="reset" (click)="resetData()">Clear</button>
+            </form>                              
+          </div>
+          <ng-template #initBlock>
+            <form fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between" class="mt-2">
+              <mat-form-field fxFlex="49" fxLayoutAlign="start">
+                <input matInput type="password" placeholder="Password" name="initWalletPassword" min="8" [(ngModel)]="initWalletPassword" tabindex="6" required>
+                <mat-hint>Enter Wallet Password</mat-hint>
+              </mat-form-field>
+              <mat-form-field fxFlex="49" fxLayoutAlign="start">
+                <input matInput type="password" placeholder="Confirm Password" name="initWalletConfirmPassword" min="8" [(ngModel)]="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">
+                <mat-checkbox [(ngModel)]="existingCypher" name="existingCypher" (change)="onExistingCypherChange($event)">Existing Cypher</mat-checkbox>
+              </div>
+              <mat-form-field fxFlex="80" fxFlex.gt-lg="88" fxLayoutAlign="start">
+                <input matInput type="input" placeholder="Cypher seed" name="cypherSeed" [(ngModel)]="cypherSeed" tabindex="9" required>
+                <mat-hint>Cypher Seed</mat-hint>
+              </mat-form-field>
+              <div fxFlex="18" fxFlex.gt-lg="10" tabindex="10" fxLayoutAlign="start center" class="chkbox-wallet">
+                <mat-checkbox [(ngModel)]="enterPassphrase" name="enterPassphrase" (change)="onEnterPassphraseChange($event)">Enter Passphrase</mat-checkbox>
+              </div>
+              <mat-form-field fxFlex="80" fxFlex.gt-lg="88" fxLayoutAlign="start">
+                <input matInput type="input" placeholder="Passphrase" name="passphrase" [(ngModel)]="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 fxFlex="49" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="13" type="reset" (click)="resetData()">Clear</button>
+            </form>                              
+          </ng-template>
+        </div>
       </mat-card-content>
     </mat-card>
   </div>

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

@@ -0,0 +1,3 @@
+.chkbox-wallet:focus {
+    outline: none !important;
+}

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

@@ -1,11 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 
-import { LoggerService } from '../../shared/services/logger.service';
-
 import * as RTLActions from '../../shared/store/rtl.actions';
 import * as fromRTLReducer from '../../shared/store/rtl.reducers';
 
@@ -15,7 +11,13 @@ import * as fromRTLReducer from '../../shared/store/rtl.reducers';
   styleUrls: ['./unlock-lnd.component.scss']
 })
 export class UnlockLNDComponent implements OnInit, OnDestroy {
+  walletOperation = 'init';
   walletPassword = '';
+  initWalletPassword = '';
+  existingCypher = false;
+  cypherSeed = '';
+  enterPassphrase = false;
+  passphrase = '';
   private unsub = new Subject();
 
   constructor(private store: Store<fromRTLReducer.State>) {}
@@ -24,13 +26,32 @@ export class UnlockLNDComponent implements OnInit, OnDestroy {
     this.walletPassword = '';
   }
 
-  onOperateWallet(operation: string) {
+  onOperateWallet() {
     this.store.dispatch(new RTLActions.OpenSpinner('Unlocking...'));
-    this.store.dispatch(new RTLActions.OperateWallet({operation: operation, pwd: this.walletPassword}));
+    this.store.dispatch(new RTLActions.OperateWallet({operation: 'unlock', pwd: this.walletPassword}));
+  }
+
+  onInitWallet() {
+    this.store.dispatch(new RTLActions.OpenSpinner('Initializing...'));
+    // 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.existingCypher = false;
+    this.cypherSeed = '';
+    this.enterPassphrase = false;
+    this.passphrase = '';
   }
 
   ngOnDestroy() {

src/app/shared/store/rtl.effects.ts

@@ -127,7 +127,10 @@ export class RTLEffects implements OnDestroy {
             sessionStorage.removeItem('lndUnlocked');
             this.logger.info('Redirecting to Unlock');
             this.router.navigate(['/unlocklnd']);
-            return of();
+            return {
+              type: RTLActions.SET_INFO,
+              payload: {}
+            };
           } else {
             sessionStorage.setItem('lndUnlocked', 'true');
             return {