[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>

apps/web/src/app/auth/login/login.component.html

@@ -1,27 +1,14 @@
 <form
-  #form
-  (ngSubmit)="submit(false)"
+  [bitSubmit]="submitForm.bind(null, false)"
   [appApiAction]="formPromise"
-  class="tw-container tw-mx-auto"
   [formGroup]="formGroup"
->
-  <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"
+  class="tw-w-96"
 >
   <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"
@@ -44,7 +31,6 @@
         type="button"
         buttonType="primary"
         class="tw-w-full"
-              [disabled]="form.loading"
         (click)="validateEmail()"
       >
         <span> {{ "continue" | i18n }} </span>
@@ -78,13 +64,7 @@
     <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"
-              />
+        <input type="password" bitInput #masterPasswordInput formControlName="masterPassword" />
         <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
       </bit-form-field>
       <a
@@ -97,21 +77,11 @@
     </div>
 
     <div [hidden]="!showCaptcha()">
-            <iframe
-              id="hcaptcha_iframe"
-              height="80"
-              sandbox="allow-scripts allow-same-origin"
-            ></iframe>
+      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
     </div>
 
     <div class="tw-mb-3 tw-flex tw-space-x-4">
-            <button
-              bitButton
-              buttonType="primary"
-              type="submit"
-              [block]="true"
-              [loading]="form.loading"
-            >
+      <button bitButton buttonType="primary" bitFormButton type="submit" [block]="true">
         <span> {{ "loginWithMasterPassword" | i18n }} </span>
       </button>
     </div>
@@ -149,7 +119,4 @@
       <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
     </div>
   </div>
-      </div>
-    </div>
-  </div>
 </form>

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) => {

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,