AC-2409 Migrate Accept Provider Component (#9390)

* AC-2409 Migrate Accept Provider Component

* AC-2409 Replaced the loading scenario

bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html

@@ -1,46 +1,41 @@
-<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">
+    <img class="tw-mb-4 logo logo-themed" alt="Bitwarden" />
+    <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">{{ "joinProvider" | i18n }}</p>
-      <div class="card d-block">
-        <div class="card-body">
-          <p class="text-center">
-            {{ providerName }}
-            <strong class="d-block mt-2">{{ email }}</strong>
-          </p>
-          <p>{{ "joinProviderDesc" | 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">
+    {{ providerName }}
+    <span bitTypography="body1" class="tw-font-bold">{{ email }}</span>
+  </p>
+  <p bitTypography="body1">{{ "joinProviderDesc" | 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>

bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { AuthGuard } from "@bitwarden/angular/auth/guards";
+import { AnonLayoutWrapperComponent } from "@bitwarden/auth/angular";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
 import { ProvidersComponent } from "@bitwarden/web-vault/app/admin-console/providers/providers.component";
 import { FrontendLayoutComponent } from "@bitwarden/web-vault/app/layouts/frontend-layout.component";
@@ -48,10 +49,19 @@ const routes: Routes = [
         component: SetupProviderComponent,
         data: { titleId: "setupProvider" },
       },
+    ],
+  },
+  {
+    path: "",
+    component: AnonLayoutWrapperComponent,
+    children: [
       {
         path: "accept-provider",
         component: AcceptProviderComponent,
-        data: { titleId: "acceptProvider" },
+        data: {
+          pageTitle: "joinProvider",
+          titleId: "acceptProvider",
+        },
       },
     ],
   },