From 167678b35374873a547aaf7a053cf2a68a0ba39b Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Sun, 13 Jun 2021 14:35:18 -0800
Subject: [PATCH 1/2] add category/tag confirmation dialog

---
 frontend/src/components/UI/Buttons/TheButton.vue  |  2 +-
 .../components/UI/Dialogs/ConfirmationDialog.vue  |  3 ++-
 frontend/src/locales/messages/en-US.json          |  1 +
 .../Admin/ToolBox/CategoryTagEditor/index.vue     | 15 ++++++++++++++-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/UI/Buttons/TheButton.vue b/frontend/src/components/UI/Buttons/TheButton.vue
index 1f51be9e4d7..a3973429b90 100644
--- a/frontend/src/components/UI/Buttons/TheButton.vue
+++ b/frontend/src/components/UI/Buttons/TheButton.vue
@@ -22,7 +22,7 @@
 
 <script>
 export default {
-  name: "theButton",
+  name: "TheButton",
   props: {
     // Types
     cancel: {
diff --git a/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue b/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
index 5f28d208b0d..7d7ea8ea574 100644
--- a/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
+++ b/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
@@ -5,9 +5,10 @@
     :style="{ zIndex: zIndex }"
     @click:outside="cancel"
     @keydown.esc="cancel"
+    @keydown.enter="confirm"
   >
     <template v-slot:activator="{}">
-      <slot v-bind="{ open }"> </slot>
+      <slot  v-bind="{ open }"> </slot>
     </template>
     <v-card>
       <v-app-bar v-if="Boolean(title)" :color="color" dense dark>
diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 2867467551c..65f5c9081b3 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/frontend/src/locales/messages/en-US.json
@@ -59,6 +59,7 @@
     "custom": "Custom",
     "dashboard": "Dashboard",
     "delete": "Delete",
+    "confirm-delete-generic": "Are you sure you want to delete this item?",
     "disabled": "Disabled",
     "download": "Download",
     "edit": "Edit",
diff --git a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
index 41a806363cb..509f30169f4 100644
--- a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
+++ b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
@@ -75,7 +75,16 @@
             <v-card-title class="py-1">{{ item.name }}</v-card-title>
             <v-divider class="mx-2"></v-divider>
             <v-card-actions>
-              <TheButton minor small delete @click="deleteItem(item.slug)" />
+              <ConfirmationDialog
+                :title="$t('general.confirm') + ' ' + $t('general.delete')"
+                :icon="$globals.icons.tags"
+                :message="$t('general.confirm-delete-generic')"
+                @confirm="deleteItem(item.slug)"
+              >
+                <template v-slot="{ open }">
+                  <TheButton minor small delete @click="open"></TheButton>
+                </template>
+              </ConfirmationDialog>
               <v-spacer></v-spacer>
               <TheButton small edit @click="openEditDialog(item)" />
             </v-card-actions>
@@ -95,6 +104,8 @@ import { validators } from "@/mixins/validators";
 import RemoveUnused from "./RemoveUnused";
 import BulkAssign from "./BulkAssign";
 import NewCategoryTagDialog from "@/components/UI/Dialogs/NewCategoryTagDialog";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
+import TheButton from "@/components/UI/Buttons/TheButton.vue";
 export default {
   mixins: [validators],
   components: {
@@ -104,6 +115,8 @@ export default {
     RemoveUnused,
     NewCategoryTagDialog,
     BulkAssign,
+    ConfirmationDialog,
+    TheButton,
   },
   props: {
     isTags: {

From 98e8f7a3efd1c658cad8a15e6c8775d441a37eff Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Sun, 13 Jun 2021 14:41:47 -0800
Subject: [PATCH 2/2] add page delete confirmation

---
 frontend/src/locales/messages/en-US.json          |  3 ++-
 .../pages/Admin/Settings/CustomPageCreator.vue    | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 65f5c9081b3..2c51d696bea 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/frontend/src/locales/messages/en-US.json
@@ -59,7 +59,7 @@
     "custom": "Custom",
     "dashboard": "Dashboard",
     "delete": "Delete",
-    "confirm-delete-generic": "Are you sure you want to delete this item?",
+    "confirm-delete-generic": "Are you sure you want to delete this?",
     "disabled": "Disabled",
     "download": "Download",
     "edit": "Edit",
@@ -189,6 +189,7 @@
     "url-form-hint": "Copy and paste a link from your favorite recipe website"
   },
   "page": {
+    "page": "Page",
     "all-recipes": "All Recipes",
     "home-page": "Home Page",
     "new-page-created": "New page created",
diff --git a/frontend/src/pages/Admin/Settings/CustomPageCreator.vue b/frontend/src/pages/Admin/Settings/CustomPageCreator.vue
index 9b6bca96954..c4dedeac505 100644
--- a/frontend/src/pages/Admin/Settings/CustomPageCreator.vue
+++ b/frontend/src/pages/Admin/Settings/CustomPageCreator.vue
@@ -31,7 +31,16 @@
             </v-card-text>
 
             <v-card-actions>
-              <TheButton delete small minor @click="deletePage(item.id)" />
+              <ConfirmationDialog
+                :title="$t('page.page') + ' ' + $t('general.delete')"
+                :icon="$globals.icons.pages"
+                :message="$t('general.confirm-delete-generic')"
+                @confirm="deletePage(item.id)"
+              >
+                <template v-slot="{ open }">
+                  <TheButton delete small minor @click="open" />
+                </template>
+              </ConfirmationDialog>
               <v-spacer> </v-spacer>
               <TheButton edit small @click="editPage(index)" />
             </v-card-actions>
@@ -49,11 +58,15 @@
 <script>
 import draggable from "vuedraggable";
 import CreatePageDialog from "./CreatePageDialog";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
+import TheButton from "@/components/UI/Buttons/TheButton.vue";
 import { api } from "@/api";
 export default {
   components: {
     draggable,
     CreatePageDialog,
+    ConfirmationDialog,
+    TheButton,
   },
   data() {
     return {