Charon/blockchain
1
0
Fork 0
forked from lthn/blockchain
Code Pull requests Activity

skip button and open wallet modal styling

Browse source
This commit is contained in:
wildkif 2019-04-19 14:32:02 +03:00
parent 323b85ae14
commit 0c9821c262
13 changed files with 167 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/gui/qt-daemon/html_source/src/app/_helpers/services/backend.service.ts
View file

@ -293,9 +293,6 @@ export class BackendService {
}
storeSecureAppData(callback) {
if (this.variablesService.appPass === '') {
return callback(false);
}
const wallets = [];
this.variablesService.wallets.forEach((wallet) => {
wallets.push({name: wallet.name, pass: wallet.pass, path: wallet.path});

2
src/gui/qt-daemon/html_source/src/app/app.module.ts
View file

@ -10,6 +10,7 @@ import { SidebarComponent } from './sidebar/sidebar.component';
import { MainComponent } from './main/main.component';
import { CreateWalletComponent } from './create-wallet/create-wallet.component';
import { OpenWalletComponent } from './open-wallet/open-wallet.component';
import { OpenWalletModalComponent } from './open-wallet-modal/open-wallet-modal.component';
import { RestoreWalletComponent } from './restore-wallet/restore-wallet.component';
import { SeedPhraseComponent } from './seed-phrase/seed-phrase.component';
import { WalletDetailsComponent } from './wallet-details/wallet-details.component';
@ -73,6 +74,7 @@ Highcharts.setOptions({
MainComponent,
CreateWalletComponent,
OpenWalletComponent,
OpenWalletModalComponent,
RestoreWalletComponent,
SeedPhraseComponent,
WalletDetailsComponent,

20
src/gui/qt-daemon/html_source/src/app/login/login.component.html
View file

@ -9,21 +9,11 @@
<div class="input-block">
<label for="master-pass">{{ 'LOGIN.SETUP_MASTER_PASS' | translate }}</label>
<input type="password" id="master-pass" formControlName="password" (contextmenu)="variablesService.onContextMenuPasteSelect($event)">
<div class="error-block" *ngIf="regForm.controls['password'].invalid && (regForm.controls['password'].dirty || regForm.controls['password'].touched)">
<div *ngIf="regForm.controls['password'].errors['required']">
{{ 'LOGIN.FORM_ERRORS.PASS_REQUIRED' | translate }}
</div>
</div>
</div>
<div class="input-block">
<label for="confirm-pass">{{ 'LOGIN.SETUP_CONFIRM_PASS' | translate }}</label>
<input type="password" id="confirm-pass" formControlName="confirmation" (contextmenu)="variablesService.onContextMenuPasteSelect($event)">
<div class="error-block" *ngIf="regForm.controls['confirmation'].invalid && (regForm.controls['confirmation'].dirty || regForm.controls['confirmation'].touched)">
<div *ngIf="regForm.controls['confirmation'].errors['required']">
{{ 'LOGIN.FORM_ERRORS.CONFIRM_REQUIRED' | translate }}
</div>
</div>
<div class="error-block" *ngIf="regForm.controls['password'].dirty && regForm.controls['confirmation'].dirty && regForm.errors">
<div *ngIf="regForm.errors['mismatch']">
{{ 'LOGIN.FORM_ERRORS.MISMATCH' | translate }}
@ -31,7 +21,10 @@
</div>
</div>
<button type="submit" class="blue-button">{{ 'LOGIN.BUTTON_NEXT' | translate }}</button>
<div class="wrap-button">
<button type="submit" class="blue-button" [disabled]="!regForm.controls['password'].value.length || !regForm.controls['confirmation'].value.length || (regForm.errors && regForm.errors['mismatch'])">{{ 'LOGIN.BUTTON_NEXT' | translate }}</button>
<button type="button" class="blue-button" (click)="onSkipCreatePass()" [disabled]="regForm.controls['password'].value.length || regForm.controls['confirmation'].value.length">{{ 'LOGIN.BUTTON_SKIP' | translate }}</button>
</div>
</form>
@ -40,11 +33,6 @@
<div class="input-block">
<label for="master-pass-login">{{ 'LOGIN.MASTER_PASS' | translate }}</label>
<input type="password" id="master-pass-login" formControlName="password" autofocus (contextmenu)="variablesService.onContextMenuPasteSelect($event)">
<div class="error-block" *ngIf="authForm.controls['password'].invalid && (authForm.controls['password'].dirty || authForm.controls['password'].touched)">
<div *ngIf="authForm.controls['password'].errors['required']">
{{ 'LOGIN.FORM_ERRORS.PASS_REQUIRED' | translate }}
</div>
</div>
</div>
<button type="submit" class="blue-button">{{ 'LOGIN.BUTTON_NEXT' | translate }}</button>

12
src/gui/qt-daemon/html_source/src/app/login/login.component.scss
View file

@ -16,13 +16,23 @@
.logo {
background: url(../../assets/icons/logo.svg) no-repeat center;
width: 100%;
height: 20rem;
height: 15rem;
}
.form-login {
display: flex;
flex-direction: column;
.wrap-button {
display: flex;
align-items: center;
justify-content: space-between;
button {
margin: 2.5rem 0;
}
}
button {
margin: 2.5rem auto;
width: 100%;

21
src/gui/qt-daemon/html_source/src/app/login/login.component.ts
View file

@ -16,14 +16,14 @@ export class LoginComponent implements OnInit, OnDestroy {
queryRouting;
regForm = new FormGroup({
password: new FormControl('', Validators.required),
confirmation: new FormControl('', Validators.required)
password: new FormControl(''),
confirmation: new FormControl('')
}, function (g: FormGroup) {
return g.get('password').value === g.get('confirmation').value ? null : {'mismatch': true};
});
authForm = new FormGroup({
password: new FormControl('', Validators.required)
password: new FormControl('')
});
type = 'reg';
@ -32,7 +32,7 @@ export class LoginComponent implements OnInit, OnDestroy {
private route: ActivatedRoute,
private router: Router,
private backend: BackendService,
private variablesService: VariablesService,
public variablesService: VariablesService,
private modalService: ModalService,
private ngZone: NgZone
) {
@ -61,6 +61,19 @@ export class LoginComponent implements OnInit, OnDestroy {
}
}
onSkipCreatePass():void {
this.variablesService.appPass = '';
this.backend.storeSecureAppData((status, data) => {
if (status) {
this.ngZone.run(() => {
this.router.navigate(['/']);
});
} else {
console.log(data);
}
});
}
onSubmitAuthPass(): void {
if (this.authForm.valid) {
const appPass = this.authForm.get('password').value;

14
src/gui/qt-daemon/html_source/src/app/open-wallet-modal/open-wallet-modal.component.html Normal file
View file

@ -0,0 +1,14 @@
<div class="modal">
<h3 class="title">{{ 'OPEN_WALLET.MODAL.TITLE' | translate }}</h3>
<form class="open-form" (ngSubmit)="open()">
<div class="wallet-path">{{ path }}</div>
<div class="input-block">
<label for="password">{{ 'OPEN_WALLET.MODAL.LABEL' | translate }}</label>
<input type="password" id="password" (contextmenu)="variablesService.onContextMenuPasteSelect($event)"/>
</div>
<div class="wrap-button">
<button type="submit" class="blue-button">{{ 'OPEN_WALLET.MODAL.OPEN' | translate }}</button>
<button type="button" class="blue-button" (click)="skip()">{{ 'OPEN_WALLET.MODAL.SKIP' | translate }}</button>
</div>
</form>
</div>

45
src/gui/qt-daemon/html_source/src/app/open-wallet-modal/open-wallet-modal.component.scss Normal file
View file

@ -0,0 +1,45 @@
:host {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.25);
}
.modal {
display: flex;
flex-direction: column;
background-position: center;
background-size: 200%;
padding: 2rem;
width: 34rem;
.title {
font-size: 1.8rem;
text-align: center;
}
.open-form {
.wallet-path {
font-size: 1.3rem;
margin: 5rem 0 2rem;
}
.wrap-button {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2rem -2rem 0;
button {
flex: 1 0 0;
margin: 0 2rem ;
}
}
}
}

25
src/gui/qt-daemon/html_source/src/app/open-wallet-modal/open-wallet-modal.component.spec.ts Normal file
View file

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { OpenWalletModalComponent } from './open-wallet-modal.component';
describe('OpenWalletModalComponent', () => {
let component: OpenWalletModalComponent;
let fixture: ComponentFixture<OpenWalletModalComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ OpenWalletModalComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OpenWalletModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

27
src/gui/qt-daemon/html_source/src/app/open-wallet-modal/open-wallet-modal.component.ts Normal file
View file

@ -0,0 +1,27 @@
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import {VariablesService} from "../_helpers/services/variables.service";
@Component({
selector: 'app-open-wallet-modal',
templateUrl: './open-wallet-modal.component.html',
styleUrls: ['./open-wallet-modal.component.scss']
})
export class OpenWalletModalComponent implements OnInit {
@Input() path;
@Output() onOpen = new EventEmitter<boolean>();
@Output() onSkip = new EventEmitter<boolean>();
constructor(public variablesService: VariablesService) {}
ngOnInit() {}
open() {
this.onOpen.emit(true);
}
skip() {
this.onSkip.emit(true);
}
}

17
src/gui/qt-daemon/html_source/src/app/settings/settings.component.html
View file

@ -54,14 +54,9 @@
<span class="master-password-title">{{ 'SETTINGS.MASTER_PASSWORD.TITLE' | translate }}</span>
<div class="input-block">
<div class="input-block" *ngIf="variablesService.appPass">
<label for="old-password">{{ 'SETTINGS.MASTER_PASSWORD.OLD' | translate }}</label>
<input type="password" id="old-password" formControlName="password" (contextmenu)="variablesService.onContextMenuPasteSelect($event)"/>
<div class="error-block" *ngIf="changeForm.controls['password'].invalid && (changeForm.controls['password'].dirty || changeForm.controls['password'].touched)">
<div *ngIf="changeForm.controls['password'].errors['required']">
{{ 'SETTINGS.FORM_ERRORS.PASS_REQUIRED' | translate }}
</div>
</div>
<div class="error-block" *ngIf="changeForm.invalid && changeForm.controls['password'].valid && (changeForm.controls['password'].dirty || changeForm.controls['password'].touched) && changeForm.errors && changeForm.errors.pass_mismatch">
{{ 'SETTINGS.FORM_ERRORS.PASS_NOT_MATCH' | translate }}
</div>
@ -70,21 +65,11 @@
<div class="input-block">
<label for="new-password">{{ 'SETTINGS.MASTER_PASSWORD.NEW' | translate }}</label>
<input type="password" id="new-password" formControlName="new_password" (contextmenu)="variablesService.onContextMenuPasteSelect($event)"/>
<div class="error-block" *ngIf="changeForm.controls['new_password'].invalid && (changeForm.controls['new_password'].dirty || changeForm.controls['new_password'].touched)">
<div *ngIf="changeForm.controls['new_password'].errors['required']">
{{ 'SETTINGS.FORM_ERRORS.PASS_REQUIRED' | translate }}
</div>
</div>
</div>
<div class="input-block">
<label for="confirm-password">{{ 'SETTINGS.MASTER_PASSWORD.CONFIRM' | translate }}</label>
<input type="password" id="confirm-password" formControlName="new_confirmation" (contextmenu)="variablesService.onContextMenuPasteSelect($event)"/>
<div class="error-block" *ngIf="changeForm.controls['new_confirmation'].invalid && (changeForm.controls['new_confirmation'].dirty || changeForm.controls['new_confirmation'].touched)">
<div *ngIf="changeForm.controls['new_confirmation'].errors['required']">
{{ 'SETTINGS.FORM_ERRORS.PASS_REQUIRED' | translate }}
</div>
</div>
<div class="error-block" *ngIf="changeForm.invalid && (changeForm.controls['new_confirmation'].dirty || changeForm.controls['new_confirmation'].touched) && changeForm.errors && changeForm.errors.confirm_mismatch">
{{ 'SETTINGS.FORM_ERRORS.CONFIRM_NOT_MATCH' | translate }}
</div>

6
src/gui/qt-daemon/html_source/src/app/settings/settings.component.ts
View file

@ -63,9 +63,9 @@ export class SettingsComponent implements OnInit {
this.theme = this.variablesService.settings.theme;
this.scale = this.variablesService.settings.scale;
this.changeForm = new FormGroup({
password: new FormControl('', Validators.required),
new_password: new FormControl('', Validators.required),
new_confirmation: new FormControl('', Validators.required)
password: new FormControl(''),
new_password: new FormControl(''),
new_confirmation: new FormControl('')
}, [(g: FormGroup) => {
return g.get('new_password').value === g.get('new_confirmation').value ? null : {'confirm_mismatch': true};
}, (g: FormGroup) => {

7
src/gui/qt-daemon/html_source/src/assets/i18n/en.json
View file

@ -4,6 +4,7 @@
"SETUP_CONFIRM_PASS": "Confirm the password",
"MASTER_PASS": "Master password",
"BUTTON_NEXT": "Next",
"BUTTON_SKIP": "Skip",
"INCORRECT_PASSWORD": "Invalid password",
"FORM_ERRORS": {
"PASS_REQUIRED": "Password is required.",
@ -83,6 +84,12 @@
"NAME_REQUIRED": "Name is required.",
"NAME_DUPLICATE": "Name is duplicate.",
"MAX_LENGTH": "Maximum name length reached."
},
"MODAL": {
"TITLE": "Type wallet password",
"LABEL": "Password to this wallet",
"OPEN": "Open wallet",
"SKIP": "Skip"
}
},
"RESTORE_WALLET": {

11
src/gui/qt-daemon/html_source/src/assets/scss/base/_base.scss
View file

@ -780,3 +780,14 @@ app-progress-container {
}
}
}
app-open-wallet-modal {
.modal {
@include themify($themes) {
background: themed(modalBackground);
color: themed(mainTextColor);
}
}
}