Use a modal to set the unlock pin (#1064)

* Use separate modal to set pin

* Remove incorrect label

* Fix tab focus for settings and set-pin modals

* Remove leftover code

* Update jslib

jslib

@@ -1 +1 @@
-Subproject commit 5f64d956520612a681611a27c5f4f2e5f27b640e
+Subproject commit a85c45a34ed90b09f59ec27bdba754d66452915e

src/app/accounts/settings.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" attr.aria-label="{{'settings' | i18n}}">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" attr.aria-label="{{'settings' | i18n}}" cdkTrapFocus cdkTrapFocusAutoCapture>
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-body form">

src/app/accounts/settings.component.ts

@@ -18,11 +18,15 @@ import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.serv
 
 import { ConstantsService } from 'jslib-common/services/constants.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { ElectronConstants } from 'jslib-electron/electronConstants';
 
 import { Utils } from 'jslib-common/misc/utils';
 import { isWindowsStore } from 'jslib-electron/utils';
 
+import { SetPinComponent } from '../components/set-pin.component';
+
 @Component({
     selector: 'app-settings',
     templateUrl: 'settings.component.html',
@@ -69,7 +73,8 @@ export class SettingsComponent implements OnInit {
     constructor(private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
         private storageService: StorageService, private vaultTimeoutService: VaultTimeoutService,
         private stateService: StateService, private messagingService: MessagingService,
-        private userService: UserService, private cryptoService: CryptoService) {
+        private userService: UserService, private cryptoService: CryptoService,
+        private modalService: ModalService) {
         const isMac = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop;
 
         // Workaround to avoid ghosting trays https://github.com/electron/electron/issues/17622
@@ -188,56 +193,14 @@ export class SettingsComponent implements OnInit {
 
     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;
             }
+
+            this.pin = await ref.onClosedPromise();
         }
         if (!this.pin) {
             await this.cryptoService.clearPinProtectedKey();

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { ToasterModule } from 'angular2-toaster';
 import { AppRoutingModule } from './app-routing.module';
 import { ServicesModule } from './services.module';
 
+import { A11yModule } from '@angular/cdk/a11y';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { DatePipe } from '@angular/common';
@@ -68,6 +69,7 @@ import { SendComponent } from './send/send.component';
 import { NavComponent } from './layout/nav.component';
 
 import { PasswordRepromptComponent } from './components/password-reprompt.component';
+import { SetPinComponent } from './components/set-pin.component';
 
 import { registerLocaleData } from '@angular/common';
 import localeAf from '@angular/common/locales/af';
@@ -171,6 +173,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         ServicesModule,
         ToasterModule.forRoot(),
         ScrollingModule,
+        A11yModule,
     ],
     declarations: [
         A11yTitleDirective,
@@ -220,6 +223,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         VaultComponent,
         ViewComponent,
         PasswordRepromptComponent,
+        SetPinComponent,
     ],
     providers: [DatePipe],
     bootstrap: [AppComponent],

src/app/components/password-reprompt.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+<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">

src/app/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 set-pin-modal" 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>

src/app/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 { }

src/scss/misc.scss

@@ -420,3 +420,9 @@ app-root > #loading {
     text-align: left;
     margin-top: 15px;
 }
+
+.set-pin-modal {
+    .box {
+        margin-bottom: 15px;
+    }
+}