From 0df38a7fc3e5d393d1ac1399485c3e325e78788c Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Thu, 5 Sep 2024 13:47:20 -0400
Subject: [PATCH 1/2] refactor: use form element for better structure

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

diff --git a/src/components/GuestNamePicker.vue b/src/components/GuestNamePicker.vue
index 7a32bc8aed..0444b13988 100644
--- a/src/components/GuestNamePicker.vue
+++ b/src/components/GuestNamePicker.vue
@@ -7,7 +7,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"
@@ -21,24 +23,24 @@
                                If you don\'t provide one, the default will be used.`) }}
 			</p>
 
-			<div class="modal__form">
+			<fieldset>
 				<NcTextField :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>
 
@@ -120,16 +122,22 @@ export default {
 $modal-padding: calc(var(--default-grid-baseline) * 4);
 
 .modal__content {
-	padding: $modal-padding;
-
-	.modal__form {
-		padding: 15px 0;
-	}
-}
-
-.modal__buttons {
-	display: flex;
-	justify-content: center;
-	padding: 0 $modal-padding $modal-padding $modal-padding;
+  padding: $modal-padding;
+
+  h3 {
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  p, fieldset {
+    margin: 10px 0;
+  }
+
+  .modal__buttons {
+    margin-top: $modal-padding;
+    display: flex;
+    justify-content: end;
+  }
 }
 </style>

From 6ad07ed2f54156d0d6b8c381a2276f26f357410a Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Thu, 5 Sep 2024 13:59:25 -0400
Subject: [PATCH 2/2] fix: autofocus guest name input

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

diff --git a/src/components/GuestNamePicker.vue b/src/components/GuestNamePicker.vue
index 0444b13988..1d2d419d03 100644
--- a/src/components/GuestNamePicker.vue
+++ b/src/components/GuestNamePicker.vue
@@ -24,7 +24,8 @@
 			</p>
 
 			<fieldset>
-				<NcTextField :value="guestName"
+				<NcTextField ref="guestNameInput"
+					:value="guestName"
 					data-cy="guestNameInput"
 					:label="t('richdocuments', 'Guest name')"
 					:placeholder="t('richdocuments', 'Anonymous guest')"
@@ -83,6 +84,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