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 01/19] 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>

From 05e054f501be1a73d63788468a995f092d279e43 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 28 Nov 2021 16:33:03 +0100
Subject: [PATCH 02/19] feat: improve input validation for register form

---
 src/helpers/isEmail.ts      |  6 +++++
 src/i18n/lang/en.json       |  6 +++--
 src/icons.js                |  4 +++
 src/views/user/Register.vue | 49 +++++++++++++++++++++++++++++++++----
 4 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 src/helpers/isEmail.ts

diff --git a/src/helpers/isEmail.ts b/src/helpers/isEmail.ts
new file mode 100644
index 000000000..08957d0f0
--- /dev/null
+++ b/src/helpers/isEmail.ts
@@ -0,0 +1,6 @@
+export function isEmail(email: string): Boolean {
+	const format = /^.+@.+$/
+	const match = email.match(format)
+
+	return match === null ? false : match.length > 0
+}
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 56a4bd113..2aeea991e 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -34,7 +34,6 @@
       "email": "E-mail address",
       "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
-      "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
       "forgotPassword": "Forgot your password?",
       "resetPassword": "Reset your password",
@@ -50,7 +49,10 @@
       "authenticating": "Authenticating…",
       "openIdStateError": "State does not match, refusing to continue!",
       "openIdGeneralError": "An error occured while authenticating against the third party.",
-      "logout": "Logout"
+      "logout": "Logout",
+      "emailInvalid": "Please enter a valid email address.",
+      "usernameRequired": "Please provide a username.",
+      "passwordRequired": "Please provide a password."
     },
     "settings": {
       "title": "Settings",
diff --git a/src/icons.js b/src/icons.js
index 48ef230c6..89e1d1a3e 100644
--- a/src/icons.js
+++ b/src/icons.js
@@ -16,6 +16,8 @@ import {
 	faCocktail,
 	faCoffee,
 	faCog,
+	faEye,
+	faEyeSlash,
 	faEllipsisH,
 	faEllipsisV,
 	faExclamation,
@@ -87,6 +89,8 @@ library.add(faCocktail)
 library.add(faCoffee)
 library.add(faCog)
 library.add(faComments)
+library.add(faEye)
+library.add(faEyeSlash)
 library.add(faEllipsisH)
 library.add(faEllipsisV)
 library.add(faExclamation)
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index ef9f4a153..a3a74da74 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -18,8 +18,12 @@
 						v-focus
 						v-model="credentials.username"
 						@keyup.enter="submit"
+						@focusout="validateUsername"
 					/>
 				</div>
+				<p class="help is-danger" v-if="!usernameValid">
+					{{ $t('user.auth.usernameRequired') }}
+				</p>
 			</div>
 			<div class="field">
 				<label class="label" for="email">{{ $t('user.auth.email') }}</label>
@@ -33,12 +37,16 @@
 						type="email"
 						v-model="credentials.email"
 						@keyup.enter="submit"
+						@focusout="validateEmail"
 					/>
 				</div>
+				<p class="help is-danger" v-if="!emailValid">
+					{{ $t('user.auth.emailInvalid') }}
+				</p>
 			</div>
 			<div class="field">
 				<label class="label" for="password">{{ $t('user.auth.password') }}</label>
-				<div class="control">
+				<div class="control is-relative">
 					<input
 						class="input"
 						id="password"
@@ -49,8 +57,12 @@
 						autocomplete="new-password"
 						v-model="credentials.password"
 						@keyup.enter="submit"
+						@focusout="validatePassword"
 					/>
 				</div>
+				<p class="help is-danger" v-if="!passwordValid">
+					{{ $t('user.auth.passwordRequired') }}
+				</p>
 			</div>
 			<div class="field">
 				<label class="label" for="passwordValidation">{{ $t('user.auth.passwordRepeat') }}</label>
@@ -76,6 +88,7 @@
 						id="register-submit"
 						@click="submit"
 						class="mr-2"
+						:disabled="!everythingValid"
 					>
 						{{ $t('user.auth.register') }}
 					</x-button>
@@ -89,12 +102,14 @@
 </template>
 
 <script setup>
+import {useDebounceFn} from '@vueuse/core'
 import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import router from '@/router'
 import {store} from '@/store'
 import Message from '@/components/misc/message'
+import {isEmail} from '@/helpers/isEmail'
 
 // FIXME: use the `beforeEnter` hook of vue-router
 // Check if the user is already logged in, if so, redirect them to the homepage
@@ -111,20 +126,44 @@ const credentials = reactive({
 	email: '',
 	password: '',
 })
-const passwordValidation = ref('')
 
 const loading = computed(() => store.state.loading)
 const errorMessage = ref('')
 
+const DEBOUNCE_TIME = 100
+
+// debouncing to prevent error messages when clicking on the log in button
+const emailValid = ref(true)
+const validateEmail = useDebounceFn(() => {
+	emailValid.value = isEmail(credentials.email)
+}, DEBOUNCE_TIME)
+
+const usernameValid = ref(true)
+const validateUsername = useDebounceFn(() => {
+	usernameValid.value = credentials.username !== ''
+}, DEBOUNCE_TIME)
+
+const passwordValid = ref(true)
+const validatePassword = useDebounceFn(() => {
+	passwordValid.value = credentials.password !== ''
+}, DEBOUNCE_TIME)
+
+const everythingValid = computed(() => {
+	return credentials.username !== '' &&
+		credentials.email !== '' &&
+		credentials.password !== '' &&
+		emailValid.value &&
+		usernameValid.value &&
+		passwordValid.value
+})
+
 async function submit() {
 	errorMessage.value = ''
 
-	if (credentials.password !== passwordValidation.value) {
-		errorMessage.value = t('user.auth.passwordsDontMatch')
+	if (!everythingValid.value) {
 		return
 	}
 
-
 	try {
 		await store.dispatch('auth/register', toRaw(credentials))
 	} catch (e) {

From aa12bffcbc09dfb9070a92232400c0d103d45c51 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 28 Nov 2021 16:33:49 +0100
Subject: [PATCH 03/19] feat: replace password comparison with password toggle

---
 src/views/user/Register.vue | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index a3a74da74..dbe5d4827 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -53,33 +53,20 @@
 						name="password"
 						:placeholder="$t('user.auth.passwordPlaceholder')"
 						required
-						type="password"
+						:type="passwordFieldType"
 						autocomplete="new-password"
 						v-model="credentials.password"
 						@keyup.enter="submit"
 						@focusout="validatePassword"
 					/>
+					<a @click="togglePasswordFieldType" class="password-field-type-toggle">
+						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
+					</a>
 				</div>
 				<p class="help is-danger" v-if="!passwordValid">
 					{{ $t('user.auth.passwordRequired') }}
 				</p>
 			</div>
-			<div class="field">
-				<label class="label" for="passwordValidation">{{ $t('user.auth.passwordRepeat') }}</label>
-				<div class="control">
-					<input
-						class="input"
-						id="passwordValidation"
-						name="passwordValidation"
-						:placeholder="$t('user.auth.passwordPlaceholder')"
-						required
-						type="password"
-						autocomplete="new-password"
-						v-model="passwordValidation"
-						@keyup.enter="submit"
-					/>
-				</div>
-			</div>
 
 			<div class="field is-grouped">
 				<div class="control">
@@ -157,6 +144,13 @@ const everythingValid = computed(() => {
 		passwordValid.value
 })
 
+const passwordFieldType = ref('password')
+const togglePasswordFieldType = () => {
+	passwordFieldType.value = passwordFieldType.value === 'password'
+		? 'text'
+		: 'password'
+}
+
 async function submit() {
 	errorMessage.value = ''
 
@@ -171,3 +165,12 @@ async function submit() {
 	}
 }
 </script>
+
+<style scoped>
+.password-field-type-toggle {
+	position: absolute;
+	top: .5rem;
+	right: 1rem;
+	color: var(--grey-400);
+}
+</style>

From 1d916e7e03add8f8a4f8e809eed7600080bd3579 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 28 Nov 2021 16:35:59 +0100
Subject: [PATCH 04/19] feat: change wording

---
 src/i18n/lang/en.json       | 6 +++---
 src/router/index.ts         | 2 +-
 src/views/user/Login.vue    | 2 +-
 src/views/user/Register.vue | 5 +----
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 2aeea991e..2c1fdf261 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -31,7 +31,7 @@
       "username": "Username",
       "usernameEmail": "Username Or Email Address",
       "usernamePlaceholder": "e.g. frederick",
-      "email": "E-mail address",
+      "email": "Email address",
       "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
       "passwordPlaceholder": "e.g. •••••••••••",
@@ -44,7 +44,7 @@
       "totpTitle": "Two Factor Authentication Code",
       "totpPlaceholder": "e.g. 123456",
       "login": "Login",
-      "register": "Register",
+      "createAccount": "Create account",
       "loginWith": "Log in with {provider}",
       "authenticating": "Authenticating…",
       "openIdStateError": "State does not match, refusing to continue!",
@@ -63,7 +63,7 @@
       "currentPasswordPlaceholder": "Your current password",
       "passwordsDontMatch": "The new password and its confirmation don't match.",
       "passwordUpdateSuccess": "The password was successfully updated.",
-      "updateEmailTitle": "Update Your E-Mail Address",
+      "updateEmailTitle": "Update Your Email Address",
       "updateEmailNew": "New Email Address",
       "updateEmailSuccess": "Your email address was successfully updated. We've sent you a link to confirm it.",
       "general": {
diff --git a/src/router/index.ts b/src/router/index.ts
index 21e4a96a3..cf126b5ab 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -132,7 +132,7 @@ const router = createRouter({
 			name: 'user.register',
 			component: RegisterComponent,
 			meta: {
-				title: 'user.auth.register',
+				title: 'user.auth.createAccount',
 			},
 		},
 		{
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 2a4ae3f47..b525cf02f 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -83,7 +83,7 @@
 						type="secondary"
 						tabindex="5"
 					>
-						{{ $t('user.auth.register') }}
+						{{ $t('user.auth.createAccount') }}
 					</x-button>
 				</div>
 			</div>
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index dbe5d4827..ea78f24b0 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -77,7 +77,7 @@
 						class="mr-2"
 						:disabled="!everythingValid"
 					>
-						{{ $t('user.auth.register') }}
+						{{ $t('user.auth.createAccount') }}
 					</x-button>
 					<x-button :to="{ name: 'user.login' }" type="secondary">
 						{{ $t('user.auth.login') }}
@@ -91,7 +91,6 @@
 <script setup>
 import {useDebounceFn} from '@vueuse/core'
 import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
-import {useI18n} from 'vue-i18n'
 
 import router from '@/router'
 import {store} from '@/store'
@@ -106,8 +105,6 @@ onBeforeMount(() => {
 	}
 })
 
-const {t} = useI18n()
-
 const credentials = reactive({
 	username: '',
 	email: '',

From 66d5e851e823e9667380e759e689fecfbe88e1ec Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 28 Nov 2021 17:06:56 +0100
Subject: [PATCH 05/19] feat: improve error handling of login fields

---
 src/views/user/Login.vue | 45 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index b525cf02f..8a1ae6293 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -21,14 +21,18 @@
 						v-focus
 						@keyup.enter="submit"
 						tabindex="1"
+						@focusout="validateField('username')"
 					/>
 				</div>
+				<p class="help is-danger" v-if="!usernameValid">
+					{{ $t('user.auth.usernameRequired') }}
+				</p>
 			</div>
 			<div class="field">
 				<div class="label-with-link">
 					<label class="label" for="password">{{ $t('user.auth.password') }}</label>
-					<router-link 
-						:to="{ name: 'user.password-reset.request' }" 
+					<router-link
+						:to="{ name: 'user.password-reset.request' }"
 						class="reset-password-link"
 						tabindex="6"
 					>
@@ -43,12 +47,19 @@
 						:placeholder="$t('user.auth.passwordPlaceholder')"
 						ref="password"
 						required
-						type="password"
+						:type="passwordFieldType"
 						autocomplete="current-password"
 						@keyup.enter="submit"
 						tabindex="2"
+						@focusout="validateField('password')"
 					/>
+					<a @click="togglePasswordFieldType" class="password-field-type-toggle">
+						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
+					</a>
 				</div>
+				<p class="help is-danger" v-if="!passwordValid">
+					{{ $t('user.auth.passwordRequired') }}
+				</p>
 			</div>
 			<div class="field" v-if="needsTotpPasscode">
 				<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
@@ -106,6 +117,7 @@
 </template>
 
 <script>
+import {useDebounceFn} from '@vueuse/core'
 import {mapState} from 'vuex'
 
 import {HTTPFactory} from '@/http-common'
@@ -123,6 +135,9 @@ export default {
 		return {
 			confirmedEmailSuccess: false,
 			errorMessage: '',
+			usernameValid: true,
+			passwordValid: true,
+			passwordFieldType: 'password',
 		}
 	},
 	beforeMount() {
@@ -175,6 +190,13 @@ export default {
 			localAuthEnabled: state => state.config.auth.local.enabled,
 			openidConnect: state => state.config.auth.openidConnect,
 		}),
+
+		validateField() {
+			// using computed so that debounced function definition stays
+			return useDebounceFn((field) => {
+				this[`${field}Valid`] = this.$refs[field].value !== ''
+			}, 100)
+		},
 	},
 	methods: {
 		setLoading() {
@@ -187,6 +209,12 @@ export default {
 			}
 		},
 
+		togglePasswordFieldType() {
+			this.passwordFieldType = this.passwordFieldType === 'password'
+				? 'text'
+				: 'password'
+		},
+
 		async submit() {
 			this.errorMessage = ''
 			// Some browsers prevent Vue bindings from working with autofilled values.
@@ -205,7 +233,7 @@ export default {
 				await this.$store.dispatch('auth/login', credentials)
 				this.$store.commit('auth/needsTotpPasscode', false)
 			} catch (e) {
-				if (e.response && e.response.data.code === 1017 && !credentials.totpPasscode) {
+				if (e.response?.data.code === 1017 && !this.credentials.totpPasscode) {
 					return
 				}
 
@@ -242,9 +270,16 @@ export default {
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: .5rem;
-	
+
 	.label {
 		margin-bottom: 0;
 	}
 }
+
+.password-field-type-toggle {
+	position: absolute;
+	top: .5rem;
+	right: 1rem;
+	color: var(--grey-400);
+}
 </style>

From 8397608fefe3905b9f4d4c95108883ee8c3aec1d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 11 Dec 2021 21:53:00 +0100
Subject: [PATCH 06/19] chore: move password field toggle to scss file

---
 src/styles/components/_index.scss                | 3 ++-
 src/styles/components/password-field-toggle.scss | 7 +++++++
 src/views/user/Login.vue                         | 7 -------
 src/views/user/Register.vue                      | 9 ---------
 4 files changed, 9 insertions(+), 17 deletions(-)
 create mode 100644 src/styles/components/password-field-toggle.scss

diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index 99a3c5aa3..4511d1cae 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -3,4 +3,5 @@
 @import "list";
 @import "task";
 @import "tasks";
-@import "namespaces";
\ No newline at end of file
+@import "namespaces";
+@import 'password-field-toggle';
diff --git a/src/styles/components/password-field-toggle.scss b/src/styles/components/password-field-toggle.scss
new file mode 100644
index 000000000..52d95ba5d
--- /dev/null
+++ b/src/styles/components/password-field-toggle.scss
@@ -0,0 +1,7 @@
+.password-field-type-toggle {
+  position: absolute;
+  color: var(--grey-400);
+  top: 50%;
+  right: 1rem;
+  transform: translateY(-50%);
+}
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 8a1ae6293..145e2c665 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -275,11 +275,4 @@ export default {
 		margin-bottom: 0;
 	}
 }
-
-.password-field-type-toggle {
-	position: absolute;
-	top: .5rem;
-	right: 1rem;
-	color: var(--grey-400);
-}
 </style>
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index ea78f24b0..ce9942201 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -162,12 +162,3 @@ async function submit() {
 	}
 }
 </script>
-
-<style scoped>
-.password-field-type-toggle {
-	position: absolute;
-	top: .5rem;
-	right: 1rem;
-	color: var(--grey-400);
-}
-</style>

From fda0b81d9c653a1a93803a98582ebe9b10f3f433 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 11 Dec 2021 21:57:54 +0100
Subject: [PATCH 07/19] feat: add tooltip and aria-label

---
 src/i18n/lang/en.json       | 4 +++-
 src/views/user/Login.vue    | 6 +++++-
 src/views/user/Register.vue | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 2c1fdf261..7fecb029d 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -52,7 +52,9 @@
       "logout": "Logout",
       "emailInvalid": "Please enter a valid email address.",
       "usernameRequired": "Please provide a username.",
-      "passwordRequired": "Please provide a password."
+      "passwordRequired": "Please provide a password.",
+      "showPassword": "Show the password",
+      "hidePassword": "Hide the password"
     },
     "settings": {
       "title": "Settings",
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 145e2c665..6be2e7839 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -53,7 +53,11 @@
 						tabindex="2"
 						@focusout="validateField('password')"
 					/>
-					<a @click="togglePasswordFieldType" class="password-field-type-toggle">
+					<a
+						@click="togglePasswordFieldType"
+						class="password-field-type-toggle"
+						aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
+						v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
 						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
 					</a>
 				</div>
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index ce9942201..29ebed5bf 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -59,7 +59,11 @@
 						@keyup.enter="submit"
 						@focusout="validatePassword"
 					/>
-					<a @click="togglePasswordFieldType" class="password-field-type-toggle">
+					<a
+						@click="togglePasswordFieldType" 
+						class="password-field-type-toggle"
+						aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
+						v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
 						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
 					</a>
 				</div>

From a1814ea29d74631f7befb5d51d85b2a16d1741a3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 11 Dec 2021 22:08:26 +0100
Subject: [PATCH 08/19] fix: message spacing

---
 src/views/user/Login.vue                | 11 +++++++++--
 src/views/user/PasswordReset.vue        |  4 ++--
 src/views/user/Register.vue             |  2 +-
 src/views/user/RequestPasswordReset.vue |  4 ++--
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 6be2e7839..a59805f06 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -1,9 +1,9 @@
 <template>
 	<div>
-		<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
+		<message variant="success" class="has-text-centered mb-4" v-if="confirmedEmailSuccess">
 			{{ $t('user.auth.confirmEmailSuccess') }}
 		</message>
-		<message variant="danger" v-if="errorMessage">
+		<message variant="danger" v-if="errorMessage" class="mb-4">
 			{{ errorMessage }}
 		</message>
 		<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
@@ -229,6 +229,13 @@ export default {
 				password: this.$refs.password.value,
 			}
 
+			if (credentials.username === '' || credentials.password === '') {
+				// Trigger the validation error messages
+				this.validateField('username')
+				this.validateField('password')
+				return
+			}
+
 			if (this.needsTotpPasscode) {
 				credentials.totpPasscode = this.$refs.totpPasscode.value
 			}
diff --git a/src/views/user/PasswordReset.vue b/src/views/user/PasswordReset.vue
index a721f84d5..0fdca3818 100644
--- a/src/views/user/PasswordReset.vue
+++ b/src/views/user/PasswordReset.vue
@@ -1,9 +1,9 @@
 <template>
 	<div>
-		<message v-if="errorMsg">
+		<message v-if="errorMsg" class="mb-4">
 			{{ errorMsg }}
 		</message>
-		<div class="has-text-centered" v-if="successMessage">
+		<div class="has-text-centered mb-4" v-if="successMessage">
 			<message variant="success">
 				{{ successMessage }}
 			</message>
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 29ebed5bf..48058fea7 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<message variant="danger" v-if="errorMessage !== ''">
+		<message variant="danger" v-if="errorMessage !== ''" class="mb-4">
 			{{ errorMessage }}
 		</message>
 		<form @submit.prevent="submit" id="registerform">
diff --git a/src/views/user/RequestPasswordReset.vue b/src/views/user/RequestPasswordReset.vue
index f721df705..f25993b4f 100644
--- a/src/views/user/RequestPasswordReset.vue
+++ b/src/views/user/RequestPasswordReset.vue
@@ -1,9 +1,9 @@
 <template>
 	<div>
-		<message variant="danger" v-if="errorMsg">
+		<message variant="danger" v-if="errorMsg" class="mb-4">
 			{{ errorMsg }}
 		</message>
-		<div class="has-text-centered" v-if="isSuccess">
+		<div class="has-text-centered mb-4" v-if="isSuccess">
 			<message variant="success">
 				{{ $t('user.auth.resetPasswordSuccess') }}
 			</message>

From 1fc1c20c87217dbc067cfea2a429e923ef2ee8b6 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Dec 2021 20:34:26 +0100
Subject: [PATCH 09/19] feat: add extra prop for message center text

---
 src/components/misc/message.vue | 22 ++++++++++++++++++++--
 src/views/user/Login.vue        |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/misc/message.vue b/src/components/misc/message.vue
index df60cc384..37d71eef8 100644
--- a/src/components/misc/message.vue
+++ b/src/components/misc/message.vue
@@ -1,18 +1,36 @@
 <template>
 	<div class="message-wrapper">
-		<div class="message" :class="variant">
+		<div class="message" :class="[variant, textAlignClass]">
 			<slot/>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-defineProps({
+import {computed} from 'vue'
+
+const props = defineProps({
 	variant: {
 		type: String,
 		default: 'info',
 	},
+	textAlign: {
+		type: String,
+		default: 'left',
+	},
 })
+
+const textAlignClass = computed(() => {
+	switch (props.textAlign) {
+		case 'left':
+			return ''
+		case 'right':
+			return 'has-text-right'
+		case 'center':
+			return 'has-text-centered'
+	}
+})
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index a59805f06..9fa583c57 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<message variant="success" class="has-text-centered mb-4" v-if="confirmedEmailSuccess">
+		<message variant="success" text-align="center" class="mb-4" v-if="confirmedEmailSuccess">
 			{{ $t('user.auth.confirmEmailSuccess') }}
 		</message>
 		<message variant="danger" v-if="errorMessage" class="mb-4">

From 9c04fb4e40cbe1185a81c28696a546d638645c97 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 11 Dec 2021 22:08:37 +0100
Subject: [PATCH 10/19] fix: disable login button

---
 src/views/user/Login.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 9fa583c57..8848d41eb 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -89,6 +89,7 @@
 						@click="submit"
 						:loading="loading"
 						tabindex="4"
+						:disabled="!allFieldsValid"
 					>
 						{{ $t('user.auth.login') }}
 					</x-button>
@@ -186,6 +187,9 @@ export default {
 				this.openidConnect.providers &&
 				this.openidConnect.providers.length > 0
 		},
+		allFieldsValid() {
+			return this.usernameValid && this.passwordValid
+		},
 		...mapState({
 			registrationEnabled: state => state.config.registrationEnabled,
 			loading: LOADING,

From 5558d91f4470481c2b4c80d7b28d094bcafa4c53 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 11 Dec 2021 22:15:43 +0100
Subject: [PATCH 11/19] feat: change links to login / register pages

---
 src/i18n/lang/en.json       |  4 +++-
 src/views/user/Login.vue    | 48 ++++++++++++++-----------------------
 src/views/user/Register.vue | 33 +++++++++++++------------
 3 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 7fecb029d..0f023dc9d 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -54,7 +54,9 @@
       "usernameRequired": "Please provide a username.",
       "passwordRequired": "Please provide a password.",
       "showPassword": "Show the password",
-      "hidePassword": "Hide the password"
+      "hidePassword": "Hide the password",
+      "noAccountYet": "Don't have an account yet?",
+      "alreadyHaveAnAccount": "Already have an account?"
     },
     "settings": {
       "title": "Settings",
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 8848d41eb..9150fb4b0 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -83,26 +83,24 @@
 				</div>
 			</div>
 
-			<div class="field is-grouped login-buttons">
-				<div class="control is-expanded">
-					<x-button
-						@click="submit"
-						:loading="loading"
-						tabindex="4"
-						:disabled="!allFieldsValid"
-					>
-						{{ $t('user.auth.login') }}
-					</x-button>
-					<x-button
-						:to="{ name: 'user.register' }"
-						v-if="registrationEnabled"
-						type="secondary"
-						tabindex="5"
-					>
-						{{ $t('user.auth.createAccount') }}
-					</x-button>
-				</div>
-			</div>
+			<x-button
+				@click="submit"
+				:loading="loading"
+				tabindex="4"
+				:disabled="!allFieldsValid"
+			>
+				{{ $t('user.auth.login') }}
+			</x-button>
+			<p class="mt-2" v-if="registrationEnabled">
+				{{ $t('user.auth.noAccountYet') }}
+				<router-link
+					:to="{ name: 'user.register' }"
+					type="secondary"
+					tabindex="5"
+				>
+					{{ $t('user.auth.createAccount') }}
+				</router-link>
+			</p>
 		</form>
 
 		<div
@@ -263,16 +261,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.login-buttons {
-	@media screen and (max-width: 450px) {
-		flex-direction: column;
-
-		.control:first-child {
-			margin-bottom: 1rem;
-		}
-	}
-}
-
 .button {
 	margin: 0 0.4rem 0 0;
 }
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 48058fea7..10a306ae2 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -60,7 +60,7 @@
 						@focusout="validatePassword"
 					/>
 					<a
-						@click="togglePasswordFieldType" 
+						@click="togglePasswordFieldType"
 						class="password-field-type-toggle"
 						aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 						v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
@@ -72,22 +72,21 @@
 				</p>
 			</div>
 
-			<div class="field is-grouped">
-				<div class="control">
-					<x-button
-						:loading="loading"
-						id="register-submit"
-						@click="submit"
-						class="mr-2"
-						:disabled="!everythingValid"
-					>
-						{{ $t('user.auth.createAccount') }}
-					</x-button>
-					<x-button :to="{ name: 'user.login' }" type="secondary">
-						{{ $t('user.auth.login') }}
-					</x-button>
-				</div>
-			</div>
+			<x-button
+				:loading="loading"
+				id="register-submit"
+				@click="submit"
+				class="mr-2"
+				:disabled="!everythingValid"
+			>
+				{{ $t('user.auth.createAccount') }}
+			</x-button>
+			<p class="mt-2">
+				{{ $t('user.auth.alreadyHaveAnAccount') }}
+				<router-link :to="{ name: 'user.login' }">
+					{{ $t('user.auth.login') }}
+				</router-link>
+			</p>
 		</form>
 	</div>
 </template>

From 3eb0d58f7935c593cd0adac59ed3ebbad69b13b8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Dec 2021 20:25:58 +0100
Subject: [PATCH 12/19] fix: add .vue suffix to fix typescript warning

---
 src/components/misc/no-auth-wrapper.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index adc69fd7c..ec15403ee 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -23,9 +23,9 @@
 </template>
 
 <script lang="ts" setup>
-import Logo from '@/components/home/Logo'
-import Message from '@/components/misc/message'
-import Legal from '@/components/misc/legal'
+import Logo from '@/components/home/Logo.vue'
+import Message from '@/components/misc/message.vue'
+import Legal from '@/components/misc/legal.vue'
 import ApiConfig from '@/components/misc/api-config.vue'
 import {useStore} from 'vuex'
 import {computed} from 'vue'

From a4ec41e9377bbe1b5e282aa8482bf0e94c0521ab Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Dec 2021 20:27:26 +0100
Subject: [PATCH 13/19] fix: motd on mobile

---
 src/components/misc/no-auth-wrapper.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index ec15403ee..c345a812b 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -14,6 +14,9 @@
 				<div>
 					<h2 class="title" v-if="title">{{ title }}</h2>
 					<api-config @foundApi="hasApiUrl = true"/>
+					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
+						{{ motd }}
+					</Message>
 					<slot/>
 				</div>
 				<legal/>

From c46273ca341cc12fcfe8440946cd97ee0117fdf0 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 21 Dec 2021 15:47:40 +0100
Subject: [PATCH 14/19] fix: remove unused var

---
 src/components/misc/no-auth-wrapper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index c345a812b..f42cdfece 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -13,7 +13,7 @@
 			<section class="content">
 				<div>
 					<h2 class="title" v-if="title">{{ title }}</h2>
-					<api-config @foundApi="hasApiUrl = true"/>
+					<api-config/>
 					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
 						{{ motd }}
 					</Message>

From 27cd9535bf7e59de20c0f6261c69525237427d60 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 21 Dec 2021 15:47:49 +0100
Subject: [PATCH 15/19] fix: remove @ts-ignore

---
 src/components/misc/no-auth-wrapper.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index f42cdfece..e03db0521 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -41,8 +41,8 @@ const store = useStore()
 const {t} = useI18n()
 
 const motd = computed(() => store.state.config.motd)
-// @ts-ignore
-const title = computed(() => t(route.meta.title ?? ''))
+
+const title = computed(() => t(route.meta?.title as string || ''))
 useTitle(() => title.value)
 </script>
 

From 9a3069c20d3011c61b9b4a54c11f6e153c444886 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 21 Dec 2021 16:07:38 +0100
Subject: [PATCH 16/19] fix: propType validation in message.vue

---
 src/components/misc/message.vue | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/misc/message.vue b/src/components/misc/message.vue
index 37d71eef8..7ff84f9fe 100644
--- a/src/components/misc/message.vue
+++ b/src/components/misc/message.vue
@@ -7,7 +7,15 @@
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue'
+import {computed, PropType} from 'vue'
+
+const TEXT_ALIGN_MAP = Object.freeze({
+	left: '',
+	center: 'has-text-centered',
+	right: 'has-text-right',
+})
+
+type textAlignVariants = keyof typeof TEXT_ALIGN_MAP
 
 const props = defineProps({
 	variant: {
@@ -15,21 +23,12 @@ const props = defineProps({
 		default: 'info',
 	},
 	textAlign: {
-		type: String,
+		type: String as PropType<textAlignVariants>,
 		default: 'left',
 	},
 })
 
-const textAlignClass = computed(() => {
-	switch (props.textAlign) {
-		case 'left':
-			return ''
-		case 'right':
-			return 'has-text-right'
-		case 'center':
-			return 'has-text-centered'
-	}
-})
+const textAlignClass = computed(() => TEXT_ALIGN_MAP[props.textAlign])
 
 </script>
 

From 0322daf4d459f9108cb71902381f1dd1a2b06c57 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 13:37:33 +0100
Subject: [PATCH 17/19] feat: move password to separate component

---
 src/components/input/password.vue             | 85 +++++++++++++++++++
 src/styles/components/_index.scss             |  1 -
 .../components/password-field-toggle.scss     |  7 --
 src/views/user/Login.vue                      | 46 ++--------
 src/views/user/Register.vue                   | 45 ++--------
 5 files changed, 98 insertions(+), 86 deletions(-)
 create mode 100644 src/components/input/password.vue
 delete mode 100644 src/styles/components/password-field-toggle.scss

diff --git a/src/components/input/password.vue b/src/components/input/password.vue
new file mode 100644
index 000000000..b8c2fee42
--- /dev/null
+++ b/src/components/input/password.vue
@@ -0,0 +1,85 @@
+<template>
+	<div class="password-field">
+		<input
+			class="input"
+			id="password"
+			name="password"
+			:placeholder="$t('user.auth.passwordPlaceholder')"
+			required
+			:type="passwordFieldType"
+			autocomplete="current-password"
+			@keyup.enter="e => $emit('submit', e)"
+			:tabindex="props.tabindex"
+			@focusout="validate"
+			@input="handleInput"
+		/>
+		<a
+			@click="togglePasswordFieldType"
+			class="password-field-type-toggle"
+			aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
+			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
+			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
+		</a>
+	</div>
+	<p class="help is-danger" v-if="!isValid">
+		{{ $t('user.auth.passwordRequired') }}
+	</p>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from "vue";
+import {useDebounceFn} from "@vueuse/core";
+
+const props = defineProps({
+	tabindex: String,
+	modelValue: String,
+	// This prop is a workaround to trigger validation from the outside when the user never had focus in the input.
+	validateInitially: Boolean,
+})
+
+const emit = defineEmits(['submit', 'update:modelValue'])
+
+const passwordFieldType = ref<String>('password')
+const password = ref<String>('')
+const isValid = ref<Boolean>(!props.validateInitially)
+
+watch(
+	() => props.validateInitially,
+	(doValidate: Boolean) => {
+		if (doValidate) {
+			validate()
+		}
+	}
+)
+
+function validate() {
+	useDebounceFn(() => {
+		isValid.value = password.value !== ''
+	}, 100)()
+}
+
+function togglePasswordFieldType() {
+	passwordFieldType.value = passwordFieldType.value === 'password'
+		? 'text'
+		: 'password'
+}
+
+function handleInput(e) {
+	password.value = e.target.value
+	emit('update:modelValue', e.target.value)
+}
+</script>
+
+<style scoped>
+.password-field {
+	position: relative;
+}
+
+.password-field-type-toggle {
+	position: absolute;
+	color: var(--grey-400);
+	top: 50%;
+	right: 1rem;
+	transform: translateY(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index 4511d1cae..323769b4f 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -4,4 +4,3 @@
 @import "task";
 @import "tasks";
 @import "namespaces";
-@import 'password-field-toggle';
diff --git a/src/styles/components/password-field-toggle.scss b/src/styles/components/password-field-toggle.scss
deleted file mode 100644
index 52d95ba5d..000000000
--- a/src/styles/components/password-field-toggle.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.password-field-type-toggle {
-  position: absolute;
-  color: var(--grey-400);
-  top: 50%;
-  right: 1rem;
-  transform: translateY(-50%);
-}
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 9150fb4b0..5c3153bf1 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -39,31 +39,7 @@
 						{{ $t('user.auth.forgotPassword') }}
 					</router-link>
 				</div>
-				<div class="control">
-					<input
-						class="input"
-						id="password"
-						name="password"
-						:placeholder="$t('user.auth.passwordPlaceholder')"
-						ref="password"
-						required
-						:type="passwordFieldType"
-						autocomplete="current-password"
-						@keyup.enter="submit"
-						tabindex="2"
-						@focusout="validateField('password')"
-					/>
-					<a
-						@click="togglePasswordFieldType"
-						class="password-field-type-toggle"
-						aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
-						v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
-						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
-					</a>
-				</div>
-				<p class="help is-danger" v-if="!passwordValid">
-					{{ $t('user.auth.passwordRequired') }}
-				</p>
+				<password tabindex="2" @submit="submit" v-model="password" :validate-initially="validatePasswordInitially"/>
 			</div>
 			<div class="field" v-if="needsTotpPasscode">
 				<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
@@ -87,7 +63,6 @@
 				@click="submit"
 				:loading="loading"
 				tabindex="4"
-				:disabled="!allFieldsValid"
 			>
 				{{ $t('user.auth.login') }}
 			</x-button>
@@ -129,9 +104,11 @@ import {getErrorText} from '@/message'
 import Message from '@/components/misc/message'
 import {redirectToProvider} from '../../helpers/redirectToProvider'
 import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
+import Password from '@/components/input/password'
 
 export default {
 	components: {
+		Password,
 		Message,
 	},
 	data() {
@@ -139,8 +116,8 @@ export default {
 			confirmedEmailSuccess: false,
 			errorMessage: '',
 			usernameValid: true,
-			passwordValid: true,
-			passwordFieldType: 'password',
+			password: '',
+			validatePasswordInitially: false,
 		}
 	},
 	beforeMount() {
@@ -185,9 +162,6 @@ export default {
 				this.openidConnect.providers &&
 				this.openidConnect.providers.length > 0
 		},
-		allFieldsValid() {
-			return this.usernameValid && this.passwordValid
-		},
 		...mapState({
 			registrationEnabled: state => state.config.registrationEnabled,
 			loading: LOADING,
@@ -215,12 +189,6 @@ export default {
 			}
 		},
 
-		togglePasswordFieldType() {
-			this.passwordFieldType = this.passwordFieldType === 'password'
-				? 'text'
-				: 'password'
-		},
-
 		async submit() {
 			this.errorMessage = ''
 			// Some browsers prevent Vue bindings from working with autofilled values.
@@ -228,13 +196,13 @@ export default {
 			// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
 			const credentials = {
 				username: this.$refs.username.value,
-				password: this.$refs.password.value,
+				password: this.password,
 			}
 
 			if (credentials.username === '' || credentials.password === '') {
 				// Trigger the validation error messages
 				this.validateField('username')
-				this.validateField('password')
+				this.validatePasswordInitially = true
 				return
 			}
 
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 10a306ae2..0d7172d42 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -46,30 +46,7 @@
 			</div>
 			<div class="field">
 				<label class="label" for="password">{{ $t('user.auth.password') }}</label>
-				<div class="control is-relative">
-					<input
-						class="input"
-						id="password"
-						name="password"
-						:placeholder="$t('user.auth.passwordPlaceholder')"
-						required
-						:type="passwordFieldType"
-						autocomplete="new-password"
-						v-model="credentials.password"
-						@keyup.enter="submit"
-						@focusout="validatePassword"
-					/>
-					<a
-						@click="togglePasswordFieldType"
-						class="password-field-type-toggle"
-						aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
-						v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
-						<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
-					</a>
-				</div>
-				<p class="help is-danger" v-if="!passwordValid">
-					{{ $t('user.auth.passwordRequired') }}
-				</p>
+				<password @submit="submit" @update:modelValue="v => credentials.password = v" :validate-initially="validatePasswordInitially"/>
 			</div>
 
 			<x-button
@@ -93,12 +70,13 @@
 
 <script setup>
 import {useDebounceFn} from '@vueuse/core'
-import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
+import {ref, reactive, toRaw, computed, onBeforeMount, watch} from 'vue'
 
 import router from '@/router'
 import {store} from '@/store'
 import Message from '@/components/misc/message'
 import {isEmail} from '@/helpers/isEmail'
+import Password from '@/components/input/password'
 
 // FIXME: use the `beforeEnter` hook of vue-router
 // Check if the user is already logged in, if so, redirect them to the homepage
@@ -116,6 +94,7 @@ const credentials = reactive({
 
 const loading = computed(() => store.state.loading)
 const errorMessage = ref('')
+const validatePasswordInitially = ref(false)
 
 const DEBOUNCE_TIME = 100
 
@@ -130,29 +109,17 @@ const validateUsername = useDebounceFn(() => {
 	usernameValid.value = credentials.username !== ''
 }, DEBOUNCE_TIME)
 
-const passwordValid = ref(true)
-const validatePassword = useDebounceFn(() => {
-	passwordValid.value = credentials.password !== ''
-}, DEBOUNCE_TIME)
-
 const everythingValid = computed(() => {
 	return credentials.username !== '' &&
 		credentials.email !== '' &&
 		credentials.password !== '' &&
 		emailValid.value &&
-		usernameValid.value &&
-		passwordValid.value
+		usernameValid.value
 })
 
-const passwordFieldType = ref('password')
-const togglePasswordFieldType = () => {
-	passwordFieldType.value = passwordFieldType.value === 'password'
-		? 'text'
-		: 'password'
-}
-
 async function submit() {
 	errorMessage.value = ''
+	validatePasswordInitially.value = true
 
 	if (!everythingValid.value) {
 		return

From 9c5613ad98b742e008570d7f99e2424af64e335b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 13:42:21 +0100
Subject: [PATCH 18/19] fix: lint

---
 src/components/input/password.vue | 6 +++---
 src/views/user/Register.vue       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/input/password.vue b/src/components/input/password.vue
index b8c2fee42..9062ccaa2 100644
--- a/src/components/input/password.vue
+++ b/src/components/input/password.vue
@@ -27,8 +27,8 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, watch} from "vue";
-import {useDebounceFn} from "@vueuse/core";
+import {ref, watch} from 'vue'
+import {useDebounceFn} from '@vueuse/core'
 
 const props = defineProps({
 	tabindex: String,
@@ -49,7 +49,7 @@ watch(
 		if (doValidate) {
 			validate()
 		}
-	}
+	},
 )
 
 function validate() {
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 0d7172d42..ce95eeaed 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -70,7 +70,7 @@
 
 <script setup>
 import {useDebounceFn} from '@vueuse/core'
-import {ref, reactive, toRaw, computed, onBeforeMount, watch} from 'vue'
+import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
 
 import router from '@/router'
 import {store} from '@/store'

From 19a161ff7858e702b708dd0798a079e39cc2bb39 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 8 Jan 2022 13:49:07 +0100
Subject: [PATCH 19/19] fix: password validation field in test

---
 cypress/integration/user/registration.spec.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/cypress/integration/user/registration.spec.js b/cypress/integration/user/registration.spec.js
index fd940aa7e..16e959d7b 100644
--- a/cypress/integration/user/registration.spec.js
+++ b/cypress/integration/user/registration.spec.js
@@ -25,7 +25,6 @@ context('Registration', () => {
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
 		cy.get('#password').type(fixture.password)
-		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.url().should('include', '/')
 		cy.clock(1625656161057) // 13:00
@@ -43,7 +42,6 @@ context('Registration', () => {
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
 		cy.get('#password').type(fixture.password)
-		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.get('div.message.danger').contains('A user with this username already exists.')
 	})