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>