bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 16:53:34 +00:00
Code Issues Releases Wiki Activity

[PM-8938] two factor settings authenticator validation (#9857)

Browse Source 
* add validation

* minor adjustments

* better useability on submit button

* removed img

* fixed formatting
This commit is contained in:
Ike
2024-06-27 12:38:10 -07:00
committed by GitHub
parent c01f6be286
commit 2042b3a26c
3 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/src/app/auth/settings/two-factor-authenticator.component.html
View File

@@ -10,7 +10,6 @@
<p bitTypography="body1">{{ "twoStepLoginProviderEnabled" | i18n }}</p> <p bitTypography="body1">{{ "twoStepLoginProviderEnabled" | i18n }}</p>
{{ "twoStepAuthenticatorReaddDesc" | i18n }} {{ "twoStepAuthenticatorReaddDesc" | i18n }}
</bit-callout> </bit-callout>
<img class="float-right mfaType0" alt="Authenticator app logo" />
<p bitTypography="body1">{{ "twoStepAuthenticatorNeedApp" | i18n }}</p> <p bitTypography="body1">{{ "twoStepAuthenticatorNeedApp" | i18n }}</p>
</ng-container> </ng-container>
<ng-container *ngIf="!enabled"> <ng-container *ngIf="!enabled">
@@ -72,19 +71,23 @@
{{ "twoStepAuthenticatorScanCodeV2" | i18n }} {{ "twoStepAuthenticatorScanCodeV2" | i18n }}
</ng-container> </ng-container>
<hr *ngIf="enabled" /> <hr *ngIf="enabled" />
<p class="text-center" [ngClass]="{ 'mb-0': enabled }"> <p class="tw-text-center tw-mb-0">
<canvas id="qr"></canvas><br /> <canvas id="qr"></canvas><br />
<code appA11yTitle="{{ 'key' | i18n }}">{{ key }}</code> <code appA11yTitle="{{ 'key' | i18n }}">{{ key }}</code>
</p> </p>
<ng-container *ngIf="!enabled"> <bit-form-field *ngIf="!enabled" [disableMargin]="true">
<bit-form-field> <bit-label>{{ "twoStepAuthenticatorEnterCodeV2" | i18n }}</bit-label>
<bit-label>{{ "twoStepAuthenticatorEnterCodeV2" | i18n }}</bit-label> <input bitInput type="text" formControlName="token" appInputVerbatim />
<input bitInput type="text" formControlName="token" appInputVerbatim /> </bit-form-field>
</bit-form-field>
</ng-container>
</ng-container> </ng-container>
<ng-container bitDialogFooter> <ng-container bitDialogFooter>
<button bitButton bitFormButton type="submit" buttonType="primary"> <button
bitButton
bitFormButton
type="submit"
buttonType="primary"
(click)="validateTokenControl()"
>
{{ (enabled ? "disable" : "enable") | i18n }} {{ (enabled ? "disable" : "enable") | i18n }}
</button> </button>
<button bitButton bitFormButton type="button" buttonType="secondary" [bitAction]="close"> <button bitButton bitFormButton type="button" buttonType="secondary" [bitAction]="close">

14
apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
View File

@@ -1,6 +1,6 @@
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog"; import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
import { Component, EventEmitter, Inject, OnDestroy, OnInit, Output } from "@angular/core"; import { Component, EventEmitter, Inject, OnDestroy, OnInit, Output } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms"; import { FormBuilder, FormControl, Validators } from "@angular/forms";
import { firstValueFrom, map } from "rxjs"; import { firstValueFrom, map } from "rxjs";
import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -48,8 +48,8 @@ export class TwoFactorAuthenticatorComponent
override componentName = "app-two-factor-authenticator"; override componentName = "app-two-factor-authenticator";
private qrScript: HTMLScriptElement; private qrScript: HTMLScriptElement;
protected formGroup = new FormGroup({ formGroup = this.formBuilder.group({
token: new FormControl(null, [Validators.required]), token: new FormControl(null, [Validators.required, Validators.minLength(6)]),
}); });
constructor( constructor(
@@ -58,6 +58,7 @@ export class TwoFactorAuthenticatorComponent
apiService: ApiService, apiService: ApiService,
i18nService: I18nService, i18nService: I18nService,
userVerificationService: UserVerificationService, userVerificationService: UserVerificationService,
private formBuilder: FormBuilder,
platformUtilsService: PlatformUtilsService, platformUtilsService: PlatformUtilsService,
logService: LogService, logService: LogService,
private accountService: AccountService, private accountService: AccountService,
@@ -85,12 +86,19 @@ export class TwoFactorAuthenticatorComponent
window.document.body.removeChild(this.qrScript); window.document.body.removeChild(this.qrScript);
} }
validateTokenControl() {
this.formGroup.controls.token.markAsTouched();
}
auth(authResponse: AuthResponse<TwoFactorAuthenticatorResponse>) { auth(authResponse: AuthResponse<TwoFactorAuthenticatorResponse>) {
super.auth(authResponse); super.auth(authResponse);
return this.processResponse(authResponse.response); return this.processResponse(authResponse.response);
} }
submit = async () => { submit = async () => {
if (this.formGroup.invalid && !this.enabled) {
return;
}
if (this.enabled) { if (this.enabled) {
await this.disableAuthentication(this.formPromise); await this.disableAuthentication(this.formPromise);
this.onChangeStatus.emit(this.enabled); this.onChangeStatus.emit(this.enabled);

1
apps/web/src/app/auth/settings/two-factor-base.component.ts
View File

@@ -48,6 +48,7 @@ export abstract class TwoFactorBaseComponent {
this.onUpdated.emit(true); this.onUpdated.emit(true);
} catch (e) { } catch (e) {
this.logService.error(e); this.logService.error(e);
throw e;
} }
} }