From bc5839e5b5e2192ed7d2dd2173ab5ca72b1d8ebc Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Tue, 9 Jul 2024 12:09:42 +0200
Subject: chore(files_sharing): cleanup NewFileRequestDialog vue

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 .../src/components/NewFileRequestDialog.vue        |  13 +-
 .../FileRequestDatePassword.vue                    | 236 ---------------------
 .../NewFileRequestDialog/FileRequestFinish.vue     | 219 -------------------
 .../NewFileRequestDialog/FileRequestIntro.vue      | 153 -------------
 .../NewFileRequestDialogDatePassword.vue           | 236 +++++++++++++++++++++
 .../NewFileRequestDialogFinish.vue                 | 224 +++++++++++++++++++
 .../NewFileRequestDialogIntro.vue                  | 153 +++++++++++++
 7 files changed, 620 insertions(+), 614 deletions(-)
 delete mode 100644 apps/files_sharing/src/components/NewFileRequestDialog/FileRequestDatePassword.vue
 delete mode 100644 apps/files_sharing/src/components/NewFileRequestDialog/FileRequestFinish.vue
 delete mode 100644 apps/files_sharing/src/components/NewFileRequestDialog/FileRequestIntro.vue
 create mode 100644 apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogDatePassword.vue
 create mode 100644 apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogFinish.vue
 create mode 100644 apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogIntro.vue

(limited to 'apps/files_sharing/src')

diff --git a/apps/files_sharing/src/components/NewFileRequestDialog.vue b/apps/files_sharing/src/components/NewFileRequestDialog.vue
index 2f3eab0b091..b0a969c25f1 100644
--- a/apps/files_sharing/src/components/NewFileRequestDialog.vue
+++ b/apps/files_sharing/src/components/NewFileRequestDialog.vue
@@ -23,6 +23,7 @@
 		<form ref="form"
 			class="file-request-dialog__form"
 			aria-labelledby="file-request-dialog-description"
+			aria-live="polite"
 			data-cy-file-request-dialog-form
 			@submit.prevent.stop="">
 			<FileRequestIntro v-show="currentStep === STEP.FIRST"
@@ -33,8 +34,8 @@
 				:note.sync="note" />
 
 			<FileRequestDatePassword v-show="currentStep === STEP.SECOND"
-				:deadline.sync="deadline"
 				:disabled="loading"
+				:expiration-date.sync="expirationDate"
 				:password.sync="password" />
 
 			<FileRequestFinish v-if="share"
@@ -124,9 +125,9 @@ import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconNext from 'vue-material-design-icons/ArrowRight.vue'
 
-import FileRequestDatePassword from './NewFileRequestDialog/FileRequestDatePassword.vue'
-import FileRequestFinish from './NewFileRequestDialog/FileRequestFinish.vue'
-import FileRequestIntro from './NewFileRequestDialog/FileRequestIntro.vue'
+import FileRequestDatePassword from './NewFileRequestDialog/NewFileRequestDialogDatePassword.vue'
+import FileRequestFinish from './NewFileRequestDialog/NewFileRequestDialogFinish.vue'
+import FileRequestIntro from './NewFileRequestDialog/NewFileRequestDialogIntro.vue'
 import Share from '../models/Share'
 import logger from '../services/logger'
 
@@ -182,7 +183,7 @@ export default defineComponent({
 			label: '',
 			note: '',
 
-			deadline: null as Date | null,
+			expirationDate: null as Date | null,
 			password: null as string | null,
 
 			share: null as Share | null,
@@ -249,7 +250,7 @@ export default defineComponent({
 			this.loading = true
 
 			// Format must be YYYY-MM-DD
-			const expireDate = this.deadline ? this.deadline.toISOString().split('T')[0] : undefined
+			const expireDate = this.expirationDate ? this.expirationDate.toISOString().split('T')[0] : undefined
 			const shareUrl = generateOcsUrl('apps/files_sharing/api/v1/shares')
 			try {
 				const request = await axios.post<OCSResponse>(shareUrl, {
diff --git a/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestDatePassword.vue b/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestDatePassword.vue
deleted file mode 100644
index cf7cf4bcb08..00000000000
--- a/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestDatePassword.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div>
-		<!-- Password and expiration summary -->
-		<NcNoteCard v-if="passwordAndExpirationSummary" type="success">
-			{{ passwordAndExpirationSummary }}
-		</NcNoteCard>
-
-		<!-- Expiration date -->
-		<fieldset class="file-request-dialog__expiration" data-cy-file-request-dialog-fieldset="expiration">
-			<NcNoteCard v-if="defaultExpireDateEnforced" type="info">
-				{{ t('files_sharing', 'Your administrator has enforced a default expiration date with a maximum {days} days.', { days: defaultExpireDate }) }}
-			</NcNoteCard>
-
-			<!-- Enable expiration -->
-			<legend>{{ t('files_sharing', 'When should the request expire ?') }}</legend>
-			<NcCheckboxRadioSwitch v-show="!defaultExpireDateEnforced"
-				:checked="defaultExpireDateEnforced || deadline !== null"
-				:disabled="disabled || defaultExpireDateEnforced"
-				@update:checked="onToggleDeadline">
-				{{ t('files_sharing', 'Set a submission deadline') }}
-			</NcCheckboxRadioSwitch>
-
-			<!-- Date picker -->
-			<NcDateTimePickerNative v-if="deadline !== null"
-				id="file-request-dialog-deadline"
-				:disabled="disabled"
-				:hide-label="true"
-				:max="maxDate"
-				:min="minDate"
-				:placeholder="t('files_sharing', 'Select a date')"
-				:required="defaultExpireDateEnforced"
-				:value="deadline"
-				name="deadline"
-				type="date"
-				@update:value="$emit('update:deadline', $event)"/>
-		</fieldset>
-
-		<!-- Password -->
-		<fieldset class="file-request-dialog__password" data-cy-file-request-dialog-fieldset="password">
-			<NcNoteCard v-if="enforcePasswordForPublicLink" type="info">
-				{{ t('files_sharing', 'Your administrator has enforced a password protection.') }}
-			</NcNoteCard>
-
-			<!-- Enable password -->
-			<legend>{{ t('files_sharing', 'What password should be used for the request ?') }}</legend>
-			<NcCheckboxRadioSwitch v-show="!enforcePasswordForPublicLink"
-				:checked="enforcePasswordForPublicLink || password !== null"
-				:disabled="disabled || enforcePasswordForPublicLink"
-				@update:checked="onTogglePassword">
-				{{ t('files_sharing', 'Set a password') }}
-			</NcCheckboxRadioSwitch>
-
-			<div v-if="password !== null" class="file-request-dialog__password-field">
-				<NcPasswordField ref="passwordField"
-					:check-password-strength="true"
-					:disabled="disabled"
-					:label-outside="true"
-					:placeholder="t('files_sharing', 'Enter a valid password')"
-					:required="false"
-					:value="password"
-					name="password"
-					@update:value="$emit('update:password', $event)" />
-				<NcButton :aria-label="t('files_sharing', 'Generate a new password')"
-					:title="t('files_sharing', 'Generate a new password')"
-					type="tertiary-no-background"
-					@click="onGeneratePassword">
-					<template #icon>
-						<IconPasswordGen :size="20" />
-					</template>
-				</NcButton>
-			</div>
-		</fieldset>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from 'vue'
-import { translate } from '@nextcloud/l10n'
-
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
-import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
-
-import IconPasswordGen from 'vue-material-design-icons/AutoFix.vue'
-
-import Config from '../../services/ConfigService'
-import GeneratePassword from '../../utils/GeneratePassword'
-
-const sharingConfig = new Config()
-
-export default defineComponent({
-	name: 'FileRequestDatePassword',
-
-	components: {
-		IconPasswordGen,
-		NcButton,
-		NcCheckboxRadioSwitch,
-		NcDateTimePickerNative,
-		NcNoteCard,
-		NcPasswordField,
-	},
-
-	props: {
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		deadline: {
-			type: Date as PropType<Date | null>,
-			required: false,
-			default: null,
-		},
-		password: {
-			type: String as PropType<string | null>,
-			required: false,
-			default: null,
-		},
-	},
-
-	emits: [
-		'update:deadline',
-		'update:password',
-	],
-
-	setup() {
-		return {
-			t: translate,
-
-			// Default expiration date if defaultExpireDateEnabled is true
-			defaultExpireDate: sharingConfig.defaultExpireDate,
-			// Default expiration date is enabled for public links (can be disabled)
-			defaultExpireDateEnabled: sharingConfig.isDefaultExpireDateEnabled,
-			// Default expiration date is enforced for public links (can't be disabled)
-			defaultExpireDateEnforced: sharingConfig.isDefaultExpireDateEnforced,
-
-			// Default password protection is enabled for public links (can be disabled)
-			enableLinkPasswordByDefault: sharingConfig.enableLinkPasswordByDefault,
-			// Password protection is enforced for public links (can't be disabled)
-			enforcePasswordForPublicLink: sharingConfig.enforcePasswordForPublicLink,
-		}
-	},
-
-	data() {
-		return {
-			maxDate: null as Date | null,
-			minDate: new Date(new Date().setDate(new Date().getDate() + 1)),
-		}
-	},
-
-	computed: {
-		passwordAndExpirationSummary(): string {
-			if (this.deadline && this.password) {
-				return this.t('files_sharing', 'The request will expire on {date} at midnight and will be password protected.', {
-					date: this.deadline.toLocaleDateString(),
-				})
-			}
-
-			if (this.deadline) {
-				return this.t('files_sharing', 'The request will expire on {date} at midnight.', {
-					date: this.deadline.toLocaleDateString(),
-				})
-			}
-
-			if (this.password) {
-				return this.t('files_sharing', 'The request will be password protected.')
-			}
-
-			return ''
-		},
-	},
-
-	mounted() {
-		// If defined, we set the default expiration date
-		if (this.defaultExpireDate) {
-			this.$emit('update:deadline', sharingConfig.defaultExpirationDate)
-		}
-
-		// If enforced, we cannot set a date before the default expiration days (see admin settings)
-		if (this.defaultExpireDateEnforced) {
-			this.maxDate = sharingConfig.defaultExpirationDate
-		}
-
-		// If enabled by default, we generate a valid password
-		if (this.enableLinkPasswordByDefault) {
-			this.generatePassword()
-		}
-	},
-
-	methods: {
-		onToggleDeadline(checked: boolean) {
-			this.$emit('update:deadline', checked ? new Date() : null)
-		},
-
-		async onTogglePassword(checked: boolean) {
-			if (checked) {
-				this.generatePassword()
-				return
-			}
-			this.$emit('update:password', null)
-		},
-
-
-		async onGeneratePassword() {
-			await this.generatePassword()
-			this.showPassword()
-		},
-
-		async generatePassword() {
-			await GeneratePassword().then(password => {
-				this.$emit('update:password', password)
-			})
-		},
-
-		showPassword() {
-			// @ts-expect-error isPasswordHidden is private
-			this.$refs.passwordField.isPasswordHidden = false
-		},
-	},
-})
-</script>
-
-<style scoped lang="scss">
-.file-request-dialog__password-field {
-	display: flex;
-	align-items: flex-start;
-	gap: 8px;
-}
-</style>
diff --git a/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestFinish.vue b/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestFinish.vue
deleted file mode 100644
index 0c30a8bf261..00000000000
--- a/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestFinish.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div>
-		<!-- Request note -->
-		<NcNoteCard type="success">
-			{{ t('files_sharing', 'Once created, you can share the link below to allow people to upload files to your directory.') }}
-		</NcNoteCard>
-
-		<!-- Copy share link -->
-		<NcInputField ref="clipboard"
-			:value="shareLink"
-			:label="t('files_sharing', 'Share link')"
-			:readonly="true"
-			:show-trailing-button="true"
-			:trailing-button-label="t('files_sharing', 'Copy to clipboard')"
-			@click="copyShareLink"
-			@click-trailing-button="copyShareLink">
-			<template #trailing-button-icon>
-				<IconCheck v-if="isCopied" :size="20" @click="isCopied = false" />
-				<IconClipboard v-else :size="20" @click="copyShareLink" />
-			</template>
-		</NcInputField>
-
-		<template v-if="isShareByMailEnabled">
-			<!-- Email share-->
-			<NcTextField :value.sync="email"
-				:label="t('files_sharing', 'Send link via email')"
-				:placeholder="t('files_sharing', 'Enter an email address or paste a list')"
-				type="email"
-				@keypress.enter.stop="addNewEmail"
-				@paste.stop.prevent="onPasteEmails" />
-
-			<!-- Email list -->
-			<div v-if="emails.length > 0" class="file-request-dialog__emails">
-				<NcChip v-for="mail in emails"
-					:key="mail"
-					:aria-label-close="t('files_sharing', 'Remove email')"
-					:text="mail"
-					@close="$emit('remove-email', mail)">
-					<template #icon>
-						<NcAvatar :disable-menu="true"
-							:disable-tooltip="true"
-							:is-guest="true"
-							:size="24"
-							:user="mail" />
-					</template>
-				</NcChip>
-			</div>
-		</template>
-	</div>
-</template>
-
-<script lang="ts">
-import type { PropType } from 'vue'
-import Share from '../../models/Share'
-
-import { defineComponent } from 'vue'
-import { generateUrl } from '@nextcloud/router'
-import { showError, showSuccess } from '@nextcloud/dialogs'
-import { translate, translatePlural } from '@nextcloud/l10n'
-
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
-import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
-
-import IconCheck from 'vue-material-design-icons/Check.vue'
-import IconClipboard from 'vue-material-design-icons/Clipboard.vue'
-
-export default defineComponent({
-	name: 'FileRequestFinish',
-
-	components: {
-		IconCheck,
-		IconClipboard,
-		NcAvatar,
-		NcInputField,
-		NcNoteCard,
-		NcTextField,
-		NcChip,
-	},
-
-	props: {
-		share: {
-			type: Object as PropType<Share>,
-			required: true,
-		},
-		emails: {
-			type: Array as PropType<string[]>,
-			required: true,
-		},
-		isShareByMailEnabled: {
-			type: Boolean,
-			required: true,
-		},
-	},
-
-	emits: ['add-email', 'remove-email'],
-
-	setup() {
-		return {
-			n: translatePlural,
-			t: translate,
-		}
-	},
-
-	data() {
-		return {
-			isCopied: false,
-			email: '',
-		}
-	},
-
-	computed: {
-		shareLink() {
-			return window.location.protocol + '//' + window.location.host + generateUrl('/s/') + this.share.token
-		},
-	},
-
-	methods: {
-		async copyShareLink(event: MouseEvent) {
-			if (!navigator.clipboard) {
-				// Clipboard API not available
-				showError(this.t('files_sharing', 'Clipboard is not available'))
-				return
-			}
-
-			await navigator.clipboard.writeText(this.shareLink)
-
-			showSuccess(this.t('files_sharing', 'Link copied to clipboard'))
-			this.isCopied = true
-			event.target?.select?.()
-
-			setTimeout(() => {
-				this.isCopied = false
-			}, 3000)
-		},
-
-		addNewEmail(e: KeyboardEvent) {
-			if (e.target instanceof HTMLInputElement) {
-				if (e.target.checkValidity() === false) {
-					e.target.reportValidity()
-					return
-				}
-
-				// The email is already in the list
-				if (this.emails.includes(this.email.trim())) {
-					e.target.setCustomValidity(this.t('files_sharing', 'Email already added'))
-					e.target.reportValidity()
-					return
-				}
-
-				if (!this.isValidEmail(this.email.trim())) {
-					e.target.setCustomValidity(this.t('files_sharing', 'Invalid email address'))
-					e.target.reportValidity()
-					return
-				}
-
-				this.$emit('add-email', this.email.trim())
-				this.email = ''
-			}
-		},
-
-		// Handle dumping a list of emails
-		onPasteEmails(e: ClipboardEvent) {
-			const clipboardData = e.clipboardData
-			if (!clipboardData) {
-				return
-			}
-
-			const pastedText = clipboardData.getData('text')
-			const emails = pastedText.split(/[\s,;]+/).filter(Boolean).map((email) => email.trim())
-
-			const duplicateEmails = emails.filter((email) => this.emails.includes(email))
-			const validEmails = emails.filter((email) => this.isValidEmail(email) && !duplicateEmails.includes(email))
-			const invalidEmails = emails.filter((email) => !this.isValidEmail(email))
-			validEmails.forEach((email) => this.$emit('add-email', email))
-
-			// Warn about invalid emails
-			if (invalidEmails.length > 0) {
-				showError(this.n('files_sharing', 'The following email address is not valid: {emails}', 'The following email addresses are not valid: {emails}', invalidEmails.length, { emails: invalidEmails.join(', ') }))
-			}
-
-			// Warn about duplicate emails
-			if (duplicateEmails.length > 0) {
-				showError(this.n('files_sharing', '1 email address already added', '{count} email addresses already added', duplicateEmails.length, { count: duplicateEmails.length }))
-			}
-
-			if (validEmails.length > 0) {
-				showSuccess(this.n('files_sharing', '1 email address added', '{count} email addresses added', validEmails.length, { count: validEmails.length }))
-			}
-
-			this.email = ''
-		},
-
-		isValidEmail(email) {
-			const regExpEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-			return regExpEmail.test(email)
-		},
-	},
-})
-</script>
-<style scoped>
-.input-field,
-.file-request-dialog__emails {
-	margin-top: var(--secondary-margin);
-}
-
-.file-request-dialog__emails {
-	display: flex;
-	gap: var(--default-grid-baseline);
-	flex-wrap: wrap;
-}
-</style>
diff --git a/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestIntro.vue b/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestIntro.vue
deleted file mode 100644
index 766fbc3fc22..00000000000
--- a/apps/files_sharing/src/components/NewFileRequestDialog/FileRequestIntro.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div>
-		<!-- Request label -->
-		<fieldset class="file-request-dialog__label" data-cy-file-request-dialog-fieldset="label">
-			<legend>
-				{{ t('files_sharing', 'What are you requesting ?') }}
-			</legend>
-			<NcTextField :value="label"
-				:disabled="disabled"
-				:label-outside="true"
-				:placeholder="t('files_sharing', 'Birthday party photos, History assignment…')"
-				:required="false"
-				name="label"
-				@update:value="$emit('update:label', $event)" />
-		</fieldset>
-
-		<!-- Request destination -->
-		<fieldset class="file-request-dialog__destination" data-cy-file-request-dialog-fieldset="destination">
-			<legend>
-				{{ t('files_sharing', 'Where should these files go ?') }}
-			</legend>
-			<NcTextField :value="destination"
-				:disabled="disabled"
-				:helper-text="t('files_sharing', 'The uploaded files are visible only to you unless you choose to share them.')"
-				:label-outside="true"
-				:minlength="2/* cannot share root */"
-				:placeholder="t('files_sharing', 'Select a destination')"
-				:readonly="false /* cannot validate a readonly input */"
-				:required="true /* cannot be empty */"
-				:show-trailing-button="destination !== context.path"
-				:trailing-button-icon="'undo'"
-				:trailing-button-label="t('files_sharing', 'Revert to default')"
-				name="destination"
-				@click="onPickDestination"
-				@keypress.prevent.stop="/* prevent typing in the input, we use the picker */"
-				@paste.prevent.stop="/* prevent pasting in the input, we use the picker */"
-				@trailing-button-click="$emit('update:destination', '')">
-				<IconFolder :size="18" />
-			</NcTextField>
-		</fieldset>
-
-		<!-- Request note -->
-		<fieldset class="file-request-dialog__note" data-cy-file-request-dialog-fieldset="note">
-			<legend>
-				{{ t('files_sharing', 'Add a note') }}
-			</legend>
-			<NcTextArea :value="note"
-				:disabled="disabled"
-				:label-outside="true"
-				:placeholder="t('files_sharing', 'Add a note to help people understand what you are requesting.')"
-				:required="false"
-				name="note"
-				@update:value="$emit('update:note', $event)" />
-		</fieldset>
-	</div>
-</template>
-
-<script lang="ts">
-import type { PropType } from 'vue'
-import type { Folder, Node } from '@nextcloud/files'
-
-import { defineComponent } from 'vue'
-import { getFilePickerBuilder } from '@nextcloud/dialogs'
-import { translate } from '@nextcloud/l10n'
-
-import IconFolder from 'vue-material-design-icons/Folder.vue'
-import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-
-export default defineComponent({
-	name: 'FileRequestIntro',
-
-	components: {
-		IconFolder,
-		NcTextArea,
-		NcTextField,
-	},
-
-	props: {
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		context: {
-			type: Object as PropType<Folder>,
-			required: true,
-		},
-		label: {
-			type: String,
-			required: true,
-		},
-		destination: {
-			type: String,
-			required: true,
-		},
-		note: {
-			type: String,
-			required: true,
-		},
-	},
-
-	emits: [
-		'update:destination',
-		'update:label',
-		'update:note',
-	],
-
-	setup() {
-		return {
-			t: translate,
-		}
-	},
-
-	methods: {
-		onPickDestination() {
-			const filepicker = getFilePickerBuilder(this.t('files_sharing', 'Select a destination'))
-				.addMimeTypeFilter('httpd/unix-directory')
-				.allowDirectories(true)
-				.addButton({
-					label: this.t('files_sharing', 'Select'),
-					callback: this.onPickedDestination,
-				})
-				.setFilter(node => node.path !== '/')
-				.startAt(this.destination)
-				.build()
-			try {
-				filepicker.pick()
-			} catch (e) {
-				// ignore cancel
-			}
-		},
-
-		onPickedDestination(nodes: Node[]) {
-			const node = nodes[0]
-			if (node) {
-				this.$emit('update:destination', node.path)
-			}
-		},
-	},
-})
-</script>
-<style scoped>
-.file-request-dialog__note :deep(textarea) {
-	width: 100% !important;
-	min-height: 80px;
-}
-</style>
diff --git a/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogDatePassword.vue b/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogDatePassword.vue
new file mode 100644
index 00000000000..1087fdd5a06
--- /dev/null
+++ b/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogDatePassword.vue
@@ -0,0 +1,236 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div>
+		<!-- Password and expiration summary -->
+		<NcNoteCard v-if="passwordAndExpirationSummary" type="success">
+			{{ passwordAndExpirationSummary }}
+		</NcNoteCard>
+
+		<!-- Expiration date -->
+		<fieldset class="file-request-dialog__expiration" data-cy-file-request-dialog-fieldset="expiration">
+			<NcNoteCard v-if="defaultExpireDateEnforced" type="info">
+				{{ t('files_sharing', 'Your administrator has enforced a default expiration date with a maximum {days} days.', { days: defaultExpireDate }) }}
+			</NcNoteCard>
+
+			<!-- Enable expiration -->
+			<legend>{{ t('files_sharing', 'When should the request expire ?') }}</legend>
+			<NcCheckboxRadioSwitch v-show="!defaultExpireDateEnforced"
+				:checked="defaultExpireDateEnforced || expirationDate !== null"
+				:disabled="disabled || defaultExpireDateEnforced"
+				@update:checked="onToggleDeadline">
+				{{ t('files_sharing', 'Set a submission expirationDate') }}
+			</NcCheckboxRadioSwitch>
+
+			<!-- Date picker -->
+			<NcDateTimePickerNative v-if="expirationDate !== null"
+				id="file-request-dialog-expirationDate"
+				:disabled="disabled"
+				:hide-label="true"
+				:max="maxDate"
+				:min="minDate"
+				:placeholder="t('files_sharing', 'Select a date')"
+				:required="defaultExpireDateEnforced"
+				:value="expirationDate"
+				name="expirationDate"
+				type="date"
+				@update:value="$emit('update:expirationDate', $event)"/>
+		</fieldset>
+
+		<!-- Password -->
+		<fieldset class="file-request-dialog__password" data-cy-file-request-dialog-fieldset="password">
+			<NcNoteCard v-if="enforcePasswordForPublicLink" type="info">
+				{{ t('files_sharing', 'Your administrator has enforced a password protection.') }}
+			</NcNoteCard>
+
+			<!-- Enable password -->
+			<legend>{{ t('files_sharing', 'What password should be used for the request ?') }}</legend>
+			<NcCheckboxRadioSwitch v-show="!enforcePasswordForPublicLink"
+				:checked="enforcePasswordForPublicLink || password !== null"
+				:disabled="disabled || enforcePasswordForPublicLink"
+				@update:checked="onTogglePassword">
+				{{ t('files_sharing', 'Set a password') }}
+			</NcCheckboxRadioSwitch>
+
+			<div v-if="password !== null" class="file-request-dialog__password-field">
+				<NcPasswordField ref="passwordField"
+					:check-password-strength="true"
+					:disabled="disabled"
+					:label-outside="true"
+					:placeholder="t('files_sharing', 'Enter a valid password')"
+					:required="false"
+					:value="password"
+					name="password"
+					@update:value="$emit('update:password', $event)" />
+				<NcButton :aria-label="t('files_sharing', 'Generate a new password')"
+					:title="t('files_sharing', 'Generate a new password')"
+					type="tertiary-no-background"
+					@click="onGeneratePassword">
+					<template #icon>
+						<IconPasswordGen :size="20" />
+					</template>
+				</NcButton>
+			</div>
+		</fieldset>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { translate } from '@nextcloud/l10n'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+
+import IconPasswordGen from 'vue-material-design-icons/AutoFix.vue'
+
+import Config from '../../services/ConfigService'
+import GeneratePassword from '../../utils/GeneratePassword'
+
+const sharingConfig = new Config()
+
+export default defineComponent({
+	name: 'FileRequestDatePassword',
+
+	components: {
+		IconPasswordGen,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDateTimePickerNative,
+		NcNoteCard,
+		NcPasswordField,
+	},
+
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		expirationDate: {
+			type: Date as PropType<Date | null>,
+			required: false,
+			default: null,
+		},
+		password: {
+			type: String as PropType<string | null>,
+			required: false,
+			default: null,
+		},
+	},
+
+	emits: [
+		'update:expirationDate',
+		'update:password',
+	],
+
+	setup() {
+		return {
+			t: translate,
+
+			// Default expiration date if defaultExpireDateEnabled is true
+			defaultExpireDate: sharingConfig.defaultExpireDate,
+			// Default expiration date is enabled for public links (can be disabled)
+			defaultExpireDateEnabled: sharingConfig.isDefaultExpireDateEnabled,
+			// Default expiration date is enforced for public links (can't be disabled)
+			defaultExpireDateEnforced: sharingConfig.isDefaultExpireDateEnforced,
+
+			// Default password protection is enabled for public links (can be disabled)
+			enableLinkPasswordByDefault: sharingConfig.enableLinkPasswordByDefault,
+			// Password protection is enforced for public links (can't be disabled)
+			enforcePasswordForPublicLink: sharingConfig.enforcePasswordForPublicLink,
+		}
+	},
+
+	data() {
+		return {
+			maxDate: null as Date | null,
+			minDate: new Date(new Date().setDate(new Date().getDate() + 1)),
+		}
+	},
+
+	computed: {
+		passwordAndExpirationSummary(): string {
+			if (this.expirationDate && this.password) {
+				return this.t('files_sharing', 'The request will expire on {date} at midnight and will be password protected.', {
+					date: this.expirationDate.toLocaleDateString(),
+				})
+			}
+
+			if (this.expirationDate) {
+				return this.t('files_sharing', 'The request will expire on {date} at midnight.', {
+					date: this.expirationDate.toLocaleDateString(),
+				})
+			}
+
+			if (this.password) {
+				return this.t('files_sharing', 'The request will be password protected.')
+			}
+
+			return ''
+		},
+	},
+
+	mounted() {
+		// If defined, we set the default expiration date
+		if (this.defaultExpireDate) {
+			this.$emit('update:expirationDate', sharingConfig.defaultExpirationDate)
+		}
+
+		// If enforced, we cannot set a date before the default expiration days (see admin settings)
+		if (this.defaultExpireDateEnforced) {
+			this.maxDate = sharingConfig.defaultExpirationDate
+		}
+
+		// If enabled by default, we generate a valid password
+		if (this.enableLinkPasswordByDefault) {
+			this.generatePassword()
+		}
+	},
+
+	methods: {
+		onToggleDeadline(checked: boolean) {
+			this.$emit('update:expirationDate', checked ? new Date() : null)
+		},
+
+		async onTogglePassword(checked: boolean) {
+			if (checked) {
+				this.generatePassword()
+				return
+			}
+			this.$emit('update:password', null)
+		},
+
+
+		async onGeneratePassword() {
+			await this.generatePassword()
+			this.showPassword()
+		},
+
+		async generatePassword() {
+			await GeneratePassword().then(password => {
+				this.$emit('update:password', password)
+			})
+		},
+
+		showPassword() {
+			// @ts-expect-error isPasswordHidden is private
+			this.$refs.passwordField.isPasswordHidden = false
+		},
+	},
+})
+</script>
+
+<style scoped lang="scss">
+.file-request-dialog__password-field {
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+}
+</style>
diff --git a/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogFinish.vue b/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogFinish.vue
new file mode 100644
index 00000000000..423565f4d48
--- /dev/null
+++ b/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogFinish.vue
@@ -0,0 +1,224 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div>
+		<!-- Request note -->
+		<NcNoteCard type="success">
+			{{ t('files_sharing', 'Once created, you can share the link below to allow people to upload files to your directory.') }}
+		</NcNoteCard>
+
+		<!-- Copy share link -->
+		<NcInputField ref="clipboard"
+			:value="shareLink"
+			:label="t('files_sharing', 'Share link')"
+			:readonly="true"
+			:show-trailing-button="true"
+			:trailing-button-label="t('files_sharing', 'Copy to clipboard')"
+			@click="copyShareLink"
+			@click-trailing-button="copyShareLink">
+			<template #trailing-button-icon>
+				<IconCheck v-if="isCopied" :size="20" @click="isCopied = false" />
+				<IconClipboard v-else :size="20" @click="copyShareLink" />
+			</template>
+		</NcInputField>
+
+		<template v-if="isShareByMailEnabled">
+			<!-- Email share-->
+			<NcTextField :value.sync="email"
+				:label="t('files_sharing', 'Send link via email')"
+				:placeholder="t('files_sharing', 'Enter an email address or paste a list')"
+				type="email"
+				@keypress.enter.stop="addNewEmail"
+				@paste.stop.prevent="onPasteEmails" />
+
+			<!-- Email list -->
+			<div v-if="emails.length > 0" class="file-request-dialog__emails">
+				<NcChip v-for="mail in emails"
+					:key="mail"
+					:aria-label-close="t('files_sharing', 'Remove email')"
+					:text="mail"
+					@close="$emit('remove-email', mail)">
+					<template #icon>
+						<NcAvatar :disable-menu="true"
+							:disable-tooltip="true"
+							:is-guest="true"
+							:size="24"
+							:user="mail" />
+					</template>
+				</NcChip>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import Share from '../../models/Share'
+
+import { defineComponent } from 'vue'
+import { generateUrl } from '@nextcloud/router'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { translate, translatePlural } from '@nextcloud/l10n'
+
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
+
+import IconCheck from 'vue-material-design-icons/Check.vue'
+import IconClipboard from 'vue-material-design-icons/Clipboard.vue'
+
+export default defineComponent({
+	name: 'FileRequestFinish',
+
+	components: {
+		IconCheck,
+		IconClipboard,
+		NcAvatar,
+		NcInputField,
+		NcNoteCard,
+		NcTextField,
+		NcChip,
+	},
+
+	props: {
+		share: {
+			type: Object as PropType<Share>,
+			required: true,
+		},
+		emails: {
+			type: Array as PropType<string[]>,
+			required: true,
+		},
+		isShareByMailEnabled: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	emits: ['add-email', 'remove-email'],
+
+	setup() {
+		return {
+			n: translatePlural,
+			t: translate,
+		}
+	},
+
+	data() {
+		return {
+			isCopied: false,
+			email: '',
+		}
+	},
+
+	computed: {
+		shareLink() {
+			return window.location.protocol + '//' + window.location.host + generateUrl('/s/') + this.share.token
+		},
+	},
+
+	methods: {
+		async copyShareLink(event: MouseEvent) {
+			if (this.isCopied) {
+				this.isCopied = false
+				return
+			}
+
+			if (!navigator.clipboard) {
+				// Clipboard API not available
+				window.prompt(this.t('files_sharing', 'Automatically copying failed, please copy the share link manually'), this.shareLink)
+				return
+			}
+
+			await navigator.clipboard.writeText(this.shareLink)
+
+			showSuccess(this.t('files_sharing', 'Link copied to clipboard'))
+			this.isCopied = true
+			event.target?.select?.()
+
+			setTimeout(() => {
+				this.isCopied = false
+			}, 3000)
+		},
+
+		addNewEmail(e: KeyboardEvent) {
+			if (e.target instanceof HTMLInputElement) {
+				if (e.target.checkValidity() === false) {
+					e.target.reportValidity()
+					return
+				}
+
+				// The email is already in the list
+				if (this.emails.includes(this.email.trim())) {
+					e.target.setCustomValidity(this.t('files_sharing', 'Email already added'))
+					e.target.reportValidity()
+					return
+				}
+
+				if (!this.isValidEmail(this.email.trim())) {
+					e.target.setCustomValidity(this.t('files_sharing', 'Invalid email address'))
+					e.target.reportValidity()
+					return
+				}
+
+				this.$emit('add-email', this.email.trim())
+				this.email = ''
+			}
+		},
+
+		// Handle dumping a list of emails
+		onPasteEmails(e: ClipboardEvent) {
+			const clipboardData = e.clipboardData
+			if (!clipboardData) {
+				return
+			}
+
+			const pastedText = clipboardData.getData('text')
+			const emails = pastedText.split(/[\s,;]+/).filter(Boolean).map((email) => email.trim())
+
+			const duplicateEmails = emails.filter((email) => this.emails.includes(email))
+			const validEmails = emails.filter((email) => this.isValidEmail(email) && !duplicateEmails.includes(email))
+			const invalidEmails = emails.filter((email) => !this.isValidEmail(email))
+			validEmails.forEach((email) => this.$emit('add-email', email))
+
+			// Warn about invalid emails
+			if (invalidEmails.length > 0) {
+				showError(this.n('files_sharing', 'The following email address is not valid: {emails}', 'The following email addresses are not valid: {emails}', invalidEmails.length, { emails: invalidEmails.join(', ') }))
+			}
+
+			// Warn about duplicate emails
+			if (duplicateEmails.length > 0) {
+				showError(this.n('files_sharing', '1 email address already added', '{count} email addresses already added', duplicateEmails.length, { count: duplicateEmails.length }))
+			}
+
+			if (validEmails.length > 0) {
+				showSuccess(this.n('files_sharing', '1 email address added', '{count} email addresses added', validEmails.length, { count: validEmails.length }))
+			}
+
+			this.email = ''
+		},
+
+		isValidEmail(email) {
+			const regExpEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+			return regExpEmail.test(email)
+		},
+	},
+})
+</script>
+<style scoped>
+.input-field,
+.file-request-dialog__emails {
+	margin-top: var(--secondary-margin);
+}
+
+.file-request-dialog__emails {
+	display: flex;
+	gap: var(--default-grid-baseline);
+	flex-wrap: wrap;
+}
+</style>
diff --git a/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogIntro.vue b/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogIntro.vue
new file mode 100644
index 00000000000..766fbc3fc22
--- /dev/null
+++ b/apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogIntro.vue
@@ -0,0 +1,153 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div>
+		<!-- Request label -->
+		<fieldset class="file-request-dialog__label" data-cy-file-request-dialog-fieldset="label">
+			<legend>
+				{{ t('files_sharing', 'What are you requesting ?') }}
+			</legend>
+			<NcTextField :value="label"
+				:disabled="disabled"
+				:label-outside="true"
+				:placeholder="t('files_sharing', 'Birthday party photos, History assignment…')"
+				:required="false"
+				name="label"
+				@update:value="$emit('update:label', $event)" />
+		</fieldset>
+
+		<!-- Request destination -->
+		<fieldset class="file-request-dialog__destination" data-cy-file-request-dialog-fieldset="destination">
+			<legend>
+				{{ t('files_sharing', 'Where should these files go ?') }}
+			</legend>
+			<NcTextField :value="destination"
+				:disabled="disabled"
+				:helper-text="t('files_sharing', 'The uploaded files are visible only to you unless you choose to share them.')"
+				:label-outside="true"
+				:minlength="2/* cannot share root */"
+				:placeholder="t('files_sharing', 'Select a destination')"
+				:readonly="false /* cannot validate a readonly input */"
+				:required="true /* cannot be empty */"
+				:show-trailing-button="destination !== context.path"
+				:trailing-button-icon="'undo'"
+				:trailing-button-label="t('files_sharing', 'Revert to default')"
+				name="destination"
+				@click="onPickDestination"
+				@keypress.prevent.stop="/* prevent typing in the input, we use the picker */"
+				@paste.prevent.stop="/* prevent pasting in the input, we use the picker */"
+				@trailing-button-click="$emit('update:destination', '')">
+				<IconFolder :size="18" />
+			</NcTextField>
+		</fieldset>
+
+		<!-- Request note -->
+		<fieldset class="file-request-dialog__note" data-cy-file-request-dialog-fieldset="note">
+			<legend>
+				{{ t('files_sharing', 'Add a note') }}
+			</legend>
+			<NcTextArea :value="note"
+				:disabled="disabled"
+				:label-outside="true"
+				:placeholder="t('files_sharing', 'Add a note to help people understand what you are requesting.')"
+				:required="false"
+				name="note"
+				@update:value="$emit('update:note', $event)" />
+		</fieldset>
+	</div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { Folder, Node } from '@nextcloud/files'
+
+import { defineComponent } from 'vue'
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { translate } from '@nextcloud/l10n'
+
+import IconFolder from 'vue-material-design-icons/Folder.vue'
+import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+export default defineComponent({
+	name: 'FileRequestIntro',
+
+	components: {
+		IconFolder,
+		NcTextArea,
+		NcTextField,
+	},
+
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		context: {
+			type: Object as PropType<Folder>,
+			required: true,
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		destination: {
+			type: String,
+			required: true,
+		},
+		note: {
+			type: String,
+			required: true,
+		},
+	},
+
+	emits: [
+		'update:destination',
+		'update:label',
+		'update:note',
+	],
+
+	setup() {
+		return {
+			t: translate,
+		}
+	},
+
+	methods: {
+		onPickDestination() {
+			const filepicker = getFilePickerBuilder(this.t('files_sharing', 'Select a destination'))
+				.addMimeTypeFilter('httpd/unix-directory')
+				.allowDirectories(true)
+				.addButton({
+					label: this.t('files_sharing', 'Select'),
+					callback: this.onPickedDestination,
+				})
+				.setFilter(node => node.path !== '/')
+				.startAt(this.destination)
+				.build()
+			try {
+				filepicker.pick()
+			} catch (e) {
+				// ignore cancel
+			}
+		},
+
+		onPickedDestination(nodes: Node[]) {
+			const node = nodes[0]
+			if (node) {
+				this.$emit('update:destination', node.path)
+			}
+		},
+	},
+})
+</script>
+<style scoped>
+.file-request-dialog__note :deep(textarea) {
+	width: 100% !important;
+	min-height: 80px;
+}
+</style>
-- 
cgit v1.2.3