mirror of https://github.com/BTCPrivate/copay.git
add form validations
This commit is contained in:
parent
3041f752fa
commit
c85248b234
|
@ -5,10 +5,10 @@
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<form (ngSubmit)="create()">
|
<form [formGroup]="createForm" (ngSubmit)="create()">
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Wallet name</ion-label>
|
<ion-label stacked>Wallet name</ion-label>
|
||||||
<ion-input type="text" [(ngModel)]="formData.walletName" name="walletName"></ion-input>
|
<ion-input type="text" [(ngModel)]="formData.walletName" formControlName="walletName" required></ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item-divider color="light"></ion-item-divider>
|
<ion-item-divider color="light"></ion-item-divider>
|
||||||
|
@ -20,31 +20,31 @@
|
||||||
|
|
||||||
<div *ngIf="showAdvOpts">
|
<div *ngIf="showAdvOpts">
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Wallet service URL</ion-label>
|
<ion-label stacked>Wallet service URL</ion-label>
|
||||||
<ion-input type="text" [(ngModel)]="formData.bwsURL" name="bwsURL"></ion-input>
|
<ion-input type="text" [(ngModel)]="formData.bwsURL" formControlName="bwsURL"></ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Wallet key</ion-label>
|
<ion-label stacked>Wallet key</ion-label>
|
||||||
<ion-select [(ngModel)]="formData.selectedSeed.id" name="selectedSeed" (ionChange)="seedOptionsChange(formData.selectedSeed.id)">
|
<ion-select [(ngModel)]="formData.selectedSeed.id" formControlName="selectedSeed" (ionChange)="seedOptionsChange(formData.selectedSeed.id)">
|
||||||
<ion-option *ngFor="let opt of seedOptions" [value]="opt.id">{{opt.label}}</ion-option>
|
<ion-option *ngFor="let opt of seedOptions" [value]="opt.id">{{opt.label}}</ion-option>
|
||||||
</ion-select>
|
</ion-select>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Add a password</ion-label>
|
<ion-label stacked>Add a password</ion-label>
|
||||||
<ion-toggle [(ngModel)]="formData.addPassword" name="addPassword"></ion-toggle>
|
<ion-toggle [(ngModel)]="formData.addPassword" formControlName="addPassword" (ionChange)="resetPasswordFields()"></ion-toggle>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<div *ngIf="formData.addPassword">
|
<div *ngIf="formData.addPassword">
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Password</ion-label>
|
<ion-label stacked>Password</ion-label>
|
||||||
<ion-input type="password" [(ngModel)]="formData.passphrase" name="passphrase"></ion-input>
|
<ion-input type="password" [(ngModel)]="formData.password" formControlName="password"></ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Repeat password</ion-label>
|
<ion-label stacked>Confirm password</ion-label>
|
||||||
<ion-input type="password" [(ngModel)]="formData.repeatPassphrase" name="repeatPassphrase"></ion-input>
|
<ion-input type="password" [(ngModel)]="formData.confirmPassword" formControlName="confirmPassword"></ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
|
@ -52,18 +52,23 @@
|
||||||
<strong translate>This password cannot be recovered. If the password is lost, there is no way you could recover your funds.</strong>
|
<strong translate>This password cannot be recovered. If the password is lost, there is no way you could recover your funds.</strong>
|
||||||
</div>
|
</div>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-label stacked>I have written it down</ion-label>
|
||||||
|
<ion-checkbox [(ngModel)]="formData.writtenDown" formControlName="writtenDown" checked="false"></ion-checkbox>
|
||||||
|
</ion-item>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Testnet</ion-label>
|
<ion-label stacked>Testnet</ion-label>
|
||||||
<ion-toggle [(ngModel)]="formData.testnet" name="testnet"></ion-toggle>
|
<ion-toggle [(ngModel)]="formData.testnet" formControlName="testnet"></ion-toggle>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Single address</ion-label>
|
<ion-label stacked>Single address</ion-label>
|
||||||
<ion-toggle [(ngModel)]="formData.singleAddress" name="singleAddress"></ion-toggle>
|
<ion-toggle [(ngModel)]="formData.singleAddress" formControlName="singleAddress"></ion-toggle>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</div>
|
</div>
|
||||||
<button ion-button type="submit" block>Add Todo</button>
|
<button ion-button block type="submit" [disabled]="!createForm.valid || (formData.addPassword && !formData.writtenDown)">Create wallet</button>
|
||||||
</form>
|
</form>
|
||||||
</ion-content>
|
</ion-content>
|
|
@ -1,28 +1,68 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { NavController } from 'ionic-angular';
|
import { NavController } from 'ionic-angular';
|
||||||
|
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
|
||||||
|
|
||||||
import { AppProvider } from '../../../providers/app/app';
|
import { AppProvider } from '../../../providers/app/app';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'page-single-wallet',
|
selector: 'page-single-wallet',
|
||||||
templateUrl: 'single-wallet.html'
|
templateUrl: 'single-wallet.html'
|
||||||
})
|
})
|
||||||
export class SingleWalletPage {
|
export class SingleWalletPage implements OnInit{
|
||||||
public formData: any;
|
public formData: any;
|
||||||
public showAdvOpts: boolean;
|
public showAdvOpts: boolean;
|
||||||
public seedOptions: any;
|
public seedOptions: any;
|
||||||
|
|
||||||
private appName: string;
|
private appName: string;
|
||||||
|
private createForm: FormGroup;
|
||||||
|
|
||||||
constructor(public navCtrl: NavController, private app: AppProvider) {
|
constructor(
|
||||||
|
public navCtrl: NavController,
|
||||||
|
private app: AppProvider,
|
||||||
|
private fb: FormBuilder
|
||||||
|
) {
|
||||||
this.showAdvOpts = false;
|
this.showAdvOpts = false;
|
||||||
this.formData = {
|
this.formData = {
|
||||||
|
walletName: null,
|
||||||
bwsURL: 'https://bws.bitpay.com/bws/api',
|
bwsURL: 'https://bws.bitpay.com/bws/api',
|
||||||
addPassword: false,
|
addPassword: false,
|
||||||
passphrase: null,
|
password: null,
|
||||||
repeatPassphrase: null,
|
confirmPassword: null,
|
||||||
|
writtenDown: false,
|
||||||
testnet: false,
|
testnet: false,
|
||||||
singleAddress: false,
|
singleAddress: false,
|
||||||
};
|
};
|
||||||
|
this.appName = this.app.info.name;
|
||||||
|
this.updateSeedSourceSelect(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.createForm = this.fb.group({
|
||||||
|
walletName: ['', Validators.required],
|
||||||
|
bwsURL: [''],
|
||||||
|
selectedSeed: [''],
|
||||||
|
addPassword: [''],
|
||||||
|
password: [''],
|
||||||
|
confirmPassword: [''],
|
||||||
|
writtenDown: ['false'],
|
||||||
|
testnet: [''],
|
||||||
|
singleAddress: [''],
|
||||||
|
});
|
||||||
|
|
||||||
|
this.createForm.get('addPassword').valueChanges.subscribe((addPassword: boolean) => {
|
||||||
|
if (addPassword) {
|
||||||
|
this.createForm.get('password').setValidators([Validators.required]);
|
||||||
|
this.createForm.get('confirmPassword').setValidators([Validators.required]);
|
||||||
|
}else {
|
||||||
|
this.createForm.get('password').clearValidators();
|
||||||
|
this.createForm.get('confirmPassword').clearValidators();
|
||||||
|
}
|
||||||
|
this.createForm.get('password').updateValueAndValidity();
|
||||||
|
this.createForm.get('confirmPassword').updateValueAndValidity();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSeedSourceSelect(n: number) {
|
||||||
this.seedOptions = [{
|
this.seedOptions = [{
|
||||||
id: 'new',
|
id: 'new',
|
||||||
label: 'Random',
|
label: 'Random',
|
||||||
|
@ -32,28 +72,23 @@ export class SingleWalletPage {
|
||||||
label: 'Specify Recovery Phrase...',
|
label: 'Specify Recovery Phrase...',
|
||||||
supportsTestnet: false
|
supportsTestnet: false
|
||||||
}];
|
}];
|
||||||
this.appName = this.app.info.name;
|
|
||||||
this.updateSeedSourceSelect(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
updateSeedSourceSelect(n: number) {
|
|
||||||
this.formData.selectedSeed = {
|
this.formData.selectedSeed = {
|
||||||
id: this.seedOptions[0].id
|
id: this.seedOptions[0].id
|
||||||
};
|
};
|
||||||
|
|
||||||
/* Disable Hardware Wallets for BitPay distribution */
|
/* Disable Hardware Wallets for BitPay distribution */
|
||||||
var seedOptions = [];
|
var opts = [];
|
||||||
|
|
||||||
if (this.appName == 'copay') {
|
if (this.appName == 'copay') {
|
||||||
// if (n > 1 && walletService.externalSource.ledger.supported)
|
// if (n > 1 && walletService.externalSource.ledger.supported)
|
||||||
// seedOptions.push({
|
// opts.push({
|
||||||
// id: walletService.externalSource.ledger.id,
|
// id: walletService.externalSource.ledger.id,
|
||||||
// label: walletService.externalSource.ledger.longName,
|
// label: walletService.externalSource.ledger.longName,
|
||||||
// supportsTestnet: walletService.externalSource.ledger.supportsTestnet
|
// supportsTestnet: walletService.externalSource.ledger.supportsTestnet
|
||||||
// });
|
// });
|
||||||
|
|
||||||
// if (walletService.externalSource.trezor.supported) {
|
// if (walletService.externalSource.trezor.supported) {
|
||||||
// seedOptions.push({
|
// opts.push({
|
||||||
// id: walletService.externalSource.trezor.id,
|
// id: walletService.externalSource.trezor.id,
|
||||||
// label: walletService.externalSource.trezor.longName,
|
// label: walletService.externalSource.trezor.longName,
|
||||||
// supportsTestnet: walletService.externalSource.trezor.supportsTestnet
|
// supportsTestnet: walletService.externalSource.trezor.supportsTestnet
|
||||||
|
@ -61,15 +96,14 @@ export class SingleWalletPage {
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// if (walletService.externalSource.intelTEE.supported) {
|
// if (walletService.externalSource.intelTEE.supported) {
|
||||||
// seedOptions.push({
|
// opts.push({
|
||||||
// id: walletService.externalSource.intelTEE.id,
|
// id: walletService.externalSource.intelTEE.id,
|
||||||
// label: walletService.externalSource.intelTEE.longName,
|
// label: walletService.externalSource.intelTEE.longName,
|
||||||
// supportsTestnet: walletService.externalSource.intelTEE.supportsTestnet
|
// supportsTestnet: walletService.externalSource.intelTEE.supportsTestnet
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
this.seedOptions = this.seedOptions.concat(seedOptions);
|
this.seedOptions = this.seedOptions.concat(opts);
|
||||||
console.log('Seed options:', this.seedOptions);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
seedOptionsChange(seed: any) {
|
seedOptionsChange(seed: any) {
|
||||||
|
@ -78,11 +112,12 @@ export class SingleWalletPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
resetPasswordFields() {
|
resetPasswordFields() {
|
||||||
this.formData.passphrase =
|
this.formData.password = null;
|
||||||
this.formData.createPassphrase =
|
this.formData.confirmPassword = null;
|
||||||
this.formData.passwordSaved =
|
this.formData.writtenDown = false;
|
||||||
this.formData.repeatPassword =
|
}
|
||||||
// this.result =
|
|
||||||
null;
|
create() {
|
||||||
|
console.log(this.formData);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue