From f2bd16a0c41d889600aa534001f83902ac741c08 Mon Sep 17 00:00:00 2001
From: KiruthigaManivannan
 <162679756+KiruthigaManivannan@users.noreply.github.com>
Date: Thu, 6 Jun 2024 18:45:17 +0530
Subject: [PATCH] PM-1938 Migrate Accept Emergency Component (#9177)

* PM-1938 Migrate Accept Emergency Component

* PM-1938 Updated OSS routing module

* PM-1938 Updated anon layout path and removed width

* PM-1938 Addressed review comments

* PM-1938 - Move canActivate up a level.

* PM-1938 - Consolidate routing after merging in main.

---------

Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Co-authored-by: Jared Snider <jsnider@bitwarden.com>
---
 .../accept/accept-emergency.component.html    | 64 +++++++++----------
 apps/web/src/app/oss-routing.module.ts        | 32 +++++++---
 2 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html b/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html
index 4690a4e63a5..3e1db406316 100644
--- a/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html
+++ b/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html
@@ -1,45 +1,39 @@
-<div class="mt-5 d-flex justify-content-center" *ngIf="loading">
+<div class="tw-mt-5 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
-    <p class="text-center">
+    <p class="tw-text-center">
       <i
-        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </p>
   </div>
 </div>
-<div class="container" *ngIf="!loading && !authed">
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <p class="lead text-center mb-4">{{ "emergencyAccess" | i18n }}</p>
-      <div class="card d-block">
-        <div class="card-body">
-          <p class="text-center">
-            {{ name }}
-          </p>
-          <p>{{ "acceptEmergencyAccess" | i18n }}</p>
-          <hr />
-          <div class="d-flex">
-            <a
-              routerLink="/login"
-              [queryParams]="{ email: email }"
-              class="btn btn-primary btn-block"
-            >
-              {{ "logIn" | i18n }}
-            </a>
-            <a
-              routerLink="/register"
-              [queryParams]="{ email: email }"
-              class="btn btn-primary btn-block ml-2 mt-0"
-            >
-              {{ "createAccount" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
+<div *ngIf="!loading && !authed">
+  <p bitTypography="body1" class="tw-text-center">
+    {{ name }}
+  </p>
+  <p bitTypography="body1">{{ "acceptEmergencyAccess" | i18n }}</p>
+  <hr />
+  <div class="tw-flex tw-gap-2">
+    <a
+      bitButton
+      buttonType="primary"
+      routerLink="/login"
+      [queryParams]="{ email: email }"
+      [block]="true"
+    >
+      {{ "logIn" | i18n }}
+    </a>
+    <a
+      bitButton
+      buttonType="primary"
+      routerLink="/register"
+      [queryParams]="{ email: email }"
+      [block]="true"
+    >
+      {{ "createAccount" | i18n }}
+    </a>
   </div>
 </div>
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 8509e987eb4..77e51172269 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -128,15 +128,6 @@ const routes: Routes = [
         component: AcceptOrganizationComponent,
         data: { titleId: "joinOrganization", doNotSaveUrl: false } satisfies DataProperties,
       },
-      {
-        path: "accept-emergency",
-        canActivate: [deepLinkGuard()],
-        data: { titleId: "acceptEmergency", doNotSaveUrl: false } satisfies DataProperties,
-        loadComponent: () =>
-          import("./auth/emergency-access/accept/accept-emergency.component").then(
-            (mod) => mod.AcceptEmergencyComponent,
-          ),
-      },
       {
         path: "accept-families-for-enterprise",
         component: AcceptFamilySponsorshipComponent,
@@ -223,6 +214,29 @@ const routes: Routes = [
           titleId: "recoverAccountTwoStep",
         } satisfies DataProperties & AnonLayoutWrapperData,
       },
+      {
+        path: "accept-emergency",
+        canActivate: [deepLinkGuard()],
+        children: [
+          {
+            path: "",
+            data: {
+              pageTitle: "emergencyAccess",
+              titleId: "acceptEmergency",
+              doNotSaveUrl: false,
+            } satisfies DataProperties & AnonLayoutWrapperData,
+            loadComponent: () =>
+              import("./auth/emergency-access/accept/accept-emergency.component").then(
+                (mod) => mod.AcceptEmergencyComponent,
+              ),
+          },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+      },
     ],
   },
   {