enh: Move to NcDialog and cleanup component

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

src/components/PasswordDialog.vue

@@ -21,54 +21,52 @@
 -->
 
 <template>
-	<NcModal :id="dialogId"
-		class="dialog"
-		size="small"
+	<NcDialog :id="dialogId"
+		:name="dialogName"
 		:container="null"
-		@close="close">
-		<div class="dialog__container">
-			<h2 class="dialog__title">
-				{{ titleText }}
-			</h2>
-			<p>{{ subtitleText }}</p>
-
-			<NcPasswordField ref="field"
-				:value.sync="password"
-				:label="passwordLabelText"
-				:helper-text="showError ? errorText : ''"
-				:error="showError"
-				required
-				@keydown.enter="confirm" />
-
+		contentClasses="vue-password-confirmation"
+		@update:open="close">
+		<template #actions>
 			<NcButton type="primary"
-				class="dialog__button"
 				:disabled="!password"
-				:aria-label="confirmText"
 				@click="confirm">
 				{{ confirmText }}
 			</NcButton>
-		</div>
-	</NcModal>
+		</template>
+		<!-- Dialog content -->
+		<p>{{ subtitleText }}</p>
+		<NcPasswordField ref="field"
+			:value.sync="password"
+			:label="passwordLabelText"
+			:helper-text="showError ? errorText : ''"
+			:error="showError"
+			required
+			@keydown.enter="confirm" />
+	</NcDialog>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
 import axios from '@nextcloud/axios'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import { generateUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
 import { DIALOG_ID } from '../globals.js'
 import { t } from '../utils/l10n.js'
 
 import type { ComponentInstance } from 'vue'
 
-export default Vue.extend({
+type ICanFocus = ComponentInstance & {
+	focus: () => void
+}
+
+export default defineComponent({
 	name: 'PasswordDialog',
 
 	components: {
 		NcButton,
-		NcModal,
+		NcDialog,
 		NcPasswordField,
 	},
 
@@ -77,7 +75,7 @@ export default Vue.extend({
 			password: '',
 			showError: false,
 			dialogId: DIALOG_ID,
-			titleText: t('Confirm your password'),
+			dialogName: t('Confirm your password'),
 			subtitleText: t('This action needs authentication'),
 			passwordLabelText: t('Password'),
 			errorText: t('Wrong password'),
@@ -87,7 +85,7 @@ export default Vue.extend({
 
 	mounted() {
 		this.$nextTick(() => {
-			((this.$refs.field as ComponentInstance).$el.querySelector('input[type="password"]') as HTMLInputElement).focus()
+			(this.$refs.field as ICanFocus).focus()
 		})
 	},
 
@@ -107,29 +105,21 @@ export default Vue.extend({
 			}
 		},
 
-		close(): void {
-			this.$emit('close')
+		close(open: boolean): void {
+			if (!open) {
+				this.$emit('close')
+			}
 		},
 	},
 })
 </script>
 
-<style lang="scss" scoped>
-.dialog {
-	&__container {
-		display: flex;
-		flex-direction: column;
-		margin: 30px;
-		gap: 10px 0;
-	}
-
-	&__title {
-		margin-bottom: 0;
-	}
-
-	&__button {
-		margin-top: 6px;
-		align-self: flex-end;
-	}
+<style lang="scss">
+.vue-password-confirmation {
+	display: flex;
+	flex-direction: column;
+	margin-inline: 12px;
+	margin-block-end: 12px;
+	gap: 10px 0;
 }
 </style>