mirror of
https://github.com/Ride-The-Lightning/RTL
synced 2024-11-11 13:10:41 +00:00
Init Wallet Incomplete 2
Init Wallet Incomplete: Vertical Stepper
This commit is contained in:
ShahanaFarooqui
parent
000260fd58
commit
2216acebd4
@ -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">
|
||||
<mat-form-field fxFlex="49" fxLayoutAlign="start">
|
||||
<input matInput type="password" placeholder="Password" name="initWalletPassword" min="8" [(ngModel)]="initWalletPassword" tabindex="6" required>
|
||||
<div *ngIf="insecureLND && !warnRes">
|
||||
<form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="mt-2">
|
||||
<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">
|
||||
<input matInput type="password" placeholder="Confirm Password" name="initWalletConfirmPassword" min="8" [(ngModel)]="initWalletConfirmPassword" tabindex="7" required>
|
||||
<mat-form-field fxFlex="44" fxLayoutAlign="start">
|
||||
<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">
|
||||
<mat-checkbox [(ngModel)]="existingCypher" name="existingCypher" (change)="onExistingCypherChange($event)">Existing Cypher</mat-checkbox>
|
||||
<button mat-raised-button color="primary" fxFlex="10" [disabled]="!passwordFormGroup.valid" matStepperNext>Next</button>
|
||||
<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">
|
||||
<input matInput type="input" placeholder="Cypher seed" name="cypherSeed" [(ngModel)]="cypherSeed" tabindex="9" required>
|
||||
<mat-hint>Cypher Seed</mat-hint>
|
||||
<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">
|
||||
<mat-icon class="validation-error-icon red">cancel</mat-icon>Passwords do not match.
|
||||
</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">
|
||||
<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>
|
||||
<button mat-raised-button color="primary" fxFlex="10" [disabled]="!cipherFormGroup.valid" matStepperNext>Next</button>
|
||||
<button mat-raised-button color="accent" fxFlex="10" matStepperPrevious>Back</button>
|
||||
</form>
|
||||
</mat-step>
|
||||
<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 fxFlex="49" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="13" type="reset" (click)="resetData()">Clear</button>
|
||||
<button mat-raised-button fxFlex="15" color="primary" [disabled]="!passphraseFormGroup.valid" (click)="onInitWallet()" tabindex="12">Initialize Wallet</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>
|
||||
|
||||
@ -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 = '';
|
||||
existingCypher = false;
|
||||
cypherSeed = '';
|
||||
enterPassphrase = false;
|
||||
passphrase = '';
|
||||
private unsub = new Subject();
|
||||
passwordFormGroup: FormGroup;
|
||||
cipherFormGroup: FormGroup;
|
||||
passphraseFormGroup: FormGroup;
|
||||
private unsubs = [new Subject(), new Subject(), 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.existingCypher = false;
|
||||
this.cypherSeed = '';
|
||||
this.enterPassphrase = false;
|
||||
this.passphrase = '';
|
||||
this.stepper.reset();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.unsub.next();
|
||||
this.unsub.complete();
|
||||
this.unsubs.forEach(unsub => {
|
||||
unsub.next();
|
||||
unsub.complete();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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
|
||||
) { }
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -660,6 +660,10 @@ html, body {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.size-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mt-minus-5 {
|
||||
position: relative;
|
||||
margin-top: -5px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user