From ac2d039766fe996bf031b6f2f74a9e7b96747a7b Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Mon, 9 Sep 2024 12:35:18 -0400
Subject: [PATCH] fix: use form element for better structure

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 src/components/GuestNamePicker.vue | 53 +++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/GuestNamePicker.vue b/src/components/GuestNamePicker.vue
index 86bcab33e3..6154ac79fe 100644
--- a/src/components/GuestNamePicker.vue
+++ b/src/components/GuestNamePicker.vue
@@ -3,7 +3,9 @@
 		:out-transition="true"
 		size="small"
 		:show.sync="show">
-		<div class="modal__content" data-cy="guestNameModal">
+		<form class="modal__content"
+			data-cy="guestNameModal"
+			@submit.prevent.stop="submit">
 			<h3>
 				<NcIconSvgWrapper v-if="file.icon !== null"
 					:inline="true"
@@ -17,24 +19,25 @@
                                If you don\'t provide one, the default will be used.`) }}
 			</p>
 
-			<div class="modal__form">
-				<NcTextField :value="guestName"
+			<fieldset>
+				<NcTextField ref="guestNameInput"
+					:value="guestName"
 					data-cy="guestNameInput"
 					:label="t('richdocuments', 'Guest name')"
 					:placeholder="t('richdocuments', 'Anonymous guest')"
 					type="text"
 					@update:value="setGuestName" />
+			</fieldset>
+
+			<div class="modal__buttons">
+				<NcButton data-cy="guestNameSubmit"
+					:aria-label="t('richdocuments', 'Submit name')"
+					type="primary"
+					native-type="submit">
+					{{ t('richdocuments', 'Submit name') }}
+				</NcButton>
 			</div>
-		</div>
-
-		<div class="modal__buttons">
-			<NcButton data-cy="guestNameSubmit"
-				:aria-label="t('richdocuments', 'Submit name')"
-				type="primary"
-				@click="submit">
-				{{ t('richdocuments', 'Submit name') }}
-			</NcButton>
-		</div>
+		</form>
 	</NcModal>
 </template>
 
@@ -77,6 +80,10 @@ export default {
 	},
 
 	async mounted() {
+		this.$nextTick(() => {
+			this.$refs.guestNameInput.focus()
+		})
+
 		const name = document.getElementById('filename').value
 		const mimeTypeIcon = async () => {
 			const url = document.getElementById('mimetypeIcon').value
@@ -118,14 +125,20 @@ $modal-padding: calc(var(--default-grid-baseline) * 4);
 .modal__content {
 	padding: $modal-padding;
 
-	.modal__form {
-		padding: 15px 0;
+	h3 {
+		margin: 0;
+		display: flex;
+		align-items: center;
 	}
-}
 
-.modal__buttons {
-	display: flex;
-	justify-content: center;
-	padding: 0 $modal-padding $modal-padding $modal-padding;
+	p, fieldset {
+		margin: 10px 0;
+	}
+
+	.modal__buttons {
+		margin-top: $modal-padding;
+		display: flex;
+		justify-content: end;
+	}
 }
 </style>