setup new LoginComponent files in libs/auth
This commit is contained in:
parent
dedd7f1b5c
commit
af9483d480
|
@ -45,6 +45,7 @@ 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,
|
||||||
|
@ -95,6 +96,7 @@ 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) => {
|
submitForm = async (showToast = true) => {
|
||||||
return await this.submitFormHelper(showToast);
|
return await this.submitFormHelper(showToast);
|
||||||
};
|
};
|
||||||
|
@ -102,6 +104,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
|
||||||
private async submitFormHelper(showToast: boolean) {
|
private async submitFormHelper(showToast: boolean) {
|
||||||
await super.submit(showToast);
|
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) => {
|
||||||
|
@ -202,10 +205,12 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
|
||||||
if (this.policies == null) {
|
if (this.policies == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const resetPasswordPolicy = this.policyService.getResetPasswordPolicyOptions(
|
const resetPasswordPolicy = this.policyService.getResetPasswordPolicyOptions(
|
||||||
this.policies,
|
this.policies,
|
||||||
invite.organizationId,
|
invite.organizationId,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Set to true if policy enabled and auto-enroll enabled
|
// Set to true if policy enabled and auto-enroll enabled
|
||||||
this.showResetPasswordAutoEnrollWarning =
|
this.showResetPasswordAutoEnrollWarning =
|
||||||
resetPasswordPolicy[1] && resetPasswordPolicy[0].autoEnrollEnabled;
|
resetPasswordPolicy[1] && resetPasswordPolicy[0].autoEnrollEnabled;
|
||||||
|
|
|
@ -19,6 +19,7 @@ import {
|
||||||
SetPasswordJitComponent,
|
SetPasswordJitComponent,
|
||||||
LockIcon,
|
LockIcon,
|
||||||
RegistrationLinkExpiredComponent,
|
RegistrationLinkExpiredComponent,
|
||||||
|
LoginComponentV2,
|
||||||
} from "@bitwarden/auth/angular";
|
} from "@bitwarden/auth/angular";
|
||||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||||
|
|
||||||
|
@ -260,7 +261,7 @@ const routes: Routes = [
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "",
|
path: "",
|
||||||
component: LoginComponent,
|
component: LoginComponentV2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "",
|
path: "",
|
||||||
|
|
|
@ -266,6 +266,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
|
||||||
async validateEmail() {
|
async validateEmail() {
|
||||||
this.formGroup.controls.email.markAsTouched();
|
this.formGroup.controls.email.markAsTouched();
|
||||||
const emailValid = this.formGroup.get("email").valid;
|
const emailValid = this.formGroup.get("email").valid;
|
||||||
|
|
||||||
if (emailValid) {
|
if (emailValid) {
|
||||||
this.toggleValidateEmail(true);
|
this.toggleValidateEmail(true);
|
||||||
await this.getLoginWithDevice(this.loggedEmail);
|
await this.getLoginWithDevice(this.loggedEmail);
|
||||||
|
@ -299,6 +300,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
|
||||||
// Try to load from memory first
|
// Try to load from memory first
|
||||||
const email = this.loginEmailService.getEmail();
|
const email = this.loginEmailService.getEmail();
|
||||||
const rememberEmail = this.loginEmailService.getRememberEmail();
|
const rememberEmail = this.loginEmailService.getRememberEmail();
|
||||||
|
|
||||||
if (email) {
|
if (email) {
|
||||||
this.formGroup.controls.email.setValue(email);
|
this.formGroup.controls.email.setValue(email);
|
||||||
this.formGroup.controls.rememberEmail.setValue(rememberEmail);
|
this.formGroup.controls.rememberEmail.setValue(rememberEmail);
|
||||||
|
|
|
@ -2,9 +2,6 @@
|
||||||
* This barrel file should only contain Angular exports
|
* This barrel file should only contain Angular exports
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// icons
|
|
||||||
export * from "./icons";
|
|
||||||
|
|
||||||
// anon layout
|
// anon layout
|
||||||
export * from "./anon-layout/anon-layout.component";
|
export * from "./anon-layout/anon-layout.component";
|
||||||
export * from "./anon-layout/anon-layout-wrapper.component";
|
export * from "./anon-layout/anon-layout-wrapper.component";
|
||||||
|
@ -14,14 +11,28 @@ export * from "./anon-layout/default-anon-layout-wrapper-data.service";
|
||||||
// fingerprint dialog
|
// fingerprint dialog
|
||||||
export * from "./fingerprint-dialog/fingerprint-dialog.component";
|
export * from "./fingerprint-dialog/fingerprint-dialog.component";
|
||||||
|
|
||||||
// password callout
|
// icons
|
||||||
export * from "./password-callout/password-callout.component";
|
export * from "./icons";
|
||||||
export * from "./vault-timeout-input/vault-timeout-input.component";
|
|
||||||
|
|
||||||
// input password
|
// input password
|
||||||
export * from "./input-password/input-password.component";
|
export * from "./input-password/input-password.component";
|
||||||
export * from "./input-password/password-input-result";
|
export * from "./input-password/password-input-result";
|
||||||
|
|
||||||
|
// login
|
||||||
|
export * from "./login/login.component";
|
||||||
|
|
||||||
|
// password callout
|
||||||
|
export * from "./password-callout/password-callout.component";
|
||||||
|
|
||||||
|
// registration
|
||||||
|
export * from "./registration/registration-start/registration-start.component";
|
||||||
|
export * from "./registration/registration-finish/registration-finish.component";
|
||||||
|
export * from "./registration/registration-link-expired/registration-link-expired.component";
|
||||||
|
export * from "./registration/registration-start/registration-start-secondary.component";
|
||||||
|
export * from "./registration/registration-env-selector/registration-env-selector.component";
|
||||||
|
export * from "./registration/registration-finish/registration-finish.service";
|
||||||
|
export * from "./registration/registration-finish/default-registration-finish.service";
|
||||||
|
|
||||||
// set password (JIT user)
|
// set password (JIT user)
|
||||||
export * from "./set-password-jit/set-password-jit.component";
|
export * from "./set-password-jit/set-password-jit.component";
|
||||||
export * from "./set-password-jit/set-password-jit.service.abstraction";
|
export * from "./set-password-jit/set-password-jit.service.abstraction";
|
||||||
|
@ -32,11 +43,5 @@ export * from "./user-verification/user-verification-dialog.component";
|
||||||
export * from "./user-verification/user-verification-dialog.types";
|
export * from "./user-verification/user-verification-dialog.types";
|
||||||
export * from "./user-verification/user-verification-form-input.component";
|
export * from "./user-verification/user-verification-form-input.component";
|
||||||
|
|
||||||
// registration
|
// vault timeout input
|
||||||
export * from "./registration/registration-start/registration-start.component";
|
export * from "./vault-timeout-input/vault-timeout-input.component";
|
||||||
export * from "./registration/registration-finish/registration-finish.component";
|
|
||||||
export * from "./registration/registration-link-expired/registration-link-expired.component";
|
|
||||||
export * from "./registration/registration-start/registration-start-secondary.component";
|
|
||||||
export * from "./registration/registration-env-selector/registration-env-selector.component";
|
|
||||||
export * from "./registration/registration-finish/registration-finish.service";
|
|
||||||
export * from "./registration/registration-finish/default-registration-finish.service";
|
|
||||||
|
|
|
@ -0,0 +1,55 @@
|
||||||
|
<form [bitSubmit]="submit" [formGroup]="formGroup">
|
||||||
|
<!-------------------------
|
||||||
|
UI STATE 1: Email Entry
|
||||||
|
-------------------------->
|
||||||
|
<ng-container *ngIf="true">
|
||||||
|
<!-- Email Address input -->
|
||||||
|
<div class="tw-mb-3">
|
||||||
|
<bit-form-field>
|
||||||
|
<bit-label>{{ "emailAddress" | i18n }}</bit-label>
|
||||||
|
<input type="email" bitInput formControlName="email" appAutofocus />
|
||||||
|
</bit-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Remember Email input -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Continue button -->
|
||||||
|
<div class="tw-mb-3">
|
||||||
|
<button
|
||||||
|
bitButton
|
||||||
|
type="submit"
|
||||||
|
buttonType="primary"
|
||||||
|
class="tw-w-full"
|
||||||
|
(click)="validateEmail()"
|
||||||
|
>
|
||||||
|
<span> {{ "continue" | i18n }} </span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Login with Passkey link -->
|
||||||
|
<div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
|
||||||
|
<p class="tw-mb-3">{{ "or" | i18n }}</p>
|
||||||
|
<a
|
||||||
|
bitLink
|
||||||
|
block
|
||||||
|
linkType="primary"
|
||||||
|
routerLink="/login-with-passkey"
|
||||||
|
(mousedown)="$event.preventDefault()"
|
||||||
|
>
|
||||||
|
<span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-----------------------------------
|
||||||
|
UI STATE 2: Master Password Entry
|
||||||
|
------------------------------------>
|
||||||
|
</form>
|
|
@ -0,0 +1,69 @@
|
||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
|
||||||
|
import { ActivatedRoute, RouterModule } from "@angular/router";
|
||||||
|
import { Subject, takeUntil } from "rxjs";
|
||||||
|
|
||||||
|
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||||
|
import {
|
||||||
|
AsyncActionsModule,
|
||||||
|
ButtonModule,
|
||||||
|
CheckboxModule,
|
||||||
|
FormFieldModule,
|
||||||
|
} from "@bitwarden/components";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
standalone: true,
|
||||||
|
templateUrl: "./login.component.html",
|
||||||
|
imports: [
|
||||||
|
AsyncActionsModule,
|
||||||
|
ButtonModule,
|
||||||
|
CheckboxModule,
|
||||||
|
CommonModule,
|
||||||
|
FormFieldModule,
|
||||||
|
JslibModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
RouterModule,
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class LoginComponentV2 implements OnInit {
|
||||||
|
protected paramEmailSet = false;
|
||||||
|
|
||||||
|
protected formGroup = this.formBuilder.group({
|
||||||
|
email: ["", [Validators.required, Validators.email]],
|
||||||
|
rememberEmail: [false],
|
||||||
|
});
|
||||||
|
|
||||||
|
private destroy$ = new Subject<void>();
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private activatedRoute: ActivatedRoute,
|
||||||
|
private formBuilder: FormBuilder,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async ngOnInit(): Promise<void> {
|
||||||
|
this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
||||||
|
if (!params) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const qParamsEmail = params.email;
|
||||||
|
|
||||||
|
if (qParamsEmail?.indexOf("@") > -1) {
|
||||||
|
this.formGroup.controls.email.setValue(qParamsEmail);
|
||||||
|
|
||||||
|
this.paramEmailSet = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!this.paramEmailSet) {
|
||||||
|
await this.loadEmailSettings();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
submit = async () => {};
|
||||||
|
|
||||||
|
async validateEmail() {}
|
||||||
|
|
||||||
|
private async loadEmailSettings() {}
|
||||||
|
}
|
Loading…
Reference in New Issue