mirror of
https://github.com/bitwarden/browser
synced 2026-01-06 02:23:44 +00:00
[PM-2135] [BEEEP] Refactor and refresh web user verification components (#5377)
* [PM-2135] feat: create new user-verification module
* [PM-2136] feat: add ability to remove form field bottom margin
(cherry picked from commit 05925ff77ed47f3865c2aecade8271390d9e2fa6)
* [PM-2135] feat: refactor user-verification component
* [PM-2135] feat: refactor user-verification-prompt
* [PM-2135] feat: use form validation in prompt
* [PM-2135] feat: change autofocus target
* [PM-2135] chore: clean up old code
* [PM-2135] feat: allow user verification to show invalid password error
* [PM-2135] feat: hack mark as touched to get error to display
* [PM-2135] chore: move to auth
* [PM-2135] fix: hardcoded dialog buttons
* [PM-2135] feat: add onDestroy handler
* [PM-2135] fix: remove unecessary directive input
* [PM-2135] feat: add password toggle
* [PM-2135] chore: add hack comment
* [PM-2135] chore: move services to auth folder and rename
* [PM-2135] fix: show correct error messages
* [PM-2135] fix: re-add non-existant files to whitelist
I honestly don't know why the linter is complaining about this
* Fix capital letters whitelist
* [PM-2135] chore: remove rows that were mistakenly added during merge from master
* [PM-2135] chore: remove rows that were mistakenly added during merge from master
* [PM-2135] feat: disable built-in browser validations
* Revert "[PM-2135] feat: disable built-in browser validations"
This reverts commit 969f75822a.
---------
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
This commit is contained in:
Andreas Coroiu
GitHub
@@ -1,3 +0,0 @@
|
||||
export * from "./user-verification.module";
|
||||
export * from "./user-verification-prompt.component";
|
||||
export * from "./user-verification.component";
|
||||
@@ -1,26 +0,0 @@
|
||||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<form class="modal-content" #form (ngSubmit)="submit()">
|
||||
<h2 class="tw-my-6 tw-px-3.5 tw-font-semibold" id="modalTitle | i18n ">
|
||||
{{ modalTitle | i18n | uppercase }}
|
||||
</h2>
|
||||
<div class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-3.5">
|
||||
{{ confirmDescription | i18n }}
|
||||
</div>
|
||||
<div class="tw-p-3.5">
|
||||
<app-user-verification ngDefaultControl [formControl]="secret" name="secret">
|
||||
</app-user-verification>
|
||||
</div>
|
||||
<div
|
||||
class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-3.5"
|
||||
>
|
||||
<button type="button" bitButton buttonType="primary" type="submit" appBlurClick>
|
||||
<span>{{ confirmButtonText | i18n }}</span>
|
||||
</button>
|
||||
<button type="button" bitButton buttonType="secondary" data-dismiss="modal">
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
import { UserVerificationPromptComponent as BaseUserVerificationPrompt } from "@bitwarden/angular/auth/components/user-verification-prompt.component";
|
||||
|
||||
@Component({
|
||||
templateUrl: "user-verification-prompt.component.html",
|
||||
})
|
||||
export class UserVerificationPromptComponent extends BaseUserVerificationPrompt {}
|
||||
@@ -1,46 +0,0 @@
|
||||
<ng-container *ngIf="!usesKeyConnector">
|
||||
<label for="masterPassword">{{ "masterPass" | i18n }}</label>
|
||||
<input
|
||||
id="masterPassword"
|
||||
type="password"
|
||||
name="MasterPasswordHash"
|
||||
class="form-control"
|
||||
[formControl]="secret"
|
||||
required
|
||||
appAutofocus
|
||||
appInputVerbatim
|
||||
/>
|
||||
<small class="form-text text-muted">{{ "confirmIdentity" | i18n }}</small>
|
||||
</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"
|
||||
>
|
||||
{{ "sendCode" | i18n }}
|
||||
</button>
|
||||
<span class="ml-2 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>
|
||||
<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>
|
||||
@@ -1,23 +0,0 @@
|
||||
import { animate, style, transition, trigger } from "@angular/animations";
|
||||
import { Component } from "@angular/core";
|
||||
import { NG_VALUE_ACCESSOR } from "@angular/forms";
|
||||
|
||||
import { UserVerificationComponent as BaseComponent } from "@bitwarden/angular/auth/components/user-verification.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-user-verification",
|
||||
templateUrl: "user-verification.component.html",
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
multi: true,
|
||||
useExisting: UserVerificationComponent,
|
||||
},
|
||||
],
|
||||
animations: [
|
||||
trigger("sent", [
|
||||
transition(":enter", [style({ opacity: 0 }), animate("100ms", style({ opacity: 1 }))]),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class UserVerificationComponent extends BaseComponent {}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
|
||||
import { SharedModule } from "../../shared.module";
|
||||
|
||||
import { UserVerificationPromptComponent } from "./user-verification-prompt.component";
|
||||
import { UserVerificationComponent } from "./user-verification.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [SharedModule],
|
||||
declarations: [UserVerificationComponent, UserVerificationPromptComponent],
|
||||
exports: [UserVerificationComponent, UserVerificationPromptComponent],
|
||||
})
|
||||
export class UserVerificationModule {}
|
||||
@@ -43,6 +43,7 @@ import { TwoFactorVerifyComponent } from "../auth/settings/two-factor-verify.com
|
||||
import { TwoFactorWebAuthnComponent } from "../auth/settings/two-factor-webauthn.component";
|
||||
import { TwoFactorYubiKeyComponent } from "../auth/settings/two-factor-yubikey.component";
|
||||
import { VerifyEmailComponent } from "../auth/settings/verify-email.component";
|
||||
import { UserVerificationModule } from "../auth/shared/components/user-verification";
|
||||
import { SsoComponent } from "../auth/sso.component";
|
||||
import { TwoFactorOptionsComponent } from "../auth/two-factor-options.component";
|
||||
import { TwoFactorComponent } from "../auth/two-factor.component";
|
||||
@@ -108,7 +109,6 @@ import { AttachmentsComponent as OrgAttachmentsComponent } from "../vault/org-va
|
||||
import { CollectionsComponent as OrgCollectionsComponent } from "../vault/org-vault/collections.component";
|
||||
|
||||
import { AccountFingerprintComponent } from "./components/account-fingerprint/account-fingerprint.component";
|
||||
import { UserVerificationModule } from "./components/user-verification";
|
||||
import { SharedModule } from "./shared.module";
|
||||
|
||||
// Please do not add to this list of declarations - we should refactor these into modules when doing so makes sense until there are none left.
|
||||
@@ -230,6 +230,7 @@ import { SharedModule } from "./shared.module";
|
||||
LowKdfComponent,
|
||||
],
|
||||
exports: [
|
||||
UserVerificationModule,
|
||||
PremiumBadgeComponent,
|
||||
AcceptEmergencyComponent,
|
||||
AcceptOrganizationComponent,
|
||||
|
||||
Reference in New Issue
Block a user