From 3af561dd0b31228a742bec81e3782e24db997a43 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 | 49 +++++++++++++++++-------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/components/GuestNamePicker.vue b/src/components/GuestNamePicker.vue
index 89038141f0..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
@@ -119,19 +126,19 @@ $modal-padding: calc(var(--default-grid-baseline) * 4);
 	padding: $modal-padding;
 
 	h3 {
+		margin: 0;
 		display: flex;
 		align-items: center;
-		font-size: 1.3em;
 	}
 
-	.modal__form {
-		padding: 15px 0;
+	p, fieldset {
+		margin: 10px 0;
 	}
-}
 
-.modal__buttons {
-	display: flex;
-	justify-content: center;
-	padding: 0 $modal-padding $modal-padding $modal-padding;
+	.modal__buttons {
+		margin-top: $modal-padding;
+		display: flex;
+		justify-content: end;
+	}
 }
 </style>