feat: improve input validation for register form

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
+}

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

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)

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