Replace confirm dialogs with custom modals

This commit is contained in:
Bnyro 2023-05-30 15:02:20 +02:00
parent d21e7ed3a1
commit b21fd103ea
6 changed files with 109 additions and 39 deletions

View file

@ -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>

View file

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

View file

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

View file

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

View file

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

View file

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