Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-02-12 00:41:29 +01:00
Code Issues Projects Releases Wiki Activity

[PM-13761] Refactor revoke/restore modal layout, truncate email addresses (#12728)

Browse Source 
* Refactor revoke/restore modal layout, truncate email addresses

* refactor: Improve user display in bulk restore/revoke component

* refactor: Simplify user display logic in bulk restore/revoke component
This commit is contained in:
Rui Tomé 2025-02-06 10:04:21 +00:00 committed by GitHub
parent 1133775def
commit 3c05a8b11f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html
View File

@ -26,61 +26,47 @@
{{ "nonCompliantMembersError" | i18n }} {{ "nonCompliantMembersError" | i18n }}
</bit-callout> </bit-callout>
<ng-template #userDisplay let-user>
<div class="tw-flex tw-items-center">
<div class="tw-mr-6">
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</div>
<ng-container *ngIf="user.name; else emailOnly">
<div class="tw-truncate" [title]="user.name + ' ' + user.email">
{{ user.name }}
<small class="tw-block tw-text-muted tw-truncate">
{{ user.email }}
</small>
</div>
</ng-container>
<ng-template #emailOnly>
<div class="tw-truncate" [title]="user.email">{{ user.email }}</div>
</ng-template>
</div>
</ng-template>
<ng-container *ngIf="!done"> <ng-container *ngIf="!done">
<bit-callout type="warning" *ngIf="users.length > 0 && !error && isRevoking"> <bit-callout type="warning" *ngIf="users.length > 0 && !error && isRevoking">
<p>{{ "revokeUsersWarning" | i18n }}</p> <p>{{ "revokeUsersWarning" | i18n }}</p>
</bit-callout> </bit-callout>
<bit-table *ngIf="accountDeprovisioning.enabled"> <bit-table>
<ng-container header> <ng-container header>
<tr> <tr>
<th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th> <th bitCell>{{ (accountDeprovisioning.enabled ? "member" : "user") | i18n }}</th>
<th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th> <th bitCell class="tw-w-1/2" *ngIf="this.showNoMasterPasswordWarning">
{{ "details" | i18n }}
</th>
</tr> </tr>
</ng-container> </ng-container>
<ng-template body> <ng-template body>
<tr bitRow *ngFor="let user of users"> <tr bitRow *ngFor="let user of users">
<td bitCell width="30"> <td bitCell class="tw-max-w-0">
<div class="tw-flex tw-items-center"> <ng-container
<div class="tw-flex tw-items-center tw-mr-6"> *ngTemplateOutlet="userDisplay; context: { $implicit: user }"
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar> ></ng-container>
</div>
<div>
{{ user.email }}
<small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
</div>
</div>
</td> </td>
<td bitCell *ngIf="this.showNoMasterPasswordWarning"> <td bitCell class="tw-w-1/2" *ngIf="this.showNoMasterPasswordWarning">
<span class="tw-block tw-lowercase tw-text-muted">
<ng-container *ngIf="user.hasMasterPassword === true"> - </ng-container>
<ng-container *ngIf="user.hasMasterPassword === false">
<i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
{{ "noMasterPassword" | i18n }}
</ng-container>
</span>
</td>
</tr>
</ng-template>
</bit-table>
<bit-table *ngIf="!accountDeprovisioning.enabled">
<ng-container header>
<tr>
<th bitCell colspan="2">{{ "user" | i18n }}</th>
<th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
</tr>
</ng-container>
<ng-template body>
<tr bitRow *ngFor="let user of users">
<td bitCell width="30">
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td bitCell>
{{ user.email }}
<small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
</td>
<td bitCell *ngIf="this.showNoMasterPasswordWarning">
<span class="tw-block tw-lowercase tw-text-muted"> <span class="tw-block tw-lowercase tw-text-muted">
<ng-container *ngIf="user.hasMasterPassword === true"> - </ng-container> <ng-container *ngIf="user.hasMasterPassword === true"> - </ng-container>
<ng-container *ngIf="user.hasMasterPassword === false"> <ng-container *ngIf="user.hasMasterPassword === false">
@ -95,55 +81,21 @@
</ng-container> </ng-container>
<ng-container *ngIf="done"> <ng-container *ngIf="done">
<bit-table *ngIf="accountDeprovisioning.enabled"> <bit-table>
<ng-container header> <ng-container header>
<tr> <tr>
<th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th> <th bitCell class="tw-w-1/2">
<th bitCell>{{ "status" | i18n }}</th> {{ (accountDeprovisioning.enabled ? "member" : "user") | i18n }}
</th>
<th bitCell class="tw-w-1/2">{{ "status" | i18n }}</th>
</tr> </tr>
</ng-container> </ng-container>
<ng-template body> <ng-template body>
<tr bitRow *ngFor="let user of users"> <tr bitRow *ngFor="let user of users">
<td bitCell width="30"> <td bitCell class="tw-max-w-0">
<div class="tw-flex tw-items-center"> <ng-container
<div class="tw-flex tw-items-center tw-mr-6"> *ngTemplateOutlet="userDisplay; context: { $implicit: user }"
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar> ></ng-container>
</div>
<div>
{{ user.email }}
<small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
</div>
</div>
</td>
<td bitCell *ngIf="statuses.has(user.id)">
{{ statuses.get(user.id) }}
</td>
<td bitCell *ngIf="!statuses.has(user.id)">
{{ "bulkFilteredMessage" | i18n }}
</td>
</tr>
</ng-template>
</bit-table>
<bit-table *ngIf="!accountDeprovisioning.enabled">
<ng-container header>
<tr>
<th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
<th bitCell>{{ "status" | i18n }}</th>
</tr>
</ng-container>
<ng-template body>
<tr bitRow *ngFor="let user of users">
<td bitCell width="30">
<div class="tw-flex tw-items-center">
<div class="tw-flex tw-items-center tw-mr-6">
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</div>
<div>
{{ user.email }}
<small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
</div>
</div>
</td> </td>
<td bitCell *ngIf="statuses.has(user.id)"> <td bitCell *ngIf="statuses.has(user.id)">
{{ statuses.get(user.id) }} {{ statuses.get(user.id) }}