From b0045b5b8b182a3f0671c6aab4f2190ba6def1b8 Mon Sep 17 00:00:00 2001 From: advplyr Date: Mon, 24 Feb 2025 17:44:17 -0600 Subject: [PATCH] Update browser confirm prompts to use confirm prompt modal instead --- .../modals/collections/EditModal.vue | 41 +++++++++++------ client/components/tables/BackupsTable.vue | 41 +++++++++++------ client/components/tables/UsersTable.vue | 46 ++++++++++++------- client/pages/collection/_id.vue | 38 +++++++++------ client/pages/item/_id/index.vue | 36 ++++++++++----- 5 files changed, 129 insertions(+), 73 deletions(-) diff --git a/client/components/modals/collections/EditModal.vue b/client/components/modals/collections/EditModal.vue index 8c8d5392..258841e4 100644 --- a/client/components/modals/collections/EditModal.vue +++ b/client/components/modals/collections/EditModal.vue @@ -18,7 +18,7 @@ -
+
{{ $strings.ButtonRemove }}
{{ $strings.ButtonSave }} @@ -94,21 +94,32 @@ export default { this.newCollectionDescription = this.collection.description || '' }, removeClick() { - if (confirm(this.$getString('MessageConfirmRemoveCollection', [this.collectionName]))) { - this.processing = true - this.$axios - .$delete(`/api/collections/${this.collection.id}`) - .then(() => { - this.processing = false - this.show = false - this.$toast.success(this.$strings.ToastCollectionRemoveSuccess) - }) - .catch((error) => { - console.error('Failed to remove collection', error) - this.processing = false - this.$toast.error(this.$strings.ToastRemoveFailed) - }) + const payload = { + message: this.$getString('MessageConfirmRemoveCollection', [this.collectionName]), + callback: (confirmed) => { + if (confirmed) { + this.deleteCollection() + } + }, + type: 'yesNo' } + this.$store.commit('globals/setConfirmPrompt', payload) + }, + deleteCollection() { + this.processing = true + this.$axios + .$delete(`/api/collections/${this.collection.id}`) + .then(() => { + this.show = false + this.$toast.success(this.$strings.ToastCollectionRemoveSuccess) + }) + .catch((error) => { + console.error('Failed to remove collection', error) + this.$toast.error(this.$strings.ToastRemoveFailed) + }) + .finally(() => { + this.processing = false + }) }, submitForm() { if (this.newCollectionName === this.collectionName && this.newCollectionDescription === this.collection.description) { diff --git a/client/components/tables/BackupsTable.vue b/client/components/tables/BackupsTable.vue index 6b0c6723..0b8d0305 100644 --- a/client/components/tables/BackupsTable.vue +++ b/client/components/tables/BackupsTable.vue @@ -28,7 +28,7 @@ - +
@@ -107,21 +107,32 @@ export default { }) }, deleteBackupClick(backup) { - if (confirm(this.$getString('MessageConfirmDeleteBackup', [this.$formatDatetime(backup.createdAt, this.dateFormat, this.timeFormat)]))) { - this.processing = true - this.$axios - .$delete(`/api/backups/${backup.id}`) - .then((data) => { - this.setBackups(data.backups || []) - this.$toast.success(this.$strings.ToastBackupDeleteSuccess) - this.processing = false - }) - .catch((error) => { - console.error(error) - this.$toast.error(this.$strings.ToastBackupDeleteFailed) - this.processing = false - }) + const payload = { + message: this.$getString('MessageConfirmDeleteBackup', [this.$formatDatetime(backup.createdAt, this.dateFormat, this.timeFormat)]), + callback: (confirmed) => { + if (confirmed) { + this.deleteBackup(backup) + } + }, + type: 'yesNo' } + this.$store.commit('globals/setConfirmPrompt', payload) + }, + deleteBackup(backup) { + this.processing = true + this.$axios + .$delete(`/api/backups/${backup.id}`) + .then((data) => { + this.setBackups(data.backups || []) + this.$toast.success(this.$strings.ToastBackupDeleteSuccess) + }) + .catch((error) => { + console.error(error) + this.$toast.error(this.$strings.ToastBackupDeleteFailed) + }) + .finally(() => { + this.processing = false + }) }, applyBackup(backup) { this.selectedBackup = backup diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue index 09db3341..e95e1da8 100644 --- a/client/components/tables/UsersTable.vue +++ b/client/components/tables/UsersTable.vue @@ -91,24 +91,36 @@ export default { }, deleteUserClick(user) { if (this.isDeletingUser) return - if (confirm(this.$getString('MessageRemoveUserWarning', [user.username]))) { - this.isDeletingUser = true - this.$axios - .$delete(`/api/users/${user.id}`) - .then((data) => { - this.isDeletingUser = false - if (data.error) { - this.$toast.error(data.error) - } else { - this.$toast.success(this.$strings.ToastUserDeleteSuccess) - } - }) - .catch((error) => { - console.error('Failed to delete user', error) - this.$toast.error(this.$strings.ToastUserDeleteFailed) - this.isDeletingUser = false - }) + + const payload = { + message: this.$getString('MessageRemoveUserWarning', [user.username]), + callback: (confirmed) => { + if (confirmed) { + this.deleteUser(user) + } + }, + type: 'yesNo' } + this.$store.commit('globals/setConfirmPrompt', payload) + }, + deleteUser(user) { + this.isDeletingUser = true + this.$axios + .$delete(`/api/users/${user.id}`) + .then((data) => { + if (data.error) { + this.$toast.error(data.error) + } else { + this.$toast.success(this.$strings.ToastUserDeleteSuccess) + } + }) + .catch((error) => { + console.error('Failed to delete user', error) + this.$toast.error(this.$strings.ToastUserDeleteFailed) + }) + .finally(() => { + this.isDeletingUser = false + }) }, editUser(user) { this.$emit('edit', user) diff --git a/client/pages/collection/_id.vue b/client/pages/collection/_id.vue index ec40d722..b70940c7 100644 --- a/client/pages/collection/_id.vue +++ b/client/pages/collection/_id.vue @@ -176,21 +176,31 @@ export default { this.$store.commit('globals/setEditCollection', this.collection) }, removeClick() { - if (confirm(this.$getString('MessageConfirmRemoveCollection', [this.collectionName]))) { - this.processing = true - this.$axios - .$delete(`/api/collections/${this.collection.id}`) - .then(() => { - this.$toast.success(this.$strings.ToastCollectionRemoveSuccess) - }) - .catch((error) => { - console.error('Failed to remove collection', error) - this.$toast.error(this.$strings.ToastCollectionRemoveFailed) - }) - .finally(() => { - this.processing = false - }) + const payload = { + message: this.$getString('MessageConfirmRemoveCollection', [this.collectionName]), + callback: (confirmed) => { + if (confirmed) { + this.deleteCollection() + } + }, + type: 'yesNo' } + this.$store.commit('globals/setConfirmPrompt', payload) + }, + deleteCollection() { + this.processing = true + this.$axios + .$delete(`/api/collections/${this.collection.id}`) + .then(() => { + this.$toast.success(this.$strings.ToastCollectionRemoveSuccess) + }) + .catch((error) => { + console.error('Failed to remove collection', error) + this.$toast.error(this.$strings.ToastCollectionRemoveFailed) + }) + .finally(() => { + this.processing = false + }) }, clickPlay() { const queueItems = [] diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue index 1ba5aa54..5555250b 100644 --- a/client/pages/item/_id/index.vue +++ b/client/pages/item/_id/index.vue @@ -599,19 +599,31 @@ export default { }, clearProgressClick() { if (!this.userMediaProgress) return - if (confirm(this.$strings.MessageConfirmResetProgress)) { - this.resettingProgress = true - this.$axios - .$delete(`/api/me/progress/${this.userMediaProgress.id}`) - .then(() => { - console.log('Progress reset complete') - this.resettingProgress = false - }) - .catch((error) => { - console.error('Progress reset failed', error) - this.resettingProgress = false - }) + + const payload = { + message: this.$strings.MessageConfirmResetProgress, + callback: (confirmed) => { + if (confirmed) { + this.clearProgress() + } + }, + type: 'yesNo' } + this.$store.commit('globals/setConfirmPrompt', payload) + }, + clearProgress() { + this.resettingProgress = true + this.$axios + .$delete(`/api/me/progress/${this.userMediaProgress.id}`) + .then(() => { + console.log('Progress reset complete') + }) + .catch((error) => { + console.error('Progress reset failed', error) + }) + .finally(() => { + this.resettingProgress = false + }) }, clickRSSFeed() { this.$store.commit('globals/setRSSFeedOpenCloseModal', {