fix(ui): replace native confirm()/alert() with shared dialogs and toasts
New app-confirm-dialog (wraps existing app-dialog + app-button) replaces every native confirm() across media library bulk-delete, static pages editor (delete/bulk-delete), builder save-bar (publish/reset-draft), project-editor-page (reset-section), homepage/languages/widgets sections (remove block/language/widget), and cart (clear-cart). Cart's native alert() calls (delivery/terms validation, email send success/failure) now route through the existing UserNotificationService toast pipeline instead. No native confirm()/alert()/prompt() remain in production UI.
This commit is contained in:
@@ -0,0 +1,11 @@
|
||||
<app-dialog [open]="open()" [titleText]="titleText()" size="sm" (closed)="cancelled.emit()">
|
||||
<p class="app-confirm-dialog__message">{{ message() }}</p>
|
||||
<div class="app-confirm-dialog__actions">
|
||||
<app-button variant="secondary" (click)="cancelled.emit()">
|
||||
{{ cancelLabel() ?? ('common.cancel' | translate) }}
|
||||
</app-button>
|
||||
<app-button [variant]="destructive() ? 'danger' : 'primary'" (click)="confirmed.emit()">
|
||||
{{ confirmLabel() ?? ('common.confirm' | translate) }}
|
||||
</app-button>
|
||||
</div>
|
||||
</app-dialog>
|
||||
@@ -0,0 +1,10 @@
|
||||
.app-confirm-dialog__message {
|
||||
margin: 0 0 var(--space-lg, 1.5rem);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.app-confirm-dialog__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
}
|
||||
24
src/app/shared/ui/confirm-dialog/confirm-dialog.component.ts
Normal file
24
src/app/shared/ui/confirm-dialog/confirm-dialog.component.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
|
||||
import { DialogComponent } from '../dialog/dialog.component';
|
||||
import { ButtonComponent } from '../button/button.component';
|
||||
import { TranslatePipe } from '../../../i18n/translate.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirm-dialog',
|
||||
standalone: true,
|
||||
imports: [DialogComponent, ButtonComponent, TranslatePipe],
|
||||
templateUrl: './confirm-dialog.component.html',
|
||||
styleUrl: './confirm-dialog.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ConfirmDialogComponent {
|
||||
readonly open = input(false);
|
||||
readonly titleText = input<string | null>(null);
|
||||
readonly message = input<string>('');
|
||||
readonly confirmLabel = input<string | null>(null);
|
||||
readonly cancelLabel = input<string | null>(null);
|
||||
readonly destructive = input(false);
|
||||
|
||||
readonly confirmed = output<void>();
|
||||
readonly cancelled = output<void>();
|
||||
}
|
||||
Reference in New Issue
Block a user