From f7eb1605092301921632d6df6996d5ee35e35661 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 28 Nov 2021 16:04:38 +0100
Subject: [PATCH] fix: move forgot password link next to password label

In some languages, the texts on the "log in" and "register" buttons were so long they wrapped underneath each other. Moving the "forgot password" link next to the password label leaves these two buttons enough space to always stay next to each other.
---
 src/views/user/Login.vue | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 127e673a2..2a4ae3f47 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -20,11 +20,21 @@
 						autocomplete="username"
 						v-focus
 						@keyup.enter="submit"
+						tabindex="1"
 					/>
 				</div>
 			</div>
 			<div class="field">
-				<label class="label" for="password">{{ $t('user.auth.password') }}</label>
+				<div class="label-with-link">
+					<label class="label" for="password">{{ $t('user.auth.password') }}</label>
+					<router-link 
+						:to="{ name: 'user.password-reset.request' }" 
+						class="reset-password-link"
+						tabindex="6"
+					>
+						{{ $t('user.auth.forgotPassword') }}
+					</router-link>
+				</div>
 				<div class="control">
 					<input
 						class="input"
@@ -36,6 +46,7 @@
 						type="password"
 						autocomplete="current-password"
 						@keyup.enter="submit"
+						tabindex="2"
 					/>
 				</div>
 			</div>
@@ -52,6 +63,7 @@
 						type="text"
 						v-focus
 						@keyup.enter="submit"
+						tabindex="3"
 					/>
 				</div>
 			</div>
@@ -61,6 +73,7 @@
 					<x-button
 						@click="submit"
 						:loading="loading"
+						tabindex="4"
 					>
 						{{ $t('user.auth.login') }}
 					</x-button>
@@ -68,15 +81,11 @@
 						:to="{ name: 'user.register' }"
 						v-if="registrationEnabled"
 						type="secondary"
+						tabindex="5"
 					>
 						{{ $t('user.auth.register') }}
 					</x-button>
 				</div>
-				<div class="control">
-					<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
-						{{ $t('user.auth.forgotPassword') }}
-					</router-link>
-				</div>
 			</div>
 		</form>
 
@@ -227,6 +236,15 @@ export default {
 
 .reset-password-link {
 	display: inline-block;
-	padding-top: 5px;
+}
+
+.label-with-link {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: .5rem;
+	
+	.label {
+		margin-bottom: 0;
+	}
 }
 </style>