Add vue dialog to replace alert and confirm

CHANGELOG.md

@@ -4,6 +4,8 @@
 - Create build script for GitHub pages with GitHub actions to allow for custom building
   [#1203](https://github.com/nextcloud/cookbook/pull/1203) @christianlupus
 - Added a new client and badges to the readme @TheMBeat
+- Replace native alert and confirm dialogs with custom ones from nextcloud vue
+  [#1261](https://github.com/nextcloud/cookbook/pull/1261) @MarcelRobitaille
 
 ### Fixed
 - Added new public page styling in preparation for NC25

package.json

@@ -41,6 +41,7 @@
     "vue": "^2.6.11",
     "vue-i18n": "^8.17.1",
     "vue-material-design-icons": "^5.1.2",
+    "vue-modal-dialogs": "3.0.0",
     "vue-router": "^3.1.6",
     "vue-showdown": "^2.4.1",
     "vuex": "^3.1.3"

src/components/AppControls/AppControls.vue

@@ -153,8 +153,6 @@
 </template>
 
 <script>
-import helpers from "cookbook/js/helper"
-
 import Actions from "@nextcloud/vue/dist/Components/Actions"
 import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 // Cannot use `Button` else get `vue/no-reserved-component-names` eslint errors
@@ -166,6 +164,12 @@ import LoadingIcon from "icons/Loading.vue"
 import CheckmarkIcon from "icons/Check.vue"
 import PrinterIcon from "icons/Printer.vue"
 
+import helpers from "cookbook/js/helper"
+import {
+    showSimpleAlertModal,
+    showSimpleConfirmModal,
+} from "cookbook/js/modals"
+
 import Location from "./Location.vue"
 import ModeIndicator from "./ModeIndicator.vue"
 
@@ -254,29 +258,28 @@ export default {
         },
     },
     methods: {
-        deleteRecipe() {
+        async deleteRecipe() {
             // Confirm delete
             if (
-                // eslint-disable-next-line no-alert
-                !window.confirm(
+                !(await showSimpleConfirmModal(
                     // prettier-ignore
-                    t("cookbook","Are you sure you want to delete this recipe?")
-                )
+                    t("cookbook", "Are you sure you want to delete this recipe?")
+                ))
             ) {
                 return
             }
-            this.$store
-                .dispatch("deleteRecipe", { id: this.$store.state.recipe.id })
-                .then(() => {
-                    helpers.goTo("/")
-                })
-                .catch((e) => {
-                    // eslint-disable-next-line no-alert
-                    alert(t("cookbook", "Delete failed"))
-                    if (e && e instanceof Error) {
-                        throw e
-                    }
+
+            try {
+                await this.$store.dispatch("deleteRecipe", {
+                    id: this.$store.state.recipe.id,
                 })
+                helpers.goTo("/")
+            } catch (e) {
+                await showSimpleAlertModal(t("cookbook", "Delete failed"))
+                if (e && e instanceof Error) {
+                    throw e
+                }
+            }
         },
         printRecipe() {
             window.print()

src/components/AppMain.vue

@@ -15,6 +15,7 @@
                 @click="closeNavigation"
             />
         </AppContent>
+        <dialogs-wrapper></dialogs-wrapper>
     </Content>
 </template>