WIP Sync

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

@@ -4,7 +4,7 @@
       <h1>Welcome</h1>
       <p>Please sign in or create an account to continue.</p>
       <div class="auth-actions">
-        <button class="btn btn-primary" @click="goToLogin">Log In</button>
+        <button class="btn btn-primary" @click="goToLogin">Sign In</button>
         <button class="btn btn-secondary" @click="goToSignup">Sign Up</button>
       </div>
     </div>

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', {

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

@@ -20,7 +20,14 @@
       </p>
       <input v-model="code" maxlength="6" class="code-input" placeholder="6-digit code" />
       <div class="button-group">
-        <button v-if="!loading" class="btn btn-primary" @click="verifyCode">Verify Code</button>
+        <button
+          v-if="!loading"
+          class="btn btn-primary"
+          @click="verifyCode"
+          :disabled="!isCodeValid"
+        >
+          Verify Code
+        </button>
         <button class="btn btn-link" @click="resendCode" v-if="showResend" :disabled="loading">
           Resend Code
         </button>
@@ -46,7 +53,7 @@
         class="pin-input"
         placeholder="Confirm PIN"
       />
-      <button class="btn btn-primary" @click="setPin" :disabled="loading">
+      <button class="btn btn-primary" @click="setPin" :disabled="loading || !isPinValid">
         {{ loading ? 'Saving...' : 'Set PIN' }}
       </button>
       <div v-if="error" class="error-message">{{ error }}</div>
@@ -60,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { logoutParent } from '@/stores/auth'
 import '@/assets/styles.css'
@@ -77,6 +84,14 @@ const showResend = ref(false)
 let resendTimeout: ReturnType<typeof setTimeout> | null = null
 const router = useRouter()
 
+const isCodeValid = computed(() => code.value.length === 6)
+
+const isPinValid = computed(() => {
+  const p1 = pin.value
+  const p2 = pin2.value
+  return /^\d{4,6}$/.test(p1) && /^\d{4,6}$/.test(p2) && p1 === p2
+})
+
 async function requestCode() {
   error.value = ''
   info.value = ''

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

@@ -112,6 +112,16 @@
       </div>
       <div v-else style="margin-top: 2rem; text-align: center">Checking reset link...</div>
     </div>
+
+    <!-- Success Modal -->
+    <ModalDialog v-if="showModal" title="Password Reset Successful" @backdrop-click="closeModal">
+      <p class="modal-message">
+        Your password has been reset successfully. You can now sign in with your new password.
+      </p>
+      <div class="modal-actions">
+        <button @click="goToLogin" class="btn btn-primary">Sign In</button>
+      </div>
+    </ModalDialog>
   </div>
 </template>
 
@@ -119,6 +129,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { isPasswordStrong } from '@/common/api'
+import ModalDialog from '@/components/shared/ModalDialog.vue'
 import '@/assets/styles.css'
 
 const router = useRouter()
@@ -133,6 +144,7 @@ const successMsg = ref('')
 const token = ref('')
 const tokenValid = ref(false)
 const tokenChecked = ref(false)
+const showModal = ref(false)
 
 const isPasswordStrongRef = computed(() => isPasswordStrong(password.value))
 const passwordsMatch = computed(() => password.value === confirmPassword.value)
@@ -202,10 +214,11 @@ async function submitForm() {
       errorMsg.value = msg
       return
     }
-    successMsg.value = 'Your password has been reset. You may now sign in.'
+    // Success: Show modal instead of successMsg
+    showModal.value = true
     password.value = ''
     confirmPassword.value = ''
-    submitAttempted.value = false // <-- add this line
+    submitAttempted.value = false
   } catch {
     errorMsg.value = 'Network error. Please try again.'
   } finally {
@@ -213,6 +226,10 @@ async function submitForm() {
   }
 }
 
+function closeModal() {
+  showModal.value = false
+}
+
 async function goToLogin() {
   await router.push({ name: 'Login' }).catch(() => (window.location.href = '/auth/login'))
 }