From 62fee4fb90b5bcb64ad8916660ef8d5f8d200ddc Mon Sep 17 00:00:00 2001
From: KiruthigaManivannan
 <162679756+KiruthigaManivannan@users.noreply.github.com>
Date: Tue, 21 May 2024 18:42:41 +0530
Subject: [PATCH] PM-2172 Update User Add Edit Dialog (#8747)

* PM-2172 Update User Add Edit Dialog

* PM-2172 Addressed review comments
---
 .../member-dialog.component.html              | 395 ++++++------------
 1 file changed, 125 insertions(+), 270 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
index 2719666cc8..35e28b5239 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
@@ -14,7 +14,7 @@
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
-        <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
       </ng-container>
       <bit-tab-group
         *ngIf="!loading && organization$ | async as organization"
@@ -22,7 +22,7 @@
       >
         <bit-tab [label]="'role' | i18n">
           <ng-container *ngIf="!editMode">
-            <p>{{ "inviteUserDesc" | i18n }}</p>
+            <p bitTypography="body1">{{ "inviteUserDesc" | i18n }}</p>
             <bit-form-field>
               <bit-label>{{ "email" | i18n }}</bit-label>
               <input id="emails" type="text" appAutoFocus bitInput formControlName="emails" />
@@ -32,13 +32,11 @@
               }}</bit-hint>
             </bit-form-field>
           </ng-container>
-          <fieldset role="radiogroup" aria-labelledby="roleGroupLabel" class="tw-mb-6">
-            <legend
-              id="roleGroupLabel"
-              class="tw-mb-2 tw-block tw-text-base tw-font-semibold tw-text-main"
-            >
+          <bit-radio-group formControlName="type">
+            <bit-label>
               {{ "memberRole" | i18n }}
               <a
+                bitLink
                 target="_blank"
                 rel="noreferrer"
                 appA11yTitle="{{ 'learnMore' | i18n }}"
@@ -46,112 +44,63 @@
               >
                 <i class="bwi bwi-question-circle" aria-hidden="true"></i>
               </a>
-            </legend>
-            <div class="tw-mb-2 tw-flex tw-items-baseline">
-              <input
-                type="radio"
-                id="userTypeUser"
-                [value]="organizationUserType.User"
-                class="tw-relative tw-bottom-[-1px] tw-mr-2"
-                formControlName="type"
-                name="type"
-              />
-              <label class="tw-m-0" for="userTypeUser">
-                {{ "user" | i18n }}
-                <div class="text-base tw-block tw-font-normal tw-text-muted">
-                  {{ "userDesc" | i18n }}
-                </div>
-              </label>
-            </div>
-            <div
+            </bit-label>
+            <bit-radio-button id="userTypeUser" [value]="organizationUserType.User">
+              <bit-label>{{ "user" | i18n }}</bit-label>
+              <bit-hint>{{ "userDesc" | i18n }}</bit-hint>
+            </bit-radio-button>
+            <bit-radio-button
               *ngIf="!organization.flexibleCollections"
-              class="tw-mb-2 tw-flex tw-items-baseline"
+              id="userTypeManager"
+              [value]="organizationUserType.Manager"
             >
-              <input
-                type="radio"
-                id="userTypeManager"
-                [value]="organizationUserType.Manager"
-                class="tw-relative tw-bottom-[-1px] tw-mr-2"
-                formControlName="type"
-                name="type"
-              />
-              <label class="tw-m-0" for="userTypeManager">
-                {{ "manager" | i18n }}
-                <div class="text-base tw-block tw-font-normal tw-text-muted">
-                  {{ "managerDesc" | i18n }}
-                </div>
-              </label>
-            </div>
-            <div class="tw-mb-2 tw-flex tw-items-baseline">
-              <input
-                type="radio"
-                id="userTypeAdmin"
-                [value]="organizationUserType.Admin"
-                class="tw-relative tw-bottom-[-1px] tw-mr-2"
-                formControlName="type"
-                name="type"
-              />
-              <label class="tw-m-0" for="userTypeAdmin">
-                {{ "admin" | i18n }}
-                <div class="text-base tw-block tw-font-normal tw-text-muted">
-                  {{ "adminDesc" | i18n }}
-                </div>
-              </label>
-            </div>
-            <div class="tw-mb-2 tw-flex tw-items-baseline">
-              <input
-                type="radio"
-                id="userTypeOwner"
-                [value]="organizationUserType.Owner"
-                class="tw-relative tw-bottom-[-1px] tw-mr-2"
-                formControlName="type"
-                name="type"
-              />
-              <label class="tw-m-0" for="userTypeOwner">
-                {{ "owner" | i18n }}
-                <div class="text-base tw-block tw-font-normal tw-text-muted">
-                  {{ "ownerDesc" | i18n }}
-                </div>
-              </label>
-            </div>
-            <div class="tw-flex tw-items-baseline">
-              <input
-                type="radio"
-                id="userTypeCustom"
-                [value]="organizationUserType.Custom"
-                formControlName="type"
-                name="type"
-                class="tw-relative tw-bottom-[-1px] tw-mr-2"
-                [attr.disabled]="!organization.useCustomPermissions || null"
-              />
-              <label class="tw-m-0" for="userTypeCustom">
-                {{ "custom" | i18n }}
+              <bit-label>{{ "manager" | i18n }}</bit-label>
+              <bit-hint>{{ "managerDesc" | i18n }}</bit-hint>
+            </bit-radio-button>
+            <bit-radio-button id="userTypeAdmin" [value]="organizationUserType.Admin">
+              <bit-label>{{ "admin" | i18n }}</bit-label>
+              <bit-hint>{{ "adminDesc" | i18n }}</bit-hint>
+            </bit-radio-button>
+            <bit-radio-button id="userTypeOwner" [value]="organizationUserType.Owner">
+              <bit-label>{{ "owner" | i18n }}</bit-label>
+              <bit-hint>{{ "ownerDesc" | i18n }}</bit-hint>
+            </bit-radio-button>
+            <bit-radio-button
+              id="userTypeCustom"
+              [value]="organizationUserType.Custom"
+              [disabled]="!organization.useCustomPermissions || null"
+            >
+              <bit-label>{{ "custom" | i18n }}</bit-label>
+              <bit-hint>
                 <ng-container *ngIf="!organization.useCustomPermissions; else enterprise">
-                  <div class="text-base tw-block tw-font-normal tw-text-muted">
+                  <p>
                     {{ "customDescNonEnterpriseStart" | i18n
-                    }}<a href="https://bitwarden.com/contact/" target="_blank" rel="noreferrer">{{
-                      "customDescNonEnterpriseLink" | i18n
-                    }}</a
+                    }}<a
+                      bitLink
+                      href="https://bitwarden.com/contact/"
+                      target="_blank"
+                      rel="noreferrer"
+                      >{{ "customDescNonEnterpriseLink" | i18n }}</a
                     >{{ "customDescNonEnterpriseEnd" | i18n }}
-                  </div>
+                  </p>
                 </ng-container>
                 <ng-template #enterprise>
-                  <div class="text-base tw-block tw-font-normal tw-text-muted">
-                    {{ "customDesc" | i18n }}
-                  </div>
+                  <p>{{ "customDesc" | i18n }}</p>
                 </ng-template>
-              </label>
-            </div>
-          </fieldset>
+              </bit-hint>
+            </bit-radio-button>
+          </bit-radio-group>
           <ng-container *ngIf="customUserTypeSelected">
             <ng-container *ngIf="!organization.flexibleCollections; else customPermissionsFC">
-              <h3 class="mt-4 d-flex tw-font-semibold">
+              <h3 bitTypography="h3">
                 {{ "permissions" | i18n }}
               </h3>
-              <div class="row" [formGroup]="permissionsGroup">
-                <div class="col-6">
-                  <div class="mb-3">
-                    <label class="tw-font-semibold">{{ "managerPermissions" | i18n }}</label>
+              <div class="tw-grid tw-grid-cols-12 tw-gap-4" [formGroup]="permissionsGroup">
+                <div class="tw-col-span-6">
+                  <div class="tw-mb-3">
+                    <bit-label class="tw-font-semibold">{{
+                      "managerPermissions" | i18n
+                    }}</bit-label>
                     <hr class="tw-mb-2 tw-mr-2 tw-mt-0" />
                     <app-nested-checkbox
                       parentId="manageAssignedCollections"
@@ -160,221 +109,126 @@
                     </app-nested-checkbox>
                   </div>
                 </div>
-                <div class="col-6">
-                  <div class="mb-3">
-                    <label class="tw-font-semibold">{{ "adminPermissions" | i18n }}</label>
+                <div class="tw-col-span-6">
+                  <div class="tw-mb-3">
+                    <bit-label class="tw-font-semibold">{{ "adminPermissions" | i18n }}</bit-label>
                     <hr class="tw-mb-2 tw-mr-2 tw-mt-0" />
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="accessEventLogs"
-                        id="accessEventLogs"
-                        formControlName="accessEventLogs"
-                      />
-                      <label class="!tw-font-normal" for="accessEventLogs">
-                        {{ "accessEventLogs" | i18n }}
-                      </label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="accessImportExport"
-                        id="accessImportExport"
-                        formControlName="accessImportExport"
-                      />
-                      <label class="!tw-font-normal" for="accessImportExport">
-                        {{ "accessImportExport" | i18n }}
-                      </label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="accessReports"
-                        id="accessReports"
-                        formControlName="accessReports"
-                      />
-                      <label class="!tw-font-normal" for="accessReports">
-                        {{ "accessReports" | i18n }}
-                      </label>
-                    </div>
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="accessEventLogs" />
+                      <bit-label>{{ "accessEventLogs" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="accessImportExport" />
+                      <bit-label>{{ "accessImportExport" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="accessReports" />
+                      <bit-label>{{ "accessReports" | i18n }}</bit-label>
+                    </bit-form-control>
                     <app-nested-checkbox
                       parentId="manageAllCollections"
                       [checkboxes]="permissionsGroup.controls.manageAllCollectionsGroup"
                     >
                     </app-nested-checkbox>
-                    <div>
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="manageGroups" />
+                      <bit-label>{{ "manageGroups" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="manageSso" />
+                      <bit-label>{{ "manageSso" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="managePolicies" />
+                      <bit-label>{{ "managePolicies" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
                       <input
                         type="checkbox"
-                        name="manageGroups"
-                        id="manageGroups"
-                        formControlName="manageGroups"
-                      />
-                      <label class="!tw-font-normal" for="manageGroups">
-                        {{ "manageGroups" | i18n }}
-                      </label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="manageSso"
-                        id="manageSso"
-                        formControlName="manageSso"
-                      />
-                      <label class="!tw-font-normal" for="manageSso">
-                        {{ "manageSso" | i18n }}
-                      </label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="managePolicies"
-                        id="managePolicies"
-                        formControlName="managePolicies"
-                      />
-                      <label class="!tw-font-normal" for="managePolicies">
-                        {{ "managePolicies" | i18n }}
-                      </label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="manageUsers"
-                        id="manageUsers"
+                        bitCheckbox
                         formControlName="manageUsers"
                         (change)="handleDependentPermissions()"
                       />
-                      <label class="!tw-font-normal" for="manageUsers">
-                        {{ "manageUsers" | i18n }}
-                      </label>
-                    </div>
-                    <div>
+                      <bit-label>{{ "manageUsers" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
                       <input
                         type="checkbox"
-                        name="manageResetPassword"
-                        id="manageResetPassword"
+                        bitCheckbox
                         formControlName="manageResetPassword"
                         (change)="handleDependentPermissions()"
                       />
-                      <label class="!tw-font-normal" for="manageResetPassword">
-                        {{ "manageAccountRecovery" | i18n }}
-                      </label>
-                    </div>
+                      <bit-label>{{ "manageAccountRecovery" | i18n }}</bit-label>
+                    </bit-form-control>
                   </div>
                 </div>
               </div>
             </ng-container>
             <ng-template #customPermissionsFC>
-              <div class="row" [formGroup]="permissionsGroup">
-                <div class="col-4">
-                  <div>
-                    <input
-                      type="checkbox"
-                      name="accessEventLogs"
-                      id="accessEventLogs"
-                      formControlName="accessEventLogs"
-                    />
-                    <label class="!tw-font-normal" for="accessEventLogs">
-                      {{ "accessEventLogs" | i18n }}
-                    </label>
-                  </div>
-                  <div>
-                    <input
-                      type="checkbox"
-                      name="accessImportExport"
-                      id="accessImportExport"
-                      formControlName="accessImportExport"
-                    />
-                    <label class="!tw-font-normal" for="accessImportExport">
-                      {{ "accessImportExport" | i18n }}
-                    </label>
-                  </div>
-                  <div>
-                    <input
-                      type="checkbox"
-                      name="accessReports"
-                      id="accessReports"
-                      formControlName="accessReports"
-                    />
-                    <label class="!tw-font-normal" for="accessReports">
-                      {{ "accessReports" | i18n }}
-                    </label>
-                  </div>
+              <div class="tw-grid tw-grid-cols-12 tw-gap-4" [formGroup]="permissionsGroup">
+                <div class="tw-col-span-4">
+                  <bit-form-control>
+                    <input type="checkbox" bitCheckbox formControlName="accessEventLogs" />
+                    <bit-label>{{ "accessEventLogs" | i18n }}</bit-label>
+                  </bit-form-control>
+                  <bit-form-control>
+                    <input type="checkbox" bitCheckbox formControlName="accessImportExport" />
+                    <bit-label>{{ "accessImportExport" | i18n }}</bit-label>
+                  </bit-form-control>
+                  <bit-form-control>
+                    <input type="checkbox" bitCheckbox formControlName="accessReports" />
+                    <bit-label>{{ "accessReports" | i18n }}</bit-label>
+                  </bit-form-control>
                 </div>
-                <div class="col-4">
+                <div class="tw-col-span-4">
                   <app-nested-checkbox
                     parentId="manageAllCollections"
                     [checkboxes]="permissionsGroup.controls.manageAllCollectionsGroup"
                   >
                   </app-nested-checkbox>
                 </div>
-                <div class="col-4">
-                  <div class="mb-3">
-                    <div>
+                <div class="tw-col-span-4">
+                  <div class="tw-mb-3">
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="manageGroups" />
+                      <bit-label>{{ "manageGroups" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="manageSso" />
+                      <bit-label>{{ "manageSso" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
+                      <input type="checkbox" bitCheckbox formControlName="managePolicies" />
+                      <bit-label>{{ "managePolicies" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
                       <input
                         type="checkbox"
-                        name="manageGroups"
-                        id="manageGroups"
-                        formControlName="manageGroups"
-                      />
-                      <label class="!tw-font-normal" for="manageGroups">
-                        {{ "manageGroups" | i18n }}
-                      </label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="manageSso"
-                        id="manageSso"
-                        formControlName="manageSso"
-                      />
-                      <label class="!tw-font-normal" for="manageSso">
-                        {{ "manageSso" | i18n }}
-                      </label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="managePolicies"
-                        id="managePolicies"
-                        formControlName="managePolicies"
-                      />
-                      <label class="!tw-font-normal" for="managePolicies">
-                        {{ "managePolicies" | i18n }}
-                      </label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        name="manageUsers"
-                        id="manageUsers"
+                        bitCheckbox
                         formControlName="manageUsers"
                         (change)="handleDependentPermissions()"
                       />
-                      <label class="!tw-font-normal" for="manageUsers">
-                        {{ "manageUsers" | i18n }}
-                      </label>
-                    </div>
-                    <div>
+                      <bit-label>{{ "manageUsers" | i18n }}</bit-label>
+                    </bit-form-control>
+                    <bit-form-control>
                       <input
                         type="checkbox"
-                        name="manageResetPassword"
-                        id="manageResetPassword"
+                        bitCheckbox
                         formControlName="manageResetPassword"
                         (change)="handleDependentPermissions()"
                       />
-                      <label class="!tw-font-normal" for="manageResetPassword">
-                        {{ "manageAccountRecovery" | i18n }}
-                      </label>
-                    </div>
+                      <bit-label>{{ "manageAccountRecovery" | i18n }}</bit-label>
+                    </bit-form-control>
                   </div>
                 </div>
               </div>
             </ng-template>
           </ng-container>
           <ng-container *ngIf="organization.useSecretsManager">
-            <h3 class="mt-4">
+            <h3 class="tw-mt-4">
               {{ "secretsManager" | i18n }}
               <a
+                bitLink
                 target="_blank"
                 rel="noreferrer"
                 appA11yTitle="{{ 'learnMore' | i18n }}"
@@ -436,6 +290,7 @@
               <bit-label>
                 {{ "accessAllCollectionsDesc" | i18n }}
                 <a
+                  bitLink
                   target="_blank"
                   rel="noreferrer"
                   appA11yTitle="{{ 'learnMore' | i18n }}"