[PM-4952] Migrate-remove-password-component (#9305)

* migrating remove-password component

* add loading state

---------

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

apps/web/src/app/auth/remove-password.component.html

@@ -1,55 +1,33 @@
-<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 *ngIf="loading" class="tw-text-center">
+  <i
+    class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </div>
-<div class="container" *ngIf="!loading">
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <p class="lead text-center mb-4">{{ "removeMasterPassword" | i18n }}</p>
-      <hr />
-      <div class="card d-block">
-        <div class="card-body">
-          <p>{{ "convertOrganizationEncryptionDesc" | i18n: organization.name }}</p>
 
-          <button
-            type="button"
-            class="btn btn-primary btn-block"
-            (click)="convert()"
-            [disabled]="actionPromise"
-          >
-            <i
-              class="bwi bwi-spinner bwi-spin"
-              title="{{ 'loading' | i18n }}"
-              aria-hidden="true"
-              *ngIf="continuing"
-            ></i>
-            {{ "removeMasterPassword" | i18n }}
-          </button>
-          <button
-            type="button"
-            class="btn btn-outline-secondary btn-block"
-            (click)="leave()"
-            [disabled]="actionPromise"
-          >
-            <i
-              class="bwi bwi-spinner bwi-spin"
-              title="{{ 'loading' | i18n }}"
-              aria-hidden="true"
-              *ngIf="leaving"
-            ></i>
-            {{ "leaveOrganization" | i18n }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+<div *ngIf="!loading">
+  <p>{{ "convertOrganizationEncryptionDesc" | i18n: organization.name }}</p>
+
+  <button
+    bitButton
+    type="button"
+    buttonType="primary"
+    class="tw-w-full"
+    [bitAction]="convert"
+    [block]="true"
+  >
+    {{ "removeMasterPassword" | i18n }}
+  </button>
+  <button
+    bitButton
+    type="button"
+    buttonType="secondary"
+    class="tw-w-full"
+    [bitAction]="leave"
+    [block]="true"
+  >
+    {{ "leaveOrganization" | i18n }}
+  </button>
 </div>

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

@@ -176,12 +176,6 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         data: { titleId: "updatePassword" } satisfies DataProperties,
       },
-      {
-        path: "remove-password",
-        component: RemovePasswordComponent,
-        canActivate: [AuthGuard],
-        data: { titleId: "removeMasterPassword" } satisfies DataProperties,
-      },
       {
         path: "migrate-legacy-encryption",
         loadComponent: () =>
@@ -195,25 +189,6 @@ const routes: Routes = [
     path: "",
     component: AnonLayoutWrapperComponent,
     children: [
-      {
-        path: "recover-2fa",
-        canActivate: [unauthGuardFn()],
-        children: [
-          {
-            path: "",
-            component: RecoverTwoFactorComponent,
-          },
-          {
-            path: "",
-            component: EnvironmentSelectorComponent,
-            outlet: "environment-selector",
-          },
-        ],
-        data: {
-          pageTitle: "recoverAccountTwoStep",
-          titleId: "recoverAccountTwoStep",
-        } satisfies DataProperties & AnonLayoutWrapperData,
-      },
       {
         path: "accept-emergency",
         canActivate: [deepLinkGuard()],
@@ -237,6 +212,34 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: "recover-2fa",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: RecoverTwoFactorComponent,
+          },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+        data: {
+          pageTitle: "recoverAccountTwoStep",
+          titleId: "recoverAccountTwoStep",
+        } satisfies DataProperties & AnonLayoutWrapperData,
+      },
+      {
+        path: "remove-password",
+        component: RemovePasswordComponent,
+        canActivate: [AuthGuard],
+        data: {
+          pageTitle: "removeMasterPassword",
+          titleId: "removeMasterPassword",
+        } satisfies DataProperties & AnonLayoutWrapperData,
+      },
     ],
   },
   {