Add confirmation warning

Author: lcharette

packages/sprinkle-core/app/locale/en_US/messages.php

@@ -97,7 +97,6 @@
     'DELETE_CONFIRM_YES'       => 'Yes, delete',
     'DELETE_CONFIRM_NAMED'     => 'Are you sure you want to delete {{user_name}}?',
     'DELETE_CONFIRM_YES_NAMED' => 'Yes, delete {{name}}',
-    'DELETE_CANNOT_UNDONE'     => 'This action cannot be undone.',
     'DELETE_NAMED'             => 'Delete {{name}}',
     'DENY'                     => 'Deny',
     'DESCRIPTION'              => 'Description',
@@ -118,8 +117,9 @@
     'PRINT'                    => 'Print',
     'REMOVE'                   => 'Remove',
     'UNACTIVATED'              => 'Unactivated',
-    'UNKNOWN' => 'Unknown',
+    'UNKNOWN'                  => 'Unknown',
     'UPDATE'                   => 'Update',
     'VIEW'                     => 'View',
+    'WARNING_CANNOT_UNDONE'    => 'This action cannot be undone.',//OK
     'YES'                      => 'Yes',
 ];

packages/sprinkle-core/app/locale/fr_FR/messages.php

@@ -97,7 +97,6 @@
     'DELETE_CONFIRM_YES'       => 'Oui, supprimer',
     'DELETE_CONFIRM_NAMED'     => 'Êtes-vous sûr de vouloir supprimer {{name}}?',
     'DELETE_CONFIRM_YES_NAMED' => 'Oui, supprimer {{name}}',
-    'DELETE_CANNOT_UNDONE'     => 'Cette action ne peut être annulée.',
     'DELETE_NAMED'             => 'Supprimer {{name}}',
     'DENY'                     => 'Refuser',
     'DESCRIPTION'              => 'Description',
@@ -121,5 +120,6 @@
     'UNKNOWN'                  => 'Inconnu',
     'UPDATE'                   => 'Mettre à jour',
     'VIEW'                     => 'Voir',
+    'WARNING_CANNOT_UNDONE'    => 'Cette action ne peut être annulée.',
     'YES'                      => 'Oui',
 ];

packages/theme-pink-cupcake/src/components/Modals/UFModalConfirmation.vue

@@ -3,8 +3,6 @@
  * Modal Confirmation Component
  */
 import { Severity } from '@userfrosting/sprinkle-core/interfaces'
-import { useTranslator } from '@userfrosting/sprinkle-core/stores'
-const { translate } = useTranslator()
 
 /**
  * Emits - Events emitted by the component buttons. Note closing the modal with
@@ -49,6 +47,7 @@ interface Props {
     cancelBtn?: boolean
     title?: string | null
     prompt?: string
+    warning?: string
 }
 const {
     closable = false,
@@ -63,7 +62,8 @@ const {
     rejectSeverity = Severity.Default,
     cancelBtn = true,
     title = 'CONFIRMATION',
-    prompt = 'CONFIRM_ACTION'
+    prompt = 'CONFIRM_ACTION',
+    warning = 'WARNING_CANNOT_UNDONE'
 } = defineProps<Props>()
 
 /**
@@ -106,8 +106,13 @@ const btnClass = (severity: Severity) => {
         </template>
         <slot>
             <div class="uk-text-center">
-                <p v-if="icon"><font-awesome-icon :icon="icon" class="uk-text-warning fa-4x" /></p>
+                <p v-if="icon">
+                    <font-awesome-icon :icon="icon" class="uk-text-warning fa-4x" />
+                </p>
                 <slot name="prompt">{{ $t(prompt) }}</slot>
+                <div class="uk-text-meta" v-if="warning">
+                    <slot name="warning">{{ $t(warning) }}</slot>
+                </div>
             </div>
         </slot>
         <template #footer>

packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserActivateModal.vue

@@ -77,7 +77,7 @@ const updateUser = (fieldName: string, value: string) => {
         :rejectIcon="null"
         :acceptSeverity="Severity.Success">
         <template #prompt>
-            <p v-html="$t('USER.ACTIVATE_CONFIRM', props.user)"></p>
+            <div v-html="$t('USER.ACTIVATE_CONFIRM', props.user)"></div>
         </template>
     </UFModalConfirmation>
 
@@ -90,7 +90,7 @@ const updateUser = (fieldName: string, value: string) => {
         :rejectIcon="null"
         :acceptSeverity="Severity.Success">
         <template #prompt>
-            <p v-html="$t('USER.DISABLE_CONFIRM', props.user)"></p>
+            <div v-html="$t('USER.DISABLE_CONFIRM', props.user)"></div>
         </template>
     </UFModalConfirmation>
 
@@ -103,7 +103,7 @@ const updateUser = (fieldName: string, value: string) => {
         :rejectIcon="null"
         :acceptSeverity="Severity.Success">
         <template #prompt>
-            <p v-html="$t('USER.ENABLE_CONFIRM', props.user)"></p>
+            <div v-html="$t('USER.ENABLE_CONFIRM', props.user)"></div>
         </template>
     </UFModalConfirmation>
 </template>

packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserDeleteModal.vue

@@ -53,7 +53,7 @@ const deleteConfirmed = () => {
         :rejectIcon="null"
         :acceptSeverity="Severity.Danger">
         <template #prompt>
-            <p v-html="$t('USER.DELETE_CONFIRM', props.user)"></p>
+            <div v-html="$t('USER.DELETE_CONFIRM', props.user)"></div>
         </template>
     </UFModalConfirmation>
 </template>