vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PM-2135] feat: refactor user-verification component

This commit is contained in:
Andreas Coroiu 2023-05-05 10:33:39 +02:00
parent b287ab3398
commit 5ccf5584b8
No known key found for this signature in database
GPG Key ID: E70B5FFC81DFEC1A
2 changed files with 27 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
apps/web/src/app/components/user-verification/user-verification.component.html
View File

@ -1,46 +1,41 @@
<ng-container *ngIf="!usesKeyConnector"> <ng-container *ngIf="!usesKeyConnector">
<label for="masterPassword">{{ "masterPass" | i18n }}</label> <bit-form-field disableMargin>
<input <bit-label>{{ "masterPass" | i18n }}</bit-label>
id="masterPassword" <input
type="password" bitInput
name="MasterPasswordHash" id="masterPassword"
class="form-control" type="password"
[formControl]="secret" name="MasterPasswordHash"
required [formControl]="secret"
appAutofocus appAutofocus
appInputVerbatim appInputVerbatim
/> />
<small class="form-text text-muted">{{ "confirmIdentity" | i18n }}</small> <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
</bit-form-field>
</ng-container> </ng-container>
<ng-container *ngIf="usesKeyConnector"> <ng-container *ngIf="usesKeyConnector">
<div class="form-group"> <div class="tw-mb-6">
<label class="d-block">{{ "sendVerificationCode" | i18n }}</label> <label class="tw-block">{{ "sendVerificationCode" | i18n }}</label>
<button <button type="button" bitButton buttonType="secondary" [bitAction]="requestOTP">
type="button"
class="btn btn-outline-secondary"
(click)="requestOTP()"
[disabled]="disableRequestOTP"
>
{{ "sendCode" | i18n }} {{ "sendCode" | i18n }}
</button> </button>
<span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode"> <span class="tw-ml-2 tw-text-success" role="alert" @sent *ngIf="sentCode">
<i class="bwi bwi-check-circle" aria-hidden="true"></i> <i class="bwi bwi-check-circle" aria-hidden="true"></i>
{{ "codeSent" | i18n }} {{ "codeSent" | i18n }}
</span> </span>
</div> </div>
<div class="form-group"> <bit-form-field disableMargin>
<label for="verificationCode">{{ "verificationCode" | i18n }}</label> <bit-label>{{ "verificationCode" | i18n }}</bit-label>
<input <input
bitInput
type="text"
id="verificationCode" id="verificationCode"
type="input"
name="verificationCode" name="verificationCode"
class="form-control"
[formControl]="secret" [formControl]="secret"
required
appAutofocus appAutofocus
appInputVerbatim appInputVerbatim
/> />
<small class="form-text text-muted">{{ "confirmIdentity" | i18n }}</small> <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
</div> </bit-form-field>
</ng-container> </ng-container>

8
libs/angular/src/auth/components/user-verification.component.ts
View File

@ -1,5 +1,5 @@
import { Directive, OnInit } from "@angular/core"; import { Directive, OnInit } from "@angular/core";
import { ControlValueAccessor, FormControl } from "@angular/forms"; import { ControlValueAccessor, FormControl, Validators } from "@angular/forms";
import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction"; import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service"; import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service";
@ -22,7 +22,7 @@ export class UserVerificationComponent implements ControlValueAccessor, OnInit {
disableRequestOTP = false; disableRequestOTP = false;
sentCode = false; sentCode = false;
secret = new FormControl(""); secret = new FormControl("", [Validators.required]);
private onChange: (value: Verification) => void; private onChange: (value: Verification) => void;
@ -39,7 +39,7 @@ export class UserVerificationComponent implements ControlValueAccessor, OnInit {
this.secret.valueChanges.subscribe((secret: string) => this.processChanges(secret)); this.secret.valueChanges.subscribe((secret: string) => this.processChanges(secret));
} }
async requestOTP() { requestOTP = async () => {
if (this.usesKeyConnector) { if (this.usesKeyConnector) {
this.disableRequestOTP = true; this.disableRequestOTP = true;
try { try {
@ -49,7 +49,7 @@ export class UserVerificationComponent implements ControlValueAccessor, OnInit {
this.disableRequestOTP = false; this.disableRequestOTP = false;
} }
} }
} };
writeValue(obj: any): void { writeValue(obj: any): void {
this.secret.setValue(obj); this.secret.setValue(obj);