WIP Sync

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 = ''