register page
This commit is contained in:
Kyle Spearrin
parent
f524322469
commit
ae955e6650
|
|
@ -1,37 +1,35 @@
|
|||
<div id="login">
|
||||
<form #form (ngSubmit)="onSubmit()" [appApiAction]="formPromise">
|
||||
<div class="content">
|
||||
<img src="../../images/logo@2x.png" alt="bitwarden">
|
||||
<p>{{'loginOrCreateNewAccount' | i18n}}</p>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="email">{{'emailAddress' | i18n}}</label>
|
||||
<input id="email" type="text" name="Email" [(ngModel)]="email" required
|
||||
[appAutofocus]="email === ''">
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||
<input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
|
||||
required [appAutofocus]="email !== ''">
|
||||
</div>
|
||||
<form id="login" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="content">
|
||||
<img src="../../images/logo@2x.png" alt="bitwarden">
|
||||
<p>{{'loginOrCreateNewAccount' | i18n}}</p>
|
||||
<div class="box last">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="email">{{'emailAddress' | i18n}}</label>
|
||||
<input id="email" type="text" name="Email" [(ngModel)]="email" required
|
||||
[appAutofocus]="email === ''">
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||
<input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
|
||||
required [appAutofocus]="email !== ''">
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit" class="btn primary block" [disabled]="form.loading">
|
||||
<span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
|
||||
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
||||
</button>
|
||||
<button type="button" class="btn block">
|
||||
<i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="sub-options">
|
||||
<a href="#">{{'getMasterPasswordHint' | i18n}}</a>
|
||||
</div>
|
||||
<a href="#" class="settings-icon">
|
||||
<i class="fa fa-cog fa-lg"></i><span> {{'settings' | i18n}}</span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
|
||||
<span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
|
||||
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
||||
</button>
|
||||
<a routerLink="/register" class="btn block">
|
||||
<i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="sub-options">
|
||||
<a href="#">{{'getMasterPasswordHint' | i18n}}</a>
|
||||
</div>
|
||||
<a href="#" class="settings-icon">
|
||||
<i class="fa fa-cog fa-lg"></i><span> {{'settings' | i18n}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export class LoginComponent {
|
|||
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
|
||||
private toasterService: ToasterService, private i18nService: I18nService) { }
|
||||
|
||||
async onSubmit() {
|
||||
async submit() {
|
||||
if (this.email == null || this.email === '') {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('emailRequired'));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<form id="register" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="content">
|
||||
<p>{{'createAccount' | i18n}}</p>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="email">{{'emailAddress' | i18n}}</label>
|
||||
<input id="email" type="text" name="Email" [(ngModel)]="email" required
|
||||
[appAutofocus]="email === ''">
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||
<input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
|
||||
required [appAutofocus]="email !== ''">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
{{'masterPassDesc' | i18n}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box last">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="master-password-retype">{{'reTypeMasterPass' | i18n}}</label>
|
||||
<input id="master-password-retype" type="password" name="MasterPasswordRetype"
|
||||
[(ngModel)]="confirmMasterPassword" required>
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="hint">{{'masterPassHint' | i18n}}</label>
|
||||
<input id="hint" type="text" name="Hint" [(ngModel)]="hint">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
{{'masterPassHintDesc' | i18n}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
|
||||
<span [hidden]="form.loading">{{'submit' | i18n}}</span>
|
||||
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
||||
</button>
|
||||
<a routerLink="/login" class="btn block">{{'cancel' | i18n}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import * as template from './register.component.html';
|
||||
|
||||
import {
|
||||
Component,
|
||||
} from '@angular/core';
|
||||
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
|
||||
import { RegisterRequest } from 'jslib/models/request/registerRequest';
|
||||
|
||||
import { ApiService } from 'jslib/abstractions/api.service';
|
||||
import { AuthService } from 'jslib/abstractions/auth.service';
|
||||
import { CryptoService } from 'jslib/abstractions/crypto.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-register',
|
||||
template: template,
|
||||
})
|
||||
export class RegisterComponent {
|
||||
email: string = '';
|
||||
masterPassword: string = '';
|
||||
confirmMasterPassword: string = '';
|
||||
hint: string = '';
|
||||
formPromise: Promise<any>;
|
||||
|
||||
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
|
||||
private toasterService: ToasterService, private i18nService: I18nService,
|
||||
private cryptoService: CryptoService, private apiService: ApiService) { }
|
||||
|
||||
async submit() {
|
||||
if (this.email == null || this.email === '') {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('emailRequired'));
|
||||
return;
|
||||
}
|
||||
if (this.email.indexOf('@') === -1) {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('invalidEmail'));
|
||||
return;
|
||||
}
|
||||
if (this.masterPassword == null || this.masterPassword === '') {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('masterPassRequired'));
|
||||
return;
|
||||
}
|
||||
if (this.masterPassword.length < 8) {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('masterPassLength'));
|
||||
return;
|
||||
}
|
||||
if (this.masterPassword !== this.confirmMasterPassword) {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('masterPassDoesntMatch'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.formPromise = this.register();
|
||||
await this.formPromise;
|
||||
this.analytics.eventTrack.next({ action: 'Registered' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('newAccountCreated'));
|
||||
this.router.navigate(['login']);
|
||||
} catch { }
|
||||
}
|
||||
|
||||
private async register() {
|
||||
this.email = this.email.toLowerCase();
|
||||
const key = this.cryptoService.makeKey(this.masterPassword, this.email);
|
||||
const encKey = await this.cryptoService.makeEncKey(key);
|
||||
const hashedPassword = await this.cryptoService.hashPassword(this.masterPassword, key);
|
||||
const request = new RegisterRequest(this.email, hashedPassword, this.hint, encKey.encryptedString);
|
||||
await this.apiService.postRegister(request);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,11 +5,13 @@ import {
|
|||
} from '@angular/router';
|
||||
|
||||
import { LoginComponent } from './accounts/login.component';
|
||||
import { RegisterComponent } from './accounts/register.component';
|
||||
import { VaultComponent } from './vault/vault.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: '/login', pathMatch: 'full' },
|
||||
{ path: 'login', component: LoginComponent },
|
||||
{ path: 'register', component: RegisterComponent },
|
||||
{ path: 'vault', component: VaultComponent },
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { IconComponent } from './vault/icon.component';
|
|||
import { LoginComponent } from './accounts/login.component';
|
||||
import { ModalComponent } from './modal.component';
|
||||
import { PasswordGeneratorComponent } from './vault/password-generator.component';
|
||||
import { RegisterComponent } from './accounts/register.component';
|
||||
import { SearchCiphersPipe } from './pipes/search-ciphers.pipe';
|
||||
import { StopClickDirective } from './directives/stop-click.directive';
|
||||
import { StopPropDirective } from './directives/stop-prop.directive';
|
||||
|
|
@ -62,6 +63,7 @@ import { ViewComponent } from './vault/view.component';
|
|||
LoginComponent,
|
||||
ModalComponent,
|
||||
PasswordGeneratorComponent,
|
||||
RegisterComponent,
|
||||
SearchCiphersPipe,
|
||||
StopClickDirective,
|
||||
StopPropDirective,
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ function initFactory(i18n: I18nService, platformUtilsService: DesktopPlatformUti
|
|||
{ provide: CryptoServiceAbstraction, useValue: cryptoService },
|
||||
{ provide: PlatformUtilsServiceAbstraction, useValue: platformUtilsService },
|
||||
{ provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
|
||||
{ provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
|
||||
{ provide: ApiServiceAbstraction, useValue: apiService },
|
||||
{
|
||||
provide: APP_INITIALIZER,
|
||||
useFactory: initFactory,
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
border: 1px solid $button-border-color;
|
||||
font-size: $font-size-base;
|
||||
color: $button-color;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
&:hover:not([disabled]), &:focus:not([disabled]) {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -31,9 +31,17 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.last {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin: 15px 0 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue