1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-10-29 07:59:42 +01:00
bitwarden-browser/apps/desktop/src/auth/two-factor.component.html

149 lines
5.1 KiB
HTML
Raw Normal View History

2021-12-20 15:47:17 +01:00
<form
id="two-factor-page"
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
attr.aria-hidden="{{ showingModal }}"
>
<div id="content" class="content">
2021-12-20 15:47:17 +01:00
<h1>{{ title }}</h1>
<p *ngIf="selectedProviderType === providerType.Authenticator">
{{ "enterVerificationCodeApp" | i18n }}
</p>
<p *ngIf="selectedProviderType === providerType.Email">
{{ "enterVerificationCodeEmail" | i18n : twoFactorEmail }}
2021-12-20 15:47:17 +01:00
</p>
<div
class="box last"
*ngIf="
selectedProviderType === providerType.Email ||
selectedProviderType === providerType.Authenticator
"
>
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="text"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
2018-02-02 04:59:04 +01:00
</div>
2021-12-20 15:47:17 +01:00
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
2018-02-01 04:54:13 +01:00
</div>
2021-12-20 15:47:17 +01:00
</div>
</div>
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<p>{{ "insertYubiKey" | i18n }}</p>
<img src="../../images/yubikey.jpg" alt="" />
<div class="box last">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="password"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
<div id="web-authn-frame">
<iframe id="webauthn_iframe" [attr.allow]="webAuthnAllow"></iframe>
2021-12-20 15:47:17 +01:00
</div>
<div class="box first">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<ng-container
*ngIf="
selectedProviderType === providerType.Duo ||
selectedProviderType === providerType.OrganizationDuo
"
>
<div id="duo-frame"><iframe id="duo_iframe"></iframe></div>
<div class="box last">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
2018-02-01 04:54:13 +01:00
</div>
2021-12-20 15:47:17 +01:00
</div>
</ng-container>
<div class="box last" *ngIf="selectedProviderType == null">
<div class="box-content">
<div class="box-content-row">
<p>{{ "noTwoStepProviders" | i18n }}</p>
<p>{{ "noTwoStepProviders2" | i18n }}</p>
2018-02-02 04:59:04 +01:00
</div>
2021-12-20 15:47:17 +01:00
</div>
</div>
<div class="box last" [hidden]="!showCaptcha()">
<div class="box-content">
<div class="box-content-row">
<iframe id="hcaptcha_iframe" height="80"></iframe>
<button class="btn block" type="button" routerLink="/accessibility-cookie">
<i class="bwi bwi-universal-access" aria-hidden="true"></i>
{{ "loadAccessibilityCookie" | i18n }}
</button>
</div>
</div>
</div>
2021-12-20 15:47:17 +01:00
<div class="buttons">
<button
type="submit"
class="btn primary block"
[disabled]="form.loading"
*ngIf="
selectedProviderType != null &&
selectedProviderType !== providerType.Duo &&
selectedProviderType !== providerType.OrganizationDuo
"
>
<span [hidden]="form.loading"
><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}</span
2021-12-20 15:47:17 +01:00
>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
2021-12-20 15:47:17 +01:00
</button>
<button type="button" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</button>
2021-12-20 15:47:17 +01:00
</div>
<div class="sub-options">
Change links to buttons, expose `aria-pressed` for toggles, add `aria-expanded` to send view's "Options" (#1437) * Change links to buttons, expose `aria-pressed` for toggles - also make existing `<a routerLink...>` type controls keyboard focusable with the addition of `tabindex="0"` * Correctly set aria-pressed now that I have a working build environment, could verify correct way to set this with my limited Angular knowledge * Change more links to buttons, initial style changes * Fix layout of <button> elements with .box-content-row * Update jslib submodule * Add `aria-expanded` to the send view's "Show options" expand/collapse control * Fix position of "Edit" pencil when hovering over folders * Update jslib * Change sends list links to buttons * Add `aria-pressed` to vault and send list buttons Programmatically denote which of the buttons is currently active/shown in the right-most panel * Fix incorrect "Options" expand/collapse button in add-edit view Currently, that buttons lacks an accName because the "Options" text is outside of it. * Add `aria-pressed` to the send left-hand column filters * Simplify base, list, and vault styles Since links are now buttons, no need to double up selectors for both types of elements. No need to double-up theming in base, as this also causes incorrect "x" in toasts. * Remove unnecessary `position:relative` Fixes issue with cut-off focus outlines, has no other adverse effect * Fix styling for last child of action buttons Old approach of making right padding smaller results in unsightly, off-center icon (noticeable when focus outline is visible). This visually remains the same, but reduces right-hand margin instead.
2022-04-30 16:09:41 +02:00
<button type="button" appStopClick (click)="anotherMethod()">
{{ "useAnotherTwoStepMethod" | i18n }}
</button>
<button
type="button"
2021-12-20 15:47:17 +01:00
appStopClick
(click)="sendEmail(true)"
[appApiAction]="emailPromise"
*ngIf="selectedProviderType === providerType.Email"
>
{{ "sendVerificationCodeEmailAgain" | i18n }}
Change links to buttons, expose `aria-pressed` for toggles, add `aria-expanded` to send view's "Options" (#1437) * Change links to buttons, expose `aria-pressed` for toggles - also make existing `<a routerLink...>` type controls keyboard focusable with the addition of `tabindex="0"` * Correctly set aria-pressed now that I have a working build environment, could verify correct way to set this with my limited Angular knowledge * Change more links to buttons, initial style changes * Fix layout of <button> elements with .box-content-row * Update jslib submodule * Add `aria-expanded` to the send view's "Show options" expand/collapse control * Fix position of "Edit" pencil when hovering over folders * Update jslib * Change sends list links to buttons * Add `aria-pressed` to vault and send list buttons Programmatically denote which of the buttons is currently active/shown in the right-most panel * Fix incorrect "Options" expand/collapse button in add-edit view Currently, that buttons lacks an accName because the "Options" text is outside of it. * Add `aria-pressed` to the send left-hand column filters * Simplify base, list, and vault styles Since links are now buttons, no need to double up selectors for both types of elements. No need to double-up theming in base, as this also causes incorrect "x" in toasts. * Remove unnecessary `position:relative` Fixes issue with cut-off focus outlines, has no other adverse effect * Fix styling for last child of action buttons Old approach of making right padding smaller results in unsightly, off-center icon (noticeable when focus outline is visible). This visually remains the same, but reduces right-hand margin instead.
2022-04-30 16:09:41 +02:00
</button>
2018-02-01 04:54:13 +01:00
</div>
2021-12-20 15:47:17 +01:00
</div>
2018-02-01 04:54:13 +01:00
</form>
<ng-template #twoFactorOptions></ng-template>