vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PM-2052] Migrate bulk restore component (#6604)

This commit is contained in:
Oscar Hinton 2023-10-23 17:22:07 +02:00 committed by GitHub
parent 95d4d281cb
commit c2e03d2cdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 109 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,50 +1,42 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle"> <bit-dialog>
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document"> <ng-container bitDialogTitle>
<div class="modal-content"> <h1>{{ bulkTitle }}</h1>
<div class="modal-header"> </ng-container>
<h1 class="modal-title" id="bulkTitle"> <div bitDialogContent>
{{ bulkTitle }} <bit-callout type="danger" *ngIf="users.length <= 0">
</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<app-callout type="danger" *ngIf="users.length <= 0">
{{ "noSelectedUsersApplicable" | i18n }} {{ "noSelectedUsersApplicable" | i18n }}
</app-callout> </bit-callout>
<app-callout type="error" *ngIf="error">
<bit-callout type="danger" *ngIf="error">
{{ error }} {{ error }}
</app-callout> </bit-callout>
<ng-container *ngIf="!done"> <ng-container *ngIf="!done">
<app-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>
<p *ngIf="this.showNoMasterPasswordWarning"> <p *ngIf="this.showNoMasterPasswordWarning">
{{ "removeMembersWithoutMasterPasswordWarning" | i18n }} {{ "removeMembersWithoutMasterPasswordWarning" | i18n }}
</p> </p>
</app-callout> </bit-callout>
<table class="table table-hover table-list">
<thead> <bit-table>
<ng-container header>
<tr> <tr>
<th colspan="2">{{ "user" | i18n }}</th> <th bitCell colspan="2">{{ "user" | i18n }}</th>
<th *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th> <th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
</tr> </tr>
</thead> </ng-container>
<tr *ngFor="let user of users"> <ng-template body>
<td width="30"> <tr bitRow *ngFor="let user of users">
<td bitCell width="30">
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar> <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td> </td>
<td> <td bitCell>
{{ user.email }} {{ user.email }}
<small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small> <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
</td> </td>
<td *ngIf="this.showNoMasterPasswordWarning"> <td bitCell *ngIf="this.showNoMasterPasswordWarning">
<span class="text-muted d-block tw-lowercase"> <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">
<i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i> <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
@ -53,49 +45,44 @@
</span> </span>
</td> </td>
</tr> </tr>
</table> </ng-template>
</bit-table>
</ng-container> </ng-container>
<ng-container *ngIf="done"> <ng-container *ngIf="done">
<table class="table table-hover table-list"> <bit-table>
<thead> <ng-container header>
<tr> <tr>
<th colspan="2">{{ "user" | i18n }}</th> <th bitCell colspan="2">{{ "user" | i18n }}</th>
<th>{{ "status" | i18n }}</th> <th>{{ "status" | i18n }}</th>
</tr> </tr>
</thead> </ng-container>
<tr *ngFor="let user of users"> <ng-template body>
<td width="30"> <tr bitRow *ngFor="let user of users">
<td bitCell width="30">
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar> <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td> </td>
<td> <td bitCell>
{{ user.email }} {{ user.email }}
<small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small> <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
</td> </td>
<td *ngIf="statuses.has(user.id)"> <td bitCell *ngIf="statuses.has(user.id)">
{{ statuses.get(user.id) }} {{ statuses.get(user.id) }}
</td> </td>
<td *ngIf="!statuses.has(user.id)"> <td bitCell *ngIf="!statuses.has(user.id)">
{{ "bulkFilteredMessage" | i18n }} {{ "bulkFilteredMessage" | i18n }}
</td> </td>
</tr> </tr>
</table> </ng-template>
</bit-table>
</ng-container> </ng-container>
</div> </div>
<div class="modal-footer"> <ng-container bitDialogFooter>
<button <button type="button" bitButton *ngIf="!done && users.length > 0" [bitAction]="submit">
type="submit" {{ bulkTitle }}
class="btn btn-primary btn-submit"
*ngIf="!done && users.length > 0"
[disabled]="loading"
(click)="submit()"
>
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ bulkTitle }}</span>
</button> </button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> <button type="button" bitButton buttonType="secondary" bitDialogClose>
{{ "close" | i18n }} {{ "close" | i18n }}
</button> </button>
</div> </ng-container>
</div> </bit-dialog>
</div>
</div>

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

@ -1,11 +1,18 @@
import { Component } from "@angular/core"; import { DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { ModalConfig } from "@bitwarden/angular/services/modal.service";
import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service"; import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { DialogService } from "@bitwarden/components";
import { BulkUserDetails } from "./bulk-status.component"; import { BulkUserDetails } from "./bulk-status.component";
type BulkRestoreDialogParams = {
organizationId: string;
users: BulkUserDetails[];
isRevoking: boolean;
};
@Component({ @Component({
selector: "app-bulk-restore-revoke", selector: "app-bulk-restore-revoke",
templateUrl: "bulk-restore-revoke.component.html", templateUrl: "bulk-restore-revoke.component.html",
@ -25,11 +32,11 @@ export class BulkRestoreRevokeComponent {
constructor( constructor(
protected i18nService: I18nService, protected i18nService: I18nService,
private organizationUserService: OrganizationUserService, private organizationUserService: OrganizationUserService,
config: ModalConfig @Inject(DIALOG_DATA) protected data: BulkRestoreDialogParams
) { ) {
this.isRevoking = config.data.isRevoking; this.isRevoking = data.isRevoking;
this.organizationId = config.data.organizationId; this.organizationId = data.organizationId;
this.users = config.data.users; this.users = data.users;
this.showNoMasterPasswordWarning = this.users.some((u) => u.hasMasterPassword === false); this.showNoMasterPasswordWarning = this.users.some((u) => u.hasMasterPassword === false);
} }
@ -38,8 +45,7 @@ export class BulkRestoreRevokeComponent {
return this.i18nService.t(titleKey); return this.i18nService.t(titleKey);
} }
async submit() { submit = async () => {
this.loading = true;
try { try {
const response = await this.performBulkUserAction(); const response = await this.performBulkUserAction();
@ -52,9 +58,7 @@ export class BulkRestoreRevokeComponent {
} catch (e) { } catch (e) {
this.error = e.message; this.error = e.message;
} }
};
this.loading = false;
}
protected async performBulkUserAction() { protected async performBulkUserAction() {
const userIds = this.users.map((user) => user.id); const userIds = this.users.map((user) => user.id);
@ -70,4 +74,8 @@ export class BulkRestoreRevokeComponent {
); );
} }
} }
static open(dialogService: DialogService, data: BulkRestoreDialogParams) {
return dialogService.open(BulkRestoreRevokeComponent, { data });
}
} }

7
apps/web/src/app/admin-console/organizations/members/people.component.ts
View File

@ -449,16 +449,13 @@ export class PeopleComponent
return; return;
} }
const ref = this.modalService.open(BulkRestoreRevokeComponent, { const ref = BulkRestoreRevokeComponent.open(this.dialogService, {
allowMultipleModals: true,
data: {
organizationId: this.organization.id, organizationId: this.organization.id,
users: this.getCheckedUsers(), users: this.getCheckedUsers(),
isRevoking: isRevoking, isRevoking: isRevoking,
},
}); });
await ref.onClosedPromise(); await firstValueFrom(ref.closed);
await this.load(); await this.load();
} }