Replace confirm dialogs with custom modals

src/components/ConfirmModal.vue

@@ -0,0 +1,25 @@
+<template>
+    <ModalComponent @close="$emit('close')">
+        <div>
+            <h3 class="text-xl" v-text="message" />
+            <div class="ml-auto mt-8 flex gap-2 w-min">
+                <button class="btn" v-t="'actions.cancel'" @click="$emit('close')" />
+                <button class="btn" v-t="'actions.confirm'" @click="$emit('confirm')" />
+            </div>
+        </div>
+    </ModalComponent>
+</template>
+
+<script>
+import ModalComponent from "./ModalComponent.vue";
+
+export default {
+    components: {
+        ModalComponent,
+    },
+    props: {
+        message: String,
+    },
+    emits: ["close", "confirm"],
+};
+</script>

src/components/PlaylistsPage.vue

@@ -40,7 +40,13 @@
                 />
             </router-link>
             <button class="btn h-auto" @click="renamePlaylist(playlist.id)" v-t="'actions.rename_playlist'" />
-            <button class="btn h-auto ml-2" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
+            <button class="btn h-auto ml-2" @click="playlistToDelete = playlist.id" v-t="'actions.delete_playlist'" />
+            <ConfirmModal
+                v-if="playlistToDelete == playlist.id"
+                :message="$t('actions.delete_playlist_confirm')"
+                @close="playlistToDelete = null"
+                @confirm="deletePlaylist(playlist.id)"
+            />
         </div>
     </div>
     <hr />
@@ -76,11 +82,14 @@
 </template>
 
 <script>
+import ConfirmModal from "./ConfirmModal.vue";
+
 export default {
     data() {
         return {
             playlists: [],
             bookmarks: [],
+            playlistToDelete: null,
         };
     },
     mounted() {
@@ -126,7 +135,6 @@ export default {
             });
         },
         deletePlaylist(id) {
-            if (confirm(this.$t("actions.delete_playlist_confirm")))
             this.fetchJson(this.authApiUrl() + "/user/playlists/delete", null, {
                 method: "POST",
                 body: JSON.stringify({
@@ -140,6 +148,7 @@ export default {
                 if (json.error) alert(json.error);
                 else this.playlists = this.playlists.filter(playlist => playlist.id !== id);
             });
+            this.playlistToDelete = null;
         },
         onCreatePlaylist() {
             const name = prompt(this.$t("actions.create_playlist"));
@@ -262,5 +271,6 @@ export default {
             this.bookmarks.splice(index, 1);
         },
     },
+    components: { ConfirmModal },
 };
 </script>

src/components/PreferencesPage.vue

@@ -335,14 +335,21 @@
     <br />
     <p v-t="'info.preferences_note'" />
     <br />
-    <button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" />
+    <button class="btn" v-t="'actions.reset_preferences'" @click="showConfirmResetPrefsDialog = true" />
     <button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" />
     <label for="fileSelector" class="btn" v-t="'actions.restore_preferences'" @click="restorePreferences()" />
     <input class="hidden" id="fileSelector" ref="fileSelector" type="file" @change="restorePreferences()" />
+    <ConfirmModal
+        v-if="showConfirmResetPrefsDialog"
+        @close="showConfirmResetPrefsDialog = false"
+        @confirm="resetPreferences()"
+        :message="$t('actions.confirm_reset_preferences')"
+    />
 </template>
 
 <script>
 import CountryMap from "@/utils/CountryMaps/en.json";
+import ConfirmModal from "./ConfirmModal.vue";
 export default {
     data() {
         return {
@@ -438,6 +445,7 @@ export default {
             disableLBRY: false,
             proxyLBRY: false,
             password: null,
+            showConfirmResetPrefsDialog: false,
         };
     },
     activated() {
@@ -589,7 +597,7 @@ export default {
             window.location = "/";
         },
         resetPreferences() {
-            if (!confirm(this.$t("actions.confirm_reset_preferences"))) return;
+            this.showConfirmResetPrefsDialog = false;
             // clear the local storage
             localStorage.clear();
             // redirect to the home page
@@ -622,6 +630,9 @@ export default {
             });
         },
     },
+    components: {
+        ConfirmModal,
+    },
 };
 </script>
 

src/components/RegisterPage.vue

@@ -30,16 +30,29 @@
             </div>
         </form>
     </div>
+    <ConfirmModal
+        v-if="showUnsecureRegisterDialog"
+        @close="showUnsecureRegisterDialog = false"
+        @confirm="
+            forceUnsecureRegister = true;
+            showUnsecureRegisterDialog = false;
+            register();
+        "
+        :message="$t('info.register_no_email_note')"
+    />
 </template>
 
 <script>
 import { isEmail } from "../utils/Misc.js";
+import ConfirmModal from "./ConfirmModal.vue";
 
 export default {
     data() {
         return {
             username: null,
             password: null,
+            showUnsecureRegisterDialog: false,
+            forceUnsecureRegister: false,
         };
     },
     mounted() {
@@ -54,8 +67,10 @@ export default {
     methods: {
         register() {
             if (!this.username || !this.password) return;
-            if (isEmail(this.username) && !confirm(this.$t("info.register_no_email_note"))) return;
+            if (isEmail(this.username) && !this.forceUnsecureRegister) {
-
+                this.showUnsecureRegisterDialog = true;
+                return;
+            }
             this.fetchJson(this.authApiUrl() + "/register", null, {
                 method: "POST",
                 body: JSON.stringify({
@@ -70,5 +85,6 @@ export default {
             });
         },
     },
+    components: { ConfirmModal },
 };
 </script>

src/components/VideoItem.vue

@@ -114,10 +114,16 @@
                     v-if="admin"
                     :title="$t('actions.remove_from_playlist')"
                     ref="removeButton"
-                    @click="removeVideo(item.url.substr(-11))"
+                    @click="showConfirmRemove = true"
                 >
                     <font-awesome-icon icon="circle-minus" />
                 </button>
+                <ConfirmModal
+                    v-if="showConfirmRemove"
+                    @close="showConfirmRemove = false"
+                    @confirm="removeVideo(item.url.substr(-11))"
+                    :message="$t('actions.delete_playlist_video_confirm')"
+                />
                 <PlaylistAddModal v-if="showModal" :video-id="item.url.substr(-11)" @close="showModal = !showModal" />
             </div>
         </div>
@@ -132,6 +138,7 @@
 
 <script>
 import PlaylistAddModal from "./PlaylistAddModal.vue";
+import ConfirmModal from "./ConfirmModal.vue";
 
 export default {
     props: {
@@ -156,6 +163,7 @@ export default {
         return {
             showModal: false,
             showVideo: true,
+            showConfirmRemove: false,
         };
     },
     mounted() {
@@ -163,7 +171,6 @@ export default {
     },
     methods: {
         removeVideo() {
-            if (confirm(this.$t("actions.delete_playlist_video_confirm"))) {
             this.$refs.removeButton.disabled = true;
             this.fetchJson(this.authApiUrl() + "/user/playlists/remove", null, {
                 method: "POST",
@@ -179,7 +186,6 @@ export default {
                 if (json.error) alert(json.error);
                 else this.$emit("remove");
             });
-            }
         },
         shouldShowVideo() {
             if (!this.isFeed || !this.getPreferenceBoolean("hideWatched", false)) return;
@@ -195,6 +201,6 @@ export default {
             };
         },
     },
-    components: { PlaylistAddModal },
+    components: { PlaylistAddModal, ConfirmModal },
 };
 </script>

src/locales/en.json

@@ -135,7 +135,9 @@
         "show_more": "Show more",
         "show_less": "Show less",
         "create_group": "Create group",
-        "group_name": "Group name"
+        "group_name": "Group name",
+        "cancel": "Cancel",
+        "confirm": "Confirm"
     },
     "comment": {
         "pinned_by": "Pinned by {author}",