mirror of
https://github.com/bitwarden/browser.git
synced 2025-01-08 19:18:02 +01:00
Consolidate login templates.
This commit is contained in:
Alec Rippberger
parent
1206017b57
commit
7f14851147
@ -1,26 +1,16 @@
|
|||||||
<!--
|
<!--
|
||||||
# Table of Contents
|
# Table of Contents
|
||||||
|
|
||||||
This file contains three templates, one for each visual client.
|
This file contains a single consolidated template for all visual clients.
|
||||||
|
|
||||||
For easy navigation, search for the following phrases:
|
|
||||||
Web Template
|
|
||||||
Browser Template
|
|
||||||
Desktop Template
|
|
||||||
|
|
||||||
Or simply collapse the templates you are not working on in your editor.
|
|
||||||
|
|
||||||
# UI States
|
# UI States
|
||||||
|
|
||||||
Each client template has two UI states, defined by the `LoginUiState` enum:
|
The template has two UI states, defined by the `LoginUiState` enum:
|
||||||
State 1: displays the email input field + continue button
|
State 1: displays the email input field + continue button
|
||||||
State 2: displays the master password input field + login button
|
State 2: displays the master password input field + login button
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!---------------------------------------------->
|
<form [bitSubmit]="submit" [formGroup]="formGroup">
|
||||||
<!-- Web Template -->
|
|
||||||
<!---------------------------------------------->
|
|
||||||
<form *ngIf="clientType === ClientType.Web" [bitSubmit]="submit" [formGroup]="formGroup">
|
|
||||||
<ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
|
<ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
|
||||||
<!-- Email Address input -->
|
<!-- Email Address input -->
|
||||||
<bit-form-field class="!tw-mb-4">
|
<bit-form-field class="!tw-mb-4">
|
||||||
@ -31,6 +21,7 @@
|
|||||||
bitInput
|
bitInput
|
||||||
appAutofocus
|
appAutofocus
|
||||||
(blur)="onEmailBlur($event)"
|
(blur)="onEmailBlur($event)"
|
||||||
|
(keyup.enter)="clientType === ClientType.Desktop ? continue() : null"
|
||||||
/>
|
/>
|
||||||
</bit-form-field>
|
</bit-form-field>
|
||||||
|
|
||||||
@ -48,30 +39,48 @@
|
|||||||
|
|
||||||
<div class="tw-text-center">{{ "or" | i18n }}</div>
|
<div class="tw-text-center">{{ "or" | i18n }}</div>
|
||||||
|
|
||||||
<!-- Link to Login with Passkey page -->
|
<!-- Link to Login with Passkey page (Web and Desktop only) -->
|
||||||
<a
|
<ng-container *ngIf="clientType !== ClientType.Browser">
|
||||||
bitButton
|
<a
|
||||||
block
|
bitButton
|
||||||
linkType="primary"
|
block
|
||||||
routerLink="/login-with-passkey"
|
linkType="primary"
|
||||||
(mousedown)="$event.preventDefault()"
|
routerLink="/login-with-passkey"
|
||||||
>
|
(mousedown)="$event.preventDefault()"
|
||||||
<i class="bwi bwi-passkey tw-mr-1"></i>
|
>
|
||||||
{{ "logInWithPasskey" | i18n }}
|
<i class="bwi bwi-passkey tw-mr-1"></i>
|
||||||
</a>
|
{{ "logInWithPasskey" | i18n }}
|
||||||
|
</a>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<!-- Link to Login with SSO page -->
|
<!-- Button to Login with SSO -->
|
||||||
<a
|
<ng-container *ngIf="clientType === ClientType.Web">
|
||||||
bitButton
|
<a
|
||||||
block
|
bitButton
|
||||||
buttonType="secondary"
|
block
|
||||||
routerLink="/sso"
|
buttonType="secondary"
|
||||||
[queryParams]="{ email: formGroup.value.email }"
|
routerLink="/sso"
|
||||||
(click)="saveEmailSettings()"
|
[queryParams]="{ email: formGroup.value.email }"
|
||||||
>
|
(click)="saveEmailSettings()"
|
||||||
<i class="bwi bwi-provider tw-mr-1"></i>
|
>
|
||||||
{{ "useSingleSignOn" | i18n }}
|
<i class="bwi bwi-provider tw-mr-1"></i>
|
||||||
</a>
|
{{ "useSingleSignOn" | i18n }}
|
||||||
|
</a>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="clientType === ClientType.Browser || clientType === ClientType.Desktop">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
bitButton
|
||||||
|
block
|
||||||
|
buttonType="secondary"
|
||||||
|
(click)="
|
||||||
|
launchSsoBrowserWindow(clientType === ClientType.Browser ? 'browser' : 'desktop')
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-provider tw-mr-1"></i>
|
||||||
|
{{ "useSingleSignOn" | i18n }}
|
||||||
|
</button>
|
||||||
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
@ -125,199 +134,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!---------------------------------------------->
|
|
||||||
<!-- Browser Template -->
|
|
||||||
<!---------------------------------------------->
|
|
||||||
<form *ngIf="clientType === ClientType.Browser" [bitSubmit]="submit" [formGroup]="formGroup">
|
|
||||||
<!--
|
|
||||||
TODO-rr-bw: the original Browser template had `main tabindex="-1".
|
|
||||||
Why? And do we need to add it here?
|
|
||||||
-->
|
|
||||||
<ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
|
|
||||||
<!-- Email Address input -->
|
|
||||||
<bit-form-field class="!tw-mb-4">
|
|
||||||
<bit-label>{{ "emailAddress" | i18n }}</bit-label>
|
|
||||||
<input type="email" formControlName="email" bitInput appAutofocus />
|
|
||||||
</bit-form-field>
|
|
||||||
|
|
||||||
<!-- Remember Email input -->
|
|
||||||
<bit-form-control class="!tw-mb-4">
|
|
||||||
<input type="checkbox" formControlName="rememberEmail" bitCheckbox />
|
|
||||||
<bit-label>{{ "rememberEmail" | i18n }}</bit-label>
|
|
||||||
</bit-form-control>
|
|
||||||
|
|
||||||
<div class="tw-grid tw-gap-3">
|
|
||||||
<!-- Continue button -->
|
|
||||||
<button type="submit" bitButton block buttonType="primary" (click)="validateEmail()">
|
|
||||||
{{ "continue" | i18n }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- TODO-rr-bw: Figma shows no Login with Passkey option on browser. Is that intentional? -->
|
|
||||||
|
|
||||||
<!-- Button to Login with SSO -->
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
bitButton
|
|
||||||
block
|
|
||||||
buttonType="secondary"
|
|
||||||
(click)="launchSsoBrowserWindow('browser')"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-provider tw-mr-1"></i>
|
|
||||||
{{ "useSingleSignOn" | i18n }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="uiState === LoginUiState.MASTER_PASSWORD_ENTRY">
|
|
||||||
<!-- Master Password input -->
|
|
||||||
<bit-form-field class="!tw-mb-1">
|
|
||||||
<bit-label>{{ "masterPass" | i18n }}</bit-label>
|
|
||||||
<input type="password" formControlName="masterPassword" bitInput #masterPasswordInputRef />
|
|
||||||
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
|
|
||||||
</bit-form-field>
|
|
||||||
|
|
||||||
<!-- Link to Password Hint page -->
|
|
||||||
<a
|
|
||||||
class="tw-inline-block tw-mb-4 tw-font-semibold"
|
|
||||||
routerLink="/hint"
|
|
||||||
(mousedown)="goToHint()"
|
|
||||||
(click)="saveEmailSettings()"
|
|
||||||
>
|
|
||||||
{{ "getMasterPasswordHint" | i18n }}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Captcha iframe -->
|
|
||||||
<iframe
|
|
||||||
[ngClass]="{ 'tw-hidden': !showCaptcha() }"
|
|
||||||
id="hcaptcha_iframe"
|
|
||||||
height="80"
|
|
||||||
sandbox="allow-scripts allow-same-origin"
|
|
||||||
></iframe>
|
|
||||||
|
|
||||||
<div class="tw-grid tw-gap-3">
|
|
||||||
<!-- Submit button to Login with Master Password -->
|
|
||||||
<button type="submit" bitButton bitFormButton block buttonType="primary">
|
|
||||||
{{ "loginWithMasterPassword" | i18n }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Button to Login with Device -->
|
|
||||||
<ng-container *ngIf="showLoginWithDevice && showPasswordless">
|
|
||||||
<div class="tw-text-center">{{ "or" | i18n }}</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
bitButton
|
|
||||||
block
|
|
||||||
buttonType="secondary"
|
|
||||||
(click)="startAuthRequestLogin()"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-mobile"></i>
|
|
||||||
{{ "loginWithDevice" | i18n }}
|
|
||||||
</button>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!---------------------------------------------->
|
|
||||||
<!-- Desktop Template -->
|
|
||||||
<!---------------------------------------------->
|
|
||||||
<form *ngIf="clientType === ClientType.Desktop" [bitSubmit]="submit" [formGroup]="formGroup">
|
|
||||||
<ng-container *ngIf="uiState === LoginUiState.EMAIL_ENTRY">
|
|
||||||
<!-- Email Address input -->
|
|
||||||
<bit-form-field class="!tw-mb-4">
|
|
||||||
<bit-label>{{ "emailAddress" | i18n }}</bit-label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
formControlName="email"
|
|
||||||
bitInput
|
|
||||||
appAutofocus
|
|
||||||
(keyup.enter)="continue()"
|
|
||||||
/>
|
|
||||||
</bit-form-field>
|
|
||||||
|
|
||||||
<!-- Remember Email input -->
|
|
||||||
<bit-form-control class="!tw-mb-4">
|
|
||||||
<input type="checkbox" formControlName="rememberEmail" bitCheckbox />
|
|
||||||
<bit-label>{{ "rememberEmail" | i18n }}</bit-label>
|
|
||||||
</bit-form-control>
|
|
||||||
|
|
||||||
<div class="tw-grid tw-gap-3">
|
|
||||||
<!-- Continue button -->
|
|
||||||
<button type="submit" bitButton buttonType="primary" (click)="continue()">
|
|
||||||
{{ "continue" | i18n }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="tw-text-center">{{ "or" | i18n }}</div>
|
|
||||||
|
|
||||||
<!-- Link to Login with Passkey page -->
|
|
||||||
<button type="button" bitButton block buttonType="secondary" routerLink="/login-with-passkey">
|
|
||||||
<i class="bwi bwi-passkey tw-mr-1"></i>
|
|
||||||
{{ "logInWithPasskey" | i18n }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Button to Login with SSO -->
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
bitButton
|
|
||||||
block
|
|
||||||
buttonType="secondary"
|
|
||||||
(click)="launchSsoBrowserWindow('desktop')"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-provider tw-mr-1"></i>
|
|
||||||
{{ "useSingleSignOn" | i18n }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="uiState === LoginUiState.MASTER_PASSWORD_ENTRY">
|
|
||||||
<!-- Master Password input -->
|
|
||||||
<bit-form-field class="!tw-mb-1">
|
|
||||||
<bit-label>{{ "masterPassword" | i18n }}</bit-label>
|
|
||||||
<input type="password" formControlName="masterPassword" bitInput />
|
|
||||||
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
|
|
||||||
</bit-form-field>
|
|
||||||
|
|
||||||
<!-- Link to Password Hint page -->
|
|
||||||
<a
|
|
||||||
class="tw-inline-block tw-mb-4 tw-font-semibold"
|
|
||||||
routerLink="/hint"
|
|
||||||
(mousedown)="goToHint()"
|
|
||||||
(click)="saveEmailSettings()"
|
|
||||||
>
|
|
||||||
{{ "getMasterPasswordHint" | i18n }}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Captcha iframe -->
|
|
||||||
<iframe
|
|
||||||
[ngClass]="{ 'tw-hidden': !showCaptcha() }"
|
|
||||||
id="hcaptcha_iframe"
|
|
||||||
height="80"
|
|
||||||
sandbox="allow-scripts allow-same-origin"
|
|
||||||
></iframe>
|
|
||||||
|
|
||||||
<div class="tw-grid tw-gap-3">
|
|
||||||
<!-- Submit button to Login with Master Password -->
|
|
||||||
<button type="submit" bitButton bitFormButton block buttonType="primary">
|
|
||||||
{{ "loginWithMasterPassword" | i18n }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Button to Login with Device -->
|
|
||||||
<ng-container *ngIf="showLoginWithDevice && showPasswordless">
|
|
||||||
<div class="tw-text-center">{{ "or" | i18n }}</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
bitButton
|
|
||||||
block
|
|
||||||
buttonType="secondary"
|
|
||||||
(click)="startAuthRequestLogin()"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-mobile"></i>
|
|
||||||
{{ "loginWithDevice" | i18n }}
|
|
||||||
</button>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
</form>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user