Update verify master password component (#553)

This commit is contained in:
Oscar Hinton 2021-11-17 11:57:05 +01:00 committed by GitHub
parent e1b1efeea2
commit ea9a8b979d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 3 deletions

View File

@ -5,14 +5,20 @@
</ng-container>
<ng-container *ngIf="usesKeyConnector">
<div class="form-group">
<button type="button" class="btn btn-primary" (click)="requestOTP()" [disabled]="disableRequestOTP">
{{'requestVerificationCode' | i18n}}
<label class="d-block">{{'sendVerificationCode' | i18n}}</label>
<button type="button" class="btn btn-outline-secondary" (click)="requestOTP()" [disabled]="disableRequestOTP">
{{'sendCode' | i18n}}
</button>
<span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode">
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
{{'codeSent' | i18n}}
</span>
</div>
<div class="form-group">
<label for="verificationCode">{{'verificationCode' | i18n}}</label>
<input id="verificationCode" type="input" name="verificationCode" class="form-control"
[formControl]="secret" required appAutofocus appInputVerbatim>
<small class="form-text text-muted">{{'confirmIdentity' | i18n}}</small>
</div>
</ng-container>

View File

@ -1,3 +1,9 @@
import {
animate,
style,
transition,
trigger,
} from '@angular/animations';
import {
Component,
OnInit,
@ -25,10 +31,19 @@ import { Verification } from 'jslib-common/types/verification';
useExisting: VerifyMasterPasswordComponent,
},
],
animations: [
trigger('sent', [
transition(':enter', [
style({ opacity: 0 }),
animate('100ms', style({ opacity: 1 })),
]),
]),
],
})
export class VerifyMasterPasswordComponent implements ControlValueAccessor, OnInit {
usesKeyConnector: boolean = false;
disableRequestOTP: boolean = false;
sentCode: boolean = false;
secret = new FormControl('');
@ -47,7 +62,12 @@ export class VerifyMasterPasswordComponent implements ControlValueAccessor, OnIn
async requestOTP() {
if (this.usesKeyConnector) {
this.disableRequestOTP = true;
try {
await this.userVerificationService.requestOTP();
this.sentCode = true;
} finally {
this.disableRequestOTP = false;
}
}
}