TeamPiped-mirror
/
Piped
mirror of https://github.com/TeamPiped/Piped.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ConfirmModal.vue Normal file
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>

40
src/components/PlaylistsPage.vue
View File

@ -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,20 +135,20 @@ 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({
playlistId: id,
}),
headers: {
Authorization: this.getAuthToken(),
"Content-Type": "application/json",
},
}).then(json => {
if (json.error) alert(json.error);
else this.playlists = this.playlists.filter(playlist => playlist.id !== id);
});
this.fetchJson(this.authApiUrl() + "/user/playlists/delete", null, {
method: "POST",
body: JSON.stringify({
playlistId: id,
}),
headers: {
Authorization: this.getAuthToken(),
"Content-Type": "application/json",
},
}).then(json => {
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>

15
src/components/PreferencesPage.vue
View File

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

20
src/components/RegisterPage.vue
View File

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

44
src/components/VideoItem.vue
View File

@ -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,23 +171,21 @@ 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",
body: JSON.stringify({
playlistId: this.playlistId,
index: this.index,
}),
headers: {
Authorization: this.getAuthToken(),
"Content-Type": "application/json",
},
}).then(json => {
if (json.error) alert(json.error);
else this.$emit("remove");
});
}
this.$refs.removeButton.disabled = true;
this.fetchJson(this.authApiUrl() + "/user/playlists/remove", null, {
method: "POST",
body: JSON.stringify({
playlistId: this.playlistId,
index: this.index,
}),
headers: {
Authorization: this.getAuthToken(),
"Content-Type": "application/json",
},
}).then(json => {
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>

4
src/locales/en.json
View File

@ -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}",