bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-22 11:13:46 +00:00
Code Issues Releases Wiki Activity

register page

Browse Source
This commit is contained in:
Kyle Spearrin
2018-01-31 14:19:21 -05:00
parent f524322469
commit ae955e6650
9 changed files with 171 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/app/accounts/login.component.html
View File

@@ -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>&nbsp;{{'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>&nbsp;{{'settings' | i18n}}</span>
</a>
</div>
</form>

2
src/app/accounts/login.component.ts
View File

@@ -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'));

45
src/app/accounts/register.component.html Normal file
View File

@@ -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>

78
src/app/accounts/register.component.ts Normal file
View File

@@ -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);
}
}