Merge pull request #1144 from nextcloud/enh/1142/confirm-deletion

Add provider deletion confirmation

Author: julien-nc

src/components/AdminSettings.vue

@@ -49,7 +49,7 @@
 			<NcModal v-if="showNewProvider"
 				size="large"
 				:name="t('user_oidc', 'Register a new provider')"
-				:can-close="false">
+				:no-close="true">
 				<div class="providermodal__wrapper">
 					<h3>{{ t('user_oidc', 'Register a new provider') }}</h3>
 					<p class="settings-hint">
@@ -87,9 +87,9 @@
 						</NcActionButton>
 					</NcActions>
 					<NcActions :style="customActionsStyle">
-						<NcActionButton @click="onRemove(provider)">
+						<NcActionButton @click="onProviderDeleteClick(provider)">
 							<template #icon>
-								<DeleteOutlineIcon :size="20" />
+								<TrashCanOutlineIcon :size="20" />
 							</template>
 							{{ t('user_oidc', 'Remove') }}
 						</NcActionButton>
@@ -100,25 +100,43 @@
 			<NcModal v-if="editProvider"
 				size="large"
 				:name="t('user_oidc', 'Update provider settings')"
-				:can-close="false">
+				:no-close="true">
 				<div class="providermodal__wrapper">
 					<h3>{{ t('user_oidc', 'Update provider settings') }}</h3>
 					<SettingsForm :provider="editProvider"
 						:update="true"
 						:submit-text="t('user_oidc', 'Update provider')"
 						@submit="onUpdate"
-						@cancel-form="editProvider=null" />
+						@cancel-form="editProvider = null" />
 				</div>
 			</NcModal>
+			<NcDialog v-model:open="showDeletionConfirmation"
+				:name="t('user_oidc', 'Confirm deletion')"
+				:message="deletionConfirmationMessage">
+				<template #actions>
+					<NcButton
+						@click="showDeletionConfirmation = false">
+						{{ t('user_oidc', 'Cancel') }}
+					</NcButton>
+					<NcButton
+						variant="error"
+						@click="confirmDelete">
+						<template #icon>
+							<TrashCanOutlineIcon />
+						</template>
+						{{ t('user_oidc', 'Delete') }}
+					</NcButton>
+				</template>
+			</NcDialog>
 		</div>
 	</div>
 </template>
 
 <script>
 import HelpCircleOutlineIcon from 'vue-material-design-icons/HelpCircleOutline.vue'
-import DeleteOutlineIcon from 'vue-material-design-icons/DeleteOutline.vue'
 import PencilOutlineIcon from 'vue-material-design-icons/PencilOutline.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import TrashCanOutlineIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
@@ -128,6 +146,7 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 
 import logger from '../logger.js'
@@ -143,7 +162,8 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcButton,
 		PencilOutlineIcon,
-		DeleteOutlineIcon,
+		TrashCanOutlineIcon,
+		NcDialog,
 		PlusIcon,
 		HelpCircleOutlineIcon,
 	},
@@ -193,8 +213,18 @@ export default {
 				'--color-background-hover': 'var(--color-background-darker)',
 			},
 			redirectUri: window.location.protocol + '//' + window.location.host + generateUrl('/apps/user_oidc/code'),
+			showDeletionConfirmation: false,
+			providerToDelete: null,
 		}
 	},
+	computed: {
+		deletionConfirmationMessage() {
+			if (this.providerToDelete) {
+				return t('user_oidc', 'Are you sure you want to delete the provider "{providerName}"?', { providerName: this.providerToDelete.identifier })
+			}
+			return ''
+		},
+	},
 	methods: {
 		async onId4MeChange(newValue) {
 			logger.info('ID4me state changed', { enabled: newValue })
@@ -255,7 +285,15 @@ export default {
 				showError(t('user_oidc', 'Could not update the provider:') + ' ' + (error.response?.data?.message ?? error.message))
 			}
 		},
-		async onRemove(provider) {
+		onProviderDeleteClick(provider) {
+			this.providerToDelete = provider
+			this.showDeletionConfirmation = true
+		},
+		confirmDelete() {
+			this.deleteProvider(this.providerToDelete)
+			this.showDeletionConfirmation = false
+		},
+		async deleteProvider(provider) {
 			await confirmPassword()
 			logger.info('Remove oidc provider', { provider })
 
@@ -268,6 +306,7 @@ export default {
 				logger.error('Could not remove a provider: ' + error.message, { error })
 				showError(t('user_oidc', 'Could not remove provider: {msg}', { msg: error.message }))
 			}
+			this.providerToDelete = null
 		},
 		async onSubmit() {
 			await confirmPassword()