password hint page

src/app/accounts/hint.component.html

@@ -0,0 +1,23 @@
+<form id="hint" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <div class="content">
+        <h1>{{'passwordHint' | i18n}}</h1>
+        <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>
+                </div>
+            </div>
+            <div class="box-footer">
+                {{'enterEmailToGetHint' | 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/hint.component.ts

@@ -0,0 +1,48 @@
+import * as template from './hint.component.html';
+
+import {
+    Component,
+} from '@angular/core';
+
+import { Router } from '@angular/router';
+
+import { Angulartics2 } from 'angulartics2';
+import { ToasterService } from 'angular2-toaster';
+
+import { PasswordHintRequest } from 'jslib/models/request/passwordHintRequest';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-hint',
+    template: template,
+})
+export class HintComponent {
+    email: string = '';
+    formPromise: Promise<any>;
+
+    constructor(private router: Router, private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, 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;
+        }
+
+        try {
+            this.formPromise = this.apiService.postPasswordHint(new PasswordHintRequest(this.email));
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Requested Hint' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('masterPassSent'));
+            this.router.navigate(['login']);
+        } catch { }
+    }
+}

src/app/accounts/login.component.html

@@ -26,9 +26,9 @@
             </a>
         </div>
         <div class="sub-options">
-            <a href="#">{{'getMasterPasswordHint' | i18n}}</a>
+            <a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
         </div>
-        <a href="#" class="settings-icon">
+        <a routerLink="/environment" class="settings-icon">
             <i class="fa fa-cog fa-lg"></i><span>&nbsp;{{'settings' | i18n}}</span>
         </a>
     </div>

src/app/accounts/register.component.html

@@ -1,6 +1,6 @@
 <form id="register" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
     <div class="content">
-        <p>{{'createAccount' | i18n}}</p>
+        <h1>{{'createAccount' | i18n}}</h1>
         <div class="box">
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import {
     Routes,
 } from '@angular/router';
 
+import { HintComponent } from './accounts/hint.component';
 import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
 import { VaultComponent } from './vault/vault.component';
@@ -13,6 +14,7 @@ const routes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'register', component: RegisterComponent },
     { path: 'vault', component: VaultComponent },
+    { path: 'hint', component: HintComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { CiphersComponent } from './vault/ciphers.component';
 import { FallbackSrcDirective } from './directives/fallback-src.directive';
 import { FolderAddEditComponent } from './vault/folder-add-edit.component';
 import { GroupingsComponent } from './vault/groupings.component';
+import { HintComponent } from './accounts/hint.component';
 import { I18nPipe } from './pipes/i18n.pipe';
 import { IconComponent } from './vault/icon.component';
 import { LoginComponent } from './accounts/login.component';
@@ -58,6 +59,7 @@ import { ViewComponent } from './vault/view.component';
         FallbackSrcDirective,
         FolderAddEditComponent,
         GroupingsComponent,
+        HintComponent,
         I18nPipe,
         IconComponent,
         LoginComponent,

src/scss/pages.scss

@@ -15,9 +15,15 @@
         height: calc(100% + 300px);
         margin-top: -300px;
     }
+
+    img {
+        margin: 0 auto 15px;
+        width: 282px;
+        display: block;
+    }
 }
 
-#register {
+#register, #hint {
     margin-top: 20px;
 
     .content {
@@ -25,20 +31,15 @@
     }
 }
 
-#login, #register {
+#login, #register, #hint {
     .content {
         max-width: 300px;
 
-        img {
+        p, h1 {
-            margin: 0 auto 15px;
-            width: 282px;
-            display: block;
-        }
-
-        p {
             font-size: $font-size-large;
             text-align: center;
             margin-bottom: 20px;
+            font-weight: normal;
         }
 
         .box {