lock screen. cleanup modals on navigate

src/app/accounts/hint.component.html

@@ -4,10 +4,10 @@
             <p class="lead text-center mb-4">{{'passwordHint' | i18n}}</p>
             <div class="card">
                 <div class="card-body">
-                    <p>{{'enterEmailToGetHint' | i18n}}</p>
                     <div class="form-group">
                         <label for="email">{{'emailAddress' | i18n}}</label>
                         <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus appInputVerbatim="false">
+                        <small class="form-text text-muted">{{'enterEmailToGetHint' | i18n}}</small>
                     </div>
                     <hr>
                     <div class="d-flex">

src/app/accounts/lock.component.html

@@ -0,0 +1,34 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="text-center mb-4">
+                <i class="fa fa-lock fa-4x"></i>
+            </p>
+            <p class="lead text-center mx-4 mb-4">{{'yourVaultIsLocked' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
+                                [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
+                            <button type="button" class="ml-1 btn btn-link" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block" appBlurClick>
+                            <i class="fa fa-unlock-alt"></i>
+                            {{'unlock' | i18n}}
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary btn-block ml-2 mt-0" appBlurClick (click)="logOut()">
+                            {{'logOut' | i18n}}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/lock.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { LockComponent as BaseLockComponent } from 'jslib/angular/components/lock.component';
+
+@Component({
+    selector: 'app-lock',
+    templateUrl: 'lock.component.html',
+})
+export class LockComponent extends BaseLockComponent {
+    constructor(router: Router, analytics: Angulartics2,
+        toasterService: ToasterService, i18nService: I18nService,
+        platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
+        userService: UserService, cryptoService: CryptoService) {
+        super(router, analytics, toasterService, i18nService, platformUtilsService,
+            messagingService, userService, cryptoService);
+    }
+}

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { OrganizationLayoutComponent } from './layouts/organization-layout.compo
 import { UserLayoutComponent } from './layouts/user-layout.component';
 
 import { HintComponent } from './accounts/hint.component';
+import { LockComponent } from './accounts/lock.component';
 import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
@@ -32,6 +33,7 @@ const routes: Routes = [
             { path: '2fa', component: TwoFactorComponent },
             { path: 'register', component: RegisterComponent },
             { path: 'hint', component: HintComponent },
+            { path: 'lock', component: LockComponent },
         ],
     },
     {

src/app/app.component.ts

@@ -1,3 +1,7 @@
+import * as jq from 'jquery';
+import * as _swal from 'sweetalert';
+import { SweetAlert } from 'sweetalert/typings/core';
+
 import {
     ToasterConfig,
     ToasterContainerComponent,
@@ -11,7 +15,10 @@ import {
     OnDestroy,
     OnInit,
 } from '@angular/core';
-import { Router } from '@angular/router';
+import {
+    NavigationEnd,
+    Router,
+} from '@angular/router';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
 
@@ -34,6 +41,8 @@ import { UserService } from 'jslib/abstractions/user.service';
 import { ConstantsService } from 'jslib/services/constants.service';
 
 const BroadcasterSubscriptionId = 'AppComponent';
+// Hack due to Angular 5.2 bug
+const swal: SweetAlert = _swal as any;
 
 @Component({
     selector: 'app-root',
@@ -94,6 +103,19 @@ export class AppComponent implements OnDestroy, OnInit {
                 }
             });
         });
+
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                const modals = Array.from(document.querySelectorAll('.modal'));
+                for (const modal of modals) {
+                    (jq(modal) as any).modal('hide');
+                }
+
+                if (document.querySelector('.swal-modal') != null) {
+                    swal.close(undefined);
+                }
+            }
+        });
     }
 
     ngOnDestroy() {

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { OrganizationLayoutComponent } from './layouts/organization-layout.compo
 import { UserLayoutComponent } from './layouts/user-layout.component';
 
 import { HintComponent } from './accounts/hint.component';
+import { LockComponent } from './accounts/lock.component';
 import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
@@ -83,6 +84,7 @@ import { Folder } from 'jslib/models/domain';
         IconComponent,
         I18nPipe,
         InputVerbatimDirective,
+        LockComponent,
         LoginComponent,
         ModalComponent,
         NavbarComponent,

src/locales/en/messages.json

@@ -532,5 +532,14 @@
   },
   "emailAddress": {
     "message": "Email Address"
+  },
+  "yourVaultIsLocked": {
+    "message": "Your vault is locked. Verify your master password to continue."
+  },
+  "unlock": {
+    "message": "Unlock"
+  },
+  "invalidMasterPassword": {
+    "message": "Invalid master password"
   }
 }