Merge 6914955f24 into b4c8bdf468

apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html

@@ -1,45 +1,27 @@
-<div class="mt-5 d-flex justify-content-center" *ngIf="loading">
-  <div>
-    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
-    <p class="text-center">
-      <i
-        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="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="!authed" class="tw-w-[400px]">
+  <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>

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";
@@ -123,15 +124,6 @@ const routes: Routes = [
         canActivate: [deepLinkGuard()],
         data: { titleId: "joinOrganization", doNotSaveUrl: false },
       },
-      {
-        path: "accept-emergency",
-        canActivate: [deepLinkGuard()],
-        data: { titleId: "acceptEmergency", doNotSaveUrl: false },
-        loadComponent: () =>
-          import("./auth/emergency-access/accept/accept-emergency.component").then(
-            (mod) => mod.AcceptEmergencyComponent,
-          ),
-      },
       {
         path: "accept-families-for-enterprise",
         component: AcceptFamilySponsorshipComponent,
@@ -295,6 +287,25 @@ const routes: Routes = [
     loadChildren: () =>
       import("./admin-console/organizations/organization.module").then((m) => m.OrganizationModule),
   },
+  {
+    path: "",
+    component: AnonLayoutWrapperComponent,
+    children: [
+      {
+        path: "accept-emergency",
+        canActivate: [deepLinkGuard()],
+        data: {
+          pageTitle: "emergencyAccess",
+          titleId: "acceptEmergency",
+          doNotSaveUrl: false,
+        },
+        loadComponent: () =>
+          import("./auth/emergency-access/accept/accept-emergency.component").then(
+            (mod) => mod.AcceptEmergencyComponent,
+          ),
+      },
+    ],
+  },
 ];
 
 @NgModule({