Commit a41c68bd authored by dev0tion's avatar dev0tion

Add password confirmation box, add password strength checker

parent 9a5f3910
......@@ -16,6 +16,12 @@
<input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletPasswordConfirmation">Confirm Password</label>
<input type="password" class="form-control form-control-success" formControlName="walletPasswordConfirmation" id="walletPasswordConfirmation" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPasswordConfirmation" class="form-control-feedback">{{ formErrors.walletPasswordConfirmation }}</div>
<div class="form-control-feedback">Your password will be required to recover your wallet in the future. Keep it safe.</div>
</div>
<div class="form-group">
<label class="text-left" for="walletNetwork">Network</label>
<select class="form-control custom-select" name="network" formControlName="selectNetwork">
......
......@@ -5,6 +5,8 @@ import { Router } from '@angular/router';
import { GlobalService } from '../../shared/services/global.service';
import { ApiService } from '../../shared/services/api.service';
import { PasswordValidationDirective } from '../../shared/directives/password-validation.directive';
import { WalletCreation } from '../../shared/classes/wallet-creation';
import { Mnemonic } from '../../shared/classes/mnemonic';
......@@ -25,14 +27,23 @@ export class CreateComponent {
private buildCreateForm(): void {
this.createWalletForm = this.fb.group({
"walletName": ["", [
"walletName": ["",
Validators.compose([
Validators.required,
Validators.minLength(3),
Validators.maxLength(24)
]
Validators.maxLength(24),
Validators.pattern(/^[a-zA-Z0-9]*$/)
])
],
"walletPassword": ["",
Validators.compose([
Validators.required,
Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{10,})/)])
],
"walletPassword": ["", Validators.required],
"walletPasswordConfirmation": ["", Validators.required],
"selectNetwork": ["test", Validators.required]
}, {
validator: PasswordValidationDirective.MatchPassword
});
this.createWalletForm.valueChanges
......@@ -58,17 +69,24 @@ export class CreateComponent {
formErrors = {
'walletName': '',
'walletPassword': ''
'walletPassword': '',
'walletPasswordConfirmation': ''
};
validationMessages = {
'walletName': {
'required': 'Name is required.',
'minlength': 'Name must be at least 3 characters long.',
'maxlength': 'Name cannot be more than 24 characters long.'
'maxlength': 'Name cannot be more than 24 characters long.',
'pattern': 'Enter a valid wallet name. [a-Z] and [0-9] are the only characters allowed.'
},
'walletPassword': {
'required': 'A password is required.'
'required': 'A password is required.',
'pattern': 'A password must be at least 10 characters long and contain one lowercase and uppercase alphabetical character and a number.'
},
'walletPasswordConfirmation': {
'required': 'Confirm your password.',
'walletPasswordConfirmation': 'Passwords do not match.'
}
};
......
import { PasswordValidationDirective } from './password-validation.directive';
describe('PasswordValidationDirective', () => {
it('should create an instance', () => {
const directive = new PasswordValidationDirective();
expect(directive).toBeTruthy();
});
});
import { Directive } from '@angular/core';
import { AbstractControl } from '@angular/forms';
@Directive({
selector: '[appPasswordValidation]'
})
export class PasswordValidationDirective {
constructor() { }
static MatchPassword(AC: AbstractControl) {
let password = AC.get('walletPassword').value;
let confirmPassword = AC.get('walletPasswordConfirmation').value;
if(password != confirmPassword) {
AC.get('walletPasswordConfirmation').setErrors( { walletPasswordConfirmation: true } )
} else {
return null
}
}
}
\ No newline at end of file
......@@ -2,10 +2,11 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoinNotationPipe } from './pipes/coin-notation.pipe';
import { AutoFocusDirective } from './directives/auto-focus.directive';
import { PasswordValidationDirective } from './directives/password-validation.directive';
@NgModule({
imports: [CommonModule],
declarations: [CoinNotationPipe, AutoFocusDirective],
declarations: [CoinNotationPipe, AutoFocusDirective, PasswordValidationDirective],
exports: [CoinNotationPipe, AutoFocusDirective]
})
......
......@@ -7,7 +7,7 @@ import { MenuComponent } from './menu/menu.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HistoryComponent } from './history/history.component';
import {SharedModule} from '../shared/shared.module';
import { SharedModule } from '../shared/shared.module';
import { WalletRoutingModule } from './wallet-routing.module';
import { SidebarComponent } from './sidebar/sidebar.component';
import { StatusBarComponent } from './status-bar/status-bar.component';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment