From ae688d9e9eb78d1d0171a75812ff100aa0bcde9e Mon Sep 17 00:00:00 2001
From: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
Date: Wed, 12 Jun 2024 18:59:44 +0530
Subject: [PATCH] [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>
---
 .../src/app/auth/login/login.component.html   | 239 ++++++++----------
 .../web/src/app/auth/login/login.component.ts |   7 +-
 apps/web/src/app/oss-routing.module.ts        |  19 +-
 3 files changed, 127 insertions(+), 138 deletions(-)

diff --git a/apps/web/src/app/auth/login/login.component.html b/apps/web/src/app/auth/login/login.component.html
index 0e29a342786..eb2a9a88aa1 100644
--- a/apps/web/src/app/auth/login/login.component.html
+++ b/apps/web/src/app/auth/login/login.component.html
@@ -1,155 +1,122 @@
 <form
-  #form
-  (ngSubmit)="submit(false)"
+  [bitSubmit]="submitForm.bind(null, false)"
   [appApiAction]="formPromise"
-  class="tw-container tw-mx-auto"
   [formGroup]="formGroup"
+  class="tw-w-96"
 >
-  <div
-    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>
-      <img class="logo logo-themed" alt="Bitwarden" />
-      <p class="tw-mx-4 tw-mb-4 tw-mt-3 tw-text-center tw-text-xl">
-        {{ "loginOrCreateNewAccount" | i18n }}
-      </p>
-      <div
-        class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
+  <ng-container *ngIf="!validatedEmail">
+    <div class="tw-mb-3">
+      <bit-form-field>
+        <bit-label>{{ "emailAddress" | i18n }}</bit-label>
+        <input
+          bitInput
+          type="email"
+          formControlName="email"
+          appAutofocus
+          (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">
-          <div class="tw-mb-3">
-            <bit-form-field>
-              <bit-label>{{ "emailAddress" | i18n }}</bit-label>
-              <input
-                id="login_input_email"
-                bitInput
-                type="email"
-                formControlName="email"
-                appAutofocus
-                (keyup.enter)="validateEmail()"
-              />
-            </bit-form-field>
-          </div>
+        <span> {{ "continue" | i18n }} </span>
+      </button>
+    </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 tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <p class="tw-mb-3">{{ "or" | i18n }}</p>
 
-          <div class="tw-mb-3">
-            <button
-              bitButton
-              type="button"
-              buttonType="primary"
-              class="tw-w-full"
-              [disabled]="form.loading"
-              (click)="validateEmail()"
-            >
-              <span> {{ "continue" | i18n }} </span>
-            </button>
-          </div>
+      <a
+        bitLink
+        block
+        linkType="primary"
+        routerLink="/login-with-passkey"
+        (mousedown)="$event.preventDefault()"
+      >
+        <span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
+      </a>
+    </div>
 
-          <div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
-            <p class="tw-mb-3">{{ "or" | i18n }}</p>
+    <hr />
 
-            <a
-              bitLink
-              block
-              linkType="primary"
-              routerLink="/login-with-passkey"
-              (mousedown)="$event.preventDefault()"
-            >
-              <span><i class="bwi bwi-passkey"></i> {{ "loginWithPasskey" | i18n }}</span>
-            </a>
-          </div>
+    <p class="tw-m-0 tw-text-sm">
+      {{ "newAroundHere" | i18n }}
+      <!--mousedown event is used over click because it prevents the validation from firing  -->
+      <a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
+    </p>
+  </ng-container>
 
-          <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">
-            {{ "newAroundHere" | i18n }}
-            <!--mousedown event is used over click because it prevents the validation from firing  -->
-            <a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
-          </p>
-        </ng-container>
+    <div [hidden]="!showCaptcha()">
+      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
+    </div>
 
-        <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
-                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 class="tw-mb-3 tw-flex tw-space-x-4">
+      <button bitButton buttonType="primary" bitFormButton type="submit" [block]="true">
+        <span> {{ "loginWithMasterPassword" | i18n }} </span>
+      </button>
+    </div>
 
-          <div [hidden]="!showCaptcha()">
-            <iframe
-              id="hcaptcha_iframe"
-              height="80"
-              sandbox="allow-scripts allow-same-origin"
-            ></iframe>
-          </div>
+    <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
+      <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 tw-flex tw-space-x-4">
-            <button
-              bitButton
-              buttonType="primary"
-              type="submit"
-              [block]="true"
-              [loading]="form.loading"
-            >
-              <span> {{ "loginWithMasterPassword" | i18n }} </span>
-            </button>
-          </div>
+    <div class="tw-mb-3">
+      <a
+        routerLink="/sso"
+        [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>
 
-          <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
-            <button
-              bitButton
-              type="button"
-              [block]="true"
-              buttonType="secondary"
-              (click)="startAuthRequestLogin()"
-            >
-              <span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
-            </button>
-          </div>
+    <hr />
 
-          <div class="tw-mb-3">
-            <a
-              routerLink="/sso"
-              [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 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>
 </form>
diff --git a/apps/web/src/app/auth/login/login.component.ts b/apps/web/src/app/auth/login/login.component.ts
index 51d46f46a42..1f174b7397a 100644
--- a/apps/web/src/app/auth/login/login.component.ts
+++ b/apps/web/src/app/auth/login/login.component.ts
@@ -43,7 +43,6 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
   enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
   policies: Policy[];
   showPasswordless = false;
-
   constructor(
     private acceptOrganizationInviteService: AcceptOrganizationInviteService,
     devicesApiService: DevicesApiServiceAbstraction,
@@ -92,7 +91,13 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
     this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     this.showPasswordless = flagEnabled("showPasswordless");
   }
+  submitForm = async (showToast = true) => {
+    return await this.submitFormHelper(showToast);
+  };
 
+  private async submitFormHelper(showToast: boolean) {
+    await super.submit(showToast);
+  }
   async ngOnInit() {
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 0a15e058696..eed8b7d281c 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -66,7 +66,6 @@ const routes: Routes = [
         children: [], // Children lets us have an empty component.
         canActivate: [redirectGuard()], // Redirects either to vault, login, or lock page.
       },
-      { path: "login", component: LoginComponent, canActivate: [UnauthGuard] },
       {
         path: "login-with-device",
         component: LoginViaAuthRequestComponent,
@@ -182,6 +181,24 @@ const routes: Routes = [
     path: "",
     component: AnonLayoutWrapperComponent,
     children: [
+      {
+        path: "login",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: LoginComponent,
+          },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+        data: {
+          pageTitle: "logIn",
+        },
+      },
       {
         path: "2fa",
         component: TwoFactorComponent,