feat: Deprecate `OC.dialogs.prompt` an replace with Vue implementation

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

2 files changed, 125 insertions, 61 deletions

diff --git a/core/src/OC/dialogs.js b/core/src/OC/dialogs.js
index 77a6657955c..c00a570c963 100644
--- a/core/src/OC/dialogs.js
+++ b/core/src/OC/dialogs.js
@@ -51,8 +51,9 @@ import IconMove from '@mdi/svg/svg/folder-move.svg?raw'
 import IconCopy from '@mdi/svg/svg/folder-multiple.svg?raw'
 
 import OC from './index.js'
-import { FilePickerType, getFilePickerBuilder } from '@nextcloud/dialogs'
+import { FilePickerType, getFilePickerBuilder, spawnDialog } from '@nextcloud/dialogs'
 import { basename } from 'path'
+import { defineAsyncComponent } from 'vue'
 
 /**
  * this class to ease the usage of jquery dialogs
@@ -169,69 +170,25 @@ const Dialogs = {
 	 * @param {string} name name of the input field
 	 * @param {boolean} password whether the input should be a password input
 	 * @returns {Promise}
+	 *
+	 * @deprecated Use NcDialog from `@nextcloud/vue` instead
 	 */
 	prompt: function(text, title, callback, modal, name, password) {
-		return $.when(this._getMessageTemplate()).then(function($tmpl) {
-			var dialogName = 'oc-dialog-' + Dialogs.dialogsCounter + '-content'
-			var dialogId = '#' + dialogName
-			var $dlg = $tmpl.octemplate({
-				dialog_name: dialogName,
-				title: title,
-				message: text,
-				type: 'notice'
-			})
-			var input = $('<input/>')
-			input.attr('type', password ? 'password' : 'text').attr('id', dialogName + '-input').attr('placeholder', name)
-			var label = $('<label/>').attr('for', dialogName + '-input').text(name + ': ')
-			$dlg.append(label)
-			$dlg.append(input)
-			if (modal === undefined) {
-				modal = false
-			}
-			$('body').append($dlg)
-
-			// wrap callback in _.once():
-			// only call callback once and not twice (button handler and close
-			// event) but call it for the close event, if ESC or the x is hit
-			if (callback !== undefined) {
-				callback = _.once(callback)
-			}
-
-			var buttonlist = [{
-				text: t('core', 'No'),
-				click: function() {
-					if (callback !== undefined) {
-						// eslint-disable-next-line standard/no-callback-literal
-						callback(false, input.val())
-					}
-					$(dialogId).ocdialog('close')
-				}
-			}, {
-				text: t('core', 'Yes'),
-				click: function() {
-					if (callback !== undefined) {
-						// eslint-disable-next-line standard/no-callback-literal
-						callback(true, input.val())
-					}
-					$(dialogId).ocdialog('close')
+		return new Promise((resolve) => {
+			spawnDialog(
+				defineAsyncComponent(() => import('../components/LegacyDialogPrompt.vue')),
+				{
+					text,
+					name: title,
+					callback,
+					inputName: name,
+					isPassword: !!password
 				},
-				defaultButton: true
-			}]
-
-			$(dialogId).ocdialog({
-				closeOnEscape: true,
-				modal: modal,
-				buttons: buttonlist,
-				close: function() {
-					// callback is already fired if Yes/No is clicked directly
-					if (callback !== undefined) {
-						// eslint-disable-next-line standard/no-callback-literal
-						callback(false, input.val())
-					}
-				}
-			})
-			input.focus()
-			Dialogs.dialogsCounter++
+				(...args) => {
+					callback(...args)
+					resolve()
+				},
+			)
 		})
 	},
 
diff --git a/core/src/components/LegacyDialogPrompt.vue b/core/src/components/LegacyDialogPrompt.vue
new file mode 100644
index 00000000000..ddaa5f5ffdb
--- /dev/null
+++ b/core/src/components/LegacyDialogPrompt.vue
@@ -0,0 +1,107 @@
+<template>
+	<NcDialog dialog-classes="legacy-prompt__dialog"
+		:buttons="buttons"
+		:name="name"
+		@update:open="$emit('close', false, inputValue)">
+		<p class="legacy-prompt__text" v-text="text" />
+		<NcPasswordField v-if="isPassword"
+			ref="input"
+			autocomplete="new-password"
+			class="legacy-prompt__input"
+			:label="name"
+			:name="inputName"
+			:value.sync="inputValue" />
+		<NcTextField v-else
+			ref="input"
+			class="legacy-prompt__input"
+			:label="name"
+			:name="inputName"
+			:value.sync="inputValue" />
+	</NcDialog>
+</template>
+
+<script lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+
+export default defineComponent({
+	name: 'LegacyDialogPrompt',
+
+	components: {
+		NcDialog,
+		NcTextField,
+		NcPasswordField,
+	},
+
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+
+		text: {
+			type: String,
+			required: true,
+		},
+
+		isPassword: {
+			type: Boolean,
+			required: true,
+		},
+
+		inputName: {
+			type: String,
+			default: 'prompt-input',
+		},
+	},
+
+	emits: ['close'],
+
+	data() {
+		return {
+			inputValue: '',
+		}
+	},
+
+	computed: {
+		buttons() {
+			return [
+				{
+					label: t('core', 'No'),
+					callback: () => this.$emit('close', false, this.inputValue),
+				},
+				{
+					label: t('core', 'Yes'),
+					type: 'primary',
+					callback: () => this.$emit('close', true, this.inputValue),
+				},
+			]
+		},
+	},
+
+	mounted() {
+		this.$nextTick(() => this.$refs.input?.focus?.())
+	},
+})
+</script>
+
+<style scoped lang="scss">
+.legacy-prompt {
+	&__text {
+		margin-block: 0 .75em;
+	}
+
+	&__input {
+		margin-block: 0 1em;
+	}
+}
+
+:deep(.legacy-prompt__dialog .dialog__actions) {
+	min-width: calc(100% - 12px);
+	justify-content: space-between;
+}
+</style>