feat: improve input validation for register form

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