mirror of
https://github.com/bitwarden/browser
synced 2025-12-11 13:53:34 +00:00
[PM-4961]anon-layout login component migrated (#9167)
* anaon-layout login component migrated * Login component migration * Login component migration --------- Co-authored-by: Ike Kottlowski <ikottlowski@bitwarden.com>
This commit is contained in:
vinith-kovan
GitHub
@@ -1,155 +1,122 @@
|
|||||||
<form
|
<form
|
||||||
#form
|
[bitSubmit]="submitForm.bind(null, false)"
|
||||||
(ngSubmit)="submit(false)"
|
|
||||||
[appApiAction]="formPromise"
|
[appApiAction]="formPromise"
|
||||||
class="tw-container tw-mx-auto"
|
|
||||||
[formGroup]="formGroup"
|
[formGroup]="formGroup"
|
||||||
|
class="tw-w-96"
|
||||||
>
|
>
|
||||||
<div
|
<ng-container *ngIf="!validatedEmail">
|
||||||
class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
|
<div class="tw-mb-3">
|
||||||
>
|
<bit-form-field>
|
||||||
<div>
|
<bit-label>{{ "emailAddress" | i18n }}</bit-label>
|
||||||
<img class="logo logo-themed" alt="Bitwarden" />
|
<input
|
||||||
<p class="tw-mx-4 tw-mb-4 tw-mt-3 tw-text-center tw-text-xl">
|
bitInput
|
||||||
{{ "loginOrCreateNewAccount" | i18n }}
|
type="email"
|
||||||
</p>
|
formControlName="email"
|
||||||
<div
|
appAutofocus
|
||||||
class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
|
(keyup.enter)="validateEmail()"
|
||||||
|
/>
|
||||||
|
</bit-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tw-mb-3 tw-flex tw-items-start">
|
||||||
|
<bit-form-control class="tw-mb-0">
|
||||||
|
<input type="checkbox" bitCheckbox formControlName="rememberEmail" />
|
||||||
|
<bit-label>{{ "rememberEmail" | i18n }}</bit-label>
|
||||||
|
</bit-form-control>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tw-mb-3">
|
||||||
|
<button
|
||||||
|
bitButton
|
||||||
|
type="button"
|
||||||
|
buttonType="primary"
|
||||||
|
class="tw-w-full"
|
||||||
|
(click)="validateEmail()"
|
||||||
>
|
>
|
||||||
<ng-container *ngIf="!validatedEmail">
|
<span> {{ "continue" | i18n }} </span>
|
||||||
<div class="tw-mb-3">
|
</button>
|
||||||
<bit-form-field>
|
</div>
|
||||||
<bit-label>{{ "emailAddress" | i18n }}</bit-label>
|
|
||||||
<input
|
|
||||||
id="login_input_email"
|
|
||||||
bitInput
|
|
||||||
type="email"
|
|
||||||
formControlName="email"
|
|
||||||
appAutofocus
|
|
||||||
(keyup.enter)="validateEmail()"
|
|
||||||
/>
|
|
||||||
</bit-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tw-mb-3 tw-flex tw-items-start">
|
<div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
|
||||||
<bit-form-control class="tw-mb-0">
|
<p class="tw-mb-3">{{ "or" | i18n }}</p>
|
||||||
<input type="checkbox" bitCheckbox formControlName="rememberEmail" />
|
|
||||||
<bit-label>{{ "rememberEmail" | i18n }}</bit-label>
|
|
||||||
</bit-form-control>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tw-mb-3">
|
<a
|
||||||
<button
|
bitLink
|
||||||
bitButton
|
block
|
||||||
type="button"
|
linkType="primary"
|
||||||
buttonType="primary"
|
routerLink="/login-with-passkey"
|
||||||
class="tw-w-full"
|
(mousedown)="$event.preventDefault()"
|
||||||
[disabled]="form.loading"
|
>
|
||||||
(click)="validateEmail()"
|
<span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
|
||||||
>
|
</a>
|
||||||
<span> {{ "continue" | i18n }} </span>
|
</div>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
|
<hr />
|
||||||
<p class="tw-mb-3">{{ "or" | i18n }}</p>
|
|
||||||
|
|
||||||
<a
|
<p class="tw-m-0 tw-text-sm">
|
||||||
bitLink
|
{{ "newAroundHere" | i18n }}
|
||||||
block
|
<!--mousedown event is used over click because it prevents the validation from firing -->
|
||||||
linkType="primary"
|
<a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
|
||||||
routerLink="/login-with-passkey"
|
</p>
|
||||||
(mousedown)="$event.preventDefault()"
|
</ng-container>
|
||||||
>
|
|
||||||
<span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
<div [ngClass]="{ 'tw-hidden': !validatedEmail }">
|
||||||
|
<div class="tw-mb-6 tw-h-28">
|
||||||
|
<bit-form-field class="!tw-mb-1">
|
||||||
|
<bit-label>{{ "masterPass" | i18n }}</bit-label>
|
||||||
|
<input type="password" bitInput #masterPasswordInput formControlName="masterPassword" />
|
||||||
|
<button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
|
||||||
|
</bit-form-field>
|
||||||
|
<a
|
||||||
|
class="-tw-mt-2"
|
||||||
|
routerLink="/hint"
|
||||||
|
(mousedown)="goToHint()"
|
||||||
|
(click)="setLoginEmailValues()"
|
||||||
|
>{{ "getMasterPasswordHint" | i18n }}</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p class="tw-m-0 tw-text-sm">
|
<div [hidden]="!showCaptcha()">
|
||||||
{{ "newAroundHere" | i18n }}
|
<iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
|
||||||
<!--mousedown event is used over click because it prevents the validation from firing -->
|
</div>
|
||||||
<a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
|
|
||||||
</p>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<div [ngClass]="{ 'tw-hidden': !validatedEmail }">
|
<div class="tw-mb-3 tw-flex tw-space-x-4">
|
||||||
<div class="tw-mb-6 tw-h-28">
|
<button bitButton buttonType="primary" bitFormButton type="submit" [block]="true">
|
||||||
<bit-form-field class="!tw-mb-1">
|
<span> {{ "loginWithMasterPassword" | i18n }} </span>
|
||||||
<bit-label>{{ "masterPass" | i18n }}</bit-label>
|
</button>
|
||||||
<input
|
</div>
|
||||||
id="login_input_master-password"
|
|
||||||
type="password"
|
|
||||||
bitInput
|
|
||||||
#masterPasswordInput
|
|
||||||
formControlName="masterPassword"
|
|
||||||
/>
|
|
||||||
<button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
|
|
||||||
</bit-form-field>
|
|
||||||
<a
|
|
||||||
class="-tw-mt-2"
|
|
||||||
routerLink="/hint"
|
|
||||||
(mousedown)="goToHint()"
|
|
||||||
(click)="setLoginEmailValues()"
|
|
||||||
>{{ "getMasterPasswordHint" | i18n }}</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div [hidden]="!showCaptcha()">
|
<div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
|
||||||
<iframe
|
<button
|
||||||
id="hcaptcha_iframe"
|
bitButton
|
||||||
height="80"
|
type="button"
|
||||||
sandbox="allow-scripts allow-same-origin"
|
[block]="true"
|
||||||
></iframe>
|
buttonType="secondary"
|
||||||
</div>
|
(click)="startAuthRequestLogin()"
|
||||||
|
>
|
||||||
|
<span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="tw-mb-3 tw-flex tw-space-x-4">
|
<div class="tw-mb-3">
|
||||||
<button
|
<a
|
||||||
bitButton
|
routerLink="/sso"
|
||||||
buttonType="primary"
|
[queryParams]="{ email: formGroup.value.email }"
|
||||||
type="submit"
|
(click)="saveEmailSettings()"
|
||||||
[block]="true"
|
bitButton
|
||||||
[loading]="form.loading"
|
buttonType="secondary"
|
||||||
>
|
class="tw-w-full"
|
||||||
<span> {{ "loginWithMasterPassword" | i18n }} </span>
|
>
|
||||||
</button>
|
<i class="bwi bwi-provider tw-mr-2"></i>
|
||||||
</div>
|
{{ "enterpriseSingleSignOn" | i18n }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
|
<hr />
|
||||||
<button
|
|
||||||
bitButton
|
|
||||||
type="button"
|
|
||||||
[block]="true"
|
|
||||||
buttonType="secondary"
|
|
||||||
(click)="startAuthRequestLogin()"
|
|
||||||
>
|
|
||||||
<span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tw-mb-3">
|
<div class="tw-m-0 tw-text-sm">
|
||||||
<a
|
<p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
|
||||||
routerLink="/sso"
|
<a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
|
||||||
[queryParams]="{ email: formGroup.value.email }"
|
|
||||||
(click)="saveEmailSettings()"
|
|
||||||
bitButton
|
|
||||||
buttonType="secondary"
|
|
||||||
class="tw-w-full"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
<a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -43,7 +43,6 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
|
|||||||
enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
|
enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
|
||||||
policies: Policy[];
|
policies: Policy[];
|
||||||
showPasswordless = false;
|
showPasswordless = false;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private acceptOrganizationInviteService: AcceptOrganizationInviteService,
|
private acceptOrganizationInviteService: AcceptOrganizationInviteService,
|
||||||
devicesApiService: DevicesApiServiceAbstraction,
|
devicesApiService: DevicesApiServiceAbstraction,
|
||||||
@@ -92,7 +91,13 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
|
|||||||
this.onSuccessfulLoginNavigate = this.goAfterLogIn;
|
this.onSuccessfulLoginNavigate = this.goAfterLogIn;
|
||||||
this.showPasswordless = flagEnabled("showPasswordless");
|
this.showPasswordless = flagEnabled("showPasswordless");
|
||||||
}
|
}
|
||||||
|
submitForm = async (showToast = true) => {
|
||||||
|
return await this.submitFormHelper(showToast);
|
||||||
|
};
|
||||||
|
|
||||||
|
private async submitFormHelper(showToast: boolean) {
|
||||||
|
await super.submit(showToast);
|
||||||
|
}
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
|
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
|
||||||
this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
|
this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
|
||||||
|
|||||||
@@ -66,7 +66,6 @@ const routes: Routes = [
|
|||||||
children: [], // Children lets us have an empty component.
|
children: [], // Children lets us have an empty component.
|
||||||
canActivate: [redirectGuard()], // Redirects either to vault, login, or lock page.
|
canActivate: [redirectGuard()], // Redirects either to vault, login, or lock page.
|
||||||
},
|
},
|
||||||
{ path: "login", component: LoginComponent, canActivate: [UnauthGuard] },
|
|
||||||
{
|
{
|
||||||
path: "login-with-device",
|
path: "login-with-device",
|
||||||
component: LoginViaAuthRequestComponent,
|
component: LoginViaAuthRequestComponent,
|
||||||
@@ -182,6 +181,24 @@ const routes: Routes = [
|
|||||||
path: "",
|
path: "",
|
||||||
component: AnonLayoutWrapperComponent,
|
component: AnonLayoutWrapperComponent,
|
||||||
children: [
|
children: [
|
||||||
|
{
|
||||||
|
path: "login",
|
||||||
|
canActivate: [unauthGuardFn()],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
component: LoginComponent,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
component: EnvironmentSelectorComponent,
|
||||||
|
outlet: "environment-selector",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data: {
|
||||||
|
pageTitle: "logIn",
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "2fa",
|
path: "2fa",
|
||||||
component: TwoFactorComponent,
|
component: TwoFactorComponent,
|
||||||
|
|||||||
Reference in New Issue
Block a user