register page

src/app/accounts/login.component.html

@@ -1,9 +1,8 @@
-<div id="login">
-    <form #form (ngSubmit)="onSubmit()" [appApiAction]="formPromise">
+<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">
+        <div class="box last">
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <label for="email">{{'emailAddress' | i18n}}</label>
@@ -18,13 +17,13 @@
             </div>
         </div>
         <div class="buttons">
-                <button type="submit" class="btn primary block" [disabled]="form.loading">
+            <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>
-                <button type="button" class="btn block">
+            <a routerLink="/register" class="btn block">
                 <i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
-                </button>
+            </a>
         </div>
         <div class="sub-options">
             <a href="#">{{'getMasterPasswordHint' | i18n}}</a>
@@ -33,5 +32,4 @@
             <i class="fa fa-cog fa-lg"></i><span>&nbsp;{{'settings' | i18n}}</span>
         </a>
     </div>
-    </form>
-</div>
+</form>

src/app/accounts/login.component.ts

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

src/app/accounts/register.component.html

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

src/app/accounts/register.component.ts

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

src/app/app-routing.module.ts

@@ -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 },
 ];
 

src/app/app.module.ts

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

src/app/services/services.module.ts

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

src/scss/buttons.scss

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

src/scss/pages.scss

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