From b7473a68e1451c8240da708aada4d414b0ddc094 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 20:47:47 +0200
Subject: [PATCH] fix: add client-side validation to portal login form

Add requiredValidator and emailValidator rules to the portal login
form, matching the organizer app login. Empty fields and invalid
email format are now caught before the API call.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/portal/src/pages/login.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/pages/login.vue b/apps/portal/src/pages/login.vue
index 337a0759..11dbeef3 100644
--- a/apps/portal/src/pages/login.vue
+++ b/apps/portal/src/pages/login.vue
@@ -3,6 +3,8 @@ import authV1BottomShape from '@images/svg/auth-v1-bottom-shape.svg?raw'
 import authV1TopShape from '@images/svg/auth-v1-top-shape.svg?raw'
 import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
 import { themeConfig } from '@themeConfig'
+import { requiredValidator, emailValidator } from '@core/utils/validators'
+import { VForm } from 'vuetify/components/VForm'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { usePortalStore } from '@/stores/usePortalStore'
 import { apiClient } from '@/lib/axios'
@@ -27,6 +29,7 @@ const form = ref({
   password: '',
 })
 
+const refVForm = ref<VForm>()
 const isPasswordVisible = ref(false)
 const errorMessage = ref('')
 const isSubmitting = ref(false)
@@ -50,6 +53,9 @@ function mapLoginErrorMessage(message: string | undefined): string {
 }
 
 async function onSubmit(): Promise<void> {
+  const { valid } = await refVForm.value!.validate()
+  if (!valid) return
+
   errorMessage.value = ''
   isSubmitting.value = true
 
@@ -209,7 +215,10 @@ function onMfaCancelled() {
             {{ errorMessage }}
           </VAlert>
 
-          <VForm @submit.prevent="onSubmit">
+          <VForm
+            ref="refVForm"
+            @submit.prevent="onSubmit"
+          >
             <VRow>
               <VCol cols="12">
                 <AppTextField
@@ -219,6 +228,7 @@ function onMfaCancelled() {
                   type="email"
                   placeholder="je@email.nl"
                   autocomplete="email"
+                  :rules="[requiredValidator, emailValidator]"
                 />
               </VCol>
 
@@ -229,6 +239,7 @@ function onMfaCancelled() {
                   placeholder="············"
                   :type="isPasswordVisible ? 'text' : 'password'"
                   autocomplete="current-password"
+                  :rules="[requiredValidator]"
                   :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
                   @click:append-inner="isPasswordVisible = !isPasswordVisible"
                 />