Adding in Confirmation logic.

frontend/src/components/UI/ButtonRow.vue

@@ -5,7 +5,9 @@
       <div v-if="open">
         <v-btn class="mr-2" fab dark small color="error" @click="deleteRecipe">
           <v-icon>mdi-delete</v-icon>
+          <Confirmation ref="confirm" />
         </v-btn>
+
         <v-btn class="mr-2" fab dark small color="success" @click="save">
           <v-icon>mdi-content-save</v-icon>
         </v-btn>
@@ -27,6 +29,9 @@ export default {
       default: true,
     },
   },
+  components: {
+    Confirmation: () => import("../UI/Confirmation"),
+  },
   methods: {
     editor() {
       this.$emit("editor");
@@ -34,8 +39,16 @@ export default {
     save() {
       this.$emit("save");
     },
-    deleteRecipe() {
+    async deleteRecipe() {
-      this.$emit("delete");
+      if (
+        await this.$refs.confirm.open(
+          "Delete Recpie",
+          "Are you sure you want to delete this recipie?",
+          { color: "error", icon: "mdi-alert-circle" }
+        )
+      ) {
+        this.$emit("delete");
+      }
     },
     json() {
       this.$emit("json");

frontend/src/components/UI/Confirmation.vue

@@ -1,14 +1,27 @@
 <template>
-  <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
+  <v-dialog
-    <v-card :loading="processing">
+    v-model="dialog"
-      <v-card-title class="headline"> From URL </v-card-title>
+    :max-width="options.width"
+    :style="{ zIndex: options.zIndex }"
+    @click:outside="cancel"
+    @keydown.esc="cancel"
+  >
+    <v-card>
+      <v-toolbar v-if="Boolean(title)" :color="options.color" dense flat>
+        <v-icon v-if="Boolean(options.icon)" left> {{ options.icon }}</v-icon>
+        <v-toolbar-title v-text="title" />
+      </v-toolbar>
 
-      <v-card-text> </v-card-text>
+      <v-card-text
+        v-show="!!message"
+        class="pa-4 text--primary"
+        v-html="message"
+      />
 
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="primary" text @click="createRecipe"> Exit </v-btn>
+        <v-btn color="grey" text @click="cancel"> Cancel </v-btn>
-        <v-btn color="primary" text @click="confirm"> Confirm </v-btn>
+        <v-btn :color="options.color" text @click="confirm"> Confirm </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -16,19 +29,42 @@
 
 <script>
 export default {
-  props: {
+  name: "Confirmation",
-    type: String,
+  data: () => ({
-  },
+    dialog: false, // Wether to show or not
-  data() {
+    resolve: null,
-    return {};
+    reject: null,
-  },
+    message: null,
-  methods: {
+    title: null,
-    confirm() {
+    options: {
-      this.$emit("confirm");
+      color: "error",
+      icon: "mdi-alert-circle",
+      width: 400,
+      zIndex: 200,
+      noconfirm: false,
+    },
+  }),
+  methods: {
+    open(title, message, options) {
+      this.dialog = true;
+      this.title = title;
+      this.message = message;
+      this.options = Object.assign(this.options, options);
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+    },
+
+    cancel() {
+      this.resolve(false);
+      this.dialog = false;
+    },
+
+    confirm() {
+      this.resolve(true);
+      this.dialog = false;
     },
-    exit() {
-      // do something? 
-    }
   },
 };
 </script>