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

@@ -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() {

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?",

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(() => {