mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 16:53:34 +00:00
319 lines
11 KiB
TypeScript
319 lines
11 KiB
TypeScript
import { Directive, ElementRef, NgZone, OnInit, ViewChild } from "@angular/core";
|
|
import { FormBuilder, Validators } from "@angular/forms";
|
|
import { ActivatedRoute, Router } from "@angular/router";
|
|
import { take } from "rxjs/operators";
|
|
|
|
import { DevicesApiServiceAbstraction } from "@bitwarden/common/abstractions/devices/devices-api.service.abstraction";
|
|
import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
|
|
import { LoginService } from "@bitwarden/common/auth/abstractions/login.service";
|
|
import { AuthResult } from "@bitwarden/common/auth/models/domain/auth-result";
|
|
import { ForceResetPasswordReason } from "@bitwarden/common/auth/models/domain/force-reset-password-reason";
|
|
import { PasswordLogInCredentials } from "@bitwarden/common/auth/models/domain/log-in-credentials";
|
|
import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
|
|
import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
|
|
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
|
|
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
|
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
|
|
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
|
import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
|
|
import { Utils } from "@bitwarden/common/platform/misc/utils";
|
|
import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
|
|
|
|
import {
|
|
AllValidationErrors,
|
|
FormValidationErrorsService,
|
|
} from "../../platform/abstractions/form-validation-errors.service";
|
|
|
|
import { CaptchaProtectedComponent } from "./captcha-protected.component";
|
|
|
|
@Directive()
|
|
export class LoginComponent extends CaptchaProtectedComponent implements OnInit {
|
|
@ViewChild("masterPasswordInput", { static: true }) masterPasswordInput: ElementRef;
|
|
|
|
showPassword = false;
|
|
formPromise: Promise<AuthResult>;
|
|
onSuccessfulLogin: () => Promise<any>;
|
|
onSuccessfulLoginNavigate: () => Promise<any>;
|
|
onSuccessfulLoginTwoFactorNavigate: () => Promise<any>;
|
|
onSuccessfulLoginForceResetNavigate: () => Promise<any>;
|
|
showLoginWithDevice: boolean;
|
|
validatedEmail = false;
|
|
paramEmailSet = false;
|
|
redirectPath: string;
|
|
sessionId: string;
|
|
|
|
formGroup = this.formBuilder.group({
|
|
email: ["", [Validators.required, Validators.email]],
|
|
masterPassword: ["", [Validators.required, Validators.minLength(8)]],
|
|
rememberEmail: [false],
|
|
});
|
|
|
|
protected twoFactorRoute = "2fa";
|
|
protected successRoute = "vault";
|
|
protected forcePasswordResetRoute = "update-temp-password";
|
|
|
|
get loggedEmail() {
|
|
return this.formGroup.value.email;
|
|
}
|
|
|
|
constructor(
|
|
protected devicesApiService: DevicesApiServiceAbstraction,
|
|
protected appIdService: AppIdService,
|
|
protected authService: AuthService,
|
|
protected router: Router,
|
|
platformUtilsService: PlatformUtilsService,
|
|
i18nService: I18nService,
|
|
protected stateService: StateService,
|
|
environmentService: EnvironmentService,
|
|
protected passwordGenerationService: PasswordGenerationServiceAbstraction,
|
|
protected cryptoFunctionService: CryptoFunctionService,
|
|
protected logService: LogService,
|
|
protected ngZone: NgZone,
|
|
protected formBuilder: FormBuilder,
|
|
protected formValidationErrorService: FormValidationErrorsService,
|
|
protected route: ActivatedRoute,
|
|
protected loginService: LoginService
|
|
) {
|
|
super(environmentService, i18nService, platformUtilsService);
|
|
}
|
|
|
|
get selfHostedDomain() {
|
|
return this.environmentService.hasBaseUrl() ? this.environmentService.getWebVaultUrl() : null;
|
|
}
|
|
|
|
async ngOnInit() {
|
|
this.route?.queryParams.subscribe((params) => {
|
|
if (params != null) {
|
|
const queryParamsEmail = params["email"];
|
|
this.redirectPath = params?.["redirectPath"];
|
|
this.sessionId = params?.["sessionId"];
|
|
if (queryParamsEmail != null && queryParamsEmail.indexOf("@") > -1) {
|
|
this.formGroup.get("email").setValue(queryParamsEmail);
|
|
this.loginService.setEmail(queryParamsEmail);
|
|
this.paramEmailSet = true;
|
|
}
|
|
//use redirectPath to redirect to a specific page after successful login
|
|
if (this.redirectPath) {
|
|
this.successRoute = this.redirectPath;
|
|
}
|
|
}
|
|
});
|
|
let email = this.loginService.getEmail();
|
|
|
|
if (email == null || email === "") {
|
|
email = await this.stateService.getRememberedEmail();
|
|
}
|
|
|
|
if (!this.paramEmailSet) {
|
|
this.formGroup.get("email")?.setValue(email ?? "");
|
|
}
|
|
let rememberEmail = this.loginService.getRememberEmail();
|
|
if (rememberEmail == null) {
|
|
rememberEmail = (await this.stateService.getRememberedEmail()) != null;
|
|
}
|
|
this.formGroup.get("rememberEmail")?.setValue(rememberEmail);
|
|
}
|
|
|
|
async submit(showToast = true) {
|
|
const data = this.formGroup.value;
|
|
|
|
await this.setupCaptcha();
|
|
|
|
this.formGroup.markAllAsTouched();
|
|
|
|
//web
|
|
if (this.formGroup.invalid && !showToast) {
|
|
return;
|
|
}
|
|
|
|
//desktop, browser; This should be removed once all clients use reactive forms
|
|
if (this.formGroup.invalid && showToast) {
|
|
const errorText = this.getErrorToastMessage();
|
|
this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), errorText);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const credentials = new PasswordLogInCredentials(
|
|
data.email,
|
|
data.masterPassword,
|
|
this.captchaToken,
|
|
null
|
|
);
|
|
this.formPromise = this.authService.logIn(credentials);
|
|
const response = await this.formPromise;
|
|
this.setFormValues();
|
|
await this.loginService.saveEmailSettings();
|
|
if (this.handleCaptchaRequired(response)) {
|
|
return;
|
|
} else if (response.requiresTwoFactor) {
|
|
if (this.onSuccessfulLoginTwoFactorNavigate != null) {
|
|
this.onSuccessfulLoginTwoFactorNavigate();
|
|
} else {
|
|
this.router.navigate([this.twoFactorRoute], {
|
|
queryParams: {
|
|
redirectPath: this.redirectPath,
|
|
sessionId: this.sessionId,
|
|
},
|
|
});
|
|
}
|
|
} else if (response.forcePasswordReset != ForceResetPasswordReason.None) {
|
|
if (this.onSuccessfulLoginForceResetNavigate != null) {
|
|
this.onSuccessfulLoginForceResetNavigate();
|
|
} else {
|
|
this.router.navigate([this.forcePasswordResetRoute]);
|
|
}
|
|
} else {
|
|
if (this.onSuccessfulLogin != null) {
|
|
this.onSuccessfulLogin();
|
|
}
|
|
if (this.onSuccessfulLoginNavigate != null) {
|
|
this.onSuccessfulLoginNavigate();
|
|
} else {
|
|
this.router.navigate([this.successRoute]);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
this.logService.error(e);
|
|
}
|
|
}
|
|
|
|
togglePassword() {
|
|
this.showPassword = !this.showPassword;
|
|
if (this.ngZone.isStable) {
|
|
document.getElementById("masterPassword").focus();
|
|
} else {
|
|
this.ngZone.onStable
|
|
.pipe(take(1))
|
|
.subscribe(() => document.getElementById("masterPassword").focus());
|
|
}
|
|
}
|
|
|
|
async startPasswordlessLogin() {
|
|
this.formGroup.get("masterPassword")?.clearValidators();
|
|
this.formGroup.get("masterPassword")?.updateValueAndValidity();
|
|
|
|
if (!this.formGroup.valid) {
|
|
return;
|
|
}
|
|
|
|
this.setFormValues();
|
|
this.router.navigate(["/login-with-device"]);
|
|
}
|
|
|
|
async launchSsoBrowser(clientId: string, ssoRedirectUri: string) {
|
|
await this.saveEmailSettings();
|
|
// Generate necessary sso params
|
|
const passwordOptions: any = {
|
|
type: "password",
|
|
length: 64,
|
|
uppercase: true,
|
|
lowercase: true,
|
|
numbers: true,
|
|
special: false,
|
|
};
|
|
const state = await this.passwordGenerationService.generatePassword(passwordOptions);
|
|
const ssoCodeVerifier = await this.passwordGenerationService.generatePassword(passwordOptions);
|
|
const codeVerifierHash = await this.cryptoFunctionService.hash(ssoCodeVerifier, "sha256");
|
|
const codeChallenge = Utils.fromBufferToUrlB64(codeVerifierHash);
|
|
|
|
// Save sso params
|
|
await this.stateService.setSsoState(state);
|
|
await this.stateService.setSsoCodeVerifier(ssoCodeVerifier);
|
|
|
|
// Build URI
|
|
const webUrl = this.environmentService.getWebVaultUrl();
|
|
|
|
// Launch browser
|
|
this.platformUtilsService.launchUri(
|
|
webUrl +
|
|
"/#/sso?clientId=" +
|
|
clientId +
|
|
"&redirectUri=" +
|
|
encodeURIComponent(ssoRedirectUri) +
|
|
"&state=" +
|
|
state +
|
|
"&codeChallenge=" +
|
|
codeChallenge +
|
|
"&email=" +
|
|
encodeURIComponent(this.formGroup.controls.email.value)
|
|
);
|
|
}
|
|
|
|
async validateEmail() {
|
|
this.formGroup.controls.email.markAsTouched();
|
|
const emailInvalid = this.formGroup.get("email").invalid;
|
|
if (!emailInvalid) {
|
|
this.toggleValidateEmail(true);
|
|
await this.getLoginWithDevice(this.loggedEmail);
|
|
}
|
|
}
|
|
|
|
toggleValidateEmail(value: boolean) {
|
|
this.validatedEmail = value;
|
|
if (!this.validatedEmail) {
|
|
// Reset master password only when going from validated to not validated
|
|
// so that autofill can work properly
|
|
this.formGroup.controls.masterPassword.reset();
|
|
} else {
|
|
// Mark MP as untouched so that, when users enter email and hit enter,
|
|
// the MP field doesn't load with validation errors
|
|
this.formGroup.controls.masterPassword.markAsUntouched();
|
|
|
|
// When email is validated, focus on master password after
|
|
// waiting for input to be rendered
|
|
if (this.ngZone.isStable) {
|
|
this.masterPasswordInput?.nativeElement?.focus();
|
|
} else {
|
|
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
|
|
this.masterPasswordInput?.nativeElement?.focus();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
setFormValues() {
|
|
this.loginService.setEmail(this.formGroup.value.email);
|
|
this.loginService.setRememberEmail(this.formGroup.value.rememberEmail);
|
|
}
|
|
|
|
async saveEmailSettings() {
|
|
this.setFormValues();
|
|
await this.loginService.saveEmailSettings();
|
|
}
|
|
|
|
private getErrorToastMessage() {
|
|
const error: AllValidationErrors = this.formValidationErrorService
|
|
.getFormValidationErrors(this.formGroup.controls)
|
|
.shift();
|
|
|
|
if (error) {
|
|
switch (error.errorName) {
|
|
case "email":
|
|
return this.i18nService.t("invalidEmail");
|
|
default:
|
|
return this.i18nService.t(this.errorTag(error));
|
|
}
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
private errorTag(error: AllValidationErrors): string {
|
|
const name = error.errorName.charAt(0).toUpperCase() + error.errorName.slice(1);
|
|
return `${error.controlName}${name}`;
|
|
}
|
|
|
|
async getLoginWithDevice(email: string) {
|
|
try {
|
|
const deviceIdentifier = await this.appIdService.getAppId();
|
|
this.showLoginWithDevice = await this.devicesApiService.getKnownDevice(
|
|
email,
|
|
deviceIdentifier
|
|
);
|
|
} catch (e) {
|
|
this.showLoginWithDevice = false;
|
|
}
|
|
}
|
|
}
|