PM-2153 Update User Confirm Dialog (#8694)
* PM-2153 Update User Confirm Dialog * PM-2153 Called confirm user method before dialog close
This commit is contained in:
KiruthigaManivannan
GitHub
parent
d0c5312c34
commit
ae74defc8c
|
|
@ -1,5 +1,13 @@
|
|||
import { Directive, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
|
||||
import { BehaviorSubject, Subject, firstValueFrom, from, switchMap, takeUntil } from "rxjs";
|
||||
import {
|
||||
BehaviorSubject,
|
||||
Subject,
|
||||
firstValueFrom,
|
||||
from,
|
||||
lastValueFrom,
|
||||
switchMap,
|
||||
takeUntil,
|
||||
} from "rxjs";
|
||||
|
||||
import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
|
||||
import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
|
||||
|
|
@ -385,25 +393,16 @@ export abstract class BasePeopleComponent<
|
|||
this.organizationManagementPreferencesService.autoConfirmFingerPrints.state$,
|
||||
);
|
||||
if (autoConfirm == null || !autoConfirm) {
|
||||
const [modal] = await this.modalService.openViewRef(
|
||||
UserConfirmComponent,
|
||||
this.confirmModalRef,
|
||||
(comp) => {
|
||||
comp.name = this.userNamePipe.transform(user);
|
||||
comp.userId = user != null ? user.userId : null;
|
||||
comp.publicKey = publicKey;
|
||||
// eslint-disable-next-line rxjs/no-async-subscribe
|
||||
comp.onConfirmedUser.subscribe(async () => {
|
||||
try {
|
||||
comp.formPromise = confirmUser(publicKey);
|
||||
await comp.formPromise;
|
||||
modal.close();
|
||||
} catch (e) {
|
||||
this.logService.error(e);
|
||||
}
|
||||
});
|
||||
const dialogRef = UserConfirmComponent.open(this.dialogService, {
|
||||
data: {
|
||||
name: this.userNamePipe.transform(user),
|
||||
userId: user != null ? user.userId : null,
|
||||
publicKey: publicKey,
|
||||
confirmUser: () => confirmUser(publicKey),
|
||||
},
|
||||
);
|
||||
});
|
||||
await lastValueFrom(dialogRef.closed);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +1,36 @@
|
|||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title" id="confirmUserTitle">
|
||||
{{ "confirmUser" | i18n }}
|
||||
<small class="text-muted" *ngIf="name">{{ name }}</small>
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
appA11yTitle="{{ 'close' | i18n }}"
|
||||
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
||||
<bit-dialog dialogSize="default">
|
||||
<span bitDialogTitle>
|
||||
{{ "confirmUser" | i18n }}
|
||||
<span class="tw-text-muted" bitTypography="body1">{{ name }}</span>
|
||||
</span>
|
||||
<ng-container bitDialogContent>
|
||||
<p bitTypography="body1">
|
||||
{{ "fingerprintEnsureIntegrityVerify" | i18n }}
|
||||
<a
|
||||
bitLink
|
||||
href="https://bitwarden.com/help/fingerprint-phrase/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{ "fingerprintEnsureIntegrityVerify" | i18n }}
|
||||
<a href="https://bitwarden.com/help/fingerprint-phrase/" target="_blank" rel="noreferrer">
|
||||
{{ "learnMore" | i18n }}</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<code>{{ fingerprint }}</code>
|
||||
</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="dontAskAgain"
|
||||
name="DontAskAgain"
|
||||
[(ngModel)]="dontAskAgain"
|
||||
/>
|
||||
<label class="form-check-label" for="dontAskAgain">
|
||||
{{ "dontAskFingerprintAgain" | i18n }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "confirm" | i18n }}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ "learnMore" | i18n }}</a
|
||||
>
|
||||
</p>
|
||||
<p bitTypography="body1">
|
||||
<code>{{ fingerprint }}</code>
|
||||
</p>
|
||||
<bit-form-control>
|
||||
<input type="checkbox" bitCheckbox formControlName="dontAskAgain" />
|
||||
<bit-label>{{ "dontAskFingerprintAgain" | i18n }}</bit-label>
|
||||
</bit-form-control>
|
||||
</ng-container>
|
||||
<ng-container bitDialogFooter>
|
||||
<button bitButton bitFormButton type="submit" buttonType="primary">
|
||||
{{ "confirm" | i18n }}
|
||||
</button>
|
||||
<button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</bit-dialog>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,47 @@
|
|||
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
|
||||
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
|
||||
import { Component, Inject, OnInit } from "@angular/core";
|
||||
import { FormControl, FormGroup } from "@angular/forms";
|
||||
|
||||
import { OrganizationManagementPreferencesService } from "@bitwarden/common/admin-console/abstractions/organization-management-preferences/organization-management-preferences.service";
|
||||
import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
|
||||
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
|
||||
import { DialogService } from "@bitwarden/components";
|
||||
|
||||
export type UserConfirmDialogData = {
|
||||
name: string;
|
||||
userId: string;
|
||||
publicKey: Uint8Array;
|
||||
confirmUser: (publicKey: Uint8Array) => Promise<void>;
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: "app-user-confirm",
|
||||
templateUrl: "user-confirm.component.html",
|
||||
})
|
||||
export class UserConfirmComponent implements OnInit {
|
||||
@Input() name: string;
|
||||
@Input() userId: string;
|
||||
@Input() publicKey: Uint8Array;
|
||||
@Output() onConfirmedUser = new EventEmitter();
|
||||
name: string;
|
||||
userId: string;
|
||||
publicKey: Uint8Array;
|
||||
|
||||
dontAskAgain = false;
|
||||
loading = true;
|
||||
fingerprint: string;
|
||||
formPromise: Promise<any>;
|
||||
|
||||
formGroup = new FormGroup({
|
||||
dontAskAgain: new FormControl(false),
|
||||
});
|
||||
|
||||
constructor(
|
||||
@Inject(DIALOG_DATA) protected data: UserConfirmDialogData,
|
||||
private dialogRef: DialogRef,
|
||||
private cryptoService: CryptoService,
|
||||
private logService: LogService,
|
||||
private organizationManagementPreferencesService: OrganizationManagementPreferencesService,
|
||||
) {}
|
||||
) {
|
||||
this.name = data.name;
|
||||
this.userId = data.userId;
|
||||
this.publicKey = data.publicKey;
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
try {
|
||||
|
|
@ -39,15 +57,21 @@ export class UserConfirmComponent implements OnInit {
|
|||
this.loading = false;
|
||||
}
|
||||
|
||||
async submit() {
|
||||
submit = async () => {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.dontAskAgain) {
|
||||
if (this.formGroup.value.dontAskAgain) {
|
||||
await this.organizationManagementPreferencesService.autoConfirmFingerPrints.set(true);
|
||||
}
|
||||
|
||||
this.onConfirmedUser.emit();
|
||||
await this.data.confirmUser(this.publicKey);
|
||||
|
||||
this.dialogRef.close();
|
||||
};
|
||||
|
||||
static open(dialogService: DialogService, config: DialogConfig<UserConfirmDialogData>) {
|
||||
return dialogService.open(UserConfirmComponent, config);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue