1
0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-02 18:17:46 +01:00

PM-2172 Update User Add Edit Dialog (#8747)

* PM-2172 Update User Add Edit Dialog

* PM-2172 Addressed review comments
This commit is contained in:
KiruthigaManivannan 2024-05-21 18:42:41 +05:30 committed by GitHub
parent 7384a5051e
commit 62fee4fb90
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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