[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

View File

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

View File

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