support for unlocking with PIN code

src/popup/accounts/lock.component.html

@@ -2,7 +2,7 @@
     <header>
         <div class="left"></div>
         <div class="center">
-            <span class="title">{{'verifyMasterPassword' | i18n}}</span>
+            <span class="title">{{(pinLock ? 'verifyPin' : 'verifyMasterPassword') | i18n}}</span>
         </div>
         <div class="right">
             <button type="submit" appBlurClick>{{'unlock' | i18n}}</button>
@@ -12,7 +12,12 @@
         <div class="box">
             <div class="box-content">
                 <div class="box-content-row box-content-row-flex" appBoxRow>
-                    <div class="row-main">
+                    <div class="row-main" *ngIf="pinLock">
+                        <label for="pin">{{'pin' | i18n}}</label>
+                        <input id="pin" type="{{showPassword ? 'text' : 'password'}}" name="PIN"
+                               class="monospaced" [(ngModel)]="pin" required appInputVerbatim>
+                    </div>
+                    <div class="row-main" *ngIf="!pinLock">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
                                class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
@@ -27,7 +32,7 @@
                 </div>
             </div>
             <div class="box-footer">
-                <p>{{'yourVaultIsLocked' | i18n}}</p>
+                <p>{{(pinLock ? 'yourVaultIsLockedPinCode' : 'yourVaultIsLocked') | i18n}}</p>
                 {{'loggedInAs' | i18n : email}}
             </div>
         </div>

src/popup/accounts/lock.component.ts

@@ -3,8 +3,10 @@ import { Router } from '@angular/router';
 
 import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { LockService } from 'jslib/abstractions/lock.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
 import { LockComponent as BaseLockComponent } from 'jslib/angular/components/lock.component';
@@ -16,15 +18,17 @@ import { LockComponent as BaseLockComponent } from 'jslib/angular/components/loc
 export class LockComponent extends BaseLockComponent {
     constructor(router: Router, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
-        userService: UserService, cryptoService: CryptoService) {
-        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService);
+        userService: UserService, cryptoService: CryptoService,
+        storageService: StorageService, lockService: LockService) {
+        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
+            storageService, lockService);
         this.successRoute = '/tabs/current';
     }
 
     async ngOnInit() {
         await super.ngOnInit();
         window.setTimeout(() => {
-            document.getElementById('masterPassword').focus();
+            document.getElementById(this.pinLock ? 'pin' : 'masterPassword').focus();
         }, 100);
     }
 }

src/popup/scss/plugins.scss

@@ -158,6 +158,20 @@ $fa-font-path: "~font-awesome/fonts";
         }
     }
 
+    > .swal-text:first-child {
+        margin-top: 20px;
+    }
+
+    .swal-content__input, .swal-content__textarea {
+        border: 1px solid #000000;
+        border-radius: $border-radius;
+        @include themify($themes) {
+            border-color: themed('inputBorderColor');
+            color: themed('textColor');
+            background-color: themed('inputBackgroundColor');
+        }
+    }
+
     .swal-footer {
         padding: 15px 10px 10px 10px;
         margin: 0;

src/popup/settings/settings.component.html

@@ -31,6 +31,10 @@
                     <option *ngFor="let o of lockOptions" [ngValue]="o.value">{{o.name}}</option>
                 </select>
             </div>
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="pin">{{'unlockWithPin' | i18n}}</label>
+                <input id="pin" type="checkbox" (change)="updatePin()" [(ngModel)]="pin">
+            </div>
             <a class="box-content-row box-content-row-flex text-default" href="#"
                appStopClick appBlurClick (click)="lock()">
                 <div class="row-main">{{'lockNow' | i18n}}</div>

src/popup/settings/settings.component.ts

@@ -47,6 +47,7 @@ export class SettingsComponent implements OnInit {
     @ViewChild('lockOptionsSelect', { read: ElementRef }) lockOptionsSelectRef: ElementRef;
     lockOptions: any[];
     lockOption: number = null;
+    pin: boolean = null;
     previousLockOption: number = null;
 
     constructor(private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
@@ -87,6 +88,8 @@ export class SettingsComponent implements OnInit {
             this.lockOption = option;
         }
         this.previousLockOption = this.lockOption;
+
+        this.pin = await this.lockService.isPinLockSet();
     }
 
     async saveLockOption(newValue: number) {
@@ -111,6 +114,27 @@ export class SettingsComponent implements OnInit {
         }
     }
 
+    async updatePin() {
+        if (this.pin) {
+            const pin = await swal({
+                text: this.i18nService.t('setYourPinCode'),
+                content: { element: 'input' },
+                buttons: [this.i18nService.t('cancel'), this.i18nService.t('submit')],
+            });
+            if (pin != null && pin.trim() !== '') {
+                const pinKey = await this.cryptoService.makePinKey(pin, await this.userService.getEmail());
+                const key = await this.cryptoService.getKey();
+                const pinProtectedKey = await this.cryptoService.encrypt(key.key, pinKey);
+                await this.storageService.save(ConstantsService.pinProtectedKey, pinProtectedKey.encryptedString);
+            } else {
+                this.pin = false;
+            }
+        }
+        if (!this.pin) {
+            await this.storageService.remove(ConstantsService.pinProtectedKey);
+        }
+    }
+
     async lock() {
         this.analytics.eventTrack.next({ action: 'Lock Now' });
         await this.lockService.lock();