bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-21 02:33:46 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* Use separate modal for set pin

* Fix modal style and layout

* Minor fixes

* Remove incorrect label

* Fix initial focus and tab a11y

* Fix unrelated linting

* Update jslib
This commit is contained in:
Thomas Rittson
2021-09-16 05:56:29 +10:00
committed by GitHub
parent 205b1153de
commit 8f700b0b45
5 changed files with 68 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/popup/settings/settings.component.ts
View File

@@ -25,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',
@@ -61,7 +65,7 @@ export class SettingsComponent implements OnInit {
public messagingService: MessagingService, private router: Router,
private environmentService: EnvironmentService, private cryptoService: CryptoService,
private userService: UserService, private popupUtilsService: PopupUtilsService,
private toasterService: ToasterService) {
private modalService: ModalService, private toasterService: ToasterService) {
}
async ngOnInit() {
@@ -164,58 +168,15 @@ 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;
}
}
if (!this.pin) {
this.pin = await ref.onClosedPromise();
} else {
await this.cryptoService.clearPinProtectedKey();
await this.vaultTimeoutService.clear();
}