Merge pull request #119 from CenterForOpenScience/bugs/other-pages

fix(confirmation): updated confirmation dialog

Author: nsemets

src/app/features/moderation/components/collection-moderators/collection-moderators.component.ts

@@ -2,7 +2,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
-import { ConfirmationService } from 'primeng/api';
 import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 
@@ -13,8 +12,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
 
 import { EducationHistoryComponent, EmploymentHistoryComponent, SearchInputComponent } from '@osf/shared/components';
-import { LoaderService, ToastService } from '@osf/shared/services';
-import { defaultConfirmationConfig } from '@osf/shared/utils';
+import { CustomConfirmationService, LoaderService, ToastService } from '@osf/shared/services';
 
 import { AddModeratorType } from '../../enums';
 import { ModeratorDialogAddModel, ModeratorModel } from '../../models';
@@ -43,7 +41,7 @@ export class CollectionModeratorsComponent implements OnInit {
 
   private readonly destroyRef = inject(DestroyRef);
   private readonly translateService = inject(TranslateService);
-  private readonly confirmationService = inject(ConfirmationService);
+  private readonly customConfirmationService = inject(CustomConfirmationService);
   private readonly dialogService = inject(DialogService);
   private readonly toastService = inject(ToastService);
   private readonly loaderService = inject(LoaderService);
@@ -141,18 +139,12 @@ export class CollectionModeratorsComponent implements OnInit {
   }
 
   removeModerator(moderator: ModeratorModel) {
-    this.confirmationService.confirm({
-      ...defaultConfirmationConfig,
-      header: this.translateService.instant('moderation.removeDialog.title'),
-      message: this.translateService.instant('moderation.removeDialog.message', {
-        name: moderator.fullName,
-      }),
-      acceptButtonProps: {
-        ...defaultConfirmationConfig.acceptButtonProps,
-        severity: 'danger',
-        label: this.translateService.instant('common.buttons.remove'),
-      },
-      accept: () => {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'moderation.removeDialog.title',
+      messageParams: { name: moderator.fullName },
+      messageKey: 'moderation.removeDialog.message',
+      acceptLabelKey: 'common.buttons.remove',
+      onConfirm: () => {
         this.toastService.showSuccess('moderation.toastMessages.deleteSuccessMessage', { name: moderator.fullName });
       },
     });

src/app/features/project/contributors/contributors.component.ts

@@ -2,7 +2,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
-import { ConfirmationService } from 'primeng/api';
 import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Select } from 'primeng/select';
@@ -22,8 +21,8 @@ import {
   ViewOnlyTableComponent,
 } from '@osf/shared/components';
 import { SelectOption } from '@osf/shared/models';
-import { ToastService } from '@osf/shared/services';
-import { defaultConfirmationConfig, findChangedItems } from '@osf/shared/utils';
+import { CustomConfirmationService, ToastService } from '@osf/shared/services';
+import { findChangedItems } from '@osf/shared/utils';
 
 import { ViewOnlyLink, ViewOnlyLinkModel } from '../settings/models';
 import {
@@ -76,9 +75,9 @@ export class ContributorsComponent implements OnInit {
 
   readonly destroyRef = inject(DestroyRef);
   readonly translateService = inject(TranslateService);
-  readonly confirmationService = inject(ConfirmationService);
   readonly dialogService = inject(DialogService);
   readonly toastService = inject(ToastService);
+  readonly customConfirmationService = inject(CustomConfirmationService);
 
   private readonly route = inject(ActivatedRoute);
   private readonly projectId = toSignal(this.route.parent?.params.pipe(map((params) => params['id'])) ?? of(undefined));
@@ -251,18 +250,12 @@ export class ContributorsComponent implements OnInit {
   }
 
   removeContributor(contributor: ContributorModel) {
-    this.confirmationService.confirm({
-      ...defaultConfirmationConfig,
-      header: this.translateService.instant('project.contributors.removeDialog.title'),
-      message: this.translateService.instant('project.contributors.removeDialog.message', {
-        name: contributor.fullName,
-      }),
-      acceptButtonProps: {
-        ...defaultConfirmationConfig.acceptButtonProps,
-        severity: 'danger',
-        label: this.translateService.instant('common.buttons.remove'),
-      },
-      accept: () => {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'project.contributors.removeDialog.title',
+      messageKey: 'project.contributors.removeDialog.message',
+      messageParams: { name: contributor.fullName },
+      acceptLabelKey: 'common.buttons.remove',
+      onConfirm: () => {
         this.actions
           .deleteContributor(this.projectId(), contributor.userId)
           .pipe(takeUntilDestroyed(this.destroyRef))
@@ -304,20 +297,11 @@ export class ContributorsComponent implements OnInit {
   }
 
   deleteLinkItem(link: ViewOnlyLinkModel): void {
-    this.confirmationService.confirm({
-      ...defaultConfirmationConfig,
-      message: this.translateService.instant('myProjects.settings.delete.message'),
-      header: this.translateService.instant('myProjects.settings.delete.title', {
-        name: link.name,
-      }),
-      acceptButtonProps: {
-        ...defaultConfirmationConfig.acceptButtonProps,
-        severity: 'danger',
-        label: this.translateService.instant('settings.developerApps.list.deleteButton'),
-      },
-      accept: () => {
-        this.actions.deleteViewOnlyLink(this.projectId(), link.id);
-      },
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'myProjects.settings.delete.title',
+      headerParams: { name: link.name },
+      messageKey: 'myProjects.settings.delete.message',
+      onConfirm: () => this.actions.deleteViewOnlyLink(this.projectId(), link.id),
     });
   }
 }

src/app/features/project/settings/settings.component.ts

@@ -1,8 +1,7 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
-import { ConfirmationService } from 'primeng/api';
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { TabPanels } from 'primeng/tabs';
@@ -45,8 +44,8 @@ import {
   NotificationSubscriptionSelectors,
   UpdateNotificationSubscriptionForNodeId,
 } from '@osf/features/settings/notifications/store';
-import { LoaderService, ToastService } from '@osf/shared/services';
-import { CustomValidators, defaultConfirmationConfig } from '@osf/shared/utils';
+import { CustomConfirmationService, LoaderService, ToastService } from '@osf/shared/services';
+import { CustomValidators } from '@osf/shared/utils';
 import { SubHeaderComponent } from '@shared/components';
 import { ProjectFormControls, SubscriptionEvent, SubscriptionFrequency } from '@shared/enums';
 import { UpdateNodeRequestModel } from '@shared/models';
@@ -77,8 +76,7 @@ import { UpdateNodeRequestModel } from '@shared/models';
 })
 export class SettingsComponent implements OnInit {
   private readonly route = inject(ActivatedRoute);
-  private readonly translateService = inject(TranslateService);
-  private readonly confirmationService = inject(ConfirmationService);
+  private readonly customConfirmationService = inject(CustomConfirmationService);
   private readonly toastService = inject(ToastService);
   private readonly loaderService = inject(LoaderService);
 
@@ -183,18 +181,11 @@ export class SettingsComponent implements OnInit {
   }
 
   deleteLinkItem(link: ViewOnlyLinkModel): void {
-    this.confirmationService.confirm({
-      ...defaultConfirmationConfig,
-      message: this.translateService.instant('myProjects.settings.delete.message'),
-      header: this.translateService.instant('myProjects.settings.delete.title', {
-        name: link.name,
-      }),
-      acceptButtonProps: {
-        ...defaultConfirmationConfig.acceptButtonProps,
-        severity: 'danger',
-        label: this.translateService.instant('settings.developerApps.list.deleteButton'),
-      },
-      accept: () => {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'myProjects.settings.delete.title',
+      headerParams: { name: link.name },
+      messageKey: 'myProjects.settings.delete.message',
+      onConfirm: () => {
         this.actions.deleteViewOnlyLink(this.projectId(), link.id).subscribe();
       },
     });

src/app/features/project/wiki/components/wiki-list/wiki-list.component.ts

@@ -1,6 +1,5 @@
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
-import { ConfirmationService } from 'primeng/api';
 import { Button } from 'primeng/button';
 import { ButtonGroupModule } from 'primeng/buttongroup';
 import { DialogService } from 'primeng/dynamicdialog';
@@ -11,7 +10,7 @@ import { Skeleton } from 'primeng/skeleton';
 import { ChangeDetectionStrategy, Component, computed, inject, input, output, signal } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 
-import { defaultConfirmationConfig } from '@osf/shared/utils';
+import { CustomConfirmationService } from '@osf/shared/services';
 
 import { Wiki, WikiItemType, WikiMenuItem } from '../../models';
 import { ComponentWiki } from '../../store';
@@ -31,12 +30,15 @@ export class WikiListComponent {
   readonly isLoading = input<boolean>(false);
   readonly componentsList = input.required<ComponentWiki[]>();
   readonly currentWikiId = input.required<string>();
+
   readonly deleteWiki = output<void>();
   readonly createWiki = output<void>();
+
   private readonly dialogService = inject(DialogService);
   private readonly translateService = inject(TranslateService);
-  private readonly confirmationService = inject(ConfirmationService);
+  private readonly customConfirmationService = inject(CustomConfirmationService);
   private readonly router = inject(Router);
+
   wikiItemType = WikiItemType;
   expanded = signal(true);
 
@@ -97,16 +99,10 @@ export class WikiListComponent {
   }
 
   openDeleteWikiDialog(): void {
-    this.confirmationService.confirm({
-      ...defaultConfirmationConfig,
-      header: this.translateService.instant('project.wiki.deleteWiki'),
-      message: this.translateService.instant('project.wiki.deleteWikiMessage'),
-      acceptButtonProps: {
-        ...defaultConfirmationConfig.acceptButtonProps,
-        severity: 'danger',
-        label: this.translateService.instant('common.buttons.delete'),
-      },
-      accept: () => this.deleteWiki.emit(),
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'project.wiki.deleteWiki',
+      messageKey: 'project.wiki.deleteWikiMessage',
+      onConfirm: () => this.deleteWiki.emit(),
     });
   }
 
@@ -122,7 +118,6 @@ export class WikiListComponent {
         });
       });
     } else {
-      // change only the wiki id in query params
       this.router.navigate([], {
         queryParams: { wiki: wikiId },
         queryParamsHandling: 'merge',

src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html

@@ -35,8 +35,8 @@ <h2 class="account-setting-header">{{ 'settings.accountSettings.connectedEmails.
                   <i
                     class="osf-icon-close"
                     tabindex="0"
-                    (click)="deleteEmail(email.id)"
-                    (keydown.enter)="deleteEmail(email.id)"
+                    (click)="openConfirmDeleteEmail(email)"
+                    (keydown.enter)="openConfirmDeleteEmail(email)"
                   >
                   </i>
                 }
@@ -80,8 +80,8 @@ <h2 class="account-setting-header">{{ 'settings.accountSettings.connectedEmails.
                   <i
                     class="osf-icon-close"
                     tabindex="0"
-                    (click)="deleteEmail(email.id)"
-                    (keydown.enter)="deleteEmail(email.id)"
+                    (click)="openConfirmDeleteEmail(email)"
+                    (keydown.enter)="openConfirmDeleteEmail(email)"
                   ></i>
                 }
                 @if (deletingEmailIds().has(email.id)) {
@@ -94,9 +94,9 @@ <h2 class="account-setting-header">{{ 'settings.accountSettings.connectedEmails.
               } @else {
                 <p-button
                   [label]="
-                    (isMobile()
-                      ? 'settings.accountSettings.connectedEmails.buttons.resend'
-                      : 'settings.accountSettings.connectedEmails.buttons.resendConfirmation'
+                    (isSmall()
+                      ? 'settings.accountSettings.connectedEmails.buttons.resendConfirmation'
+                      : 'settings.accountSettings.connectedEmails.buttons.resend'
                     ) | translate
                   "
                   severity="secondary"