Merge branch 'master' into patrickhlauke-a11y-patch2

2025-12-19 01:33:33 +00:00 · 2021-09-18 17:47:59 +01:00
parent c178cbdc12 a848406ce0
commit 6b0167a098
92 changed files with 4464 additions and 1533 deletions
--- a/src/popup/accounts/environment.component.html
+++ b/src/popup/accounts/environment.component.html
@@ -1,4 +1,4 @@
-<form #form class="modal-content" (ngSubmit)="submit()">
+<form #form (ngSubmit)="submit()">
    <header>
        <div class="left">
            <a routerLink="/home">{{'close' | i18n}}</a>
--- a/src/popup/accounts/lock.component.ts
+++ b/src/popup/accounts/lock.component.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';

+import { ConstantsService } from 'jslib-common/services/constants.service';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
@@ -20,6 +22,8 @@ import Swal from 'sweetalert2';
    templateUrl: 'lock.component.html',
 })
 export class LockComponent extends BaseLockComponent {
+    private isInitialLockScreen: boolean;
+
    constructor(router: Router, i18nService: I18nService,
        platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
        userService: UserService, cryptoService: CryptoService,
@@ -29,12 +33,21 @@ export class LockComponent extends BaseLockComponent {
        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
            storageService, vaultTimeoutService, environmentService, stateService, apiService);
        this.successRoute = '/tabs/current';
+        this.isInitialLockScreen = (window as any).previousPopupUrl == null;
    }

    async ngOnInit() {
        await super.ngOnInit();
-        window.setTimeout(() => {
+        const disableAutoBiometricsPrompt = await this.storageService.get<boolean>(
+            ConstantsService.disableAutoBiometricsPromptKey) ?? true;
+
+        window.setTimeout(async () => {
            document.getElementById(this.pinLock ? 'pin' : 'masterPassword').focus();
+            if (this.biometricLock && !disableAutoBiometricsPrompt && this.isInitialLockScreen) {
+                if (await this.vaultTimeoutService.isLocked()) {
+                    await this.unlockBiometric();
+                }
+            }
        }, 100);
    }

--- a/src/popup/accounts/login.component.ts
+++ b/src/popup/accounts/login.component.ts
@@ -10,6 +10,7 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
+import { UserService } from 'jslib-common/abstractions/user.service';

 import { LoginComponent as BaseLoginComponent } from 'jslib-angular/components/login.component';

@@ -23,10 +24,14 @@ export class LoginComponent extends BaseLoginComponent {
        protected stateService: StateService, protected environmentService: EnvironmentService,
        protected passwordGenerationService: PasswordGenerationService,
        protected cryptoFunctionService: CryptoFunctionService, storageService: StorageService,
-        syncService: SyncService) {
+        syncService: SyncService, private userService: UserService) {
        super(authService, router, platformUtilsService, i18nService, stateService, environmentService, passwordGenerationService, cryptoFunctionService, storageService);
-        super.onSuccessfulLogin = () => {
-            return syncService.fullSync(true);
+        super.onSuccessfulLogin = async () => {
+            await syncService.fullSync(true).then(async () => {
+                if (await this.userService.getForcePasswordReset()) {
+                    this.router.navigate(['update-temp-password']);
+                }
+            });
        };
        super.successRoute = '/tabs/vault';
    }
--- a/src/popup/accounts/set-password.component.html
+++ b/src/popup/accounts/set-password.component.html
@@ -20,22 +20,11 @@
        <div *ngIf="!syncLoading">
            <div class="box">
                <app-callout type="tip">{{'ssoCompleteRegistration' | i18n}}</app-callout>
-                <app-callout type="info" *ngIf="enforcedPolicyOptions">
-                    {{'masterPasswordPolicyInEffect' | i18n}}
-                    <ul>
-                        <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
-                            {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
-                        </li>
-                        <li *ngIf="enforcedPolicyOptions?.minLength > 0">
-                            {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
-                        </li>
-                        <li *ngIf="enforcedPolicyOptions?.requireUpper">{{'policyInEffectUppercase' | i18n}}</li>
-                        <li *ngIf="enforcedPolicyOptions?.requireLower">{{'policyInEffectLowercase' | i18n}}</li>
-                        <li *ngIf="enforcedPolicyOptions?.requireNumbers">{{'policyInEffectNumbers' | i18n}}</li>
-                        <li *ngIf="enforcedPolicyOptions?.requireSpecial">
-                            {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}
-                        </li>
-                    </ul>
+                <app-callout type="warning" title="{{'resetPasswordPolicyAutoEnroll' | i18n}}"
+                    *ngIf="resetPasswordAutoEnroll">
+                    {{'resetPasswordAutoEnrollInviteWarning' | i18n}}
+                </app-callout>
+                <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
                </app-callout>
            </div>
            <div class="box">
--- a/src/popup/accounts/set-password.component.ts
+++ b/src/popup/accounts/set-password.component.ts
@@ -31,6 +31,13 @@ export class SetPasswordComponent extends BaseSetPasswordComponent {
        syncService: SyncService, route: ActivatedRoute) {
        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
            platformUtilsService, policyService, router, apiService, syncService, route);
+        super.onSuccessfulChangePassword = async () => {
+            if (await this.userService.getForcePasswordReset()) {
+                this.router.navigate(['update-temp-password']);
+            } else {
+                this.router.navigate([this.successRoute]);
+            }
+        };
    }

    get masterPasswordScoreWidth() {
--- a/src/popup/accounts/sso.component.ts
+++ b/src/popup/accounts/sso.component.ts
@@ -15,6 +15,7 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
+import { UserService } from 'jslib-common/abstractions/user.service';

 import { SsoComponent as BaseSsoComponent } from 'jslib-angular/components/sso.component';
 import { BrowserApi } from '../../browser/browserApi';
@@ -29,7 +30,7 @@ export class SsoComponent extends BaseSsoComponent {
        storageService: StorageService, stateService: StateService,
        platformUtilsService: PlatformUtilsService, apiService: ApiService,
        cryptoFunctionService: CryptoFunctionService, passwordGenerationService: PasswordGenerationService,
-        syncService: SyncService, environmentService: EnvironmentService) {
+        syncService: SyncService, environmentService: EnvironmentService, private userService: UserService) {
        super(authService, router, i18nService, route, storageService, stateService, platformUtilsService,
            apiService, cryptoFunctionService, environmentService, passwordGenerationService);

@@ -44,5 +45,13 @@ export class SsoComponent extends BaseSsoComponent {
            const thisWindow = window.open('', '_self');
            thisWindow.close();
        };
+
+        super.onSuccessfulLoginNavigate = async () => {
+            if (await this.userService.getForcePasswordReset()) {
+                this.router.navigate(['update-temp-password']);
+            } else {
+                this.router.navigate([this.successRoute]);
+            }
+        };
    }
 }
--- a/src/popup/accounts/two-factor.component.html
+++ b/src/popup/accounts/two-factor.component.html
@@ -60,7 +60,7 @@
            </div>
        </ng-container>
        <ng-container *ngIf="selectedProviderType === providerType.WebAuthn && !webAuthnNewTab">
-            <div id="web-authn-frame"><iframe id="webauthn_iframe"></iframe></div>
+            <div id="web-authn-frame"><iframe id="webauthn_iframe" [allow]="webAuthnAllow"></iframe></div>
            <div class="box">
                <div class="box-content">
                    <div class="box-content-row box-content-row-checkbox" appBoxRow>
--- a/src/popup/accounts/two-factor.component.ts
+++ b/src/popup/accounts/two-factor.component.ts
@@ -20,6 +20,7 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
+import { UserService } from 'jslib-common/abstractions/user.service';

 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';

@@ -44,11 +45,16 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
        environmentService: EnvironmentService, private ngZone: NgZone,
        private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef,
        private popupUtilsService: PopupUtilsService, stateService: StateService,
-        storageService: StorageService, route: ActivatedRoute, private messagingService: MessagingService) {
+        storageService: StorageService, route: ActivatedRoute, private messagingService: MessagingService,
+        private userService: UserService) {
        super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
            stateService, storageService, route);
-        super.onSuccessfulLogin = () => {
-            return syncService.fullSync(true);
+        super.onSuccessfulLogin = async () => {
+            return syncService.fullSync(true).then(async () => {
+                if (await this.userService.getForcePasswordReset()) {
+                    this.router.navigate(['update-temp-password']);
+                }
+            });
        };
        super.successRoute = '/tabs/vault';
        this.webAuthnNewTab = this.platformUtilsService.isFirefox() || this.platformUtilsService.isSafari();
--- a/src/popup/accounts/update-temp-password.component.html
+++ b/src/popup/accounts/update-temp-password.component.html
@@ -0,0 +1,86 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <header>
+        <div class="left">
+            <a (click)="logOut()">{{'logOut' | i18n}}</a>
+        </div>
+        <div class="center">
+            <span class="title">{{'updateMasterPassword' | i18n}}</span>
+        </div>
+        <div class="right">
+            <button type="submit" appBlurClick [disabled]="form.loading">
+                <span [hidden]="form.loading">{{'submit' | i18n}}</span>
+                <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+            </button>
+        </div>
+    </header>
+    <content>
+        <app-callout type="warning" title="{{'updateMasterPassword' | i18n}}">
+            {{'updateMasterPasswordWarning' | i18n}}
+        </app-callout>
+        <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
+        </app-callout>
+        <div class="box">
+            <div class="box-content">
+                <div class="box-content-row" appBoxRow>
+                    <div class="box-content-row-flex">
+                        <div class="row-main">
+                            <label for="masterPassword">
+                                {{'masterPass' | i18n}}
+                                <strong class="sub-label text-{{masterPasswordScoreStyle.Color}}"
+                                    *ngIf="masterPasswordScoreStyle.Text">
+                                    {{masterPasswordScoreStyle.Text}}
+                                </strong>
+                            </label>
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
+                                appInputVerbatim (input)="updatePasswordStrength()">
+                        </div>
+                        <div class="action-buttons">
+                            <a class="row-btn" href="#" appStopClick appBlurClick
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="progress">
+                        <div class="progress-bar bg-{{masterPasswordScoreStyle.Color}}" role="progressbar"
+                            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+                            [ngStyle]="{width: (masterPasswordScoreStyle.Width + '%')}"
+                            attr.aria-valuenow="{{masterPasswordScoreStyle.Width}}"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-content">
+                <div class="box-content-row box-content-row-flex" appBoxRow>
+                    <div class="row-main">
+                        <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
+                        <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
+                            name="MasterPasswordRetype" class="monospaced" [(ngModel)]="masterPasswordRetype" required
+                            appInputVerbatim>
+                    </div>
+                    <div class="action-buttons">
+                        <a class="row-btn" href="#" appStopClick appBlurClick
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                            <i class="fa fa-lg" aria-hidden="true"
+                                [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-content">
+                <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>
+    </content>
+</form>
--- a/src/popup/accounts/update-temp-password.component.ts
+++ b/src/popup/accounts/update-temp-password.component.ts
@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+
+import { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from 'jslib-angular/components/update-temp-password.component';
+
+interface MasterPasswordScore {
+    Color: string;
+    Text: string;
+    Width: number;
+}
+
+@Component({
+    selector: 'app-update-temp-password',
+    templateUrl: 'update-temp-password.component.html',
+})
+export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent {
+    get masterPasswordScoreStyle(): MasterPasswordScore {
+        const scoreWidth = this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
+        switch (this.masterPasswordScore) {
+            case 4:
+                return {
+                    Color: 'bg-success',
+                    Text: 'strong',
+                    Width: scoreWidth,
+                };
+            case 3:
+                return {
+                    Color: 'bg-primary',
+                    Text: 'good',
+                    Width: scoreWidth,
+                };
+            case 2:
+                return {
+                    Color: 'bg-warning',
+                    Text: 'weak',
+                    Width: scoreWidth,
+                };
+            default:
+                return {
+                    Color: 'bg-danger',
+                    Text: 'weak',
+                    Width: scoreWidth,
+                };
+        }
+    }
+
+    constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
+        passwordGenerationService: PasswordGenerationService, policyService: PolicyService,
+        cryptoService: CryptoService, userService: UserService,
+        messagingService: MessagingService, apiService: ApiService) {
+        super(i18nService, platformUtilsService, passwordGenerationService, policyService, cryptoService,
+            userService, messagingService, apiService);
+    }
+}
--- a/src/popup/app-routing.module.ts
+++ b/src/popup/app-routing.module.ts
@@ -22,6 +22,7 @@ import { SetPasswordComponent } from './accounts/set-password.component';
 import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
+import { UpdateTempPasswordComponent } from './accounts/update-temp-password.component';

 import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
 import { PasswordGeneratorComponent } from './generator/password-generator.component';
@@ -261,6 +262,12 @@ const routes: Routes = [
        canActivate: [AuthGuardService],
        data: { state: 'edit-send' },
    },
+    {
+        path: 'update-temp-password',
+        component: UpdateTempPasswordComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'update-temp-password' },
+    },
    {
        path: 'tabs',
        component: TabsComponent,
--- a/src/popup/app.component.ts
+++ b/src/popup/app.component.ts
@@ -106,8 +106,6 @@ export class AppComponent implements OnInit {
                });
            } else if (msg.command === 'showDialog') {
                await this.showDialog(msg);
-            } else if (msg.command === 'showPasswordDialog') {
-                await this.showPasswordDialog(msg);
            } else if (msg.command === 'showToast') {
                this.ngZone.run(() => {
                    this.showToast(msg);
@@ -251,30 +249,4 @@ export class AppComponent implements OnInit {
            confirmed: confirmed.value,
        });
    }
-
-    private async showPasswordDialog(msg: any) {
-        const platformUtils = this.platformUtilsService as BrowserPlatformUtilsService;
-        const result = await Swal.fire({
-            heightAuto: false,
-            titleText: msg.title,
-            input: 'password',
-            text: msg.body,
-            confirmButtonText: this.i18nService.t('ok'),
-            showCancelButton: true,
-            cancelButtonText: this.i18nService.t('cancel'),
-            inputAttributes: {
-                autocapitalize: 'off',
-                autocorrect: 'off',
-            },
-            inputValidator: async (value: string): Promise<any> => {
-                if (await platformUtils.resolvePasswordDialogPromise(msg.dialogId, false, value)) {
-                    return false;
-                }
-
-                return this.i18nService.t('invalidMasterPassword');
-            },
-        });
-
-        platformUtils.resolvePasswordDialogPromise(msg.dialogId, true, null);
-    }
 }
--- a/src/popup/app.module.ts
+++ b/src/popup/app.module.ts
@@ -1,3 +1,4 @@
+import { A11yModule } from '@angular/cdk/a11y';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { ToasterModule } from 'angular2-toaster';
@@ -20,6 +21,7 @@ import { SetPasswordComponent } from './accounts/set-password.component';
 import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
+import { UpdateTempPasswordComponent } from './accounts/update-temp-password.component';

 import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
 import { PasswordGeneratorComponent } from './generator/password-generator.component';
@@ -36,6 +38,7 @@ import { OptionsComponent } from './settings/options.component';
 import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SyncComponent } from './settings/sync.component';
+import { VaultTimeoutInputComponent } from './settings/vault-timeout-input.component';

 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
@@ -57,6 +60,7 @@ import { ApiActionDirective } from 'jslib-angular/directives/api-action.directiv
 import { AutofocusDirective } from 'jslib-angular/directives/autofocus.directive';
 import { BlurClickDirective } from 'jslib-angular/directives/blur-click.directive';
 import { BoxRowDirective } from 'jslib-angular/directives/box-row.directive';
+import { CipherListVirtualScroll } from 'jslib-angular/directives/cipherListVirtualScroll.directive';
 import { FallbackSrcDirective } from 'jslib-angular/directives/fallback-src.directive';
 import { InputVerbatimDirective } from 'jslib-angular/directives/input-verbatim.directive';
 import { SelectCopyDirective } from 'jslib-angular/directives/select-copy.directive';
@@ -70,8 +74,10 @@ import { SearchCiphersPipe } from 'jslib-angular/pipes/search-ciphers.pipe';

 import { ActionButtonsComponent } from './components/action-buttons.component';
 import { CipherRowComponent } from './components/cipher-row.component';
+import { PasswordRepromptComponent } from './components/password-reprompt.component';
 import { PopOutComponent } from './components/pop-out.component';
 import { SendListComponent } from './components/send-list.component';
+import { SetPinComponent } from './components/set-pin.component';

 import { CalloutComponent } from 'jslib-angular/components/callout.component';
 import { IconComponent } from 'jslib-angular/components/icon.component';
@@ -169,6 +175,7 @@ registerLocaleData(localeZhTw, 'zh-TW');

@NgModule({
    imports: [
+        A11yModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        BrowserModule,
@@ -190,6 +197,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
        BlurClickDirective,
        BoxRowDirective,
        CalloutComponent,
+        CipherListVirtualScroll,
        CipherRowComponent,
        CiphersComponent,
        CollectionsComponent,
@@ -224,8 +232,10 @@ registerLocaleData(localeZhTw, 'zh-TW');
        SendGroupingsComponent,
        SendListComponent,
        SendTypeComponent,
+        SetPasswordComponent,
        SettingsComponent,
        ShareComponent,
+        SsoComponent,
        StopClickDirective,
        StopPropDirective,
        SyncComponent,
@@ -233,9 +243,11 @@ registerLocaleData(localeZhTw, 'zh-TW');
        TrueFalseValueDirective,
        TwoFactorOptionsComponent,
        TwoFactorComponent,
-        SsoComponent,
+        UpdateTempPasswordComponent,
        ViewComponent,
-        SetPasswordComponent,
+        PasswordRepromptComponent,
+        SetPinComponent,
+        VaultTimeoutInputComponent,
    ],
    entryComponents: [],
    providers: [
--- a/src/popup/components/cipher-row.component.html
+++ b/src/popup/components/cipher-row.component.html
@@ -1,5 +1,5 @@
 <a (click)="selectCipher(cipher)" (dblclick)="launchCipher(cipher)" href="#" appStopClick
-    title="{{title}} - {{cipher.name}}" class="box-content-row box-content-row-flex">
+    title="{{title}} - {{cipher.name}}" class="box-content-row box-content-row-flex virtual-scroll-item">
    <div class="row-main">
        <app-vault-icon [cipher]="cipher"></app-vault-icon>
        <div class="row-main-content">
--- a/src/popup/components/password-reprompt.component.html
+++ b/src/popup/components/password-reprompt.component.html
@@ -0,0 +1,38 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()">
+            <div class="modal-body">
+                <div class="box">
+                    <div class="box-header">{{'passwordConfirmation' | i18n}}</div>
+                    <div class="box-content">
+                        <div class="box-content-row box-content-row-flex" appBoxRow>
+                            <div class="row-main">
+                                <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
+                                    class="monospaced" [(ngModel)]="masterPassword" required appAutofocus>
+                            </div>
+                            <div class="action-buttons">
+                                <a class="row-btn" href="#" appStopClick appBlurClick role="button"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        {{'passwordConfirmationDesc' | i18n}}
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
+                    <span>{{'ok' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+                    {{'cancel' | i18n}}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
--- a/src/popup/components/password-reprompt.component.ts
+++ b/src/popup/components/password-reprompt.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+import { PasswordRepromptComponent as BasePasswordRepromptComponent } from 'jslib-angular/components/password-reprompt.component';
+
+@Component({
+    templateUrl: 'password-reprompt.component.html',
+})
+export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}
--- a/src/popup/components/set-pin.component.html
+++ b/src/popup/components/set-pin.component.html
@@ -0,0 +1,44 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" cdkTrapFocus cdkTrapFocusAutoCapture>
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()">
+            <div class="modal-body">
+                <div>
+                    {{'setYourPinCode' | i18n}}
+                </div>
+                <div class="box">
+                    <div class="box-content">
+                        <div class="box-content-row box-content-row-flex" appBoxRow>
+                            <div class="row-main">
+                                <label for="pin">{{'pin' | i18n}}</label>
+                                <input id="pin" type="{{showPin ? 'text' : 'password'}}" name="Pin"
+                                    class="monospaced" [(ngModel)]="pin" required appInputVerbatim cdkFocusInitial>
+                            </div>
+                            <div class="action-buttons">
+                                <a class="row-btn" href="#" appStopClick appBlurClick appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                    (click)="toggleVisibility()">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPin, 'fa-eye-slash': showPin}"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="checkbox">
+                    <label for="masterPasswordOnRestart">
+                        <input type="checkbox" id="masterPasswordOnRestart" name="MasterPasswordOnRestart"
+                            [(ngModel)]="masterPassOnRestart">
+                        <span>{{'lockWithMasterPassOnRestart' | i18n}}</span>
+                    </label>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
+                    <span>{{'ok' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+                    {{'cancel' | i18n}}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
--- a/src/popup/components/set-pin.component.ts
+++ b/src/popup/components/set-pin.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+import { SetPinComponent as BaseSetPinComponent } from 'jslib-angular/components/set-pin.component';
+
+@Component({
+    templateUrl: 'set-pin.component.html',
+})
+export class SetPinComponent extends BaseSetPinComponent {}
--- a/src/popup/scss/box.scss
+++ b/src/popup/scss/box.scss
@@ -200,6 +200,13 @@
        }
    }

+    &.last:last-child:before {
+        border-bottom: 1px solid #000000;
+        @include themify($themes) {
+            border-bottom-color: themed('boxBorderColor');
+        }
+    }
+
    &:after {
        content: "";
        display: table;
--- a/src/popup/scss/grid.scss
+++ b/src/popup/scss/grid.scss
@@ -0,0 +1,11 @@
+.row {
+    display: flex;
+    margin: 0 -15px;
+    width: 100%;
+}
+
+.col {
+    flex-basis: 0;
+    flex-grow: 1;
+    padding: 0 15px;
+}
--- a/src/popup/scss/misc.scss
+++ b/src/popup/scss/misc.scss
@@ -339,6 +339,11 @@ app-vault-icon {
            }
        }
    }
+
+    .enforced-policy-options ul {
+        padding-left: 30px;
+        margin: 0;
+    }
 }

 input[type="password"]::-ms-reveal {
--- a/src/popup/scss/modal.scss
+++ b/src/popup/scss/modal.scss
@@ -0,0 +1,351 @@
+@import "variables.scss";
+
+$white: white;
+$black: black;
+$line-height-base: 14px;
+$border-radius-lg: $border-radius;
+
+// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
+
+$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
+
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal: 1050 !default;
+
+// Padding applied to the modal body
+$modal-inner-padding: 10px !default;
+
+$modal-dialog-margin: .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+//$modal-content-bg: $background-color-alt !default;
+$modal-content-border-color: rgba($black, .2) !default;
+$modal-content-border-width: 1px !default;
+$modal-content-box-shadow-xs: none;
+$modal-content-box-shadow-sm-up: none;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: .5 !default;
+$modal-header-border-color: $border-color-dark !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding: 12px !default;
+
+$modal-lg: 800px !default;
+$modal-md: 500px !default;
+$modal-sm: 300px !default;
+
+$modal-transition: transform .3s ease-out !default;
+
+$close-font-size: $font-size-base * 1.5 !default;
+$close-font-weight: bold !default;
+$close-color: $black !default;
+$close-text-shadow: 0 1px 0 $white !default;
+
+// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    }
+    @else {
+        @content;
+    }
+}
+
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+    $min: map-get($breakpoints, $name);
+    @return if($min != 0, $min, null);
+}
+
+// Custom Added CSS animations
+
+@keyframes modalshow {
+    0% {
+        opacity: 0;
+        transform: translate(0, -25%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+}
+
+@keyframes backdropshow {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: $modal-backdrop-opacity;
+    }
+}
+
+// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss
+
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and stuff
+
+
+// Kill the scroll on the body
+.modal-open {
+    overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-modal;
+    //display: none;
+    overflow: hidden;
+    // Prevent Chrome on Windows from adding a focus outline. For details, see
+    // https://github.com/twbs/bootstrap/pull/10951.
+    outline: 0;
+    // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+    // See also https://github.com/twbs/bootstrap/issues/17695
+    .modal-open & {
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+    position: relative;
+    width: auto;
+    margin: $modal-dialog-margin;
+    // allow clicks to pass through for custom click handling to close modal
+    pointer-events: none;
+    // When fading in the modal, animate it to slide down
+    .modal.fade & {
+        //@include transition($modal-transition);
+        //transform: translate(0, -25%);
+        animation: modalshow 0.3s ease-in;
+    }
+    //.modal.show & {
+    //    transform: translate(0, 0);
+    //}
+    transform: translate(0, 0);
+}
+
+.modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - (#{$modal-dialog-margin} * 2));
+}
+
+// Actual modal
+.modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+    // counteract the pointer-events: none; in the .modal-dialog
+    pointer-events: auto;
+    //background-color: $modal-content-bg;
+    background-clip: padding-box;
+    border: $modal-content-border-width solid $modal-content-border-color;
+    //@include border-radius($border-radius-lg);
+    //@include box-shadow($modal-content-box-shadow-xs);
+    border-radius: $border-radius-lg;
+    box-shadow: $modal-content-box-shadow-xs;
+    // Remove focus outline from opened modal
+    outline: 0;
+
+    @include themify($themes) {
+        background-color: themed('backgroundColorAlt');
+    }
+}
+
+// Modal background
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-modal-backdrop;
+    background-color: $modal-backdrop-bg;
+    // Fade for backdrop
+    &.fade {
+        //opacity: 0;
+        animation: backdropshow 0.1s ease-in;
+    }
+    //&.show {
+    //    opacity: $modal-backdrop-opacity;
+    //}
+    opacity: $modal-backdrop-opacity;
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+    display: flex;
+    align-items: flex-start; // so the close btn always stays on the upper right corner
+    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
+    padding: $modal-header-padding $modal-inner-padding;
+    border-bottom: $modal-header-border-width solid $modal-header-border-color;
+    //@include border-top-radius($border-radius-lg);
+
+    @include themify($themes) {
+        border-bottom-color: themed('borderColor');
+    }
+
+    .close {
+        padding: $modal-header-padding $modal-inner-padding;
+        // auto on the left force icon to the right even when there is no .modal-title
+        margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto;
+    }
+
+    h5 {
+        font-size: $font-size-base;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+
+        .fa {
+            margin-right: 5px;
+        }
+    }
+}
+
+// Title text within header
+.modal-title {
+    margin-bottom: 0;
+    line-height: $modal-title-line-height;
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+    position: relative;
+    // Enable `flex-grow: 1` so that the body take up as much space as possible
+    // when should there be a fixed height on `.modal-dialog`.
+    flex: 1 1 auto;
+    padding: $modal-inner-padding;
+}
+
+// Footer (for actions)
+.modal-footer {
+    display: flex;
+    align-items: center; // vertically center
+    //justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+    padding: $modal-inner-padding;
+    border-top: $modal-footer-border-width solid $modal-footer-border-color;
+
+    @include themify($themes) {
+        border-top-color: themed('borderColor');
+    }
+
+    // Easily place margin between footer elements
+    button {
+        margin-right: 10px;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    .right {
+        margin-left: auto;
+        display: flex;
+    }
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.modal-scrollbar-measure {
+    position: absolute;
+    top: -9999px;
+    width: 50px;
+    height: 50px;
+    overflow: scroll;
+}
+
+// Scale up the modal
+@include media-breakpoint-up(sm) {
+    // Automatically set modal's width for larger viewports
+    .modal-dialog {
+        max-width: $modal-md;
+        margin: $modal-dialog-margin-y-sm-up auto;
+    }
+
+    .modal-dialog-centered {
+        min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
+    }
+
+    .modal-content {
+        //@include box-shadow($modal-content-box-shadow-sm-up);
+        box-shadow: $modal-content-box-shadow-sm-up;
+    }
+
+    .modal-sm {
+        max-width: $modal-sm;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .modal-lg {
+        max-width: $modal-lg;
+    }
+}
+
+// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss
+
+.close {
+    float: right;
+    font-size: $close-font-size;
+    font-weight: $close-font-weight;
+    line-height: 1;
+    color: $close-color;
+    text-shadow: $close-text-shadow;
+    opacity: .5;
+
+    &:hover, &:focus {
+        color: $close-color;
+        text-decoration: none;
+        opacity: .75;
+    }
+    // Opinionated: add "hand" cursor to non-disabled .close elements
+    &:not(:disabled):not(.disabled) {
+        cursor: pointer;
+    }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
+button.close {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    -webkit-appearance: none;
+}
+// stylelint-enable
+
+// box
+
+.modal-content .box {
+    margin-top: 20px;
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
--- a/src/popup/scss/popup.scss
+++ b/src/popup/scss/popup.scss
@@ -1,9 +1,11 @@
@import "../css/webfonts.css";
@import "variables.scss";
@import "base.scss";
+@import "grid.scss";
@import "box.scss";
@import "buttons.scss";
@import "misc.scss";
+@import "modal.scss";
@import "plugins.scss";
@import "environment.scss";
@import "pages.scss";
--- a/src/popup/send/send-add-edit.component.html
+++ b/src/popup/send/send-add-edit.component.html
@@ -116,7 +116,7 @@
                <i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon"></i>
            </div>
        </div>
-        <ng-container *ngIf="showOptions">
+        <div [hidden]="!showOptions">
            <app-send-efflux-dates
                [initialDeletionDate]="send.deletionDate" [initialExpirationDate]="send.expirationDate" 
                [editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)" (popOutWindow)="popOutWindow()">
@@ -200,7 +200,7 @@
                    </div>
                </div>
            </div>
-        </ng-container>
+        </div>
        <!-- Delete -->
        <div class="box list" *ngIf="editMode">
            <div class="box-content single-line">
--- a/src/popup/services/password-reprompt.service.ts
+++ b/src/popup/services/password-reprompt.service.ts
@@ -0,0 +1,11 @@
+
+import { Injectable } from '@angular/core';
+
+import { PasswordRepromptService as BasePasswordRepromptService } from 'jslib-angular/services/passwordReprompt.service';
+
+import { PasswordRepromptComponent } from '../components/password-reprompt.component';
+
+@Injectable()
+export class PasswordRepromptService extends BasePasswordRepromptService {
+    component = PasswordRepromptComponent;
+}
--- a/src/popup/services/services.module.ts
+++ b/src/popup/services/services.module.ts
@@ -9,10 +9,12 @@ import { ToasterModule } from 'angular2-toaster';
 import { DebounceNavigationService } from './debounceNavigationService';
 import { LaunchGuardService } from './launch-guard.service';
 import { LockGuardService } from './lock-guard.service';
+import { PasswordRepromptService } from './password-reprompt.service';
 import { UnauthGuardService } from './unauth-guard.service';

 import { AuthGuardService } from 'jslib-angular/services/auth-guard.service';
 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
+import { ModalService } from 'jslib-angular/services/modal.service';
 import { ValidationService } from 'jslib-angular/services/validation.service';

 import { BrowserApi } from '../../browser/browserApi';
@@ -48,7 +50,6 @@ import { TokenService } from 'jslib-common/abstractions/token.service';
 import { TotpService } from 'jslib-common/abstractions/totp.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
-import { PasswordRepromptService } from 'jslib-common/services/passwordReprompt.service';

 import { AutofillService } from '../../services/abstractions/autofill.service';
 import BrowserMessagingService from '../../services/browserMessaging.service';
@@ -76,8 +77,6 @@ const messagingService = new BrowserMessagingService();
 const searchService = isPrivateMode ? null : new PopupSearchService(getBgService<SearchService>('searchService')(),
    getBgService<CipherService>('cipherService')(), getBgService<ConsoleLogService>('consoleLogService')(),
    getBgService<I18nService>('i18nService')());
-const passwordRepromptService = isPrivateMode ? null : new PasswordRepromptService(getBgService<I18nService>('i18nService')(),
-    getBgService<CryptoService>('cryptoService')(), getBgService<PlatformUtilsService>('platformUtilsService')());

 export function initFactory(platformUtilsService: PlatformUtilsService, i18nService: I18nService, storageService: StorageService,
    popupUtilsService: PopupUtilsService): Function {
@@ -126,6 +125,7 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ
        DebounceNavigationService,
        PopupUtilsService,
        BroadcasterService,
+        ModalService,
        { provide: MessagingService, useValue: messagingService },
        { provide: AuthServiceAbstraction, useFactory: getBgService<AuthService>('authService'), deps: [] },
        { provide: StateServiceAbstraction, useValue: stateService },
@@ -188,7 +188,7 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ
            useFactory: () => isPrivateMode ? null : getBgService<I18nService>('i18nService')().translationLocale,
            deps: [],
        },
-        { provide: PasswordRepromptServiceAbstraction, useValue: passwordRepromptService },
+        { provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService },
    ],
 })
 export class ServicesModule {
--- a/src/popup/settings/export.component.html
+++ b/src/popup/settings/export.component.html
@@ -10,15 +10,19 @@
            <span class="title">{{'exportVault' | i18n}}</span>
        </div>
        <div class="right">
-            <button appBlurClick type="submit">{{'submit' | i18n}}</button>
+            <button appBlurClick type="submit" [disabled]="disabledByPolicy">{{'submit' | i18n}}</button>
        </div>
    </header>
    <content>
+        <app-callout type="warning" title="{{'vaultExportDisabled' | i18n}}" *ngIf="disabledByPolicy">
+            {{'personalVaultExportPolicyInEffect' | i18n}}
+        </app-callout>
+
        <div class="box">
            <div class="box-content">
                <div class="box-content-row" appBoxRow>
                    <label for="format">{{'fileFormat' | i18n}}</label>
-                    <select id="format" name="Format" [(ngModel)]="format">
+                    <select id="format" name="Format" [(ngModel)]="format" [disabled]="disabledByPolicy">
                        <option value="json">.json</option>
                        <option value="csv">.csv</option>
                        <option value="encrypted_json">.json (Encrypted)</option>
@@ -28,7 +32,8 @@
                    <div class="row-main">
                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                            class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim appAutofocus>
+                            class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim appAutofocus
+                            [disabled]="disabledByPolicy">
                    </div>
                    <div class="action-buttons">
                        <button type="button" class="row-btn" appStopClick appBlurClick
--- a/src/popup/settings/export.component.ts
+++ b/src/popup/settings/export.component.ts
@@ -6,6 +6,7 @@ import { EventService } from 'jslib-common/abstractions/event.service';
 import { ExportService } from 'jslib-common/abstractions/export.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib-common/abstractions/policy.service';

 import { ExportComponent as BaseExportComponent } from 'jslib-angular/components/export.component';

@@ -16,8 +17,8 @@ import { ExportComponent as BaseExportComponent } from 'jslib-angular/components
 export class ExportComponent extends BaseExportComponent {
    constructor(cryptoService: CryptoService, i18nService: I18nService,
        platformUtilsService: PlatformUtilsService, exportService: ExportService,
-        eventService: EventService, private router: Router) {
-        super(cryptoService, i18nService, platformUtilsService, exportService, eventService, window);
+        eventService: EventService, policyService: PolicyService, private router: Router) {
+        super(cryptoService, i18nService, platformUtilsService, exportService, eventService, policyService, window);
    }

    protected saved() {
--- a/src/popup/settings/settings.component.html
+++ b/src/popup/settings/settings.component.html
@@ -28,13 +28,7 @@
    <div class="box list">
        <div class="box-header">{{'security' | i18n}}</div>
        <div class="box-content single-line">
-            <div class="box-content-row display-block" appBoxRow>
-                <label for="vaultTimeout">{{'vaultTimeout' | i18n}}</label>
-                <select #vaultTimeoutSelect id="vaultTimeout" name="VaultTimeouts" [ngModel]="vaultTimeout"
-                    (ngModelChange)="saveVaultTimeout($event)">
-                    <option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{o.name}}</option>
-                </select>
-            </div>
+            <app-vault-timeout-input [vaultTimeouts]="vaultTimeouts" [formControl]="vaultTimeout" ngDefaultControl></app-vault-timeout-input>
            <div class="box-content-row display-block" appBoxRow>
                <label for="vaultTimeoutAction">{{'vaultTimeoutAction' | i18n}}</label>
                <select #vaultTimeoutActionSelect id="vaultTimeoutAction" name="VaultTimeoutActions"
@@ -50,6 +44,10 @@
                <label for="biometric">{{'unlockWithBiometrics' | i18n}}</label>
                <input id="biometric" type="checkbox" (change)="updateBiometric()" [(ngModel)]="biometric">
            </div>
+            <div class="box-content-row box-content-row-checkbox" appBoxRow *ngIf="supportsBiometric">
+                <label for="autoBiometricsPrompt">{{'disableAutoBiometricsPrompt' | i18n}}</label>
+                <input id="autoBiometricsPrompt" type="checkbox" (change)="updateAutoBiometricsPrompt()" [disabled]="!biometric" [(ngModel)]="disableAutoBiometricsPrompt">
+            </div>
            <button type="button" class="box-content-row box-content-row-flex text-default" appStopClick appBlurClick
                (click)="lock()">
                <div class="row-main">{{'lockNow' | i18n}}</div>
--- a/src/popup/settings/settings.component.ts
+++ b/src/popup/settings/settings.component.ts
@@ -1,12 +1,13 @@
-import Swal from 'sweetalert2/src/sweetalert2.js';
-
 import {
    Component,
    ElementRef,
    OnInit,
    ViewChild,
 } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
+import { ToasterService } from 'angular2-toaster';
+import Swal from 'sweetalert2/src/sweetalert2.js';

 import { BrowserApi } from '../../browser/browserApi';

@@ -24,6 +25,10 @@ import { UserService } from 'jslib-common/abstractions/user.service';
 import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
 import { PopupUtilsService } from '../services/popup-utils.service';

+import { ModalService } from 'jslib-angular/services/modal.service';
+
+import { SetPinComponent } from '../components/set-pin.component';
+
 const RateUrls = {
    [DeviceType.ChromeExtension]:
        'https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb/reviews',
@@ -44,22 +49,24 @@ const RateUrls = {
    templateUrl: 'settings.component.html',
 })
 export class SettingsComponent implements OnInit {
-    @ViewChild('vaultTimeoutSelect', { read: ElementRef, static: true }) vaultTimeoutSelectRef: ElementRef;
    @ViewChild('vaultTimeoutActionSelect', { read: ElementRef, static: true }) vaultTimeoutActionSelectRef: ElementRef;
    vaultTimeouts: any[];
-    vaultTimeout: number = null;
    vaultTimeoutActions: any[];
    vaultTimeoutAction: string;
    pin: boolean = null;
    supportsBiometric: boolean;
    biometric: boolean = false;
+    disableAutoBiometricsPrompt = true;
    previousVaultTimeout: number = null;

+    vaultTimeout: FormControl = new FormControl(null);
+
    constructor(private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
        private vaultTimeoutService: VaultTimeoutService, private storageService: StorageService,
        public messagingService: MessagingService, private router: Router,
        private environmentService: EnvironmentService, private cryptoService: CryptoService,
-        private userService: UserService, private popupUtilsService: PopupUtilsService) {
+        private userService: UserService, private popupUtilsService: PopupUtilsService,
+        private modalService: ModalService, private toasterService: ToasterService) {
    }

    async ngOnInit() {
@@ -89,14 +96,18 @@ export class SettingsComponent implements OnInit {
            { name: this.i18nService.t('logOut'), value: 'logOut' },
        ];

-        let timeout = await this.storageService.get<number>(ConstantsService.vaultTimeoutKey);
+        let timeout = await this.vaultTimeoutService.getVaultTimeout();
        if (timeout != null) {
            if (timeout === -2 && !showOnLocked) {
                timeout = -1;
            }
-            this.vaultTimeout = timeout;
+            this.vaultTimeout.setValue(timeout);
        }
-        this.previousVaultTimeout = this.vaultTimeout;
+        this.previousVaultTimeout = this.vaultTimeout.value;
+        this.vaultTimeout.valueChanges.subscribe(value => {
+            this.saveVaultTimeout(value);
+        });
+
        const action = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
        this.vaultTimeoutAction = action == null ? 'lock' : action;

@@ -105,6 +116,8 @@ export class SettingsComponent implements OnInit {

        this.supportsBiometric = await this.platformUtilsService.supportsBiometric();
        this.biometric = await this.vaultTimeoutService.isBiometricLockSet();
+        this.disableAutoBiometricsPrompt = await this.storageService.get<boolean>(
+            ConstantsService.disableAutoBiometricsPromptKey) ?? true;
    }

    async saveVaultTimeout(newValue: number) {
@@ -113,18 +126,19 @@ export class SettingsComponent implements OnInit {
                this.i18nService.t('neverLockWarning'), null,
                this.i18nService.t('yes'), this.i18nService.t('cancel'), 'warning');
            if (!confirmed) {
-                this.vaultTimeouts.forEach((option: any, i) => {
-                    if (option.value === this.vaultTimeout) {
-                        this.vaultTimeoutSelectRef.nativeElement.value = i + ': ' + this.vaultTimeout;
-                    }
-                });
+                this.vaultTimeout.setValue(this.previousVaultTimeout);
                return;
            }
        }
-        this.previousVaultTimeout = this.vaultTimeout;
-        this.vaultTimeout = newValue;
-        await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout != null ? this.vaultTimeout : null,
-            this.vaultTimeoutAction);
+
+        if (!this.vaultTimeout.valid) {
+            this.toasterService.popAsync('error', null, this.i18nService.t('vaultTimeoutToLarge'));
+            return;
+        }
+
+        this.previousVaultTimeout = this.vaultTimeout.value;
+
+        await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout.value, this.vaultTimeoutAction);
        if (this.previousVaultTimeout == null) {
            this.messagingService.send('bgReseedStorage');
        }
@@ -145,65 +159,27 @@ export class SettingsComponent implements OnInit {
                return;
            }
        }
+
+        if (!this.vaultTimeout.valid) {
+            this.toasterService.popAsync('error', null, this.i18nService.t('vaultTimeoutToLarge'));
+            return;
+        }
+
        this.vaultTimeoutAction = newValue;
-        await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout != null ? this.vaultTimeout : null,
-            this.vaultTimeoutAction);
+        await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout.value, this.vaultTimeoutAction);
    }

    async updatePin() {
        if (this.pin) {
-            const div = document.createElement('div');
-            const label = document.createElement('label');
-            label.className = 'checkbox';
-            const checkboxText = document.createElement('span');
-            const restartText = document.createTextNode(this.i18nService.t('lockWithMasterPassOnRestart'));
-            checkboxText.appendChild(restartText);
-            label.innerHTML = '<input type="checkbox" id="master-pass-restart" checked>';
-            label.appendChild(checkboxText);
+            const ref = this.modalService.open(SetPinComponent, { allowMultipleModals: true });

-            div.innerHTML =
-                `<div class="swal2-text">${this.i18nService.t('setYourPinCode')}</div>` +
-                '<input type="text" class="swal2-input" id="pin-val" autocomplete="off" ' +
-                'autocapitalize="none" autocorrect="none" spellcheck="false" inputmode="verbatim">';
-
-            (div.querySelector('#pin-val') as HTMLInputElement).placeholder = this.i18nService.t('pin');
-            div.appendChild(label);
-
-            const submitted = await Swal.fire({
-                heightAuto: false,
-                buttonsStyling: false,
-                html: div,
-                showCancelButton: true,
-                cancelButtonText: this.i18nService.t('cancel'),
-                showConfirmButton: true,
-                confirmButtonText: this.i18nService.t('submit'),
-            });
-
-            let pin: string = null;
-            let masterPassOnRestart: boolean = null;
-            if (submitted.value) {
-                pin = (document.getElementById('pin-val') as HTMLInputElement).value;
-                masterPassOnRestart = (document.getElementById('master-pass-restart') as HTMLInputElement).checked;
-            }
-            if (pin != null && pin.trim() !== '') {
-                const kdf = await this.userService.getKdf();
-                const kdfIterations = await this.userService.getKdfIterations();
-                const email = await this.userService.getEmail();
-                const pinKey = await this.cryptoService.makePinKey(pin, email, kdf, kdfIterations);
-                const key = await this.cryptoService.getKey();
-                const pinProtectedKey = await this.cryptoService.encrypt(key.key, pinKey);
-                if (masterPassOnRestart) {
-                    const encPin = await this.cryptoService.encrypt(pin);
-                    await this.storageService.save(ConstantsService.protectedPin, encPin.encryptedString);
-                    this.vaultTimeoutService.pinProtectedKey = pinProtectedKey;
-                } else {
-                    await this.storageService.save(ConstantsService.pinProtectedKey, pinProtectedKey.encryptedString);
-                }
-            } else {
+            if (ref == null) {
                this.pin = false;
+                return;
            }
-        }
-        if (!this.pin) {
+
+            this.pin = await ref.onClosedPromise();
+        } else {
            await this.cryptoService.clearPinProtectedKey();
            await this.vaultTimeoutService.clear();
        }
@@ -277,6 +253,10 @@ export class SettingsComponent implements OnInit {
        }
    }

+    async updateAutoBiometricsPrompt() {
+        await this.storageService.save(ConstantsService.disableAutoBiometricsPromptKey, this.disableAutoBiometricsPrompt);
+    }
+
    async lock() {
        await this.vaultTimeoutService.lock(true);
    }
--- a/src/popup/settings/vault-timeout-input.component.html
+++ b/src/popup/settings/vault-timeout-input.component.html
@@ -0,0 +1,29 @@
+<app-callout type="info" *ngIf="vaultTimeoutPolicy">
+    {{'vaultTimeoutPolicyInEffect' | i18n : vaultTimeoutPolicyHours : vaultTimeoutPolicyMinutes}}
+</app-callout>
+
+<div [formGroup]="form">
+    <div class="box-content-row last display-block" appBoxRow>
+        <label for="vaultTimeout">{{'vaultTimeout' | i18n}}</label>
+        <select id="vaultTimeout" name="VaultTimeout" formControlName="vaultTimeout" class="form-control">
+            <option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{o.name}}</option>
+        </select>
+    </div>
+    <div class="box-content-row last" *ngIf="showCustom">
+        <div formGroupName="custom" class="row">
+            <div class="col">
+                <div class="display-block" appBoxRow>
+                    <label for="customVaultTimeout">{{'hours' | i18n }}</label>
+                    <input id="hours" class="form-control" type="number" min="0" name="hours" formControlName="hours">
+                </div>
+            </div>
+            <div class="col">
+                <div class="display-block" appBoxRow>
+                    <label for="customVaultTimeout">{{'minutes' | i18n }}</label>
+                    <input id="minutes" class="form-control" type="number" min="0" max="59" name="minutes"
+                        formControlName="minutes">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
--- a/src/popup/settings/vault-timeout-input.component.ts
+++ b/src/popup/settings/vault-timeout-input.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import {
+    NG_VALIDATORS,
+    NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+
+import {
+    VaultTimeoutInputComponent as VaultTimeoutInputComponentBase
+} from 'jslib-angular/components/settings/vault-timeout-input.component';
+
+@Component({
+    selector: 'app-vault-timeout-input',
+    templateUrl: 'vault-timeout-input.component.html',
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: VaultTimeoutInputComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: VaultTimeoutInputComponent,
+        },
+    ],
+})
+export class VaultTimeoutInputComponent extends VaultTimeoutInputComponentBase {
+}
--- a/src/popup/vault/ciphers.component.html
+++ b/src/popup/vault/ciphers.component.html
@@ -63,7 +63,8 @@
                </button>
            </ng-container>
        </div>
-        <cdk-virtual-scroll-viewport itemSize="46" *ngIf="ciphers.length" #virtualScrollViewport>
+        <cdk-virtual-scroll-viewport itemSize="46" minBufferPx="400" maxBufferPx="600" *ngIf="ciphers.length"
+            #virtualScrollViewport>
            <div class="box list only-list">
                <div class="box-header">
                    {{groupingTitle}}
--- a/src/popup/vault/groupings.component.html
+++ b/src/popup/vault/groupings.component.html
@@ -145,7 +145,8 @@
        <div class="no-items" *ngIf="!ciphers || !ciphers.length">
            <p>{{'noItemsInList' | i18n}}</p>
        </div>
-        <cdk-virtual-scroll-viewport itemSize="46" *ngIf="ciphers && ciphers.length > 0">
+        <cdk-virtual-scroll-viewport itemSize="46" minBufferPx="400" maxBufferPx="600"
+            *ngIf="ciphers && ciphers.length > 0">
            <div class="box list full-list">
                <div class="box-content">
                    <app-cipher-row *cdkVirtualFor="let searchedCipher of ciphers" [cipher]="searchedCipher"
--- a/src/popup/vault/view.component.ts
+++ b/src/popup/vault/view.component.ts
@@ -21,18 +21,19 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { TokenService } from 'jslib-common/abstractions/token.service';
 import { TotpService } from 'jslib-common/abstractions/totp.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
-import { Cipher } from 'jslib-common/models/domain';
-import { LoginUriView } from 'jslib-common/models/view';

 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';

+import { Cipher } from 'jslib-common/models/domain/cipher';
+import { LoginUriView } from 'jslib-common/models/view/loginUriView';
+
+import { CipherType } from 'jslib-common/enums/cipherType';
+
 import { ViewComponent as BaseViewComponent } from 'jslib-angular/components/view.component';
 import { BrowserApi } from '../../browser/browserApi';
 import { AutofillService } from '../../services/abstractions/autofill.service';
 import { PopupUtilsService } from '../services/popup-utils.service';

-import { CipherType } from 'jslib-common/enums';
-
 const BroadcasterSubscriptionId = 'ChildViewComponent';

@Component({