From 390f71b0c67dd78f20ccc4f9b7cc4087bb966fbe Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 12 Feb 2024 17:32:24 +0100
Subject: [PATCH] feat(registration): improve username and password validation

Username and password are validated in the api for length and whitespaces. Previously, the api would tell the user "hey you got it wrong" but the error was not reflected properly in the UI. This change implements a client-side validation which mirrors the one from the api, allowing instant validation and better error UX.
---
 frontend/src/components/input/password.vue | 31 ++++++++++++----
 frontend/src/i18n/lang/en.json             |  4 ++
 frontend/src/views/user/Register.vue       | 43 +++++++++++++++++-----
 3 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/input/password.vue b/frontend/src/components/input/password.vue
index 06fde802c..d6812a5fc 100644
--- a/frontend/src/components/input/password.vue
+++ b/frontend/src/components/input/password.vue
@@ -10,7 +10,8 @@
 			autocomplete="current-password"
 			:tabindex="props.tabindex"
 			@keyup.enter="e => $emit('submit', e)"
-			@focusout="validate"
+			@focusout="() => {validate(); validateAfterFirst = true}"
+			@keyup="() => {validateAfterFirst ? validate() : null}"
 			@input="handleInput"
 		>
 		<BaseButton
@@ -23,16 +24,17 @@
 		</BaseButton>
 	</div>
 	<p
-		v-if="!isValid"
+		v-if="isValid !== true"
 		class="help is-danger"
 	>
-		{{ $t('user.auth.passwordRequired') }}
+		{{ isValid }}
 	</p>
 </template>
 
 <script lang="ts" setup>
 import {ref, watch} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
+import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 const props = defineProps({
@@ -41,12 +43,12 @@ const props = defineProps({
 	// 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 {t} = useI18n()
 const passwordFieldType = ref('password')
 const password = ref('')
-const isValid = ref(!props.validateInitially)
+const isValid = ref<true | string>(props.validateInitially === true ? true : '')
+const validateAfterFirst = ref(false)
 
 watch(
 	() => props.validateInitially,
@@ -55,7 +57,22 @@ watch(
 )
 
 const validate = useDebounceFn(() => {
-	isValid.value = password.value !== ''
+	if (password.value === '') {
+		isValid.value = t('user.auth.passwordRequired')
+		return
+	}
+
+	if (password.value.length < 8) {
+		isValid.value = t('user.auth.passwordNotMin')
+		return
+	}
+	
+	if (password.value.length > 250) {
+		isValid.value = t('user.auth.passwordNotMax')
+		return
+	}
+	
+	isValid.value = true
 }, 100)
 
 function togglePasswordFieldType() {
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index 43fd23ac6..0398c89ea 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -57,7 +57,11 @@
       "logout": "Logout",
       "emailInvalid": "Please enter a valid email address.",
       "usernameRequired": "Please provide a username.",
+      "usernameMustNotContainSpace": "The username must not contain spaces.",
+      "usernameMustNotLookLikeUrl": "The username must not look like a URL.",
       "passwordRequired": "Please provide a password.",
+      "passwordNotMin": "Password must have at least 8 characters.",
+      "passwordNotMax": "Password must have at most 250 characters.",
       "showPassword": "Show the password",
       "hidePassword": "Hide the password",
       "noAccountYet": "Don't have an account yet?",
diff --git a/frontend/src/views/user/Register.vue b/frontend/src/views/user/Register.vue
index fe67affc6..a2c46384f 100644
--- a/frontend/src/views/user/Register.vue
+++ b/frontend/src/views/user/Register.vue
@@ -28,21 +28,24 @@
 						type="text"
 						autocomplete="username"
 						@keyup.enter="submit"
-						@focusout="validateUsername"
+						@focusout="() => {validateUsername(); validateUsernameAfterFirst = true}"
+						@keyup="() => {validateUsernameAfterFirst ? validateUsername() : null}"
 					>
 				</div>
 				<p
-					v-if="!usernameValid"
+					v-if="usernameValid !== true"
 					class="help is-danger"
 				>
-					{{ $t('user.auth.usernameRequired') }}
+					{{ usernameValid }}
 				</p>
 			</div>
 			<div class="field">
 				<label
 					class="label"
 					for="email"
-				>{{ $t('user.auth.email') }}</label>
+				>
+					{{ $t('user.auth.email') }}
+				</label>
 				<div class="control">
 					<input
 						id="email"
@@ -53,7 +56,8 @@
 						required
 						type="email"
 						@keyup.enter="submit"
-						@focusout="validateEmail"
+						@focusout="() => {validateEmail(); validateEmailAfterFirst = true}"
+						@keyup="() => {validateEmailAfterFirst ? validateEmail() : null}"
 					>
 				</div>
 				<p
@@ -84,7 +88,7 @@
 			>
 				{{ $t('user.auth.createAccount') }}
 			</x-button>
-			
+
 			<Message
 				v-if="configStore.demoModeEnabled"
 				variant="warning"
@@ -94,7 +98,7 @@
 				{{ $t('demo.accountWillBeDeleted') }}<br>
 				<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
 			</Message>
-			
+
 			<p class="mt-2">
 				{{ $t('user.auth.alreadyHaveAnAccount') }}
 				<router-link :to="{ name: 'user.login' }">
@@ -107,7 +111,8 @@
 
 <script setup lang="ts">
 import {useDebounceFn} from '@vueuse/core'
-import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
+import {computed, onBeforeMount, reactive, ref, toRaw} from 'vue'
+import {useI18n} from 'vue-i18n'
 
 import router from '@/router'
 import Message from '@/components/misc/message.vue'
@@ -117,6 +122,7 @@ import Password from '@/components/input/password.vue'
 import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'
 
+const {t} = useI18n()
 const authStore = useAuthStore()
 const configStore = useConfigStore()
 
@@ -142,13 +148,30 @@ const DEBOUNCE_TIME = 100
 
 // debouncing to prevent error messages when clicking on the log in button
 const emailValid = ref(true)
+const validateEmailAfterFirst = ref(false)
 const validateEmail = useDebounceFn(() => {
 	emailValid.value = isEmail(credentials.email)
 }, DEBOUNCE_TIME)
 
-const usernameValid = ref(true)
+const usernameValid = ref<true | string>(true)
+const validateUsernameAfterFirst = ref(false)
 const validateUsername = useDebounceFn(() => {
-	usernameValid.value = credentials.username !== ''
+	if (credentials.username === '') {
+		usernameValid.value = t('user.auth.usernameRequired')
+		return
+	}
+	
+	if(credentials.username.indexOf(' ') !== -1) {
+		usernameValid.value = t('user.auth.usernameMustNotContainSpace')
+		return
+	}
+	
+	if(credentials.username.indexOf('://') !== -1) {
+		usernameValid.value = t('user.auth.usernameMustNotLookLikeUrl')
+		return
+	}
+	
+	usernameValid.value = true
 }, DEBOUNCE_TIME)
 
 const everythingValid = computed(() => {