diff --git a/src/app/accounts/settings.component.ts b/src/app/accounts/settings.component.ts
index 6d26ac5415..47b5114da1 100644
--- a/src/app/accounts/settings.component.ts
+++ b/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 = '
';
- label.appendChild(checkboxText);
+ const ref = this.modalService.open(SetPinComponent, { allowMultipleModals: true });
- div.innerHTML =
- `
${this.i18nService.t('setYourPinCode')}
` +
- '
';
-
- (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();
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7899e8a209..501ba8564f 100644
--- a/src/app/app.module.ts
+++ b/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],
diff --git a/src/app/components/password-reprompt.component.html b/src/app/components/password-reprompt.component.html
index 6a5e670dea..0033cdd286 100644
--- a/src/app/components/password-reprompt.component.html
+++ b/src/app/components/password-reprompt.component.html
@@ -1,4 +1,4 @@
-