bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-22 03:03:43 +00:00
Code Issues Releases Wiki Activity

[PM-2414] Angular 16 Upgrade - SetPinComponent (#7214)

Browse Source 
* migrate to DialogService

* use static method

* add reactive form dependencies

* begin migrating to reactive forms

* migrate template inputs to use CL

* update set-pin.component.ts file to work with reactive forms

* migrate desktop template and class file to Dialog and ReactiveForms

* update settings page

* remove old properties

* update settings form upon dialog close

* refactor ngOnInit()

* remove duplicate validator (already have a validator in class file)
This commit is contained in:
rr-bw
2023-12-27 10:48:06 -08:00
committed by GitHub
parent 3d30823d2a
commit 00bb814fbe
9 changed files with 146 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
apps/desktop/src/auth/components/set-pin.component.html
View File

@@ -1,65 +1,29 @@
<div class="modal fade" role="dialog" aria-modal="true">
<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
appAutofocus
/>
</div>
<div class="action-buttons">
<button
type="button"
class="row-btn"
appStopClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPin"
(click)="toggleVisibility()"
>
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPin, 'bwi-eye-slash': showPin }"
></i>
</button>
</div>
</div>
</div>
</div>
<div class="checkbox" *ngIf="showMasterPassOnRestart">
<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">
<span>{{ "ok" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{ "cancel" | i18n }}
</button>
</div>
</form>
</div>
</div>
<form [bitSubmit]="submit" [formGroup]="setPinForm">
<bit-dialog>
<div class="tw-font-semibold" bitDialogTitle>
{{ "unlockWithPin" | i18n }}
</div>
<div bitDialogContent>
<p>
{{ "setYourPinCode" | i18n }}
</p>
<bit-form-field>
<bit-label>{{ "pin" | i18n }}</bit-label>
<input class="tw-font-mono" bitInput type="password" formControlName="pin" />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
</bit-form-field>
<label class="tw-flex tw-items-start tw-gap-2" *ngIf="showMasterPassOnRestart">
<input class="tw-mt-1" type="checkbox" bitCheckbox formControlName="masterPassOnRestart" />
<span>{{ "lockWithMasterPassOnRestart" | i18n }}</span>
</label>
</div>
<div bitDialogFooter>
<button type="submit" bitButton bitFormButton buttonType="primary">
<span>{{ "ok" | i18n }}</span>
</button>
<button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
{{ "cancel" | i18n }}
</button>
</div>
</bit-dialog>
</form>

29
apps/desktop/src/auth/components/set-pin.component.ts
View File

@@ -1,8 +1,33 @@
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { SetPinComponent as BaseSetPinComponent } from "@bitwarden/angular/auth/components/set-pin.component";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
AsyncActionsModule,
ButtonModule,
DialogModule,
DialogService,
FormFieldModule,
IconButtonModule,
} from "@bitwarden/components";
@Component({
standalone: true,
templateUrl: "set-pin.component.html",
imports: [
DialogModule,
CommonModule,
JslibModule,
ButtonModule,
IconButtonModule,
ReactiveFormsModule,
AsyncActionsModule,
FormFieldModule,
],
})
export class SetPinComponent extends BaseSetPinComponent {}
export class SetPinComponent extends BaseSetPinComponent {
static open(dialogService: DialogService) {
return dialogService.open<boolean>(SetPinComponent);
}
}