PM-4954 Migrate SSO Component

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

@@ -1,52 +1,22 @@
-<form
-  #form
-  (ngSubmit)="submit()"
-  class="container"
-  [appApiAction]="initiateSsoFormPromise"
-  ngNativeValidate
->
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <img class="logo mb-2 logo-themed" alt="Bitwarden" />
-      <div class="card d-block mt-4">
-        <div class="card-body" *ngIf="loggingIn">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          {{ "loading" | i18n }}
-        </div>
-        <div class="card-body" *ngIf="!loggingIn">
-          <p>{{ "ssoLogInWithOrgIdentifier" | i18n }}</p>
-          <div class="form-group">
-            <label for="identifier">{{ "ssoIdentifier" | i18n }}</label>
-            <input
-              id="identifier"
-              class="form-control"
-              type="text"
-              name="Identifier"
-              [(ngModel)]="identifier"
-              required
-              appAutofocus
-            />
-          </div>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-primary btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-            </button>
-            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-              {{ "cancel" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
+<form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-container">
+  <div *ngIf="loggingIn" class="tw-w-[400px]">
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    {{ "loading" | i18n }}
+  </div>
+  <div *ngIf="!loggingIn" class="tw-w-[400px]">
+    <p bitTypography="body1">{{ "ssoLogInWithOrgIdentifier" | i18n }}</p>
+    <bit-form-field>
+      <bit-label>{{ "ssoIdentifier" | i18n }}</bit-label>
+      <input bitInput type="text" formControlName="identifier" appAutofocus />
+    </bit-form-field>
+    <hr />
+    <div class="tw-flex tw-gap-2">
+      <button type="submit" bitButton bitFormButton buttonType="primary" [block]="true">
+        {{ "logIn" | i18n }}
+      </button>
+      <a bitButton buttonType="secondary" routerLink="/login" [block]="true">
+        {{ "cancel" | i18n }}
+      </a>
     </div>
   </div>
 </form>

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

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -31,6 +32,10 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/ge
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class SsoComponent extends BaseSsoComponent {
+  protected formGroup = new FormGroup({
+    identifier: new FormControl(null, [Validators.required]),
+  });
+
   constructor(
     ssoLoginService: SsoLoginServiceAbstraction,
     loginStrategyService: LoginStrategyServiceAbstraction,
@@ -82,7 +87,7 @@ export class SsoComponent extends BaseSsoComponent {
     this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
       if (qParams.identifier != null) {
         // SSO Org Identifier in query params takes precedence over claimed domains
-        this.identifier = qParams.identifier;
+        this.formGroup.get("identifier").setValue(qParams.identifier);
       } else {
         // Note: this flow is written for web but both browser and desktop
         // redirect here on SSO button click.
@@ -96,7 +101,7 @@ export class SsoComponent extends BaseSsoComponent {
               await this.orgDomainApiService.getClaimedOrgDomainByEmail(qParams.email);
 
             if (response?.ssoAvailable) {
-              this.identifier = response.organizationIdentifier;
+              this.formGroup.get("identifier").setValue(response.organizationIdentifier);
               await this.submit();
               return;
             }
@@ -110,7 +115,7 @@ export class SsoComponent extends BaseSsoComponent {
         // Fallback to state svc if domain is unclaimed
         const storedIdentifier = await this.ssoLoginService.getOrganizationSsoIdentifier();
         if (storedIdentifier != null) {
-          this.identifier = storedIdentifier;
+          this.formGroup.get("identifier").setValue(storedIdentifier);
         }
       }
     });
@@ -131,13 +136,12 @@ export class SsoComponent extends BaseSsoComponent {
     }
   }
 
-  async submit() {
-    await this.ssoLoginService.setOrganizationSsoIdentifier(this.identifier);
+  submit = async () => {
+    this.identifier = this.formGroup.value.identifier;
+    await this.ssoLoginService.setOrganizationSsoIdentifier(this.formGroup.value.identifier);
     if (this.clientId === "browser") {
       document.cookie = `ssoHandOffMessage=${this.i18nService.t("ssoHandOff")};SameSite=strict`;
     }
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    super.submit();
-  }
+    await Object.getPrototypeOf(this).submit.call(this);
+  };
 }

apps/web/src/app/oss-routing.module.ts

@@ -17,6 +17,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";
@@ -94,12 +95,6 @@ const routes: Routes = [
         redirectTo: "register",
         pathMatch: "full",
       },
-      {
-        path: "sso",
-        component: SsoComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "enterpriseSingleSignOn" },
-      },
       {
         path: "set-password",
         component: SetPasswordComponent,
@@ -295,6 +290,19 @@ const routes: Routes = [
     loadChildren: () =>
       import("./admin-console/organizations/organization.module").then((m) => m.OrganizationModule),
   },
+  {
+    path: "",
+    component: AnonLayoutWrapperComponent,
+    children: [
+      {
+        path: "sso",
+        component: SsoComponent,
+        data: {
+          pageTitle: "enterpriseSingleSignOn",
+        },
+      },
+    ],
+  },
 ];
 
 @NgModule({