Merge 735bcdd6dc into b4c8bdf468

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

@@ -1,154 +1,123 @@
 <form
-  #form
-  (ngSubmit)="submit(false)"
+  [bitSubmit]="submitForm.bind(null, false)"
   [appApiAction]="formPromise"
-  class="tw-container tw-mx-auto"
+  class="tw-container"
   [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 }}
+  <div class="tw-w-96">
+    <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()"
+        >
+          <span> {{ "continue" | i18n }} </span>
+        </button>
+      </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>
+
+        <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 />
+
+      <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>
-      <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
-                id="login_input_email"
-                bitInput
-                type="email"
-                formControlName="email"
-                appAutofocus
-                (keyup.enter)="validateEmail()"
-              />
-            </bit-form-field>
-          </div>
+    </ng-container>
 
-          <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 [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>
 
-          <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>
+      <div [hidden]="!showCaptcha()">
+        <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
+      </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 tw-flex tw-space-x-4">
+        <button bitButton buttonType="primary" bitFormButton type="submit" [block]="true">
+          <span> {{ "loginWithMasterPassword" | 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" *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>
 
-          <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
-                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()">
-            <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"
-            >
-              <span> {{ "loginWithMasterPassword" | i18n }} </span>
-            </button>
-          </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">
-            <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 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>

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

@@ -43,7 +43,6 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
   enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
   policies: ListResponse<PolicyResponse>;
   showPasswordless = false;
-
   constructor(
     devicesApiService: DevicesApiServiceAbstraction,
     appIdService: AppIdService,
@@ -91,7 +90,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

@@ -7,6 +7,7 @@ import {
   redirectGuard,
   tdeDecryptionRequiredGuard,
   UnauthGuard,
+  unauthGuardFn,
 } from "@bitwarden/angular/auth/guards";
 
 import { flagEnabled, Flags } from "../utils/flags";
@@ -17,6 +18,7 @@ import { VerifyRecoverDeleteProviderComponent } from "./admin-console/providers/
 import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
 import { SponsoredFamiliesComponent } from "./admin-console/settings/sponsored-families.component";
 import { AcceptOrganizationComponent } from "./auth/accept-organization.component";
+import { AnonLayoutWrapperComponent } from "./auth/anon-layout-wrapper.component";
 import { deepLinkGuard } from "./auth/guards/deep-link.guard";
 import { HintComponent } from "./auth/hint.component";
 import { LockComponent } from "./auth/lock.component";
@@ -61,7 +63,7 @@ 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", component: LoginComponent, canActivate: [UnauthGuard] },
       {
         path: "login-with-device",
         component: LoginViaAuthRequestComponent,
@@ -195,6 +197,20 @@ const routes: Routes = [
       },
     ],
   },
+  {
+    path: "",
+    component: AnonLayoutWrapperComponent,
+    children: [
+      {
+        path: "login",
+        component: LoginComponent,
+        canActivate: [unauthGuardFn()],
+        data: {
+          pageTitle: "loginOrCreateNewAccount",
+        },
+      },
+    ],
+  },
   {
     path: "",
     component: UserLayoutComponent,