From f28d933acc2d97021c69be79c7f2238cbaac419f Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Wed, 17 Jul 2024 16:48:47 +0200
Subject: feat(files_sharing): add public name prompt for files requests

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 .../src/components/NewFileRequestDialog.vue        |  14 +--
 apps/files_sharing/src/public-file-request.ts      |  23 ++++
 apps/files_sharing/src/views/PublicAuthPrompt.vue  | 136 +++++++++++++++++++++
 3 files changed, 166 insertions(+), 7 deletions(-)
 create mode 100644 apps/files_sharing/src/public-file-request.ts
 create mode 100644 apps/files_sharing/src/views/PublicAuthPrompt.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 398fd976f02..4c476af9bc8 100644
--- a/apps/files_sharing/src/components/NewFileRequestDialog.vue
+++ b/apps/files_sharing/src/components/NewFileRequestDialog.vue
@@ -107,7 +107,7 @@
 				@click="onFinish">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" />
-					<IconCheck v-else-if="success" :size="20" />
+					<IconCheck v-else :size="20" />
 				</template>
 				{{ finishButtonLabel }}
 			</NcButton>
@@ -193,7 +193,6 @@ export default defineComponent({
 		return {
 			currentStep: STEP.FIRST,
 			loading: false,
-			success: false,
 
 			destination: this.context.path || '/',
 			label: '',
@@ -264,11 +263,7 @@ export default defineComponent({
 				showSuccess(t('files_sharing', 'File request created'))
 			}
 
-			// Show success then close
-			this.success = true
-			setTimeout(() => {
-				this.$emit('close')
-			}, 3000)
+			this.$emit('close')
 		},
 
 		async createShare() {
@@ -343,6 +338,11 @@ export default defineComponent({
 						value: this.emails,
 						key: 'emails',
 						scope: 'shareWith',
+					},
+					{
+						value: true,
+						key: 'enabled',
+						scope: 'fileRequest',
 					}]),
 				})
 
diff --git a/apps/files_sharing/src/public-file-request.ts b/apps/files_sharing/src/public-file-request.ts
new file mode 100644
index 00000000000..763c4f60624
--- /dev/null
+++ b/apps/files_sharing/src/public-file-request.ts
@@ -0,0 +1,23 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { spawnDialog } from '@nextcloud/dialogs'
+import { defineAsyncComponent } from 'vue'
+import logger from './services/logger'
+
+const nick = localStorage.getItem('nick')
+const publicAuthPromptShown = localStorage.getItem('publicAuthPromptShown')
+
+// If we don't have a nickname or the public auth prompt hasn't been shown yet, show it
+// We still show the prompt if the user has a nickname to double check
+if (!nick || !publicAuthPromptShown) {
+	spawnDialog(
+		defineAsyncComponent(() => import('./views/PublicAuthPrompt.vue')),
+		{},
+		() => localStorage.setItem('publicAuthPromptShown', 'true'),
+	)
+} else {
+	logger.debug(`Public auth prompt already shown. Current nickname is '${nick}'`)
+}
diff --git a/apps/files_sharing/src/views/PublicAuthPrompt.vue b/apps/files_sharing/src/views/PublicAuthPrompt.vue
new file mode 100644
index 00000000000..a929afffefb
--- /dev/null
+++ b/apps/files_sharing/src/views/PublicAuthPrompt.vue
@@ -0,0 +1,136 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcDialog class="public-auth-prompt"
+		dialog-classes="public-auth-prompt__dialog"
+		:can-close="false"
+		:name="dialogName">
+		<h3 v-if="owner" class="public-auth-prompt__subtitle">
+			{{ t('files_sharing', '{ownerDisplayName} shared a folder with you.', { ownerDisplayName }) }}
+		</h3>
+
+		<!-- Header -->
+		<NcNoteCard type="info" class="public-auth-prompt__header">
+			<p id="public-auth-prompt-dialog-description" class="public-auth-prompt__description">
+				{{ t('files_sharing', 'To upload files, you need to provide your name first.') }}
+			</p>
+		</NcNoteCard>
+
+		<!-- Form -->
+		<form ref="form"
+			aria-describedby="public-auth-prompt-dialog-description"
+			class="public-auth-prompt__form"
+			@submit.prevent.stop="">
+			<NcTextField ref="input"
+				class="public-auth-prompt__input"
+				:label="t('files_sharing', 'Enter your name')"
+				name="name"
+				:required="true"
+				:minlength="2"
+				:value.sync="name" />
+		</form>
+
+		<!-- Submit -->
+		<template #actions>
+			<NcButton ref="submit"
+				:disabled="name.trim() === ''"
+				@click="onSubmit">
+				{{ t('files_sharing', 'Submit name') }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { t } from '@nextcloud/l10n'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import { loadState } from '@nextcloud/initial-state'
+
+export default defineComponent({
+	name: 'PublicAuthPrompt',
+
+	components: {
+		NcButton,
+		NcDialog,
+		NcNoteCard,
+		NcTextField,
+	},
+
+	setup() {
+		return {
+			t,
+
+			owner: loadState('files_sharing', 'owner', ''),
+			ownerDisplayName: loadState('files_sharing', 'ownerDisplayName', ''),
+			label: loadState('files_sharing', 'label', ''),
+			note: loadState('files_sharing', 'note', ''),
+			filename: loadState('files_sharing', 'filename', ''),
+		}
+	},
+
+	data() {
+		return {
+			name: '',
+		}
+	},
+
+	computed: {
+		dialogName() {
+			return this.t('files_sharing', 'Upload files to {folder}', { folder: this.label || this.filename })
+		},
+	},
+
+	beforeMount() {
+		// Pre-load the name from local storage if already set by another app
+		// like Talk, Colabora or Text...
+		const talkNick = localStorage.getItem('nick')
+		if (talkNick) {
+			this.name = talkNick
+		}
+	},
+
+	methods: {
+		onSubmit() {
+			const form = this.$refs.form as HTMLFormElement
+			if (!form.checkValidity()) {
+				form.reportValidity()
+				return
+			}
+
+			if (this.name.trim() === '') {
+				return
+			}
+
+			localStorage.setItem('nick', this.name)
+			this.$emit('close')
+		},
+	},
+})
+</script>
+<style lang="scss">
+.public-auth-prompt {
+	&__subtitle {
+		// Smaller than dialog title
+		font-size: 16px;
+		margin-block: 12px;
+	}
+
+	&__header {
+		// Fix extra margin generating an unwanted gap
+		margin-block: 12px;
+	}
+
+	&__form {
+		// Double the margin of the header
+		margin-block: 24px;
+	}
+}
+</style>
-- 
cgit v1.2.3