web template modifications
This commit is contained in:
parent
677829f03a
commit
0cf965cdae
|
@ -800,6 +800,9 @@
|
||||||
"logInWithPasskey": {
|
"logInWithPasskey": {
|
||||||
"message": "Log in with passkey"
|
"message": "Log in with passkey"
|
||||||
},
|
},
|
||||||
|
"useSingleSignOn": {
|
||||||
|
"message": "Use single sign-on"
|
||||||
|
},
|
||||||
"invalidPasskeyPleaseTryAgain": {
|
"invalidPasskeyPleaseTryAgain": {
|
||||||
"message": "Invalid Passkey. Please try again."
|
"message": "Invalid Passkey. Please try again."
|
||||||
},
|
},
|
||||||
|
|
|
@ -27,4 +27,8 @@ export class LoginSecondaryContentComponent {
|
||||||
// also passes the email address to the registration page. We need to find a way to
|
// also passes the email address to the registration page. We need to find a way to
|
||||||
// do this now that the "Create account" link is in a separate component as
|
// do this now that the "Create account" link is in a separate component as
|
||||||
// secondary content.
|
// secondary content.
|
||||||
|
|
||||||
|
// TODO-rr-bw: Also need to make sure clicking the "Create account" link doesn't
|
||||||
|
// trigger form validation, causing the link to jump down on the page. See comment
|
||||||
|
// on this in the original web login.component.html (lines 51-57).
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,23 +12,16 @@
|
||||||
|
|
||||||
# UI States
|
# UI States
|
||||||
|
|
||||||
Each client template is split into two UI states:
|
Each client template has two UI states, defined by `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
|
||||||
|
|
||||||
These are defined by the `LoginUiState` enum:
|
|
||||||
|
|
||||||
enum LoginUiState {
|
|
||||||
EMAIL_ENTRY = "EmailEntry",
|
|
||||||
MASTER_PASSWORD_ENTRY = "MasterPasswordEntry",
|
|
||||||
}
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!--------------------------------->
|
<!--------------------------------->
|
||||||
<!-- Web Template -->
|
<!-- Web Template -->
|
||||||
<!--------------------------------->
|
<!--------------------------------->
|
||||||
<!--
|
<!--
|
||||||
TODO-rr-bw: Clarify this comment if necessary.
|
TODO-rr-bw: Clarify this comment if necessary. Also check if there's a better way to handle this.
|
||||||
|
|
||||||
Why not use <form *ngIf="clientType === ClientType.Web"> to display this section?
|
Why not use <form *ngIf="clientType === ClientType.Web"> to display this section?
|
||||||
Because this file contains 3 separate templates for Web, Browser, and Desktop. For Web,
|
Because this file contains 3 separate templates for Web, Browser, and Desktop. For Web,
|
||||||
|
@ -55,17 +48,17 @@
|
||||||
<bit-label>{{ "rememberEmail" | i18n }}</bit-label>
|
<bit-label>{{ "rememberEmail" | i18n }}</bit-label>
|
||||||
</bit-form-control>
|
</bit-form-control>
|
||||||
|
|
||||||
<div class="tw-grid tw-gap-3 tw-text-center">
|
<div class="tw-grid tw-gap-3">
|
||||||
<!-- Continue button -->
|
<!-- Continue button -->
|
||||||
<button type="submit" bitButton block buttonType="primary" (click)="validateEmail()">
|
<button type="submit" bitButton block buttonType="primary" (click)="validateEmail()">
|
||||||
<span>{{ "continue" | i18n }}</span>
|
<span>{{ "continue" | i18n }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div>{{ "or" | i18n }}</div>
|
<div class="tw-text-center">{{ "or" | i18n }}</div>
|
||||||
|
|
||||||
<!-- Link to Login with Passkey page -->
|
<!-- Link to Login with Passkey page -->
|
||||||
<a
|
<a
|
||||||
bitLink
|
bitButton
|
||||||
block
|
block
|
||||||
linkType="primary"
|
linkType="primary"
|
||||||
routerLink="/login-with-passkey"
|
routerLink="/login-with-passkey"
|
||||||
|
@ -73,17 +66,31 @@
|
||||||
>
|
>
|
||||||
<span><i class="bwi bwi-passkey"></i>{{ "logInWithPasskey" | i18n }}</span>
|
<span><i class="bwi bwi-passkey"></i>{{ "logInWithPasskey" | i18n }}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<!-- Link to Login with SSO page -->
|
||||||
|
<a
|
||||||
|
bitButton
|
||||||
|
block
|
||||||
|
buttonType="secondary"
|
||||||
|
routerLink="/sso"
|
||||||
|
[queryParams]="{ email: formGroup.value.email }"
|
||||||
|
(click)="saveEmailSettings()"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-provider"></i>
|
||||||
|
{{ "useSingleSignOn" | i18n }}
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
TODO-rr-bw: Clarify this comment if necessary. Also check if there's a better way to handle this.
|
||||||
|
|
||||||
Why not use <ng-container *ngIf="validatedEmail"> to display this section?
|
Why not use <ng-container *ngIf="validatedEmail"> to display this section?
|
||||||
Because we want access to the masterPasswordInput reference in the class file.
|
Because we want access to the masterPasswordInput reference in the class file.
|
||||||
- Using a hidden div allows us to access the reference without rendering the div initially.
|
- Using a hidden div allows us to access the reference without rendering the div initially.
|
||||||
- Using *ngIf would not allow us to access the reference without rendering the ng-container initially.
|
- Using *ngIf would not allow us to access the reference without rendering the ng-container initially.
|
||||||
-->
|
-->
|
||||||
<div [ngClass]="{ 'tw-hidden': uiState !== LoginUiState.MASTER_PASSWORD_ENTRY }">
|
<div [ngClass]="{ 'tw-hidden': uiState !== LoginUiState.MASTER_PASSWORD_ENTRY }">
|
||||||
<div class="tw-mb-6 tw-h-28">
|
|
||||||
<!-- Master Password input -->
|
<!-- Master Password input -->
|
||||||
<bit-form-field class="!tw-mb-1">
|
<bit-form-field class="!tw-mb-1">
|
||||||
<bit-label>{{ "masterPass" | i18n }}</bit-label>
|
<bit-label>{{ "masterPass" | i18n }}</bit-label>
|
||||||
|
@ -93,13 +100,13 @@
|
||||||
|
|
||||||
<!-- Link to Password Hint page -->
|
<!-- Link to Password Hint page -->
|
||||||
<a
|
<a
|
||||||
class="tw-mt-2 tw-font-semibold"
|
class="tw-inline-block tw-mb-4 tw-font-semibold"
|
||||||
routerLink="/hint"
|
routerLink="/hint"
|
||||||
(mousedown)="goToHint()"
|
(mousedown)="goToHint()"
|
||||||
(click)="saveEmailSettings()"
|
(click)="saveEmailSettings()"
|
||||||
>{{ "getMasterPasswordHint" | i18n }}</a
|
|
||||||
>
|
>
|
||||||
</div>
|
{{ "getMasterPasswordHint" | i18n }}
|
||||||
|
</a>
|
||||||
|
|
||||||
<!-- TODO-rr-bw: will we still be handling captcha? -->
|
<!-- TODO-rr-bw: will we still be handling captcha? -->
|
||||||
<!-- Captcha iframe -->
|
<!-- Captcha iframe -->
|
||||||
|
@ -108,13 +115,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Button to Login with Master Password -->
|
<!-- Button to Login with Master Password -->
|
||||||
<div class="tw-mb-3 tw-flex tw-space-x-4">
|
<div class="tw-grid tw-gap-3">
|
||||||
<button type="submit" bitButton bitFormButton block buttonType="primary">
|
<button type="submit" bitButton bitFormButton block buttonType="primary">
|
||||||
<span>{{ "loginWithMasterPassword" | i18n }}</span>
|
<span>{{ "loginWithMasterPassword" | i18n }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
|
<ng-container *ngIf="showLoginWithDevice && showPasswordless">
|
||||||
|
<div class="tw-text-center">{{ "or" | i18n }}</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
bitButton
|
bitButton
|
||||||
|
@ -124,28 +132,7 @@
|
||||||
>
|
>
|
||||||
<span><i class="bwi bwi-mobile"></i>{{ "loginWithDevice" | i18n }}</span>
|
<span><i class="bwi bwi-mobile"></i>{{ "loginWithDevice" | i18n }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</ng-container>
|
||||||
|
|
||||||
<div class="tw-mb-3">
|
|
||||||
<a
|
|
||||||
bitButton
|
|
||||||
block
|
|
||||||
buttonType="secondary"
|
|
||||||
routerLink="/sso"
|
|
||||||
[queryParams]="{ email: formGroup.value.email }"
|
|
||||||
(click)="saveEmailSettings()"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-provider tw-mr-2"></i>
|
|
||||||
{{ "enterpriseSingleSignOn" | i18n }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<div class="tw-m-0 tw-text-sm">
|
|
||||||
<p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
|
|
||||||
<!-- TODO-rr-bw: check link -->
|
|
||||||
<a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
Loading…
Reference in New Issue