mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-22 11:45:59 +01:00
PM -2050 Update Bulk Confirm Dialog (#8723)
* PM-2050 Update Bulk Confirm Dialog * PM-2050 Added css classes * PM-2050 Addressed comments
This commit is contained in:
KiruthigaManivannan
GitHub
parent
f6d28bed70
commit
c05a2a0d07
@ -1,115 +1,99 @@
|
|||||||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
|
<bit-dialog dialogSize="large" [title]="'confirmUsers' | i18n" [loading]="loading">
|
||||||
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
|
<ng-container bitDialogContent>
|
||||||
<div class="modal-content">
|
<app-callout type="danger" *ngIf="filteredUsers.length <= 0">
|
||||||
<div class="modal-header">
|
{{ "noSelectedUsersApplicable" | i18n }}
|
||||||
<h1 class="modal-title" id="bulkTitle">
|
</app-callout>
|
||||||
{{ "confirmUsers" | i18n }}
|
<app-callout type="error" *ngIf="error">
|
||||||
</h1>
|
{{ error }}
|
||||||
<button
|
</app-callout>
|
||||||
type="button"
|
<ng-container *ngIf="!loading && !done">
|
||||||
class="close"
|
<p bitTypography="body1">
|
||||||
data-dismiss="modal"
|
{{ "fingerprintEnsureIntegrityVerify" | i18n }}
|
||||||
appA11yTitle="{{ 'close' | i18n }}"
|
<a
|
||||||
|
bitLink
|
||||||
|
href="https://bitwarden.com/help/fingerprint-phrase/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
>
|
>
|
||||||
<span aria-hidden="true">×</span>
|
{{ "learnMore" | i18n }}</a
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="card-body text-center" *ngIf="loading">
|
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
|
||||||
{{ "loading" | i18n }}
|
|
||||||
</div>
|
|
||||||
<app-callout type="danger" *ngIf="filteredUsers.length <= 0">
|
|
||||||
{{ "noSelectedUsersApplicable" | i18n }}
|
|
||||||
</app-callout>
|
|
||||||
<app-callout type="error" *ngIf="error">
|
|
||||||
{{ error }}
|
|
||||||
</app-callout>
|
|
||||||
<ng-container *ngIf="!loading && !done">
|
|
||||||
<p>
|
|
||||||
{{ "fingerprintEnsureIntegrityVerify" | i18n }}
|
|
||||||
<a
|
|
||||||
href="https://bitwarden.com/help/fingerprint-phrase/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
{{ "learnMore" | i18n }}</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
<table class="table table-hover table-list">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2">{{ "user" | i18n }}</th>
|
|
||||||
<th>{{ "fingerprint" | i18n }}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tr *ngFor="let user of filteredUsers">
|
|
||||||
<td width="30">
|
|
||||||
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{ user.email }}
|
|
||||||
<small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{ fingerprints.get(user.id) }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr *ngFor="let user of excludedUsers">
|
|
||||||
<td width="30">
|
|
||||||
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{ user.email }}
|
|
||||||
<small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{ "bulkFilteredMessage" | i18n }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</ng-container>
|
|
||||||
<ng-container *ngIf="!loading && done">
|
|
||||||
<table class="table table-hover table-list">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2">{{ "user" | i18n }}</th>
|
|
||||||
<th>{{ "status" | i18n }}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tr *ngFor="let user of filteredUsers">
|
|
||||||
<td width="30">
|
|
||||||
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{ user.email }}
|
|
||||||
<small class="text-muted d-block" *ngIf="user.name">{{ user.name }}</small>
|
|
||||||
</td>
|
|
||||||
<td *ngIf="statuses.has(user.id)">
|
|
||||||
{{ statuses.get(user.id) }}
|
|
||||||
</td>
|
|
||||||
<td *ngIf="!statuses.has(user.id)">
|
|
||||||
{{ "bulkFilteredMessage" | i18n }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-primary btn-submit"
|
|
||||||
*ngIf="!done"
|
|
||||||
[disabled]="loading"
|
|
||||||
(click)="submit()"
|
|
||||||
>
|
>
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
</p>
|
||||||
<span>{{ "confirm" | i18n }}</span>
|
<bit-table>
|
||||||
</button>
|
<ng-container header>
|
||||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
|
<tr>
|
||||||
{{ "close" | i18n }}
|
<th bitCell colspan="2">{{ "user" | i18n }}</th>
|
||||||
</button>
|
<th bitCell>{{ "fingerprint" | i18n }}</th>
|
||||||
</div>
|
</tr>
|
||||||
</div>
|
</ng-container>
|
||||||
</div>
|
<ng-template body>
|
||||||
</div>
|
<tr bitRow *ngFor="let user of filteredUsers" alignContent="middle">
|
||||||
|
<td bitCell class="tw-w-5">
|
||||||
|
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
|
||||||
|
</td>
|
||||||
|
<td bitCell>
|
||||||
|
{{ user.email }}
|
||||||
|
<p class="tw-text-muted tw-text-sm" *ngIf="user.name">{{ user.name }}</p>
|
||||||
|
</td>
|
||||||
|
<td bitCell>
|
||||||
|
{{ fingerprints.get(user.id) }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr *ngFor="let user of excludedUsers" alignContent="middle">
|
||||||
|
<td bitCell class="tw-w-5">
|
||||||
|
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
|
||||||
|
</td>
|
||||||
|
<td bitCell>
|
||||||
|
{{ user.email }}
|
||||||
|
<p class="tw-text-muted tw-text-sm" *ngIf="user.name">{{ user.name }}</p>
|
||||||
|
</td>
|
||||||
|
<td bitCell>
|
||||||
|
{{ "bulkFilteredMessage" | i18n }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</ng-template>
|
||||||
|
</bit-table>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="!loading && done">
|
||||||
|
<bit-table>
|
||||||
|
<ng-container header>
|
||||||
|
<tr>
|
||||||
|
<th bitCell colspan="2">{{ "user" | i18n }}</th>
|
||||||
|
<th bitCell>{{ "status" | i18n }}</th>
|
||||||
|
</tr>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template body>
|
||||||
|
<tr bitRow *ngFor="let user of filteredUsers" alignContent="middle">
|
||||||
|
<td bitCell class="tw-w-5">
|
||||||
|
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
|
||||||
|
</td>
|
||||||
|
<td bitCell>
|
||||||
|
{{ user.email }}
|
||||||
|
<p class="tw-text-muted tw-text-sm" *ngIf="user.name">{{ user.name }}</p>
|
||||||
|
</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>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container bitDialogFooter>
|
||||||
|
<button
|
||||||
|
*ngIf="!done"
|
||||||
|
bitButton
|
||||||
|
type="submit"
|
||||||
|
buttonType="primary"
|
||||||
|
(click)="submit()"
|
||||||
|
[disabled]="loading"
|
||||||
|
>
|
||||||
|
{{ "confirm" | i18n }}
|
||||||
|
</button>
|
||||||
|
<button bitButton type="button" buttonType="secondary" bitDialogClose>
|
||||||
|
{{ "close" | i18n }}
|
||||||
|
</button>
|
||||||
|
</ng-container>
|
||||||
|
</bit-dialog>
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import { Component, Input, OnInit } from "@angular/core";
|
import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
|
||||||
|
import { Component, Inject, OnInit } from "@angular/core";
|
||||||
|
|
||||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||||
import { OrganizationUserService } from "@bitwarden/common/admin-console/abstractions/organization-user/organization-user.service";
|
import { OrganizationUserService } from "@bitwarden/common/admin-console/abstractions/organization-user/organization-user.service";
|
||||||
@ -8,16 +9,22 @@ import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.se
|
|||||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||||
import { Utils } from "@bitwarden/common/platform/misc/utils";
|
import { Utils } from "@bitwarden/common/platform/misc/utils";
|
||||||
import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
|
import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
|
||||||
|
import { DialogService } from "@bitwarden/components";
|
||||||
|
|
||||||
import { BulkUserDetails } from "./bulk-status.component";
|
import { BulkUserDetails } from "./bulk-status.component";
|
||||||
|
|
||||||
|
type BulkConfirmDialogData = {
|
||||||
|
organizationId: string;
|
||||||
|
users: BulkUserDetails[];
|
||||||
|
};
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-bulk-confirm",
|
selector: "app-bulk-confirm",
|
||||||
templateUrl: "bulk-confirm.component.html",
|
templateUrl: "bulk-confirm.component.html",
|
||||||
})
|
})
|
||||||
export class BulkConfirmComponent implements OnInit {
|
export class BulkConfirmComponent implements OnInit {
|
||||||
@Input() organizationId: string;
|
organizationId: string;
|
||||||
@Input() users: BulkUserDetails[];
|
users: BulkUserDetails[];
|
||||||
|
|
||||||
excludedUsers: BulkUserDetails[];
|
excludedUsers: BulkUserDetails[];
|
||||||
filteredUsers: BulkUserDetails[];
|
filteredUsers: BulkUserDetails[];
|
||||||
@ -30,11 +37,15 @@ export class BulkConfirmComponent implements OnInit {
|
|||||||
error: string;
|
error: string;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
@Inject(DIALOG_DATA) protected data: BulkConfirmDialogData,
|
||||||
protected cryptoService: CryptoService,
|
protected cryptoService: CryptoService,
|
||||||
protected apiService: ApiService,
|
protected apiService: ApiService,
|
||||||
private organizationUserService: OrganizationUserService,
|
private organizationUserService: OrganizationUserService,
|
||||||
private i18nService: I18nService,
|
private i18nService: I18nService,
|
||||||
) {}
|
) {
|
||||||
|
this.organizationId = data.organizationId;
|
||||||
|
this.users = data.users;
|
||||||
|
}
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
this.excludedUsers = this.users.filter((u) => !this.isAccepted(u));
|
this.excludedUsers = this.users.filter((u) => !this.isAccepted(u));
|
||||||
@ -110,4 +121,8 @@ export class BulkConfirmComponent implements OnInit {
|
|||||||
request,
|
request,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static open(dialogService: DialogService, config: DialogConfig<BulkConfirmDialogData>) {
|
||||||
|
return dialogService.open(BulkConfirmComponent, config);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -558,16 +558,14 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserView> {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const [modal] = await this.modalService.openViewRef(
|
const dialogRef = BulkConfirmComponent.open(this.dialogService, {
|
||||||
BulkConfirmComponent,
|
data: {
|
||||||
this.bulkConfirmModalRef,
|
organizationId: this.organization.id,
|
||||||
(comp) => {
|
users: this.getCheckedUsers(),
|
||||||
comp.organizationId = this.organization.id;
|
|
||||||
comp.users = this.getCheckedUsers();
|
|
||||||
},
|
},
|
||||||
);
|
});
|
||||||
|
|
||||||
await modal.onClosedPromise();
|
await lastValueFrom(dialogRef.closed);
|
||||||
await this.load();
|
await this.load();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user