WIP Sync

frontend/vue-app/src/components/auth/ForgotPassword.vue

@@ -12,14 +12,14 @@
             autocomplete="username"
             autofocus
             v-model="email"
-            :class="{ 'input-error': submitAttempted && !isEmailValid }"
+            :class="{ 'input-error': submitAttempted && !isFormValid }"
             required
           />
           <small v-if="submitAttempted && !email" class="error-message" aria-live="polite">
             Email is required.
           </small>
           <small
-            v-else-if="submitAttempted && !isEmailValid"
+            v-else-if="submitAttempted && !isFormValid"
             class="error-message"
             aria-live="polite"
           >
@@ -40,7 +40,7 @@
         </div>
 
         <div class="form-group actions" style="margin-top: 0.4rem">
-          <button type="submit" class="btn btn-primary" :disabled="loading || !isEmailValid">
+          <button type="submit" class="btn btn-primary" :disabled="loading || !isFormValid">
             {{ loading ? 'Sending…' : 'Send Reset Link' }}
           </button>
         </div>
@@ -92,12 +92,15 @@ const successMsg = ref('')
 
 const isEmailValidRef = computed(() => isEmailValid(email.value))
 
+// Add computed for form validity: email must be non-empty and valid
+const isFormValid = computed(() => email.value.trim() !== '' && isEmailValidRef.value)
+
 async function submitForm() {
   submitAttempted.value = true
   errorMsg.value = ''
   successMsg.value = ''
 
-  if (!isEmailValidRef.value) return
+  if (!isFormValid.value) return
   loading.value = true
   try {
     const res = await fetch('/api/request-password-reset', {