mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-19 02:51:14 +02:00
register page
This commit is contained in:
parent
f524322469
commit
ae955e6650
@ -1,37 +1,35 @@
|
|||||||
<div id="login">
|
<form id="login" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||||
<form #form (ngSubmit)="onSubmit()" [appApiAction]="formPromise">
|
<div class="content">
|
||||||
<div class="content">
|
<img src="../../images/logo@2x.png" alt="bitwarden">
|
||||||
<img src="../../images/logo@2x.png" alt="bitwarden">
|
<p>{{'loginOrCreateNewAccount' | i18n}}</p>
|
||||||
<p>{{'loginOrCreateNewAccount' | i18n}}</p>
|
<div class="box last">
|
||||||
<div class="box">
|
<div class="box-content">
|
||||||
<div class="box-content">
|
<div class="box-content-row" appBoxRow>
|
||||||
<div class="box-content-row" appBoxRow>
|
<label for="email">{{'emailAddress' | i18n}}</label>
|
||||||
<label for="email">{{'emailAddress' | i18n}}</label>
|
<input id="email" type="text" name="Email" [(ngModel)]="email" required
|
||||||
<input id="email" type="text" name="Email" [(ngModel)]="email" required
|
[appAutofocus]="email === ''">
|
||||||
[appAutofocus]="email === ''">
|
</div>
|
||||||
</div>
|
<div class="box-content-row" appBoxRow>
|
||||||
<div class="box-content-row" appBoxRow>
|
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
<input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
|
||||||
<input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
|
required [appAutofocus]="email !== ''">
|
||||||
required [appAutofocus]="email !== ''">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons">
|
</div>
|
||||||
<button type="submit" class="btn primary block" [disabled]="form.loading">
|
<div class="buttons">
|
||||||
<span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
|
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
|
||||||
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
<span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
|
||||||
</button>
|
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
||||||
<button type="button" class="btn block">
|
</button>
|
||||||
<i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
|
<a routerLink="/register" class="btn block">
|
||||||
</button>
|
<i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
|
||||||
</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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<div class="sub-options">
|
||||||
</div>
|
<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,
|
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
|
||||||
private toasterService: ToasterService, private i18nService: I18nService) { }
|
private toasterService: ToasterService, private i18nService: I18nService) { }
|
||||||
|
|
||||||
async onSubmit() {
|
async submit() {
|
||||||
if (this.email == null || this.email === '') {
|
if (this.email == null || this.email === '') {
|
||||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||||
this.i18nService.t('emailRequired'));
|
this.i18nService.t('emailRequired'));
|
||||||
|
45
src/app/accounts/register.component.html
Normal file
45
src/app/accounts/register.component.html
Normal 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
78
src/app/accounts/register.component.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -5,11 +5,13 @@ import {
|
|||||||
} from '@angular/router';
|
} from '@angular/router';
|
||||||
|
|
||||||
import { LoginComponent } from './accounts/login.component';
|
import { LoginComponent } from './accounts/login.component';
|
||||||
|
import { RegisterComponent } from './accounts/register.component';
|
||||||
import { VaultComponent } from './vault/vault.component';
|
import { VaultComponent } from './vault/vault.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path: '', redirectTo: '/login', pathMatch: 'full' },
|
{ path: '', redirectTo: '/login', pathMatch: 'full' },
|
||||||
{ path: 'login', component: LoginComponent },
|
{ path: 'login', component: LoginComponent },
|
||||||
|
{ path: 'register', component: RegisterComponent },
|
||||||
{ path: 'vault', component: VaultComponent },
|
{ path: 'vault', component: VaultComponent },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -26,6 +26,7 @@ import { IconComponent } from './vault/icon.component';
|
|||||||
import { LoginComponent } from './accounts/login.component';
|
import { LoginComponent } from './accounts/login.component';
|
||||||
import { ModalComponent } from './modal.component';
|
import { ModalComponent } from './modal.component';
|
||||||
import { PasswordGeneratorComponent } from './vault/password-generator.component';
|
import { PasswordGeneratorComponent } from './vault/password-generator.component';
|
||||||
|
import { RegisterComponent } from './accounts/register.component';
|
||||||
import { SearchCiphersPipe } from './pipes/search-ciphers.pipe';
|
import { SearchCiphersPipe } from './pipes/search-ciphers.pipe';
|
||||||
import { StopClickDirective } from './directives/stop-click.directive';
|
import { StopClickDirective } from './directives/stop-click.directive';
|
||||||
import { StopPropDirective } from './directives/stop-prop.directive';
|
import { StopPropDirective } from './directives/stop-prop.directive';
|
||||||
@ -62,6 +63,7 @@ import { ViewComponent } from './vault/view.component';
|
|||||||
LoginComponent,
|
LoginComponent,
|
||||||
ModalComponent,
|
ModalComponent,
|
||||||
PasswordGeneratorComponent,
|
PasswordGeneratorComponent,
|
||||||
|
RegisterComponent,
|
||||||
SearchCiphersPipe,
|
SearchCiphersPipe,
|
||||||
StopClickDirective,
|
StopClickDirective,
|
||||||
StopPropDirective,
|
StopPropDirective,
|
||||||
|
@ -130,7 +130,7 @@ function initFactory(i18n: I18nService, platformUtilsService: DesktopPlatformUti
|
|||||||
{ provide: CryptoServiceAbstraction, useValue: cryptoService },
|
{ provide: CryptoServiceAbstraction, useValue: cryptoService },
|
||||||
{ provide: PlatformUtilsServiceAbstraction, useValue: platformUtilsService },
|
{ provide: PlatformUtilsServiceAbstraction, useValue: platformUtilsService },
|
||||||
{ provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
|
{ provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
|
||||||
{ provide: PasswordGenerationServiceAbstraction, useValue: passwordGenerationService },
|
{ provide: ApiServiceAbstraction, useValue: apiService },
|
||||||
{
|
{
|
||||||
provide: APP_INITIALIZER,
|
provide: APP_INITIALIZER,
|
||||||
useFactory: initFactory,
|
useFactory: initFactory,
|
||||||
|
@ -7,6 +7,8 @@
|
|||||||
border: 1px solid $button-border-color;
|
border: 1px solid $button-border-color;
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
color: $button-color;
|
color: $button-color;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
&:hover:not([disabled]), &:focus:not([disabled]) {
|
&:hover:not([disabled]), &:focus:not([disabled]) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -31,9 +31,17 @@
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
&.last {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 15px 0 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
Loading…
Reference in New Issue
Block a user