From e5fdb3efb1a15d4eb5cb2465ea8d04e177792d61 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 20:51:01 +0200
Subject: [PATCH] fix: add client-side validation to forgot-password forms

Both the organizer app and portal forgot-password pages now
validate the email field before submission: required + email
format check. Backend already validated this, but empty or
malformed emails were being sent to the API unnecessarily.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/app/src/pages/forgot-password.vue        | 8 ++++++++
 apps/portal/src/pages/wachtwoord-vergeten.vue | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/apps/app/src/pages/forgot-password.vue b/apps/app/src/pages/forgot-password.vue
index 8e02d472..1bef2da0 100644
--- a/apps/app/src/pages/forgot-password.vue
+++ b/apps/app/src/pages/forgot-password.vue
@@ -6,6 +6,8 @@ import authV2MaskDark from '@images/pages/misc-mask-dark.png'
 import authV2MaskLight from '@images/pages/misc-mask-light.png'
 import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
 import { themeConfig } from '@themeConfig'
+import { requiredValidator, emailValidator } from '@core/utils/validators'
+import { VForm } from 'vuetify/components/VForm'
 import { apiClient } from '@/lib/axios'
 
 definePage({
@@ -15,6 +17,7 @@ definePage({
   },
 })
 
+const refVForm = ref<VForm>()
 const email = ref('')
 const isSubmitting = ref(false)
 const done = ref(false)
@@ -26,6 +29,9 @@ const authThemeImg = useGenerateImageVariant(
 const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
 
 async function onSubmit(): Promise<void> {
+  const { valid } = await refVForm.value!.validate()
+  if (!valid) return
+
   isSubmitting.value = true
   try {
     await apiClient.post('/auth/forgot-password', {
@@ -114,6 +120,7 @@ async function onSubmit(): Promise<void> {
 
           <VForm
             v-if="!done"
+            ref="refVForm"
             @submit.prevent="onSubmit"
           >
             <VRow>
@@ -124,6 +131,7 @@ async function onSubmit(): Promise<void> {
                   label="E-mailadres"
                   type="email"
                   placeholder="naam@voorbeeld.nl"
+                  :rules="[requiredValidator, emailValidator]"
                 />
               </VCol>
 
diff --git a/apps/portal/src/pages/wachtwoord-vergeten.vue b/apps/portal/src/pages/wachtwoord-vergeten.vue
index 3fd64f1c..18ae00d2 100644
--- a/apps/portal/src/pages/wachtwoord-vergeten.vue
+++ b/apps/portal/src/pages/wachtwoord-vergeten.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 { apiClient } from '@/lib/axios'
 
 definePage({
@@ -13,11 +15,15 @@ definePage({
   },
 })
 
+const refVForm = ref<VForm>()
 const email = ref('')
 const isSubmitting = ref(false)
 const done = ref(false)
 
 async function onSubmit(): Promise<void> {
+  const { valid } = await refVForm.value!.validate()
+  if (!valid) return
+
   isSubmitting.value = true
   try {
     await apiClient.post('/auth/forgot-password', { email: email.value.trim(), app: 'portal' })
@@ -84,6 +90,7 @@ async function onSubmit(): Promise<void> {
 
           <VForm
             v-if="!done"
+            ref="refVForm"
             @submit.prevent="onSubmit"
           >
             <VRow>
@@ -94,6 +101,7 @@ async function onSubmit(): Promise<void> {
                   label="E-mailadres"
                   type="email"
                   placeholder="je@email.nl"
+                  :rules="[requiredValidator, emailValidator]"
                 />
               </VCol>