feat: add parent PIN setup functionality and email notifications

- Implemented User model updates to include PIN and related fields.
- Created email sender utility for sending verification and reset emails.
- Developed ParentPinSetup component for setting up a parent PIN with verification code.
- Enhanced UserProfile and EntityEditForm components to support new features.
- Updated routing to include PIN setup and authentication checks.
- Added styles for new components and improved existing styles for consistency.
- Introduced loading states and error handling in various components.

frontend/vue-app/src/assets/edit-forms.css

@@ -11,16 +11,6 @@
   padding: 2rem 2.2rem 1.5rem 2.2rem;
 }
 
-.profile-view h2,
-.edit-view h2,
-.child-edit-view h2,
-.reward-edit-view h2,
-.task-edit-view h2 {
-  text-align: center;
-  margin-bottom: 1.5rem;
-  color: var(--form-heading);
-}
-
 .profile-form,
 .task-form,
 .reward-form,

frontend/vue-app/src/assets/styles.css

@@ -1,3 +1,12 @@
+/* Edit view container for forms */
+.edit-view {
+  max-width: 400px;
+  margin: 2rem auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
 /*buttons*/
 .btn {
   font-weight: 600;
@@ -98,3 +107,15 @@
   background: var(--sign-in-btn-hover-bg);
   color: var(--sign-in-btn-hover-color);
 }
+
+/* Errors and info*/
+.info-message {
+  color: var(--info-points, #2563eb);
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+.error-message {
+  color: var(--error, #e53e3e);
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="pin-setup-view">
+    <div v-if="step === 1">
+      <h2>Set up your Parent PIN</h2>
+      <p>
+        To protect your account, you need to set a Parent PIN. This PIN is required to access parent
+        features.
+      </p>
+      <button class="btn btn-primary" @click="requestCode" :disabled="loading">
+        {{ loading ? 'Sending...' : 'Send Verification Code' }}
+      </button>
+      <div v-if="error" class="error-message">{{ error }}</div>
+      <div v-if="info" class="info-message">{{ info }}</div>
+    </div>
+    <div v-else-if="step === 2">
+      <h2>Enter Verification Code</h2>
+      <p>
+        We've sent a 6-digit code to your email. Enter it below to continue. The code is valid for
+        10 minutes.
+      </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 class="btn btn-link" @click="resendCode" v-if="showResend" :disabled="loading">
+          Resend Code
+        </button>
+        <div v-if="error" class="error-message">{{ error }}</div>
+      </div>
+    </div>
+    <div v-else-if="step === 3">
+      <h2>Create Parent PIN</h2>
+      <p>Enter a new 4–6 digit Parent PIN. This will be required for parent access.</p>
+      <input
+        v-model="pin"
+        maxlength="6"
+        inputmode="numeric"
+        pattern="\d*"
+        class="pin-input"
+        placeholder="New PIN"
+      />
+      <input
+        v-model="pin2"
+        maxlength="6"
+        inputmode="numeric"
+        pattern="\d*"
+        class="pin-input"
+        placeholder="Confirm PIN"
+      />
+      <button class="btn btn-primary" @click="setPin" :disabled="loading">
+        {{ loading ? 'Saving...' : 'Set PIN' }}
+      </button>
+      <div v-if="error" class="error-message">{{ error }}</div>
+    </div>
+    <div v-else-if="step === 4">
+      <h2>Parent PIN Set!</h2>
+      <p>Your Parent PIN has been set. You can now use it to access parent features.</p>
+      <button class="btn btn-primary" @click="goBack">Back</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { logoutParent } from '@/stores/auth'
+import '@/assets/styles.css'
+import '@/assets/colors.css'
+
+const step = ref(1)
+const loading = ref(false)
+const error = ref('')
+const info = ref('')
+const code = ref('')
+const pin = ref('')
+const pin2 = ref('')
+
+const showResend = ref(false)
+let resendTimeout: ReturnType<typeof setTimeout> | null = null
+const router = useRouter()
+
+async function requestCode() {
+  error.value = ''
+  info.value = ''
+  loading.value = true
+  try {
+    const res = await fetch('/api/user/request-pin-setup', {
+      method: 'POST',
+      credentials: 'include',
+    })
+    const data = await res.json()
+    if (!res.ok) throw new Error(data.error || 'Failed to send code')
+    info.value = 'A verification code has been sent to your email.'
+    step.value = 2
+    code.value = ''
+    showResend.value = false
+    if (resendTimeout) clearTimeout(resendTimeout)
+    resendTimeout = setTimeout(() => {
+      showResend.value = true
+    }, 10000)
+  } catch (e: any) {
+    error.value = e.message || 'Failed to send code.'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function resendCode() {
+  error.value = ''
+  info.value = ''
+  loading.value = true
+  try {
+    const res = await fetch('/api/user/request-pin-setup', {
+      method: 'POST',
+      credentials: 'include',
+    })
+    const data = await res.json()
+    if (!res.ok) throw new Error(data.error || 'Failed to resend code')
+    info.value = 'A new verification code has been sent to your email.'
+    // Stay on code input step
+    step.value = 2
+    code.value = ''
+    showResend.value = false
+    if (resendTimeout) clearTimeout(resendTimeout)
+    resendTimeout = setTimeout(() => {
+      showResend.value = true
+    }, 10000)
+  } catch (e: any) {
+    error.value = e.message || 'Failed to resend code.'
+  } finally {
+    loading.value = false
+  }
+}
+// When entering step 2, start the resend timer
+watch(step, (newStep) => {
+  if (newStep === 2) {
+    showResend.value = false
+    if (resendTimeout) clearTimeout(resendTimeout)
+    resendTimeout = setTimeout(() => {
+      showResend.value = true
+    }, 10000)
+  }
+})
+
+onMounted(() => {
+  if (step.value === 2) {
+    showResend.value = false
+    if (resendTimeout) clearTimeout(resendTimeout)
+    resendTimeout = setTimeout(() => {
+      showResend.value = true
+    }, 10000)
+  }
+})
+
+async function verifyCode() {
+  error.value = ''
+  loading.value = true
+  try {
+    const res = await fetch('/api/user/verify-pin-setup', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code: code.value }),
+      credentials: 'include',
+    })
+    const data = await res.json()
+    if (!res.ok) throw new Error(data.error || 'Invalid code')
+    step.value = 3
+  } catch (e: any) {
+    error.value = e.message || 'Invalid code.'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function setPin() {
+  error.value = ''
+  if (!/^\d{4,6}$/.test(pin.value)) {
+    error.value = 'PIN must be 4–6 digits.'
+    return
+  }
+  if (pin.value !== pin2.value) {
+    error.value = 'PINs do not match.'
+    return
+  }
+  loading.value = true
+  try {
+    const res = await fetch('/api/user/set-pin', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pin: pin.value }),
+      credentials: 'include',
+    })
+    const data = await res.json()
+    if (!res.ok) throw new Error(data.error || 'Failed to set PIN')
+    step.value = 4
+  } catch (e: any) {
+    error.value = e.message || 'Failed to set PIN.'
+  } finally {
+    loading.value = false
+  }
+}
+
+function goBack() {
+  logoutParent()
+  router.push('/child')
+}
+</script>
+
+<style scoped>
+.pin-setup-view {
+  max-width: 400px;
+  margin: 2.5rem auto;
+  background: var(--form-bg, #fff);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow, #e6e6e6);
+  padding: 2.2rem 2.2rem 1.5rem 2.2rem;
+  text-align: center;
+}
+.pin-input,
+.code-input {
+  width: 100%;
+  padding: 0.7rem;
+  border-radius: 7px;
+  border: 1px solid var(--form-input-border, #e6e6e6);
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  box-sizing: border-box;
+  text-align: center;
+}
+.button-group {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

frontend/vue-app/src/components/child/ChildEditView.vue

@@ -1,21 +1,24 @@
 <template>
-  <EntityEditForm
-    entityLabel="Child"
-    :fields="fields"
-    :initialData="initialData"
-    :isEdit="isEdit"
-    :loading="loading"
-    :error="error"
-    @submit="handleSubmit"
-    @cancel="handleCancel"
-    @add-image="handleAddImage"
-  />
+  <div class="edit-view">
+    <EntityEditForm
+      entityLabel="Child"
+      :fields="fields"
+      :initialData="initialData"
+      :isEdit="isEdit"
+      :loading="loading"
+      :error="error"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+      @add-image="handleAddImage"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import EntityEditForm from '../shared/EntityEditForm.vue'
+import '@/assets/styles.css'
 
 const route = useRoute()
 const router = useRouter()
@@ -130,3 +133,4 @@ function handleCancel() {
   router.back()
 }
 </script>
+<style scoped></style>

frontend/vue-app/src/components/profile/UserProfile.vue

@@ -1,86 +1,101 @@
 <template>
-  <div class="profile-view">
-    <h2>User Profile</h2>
-    <form class="profile-form" @submit.prevent>
-      <div class="group">
-        <label for="child-image">Image</label>
-        <ImagePicker
-          id="child-image"
-          v-model="selectedImageId"
-          :image-type="1"
-          @add-image="onAddImage"
-        />
+  <div class="edit-view">
+    <EntityEditForm
+      entityLabel="User Profile"
+      :fields="fields"
+      :initialData="initialData"
+      :isEdit="true"
+      :loading="loading"
+      :error="errorMsg"
+      :title="'User Profile'"
+      @submit="handleSubmit"
+      @add-image="onAddImage"
+    >
+      <template #custom-field-email="{ modelValue }">
+        <div class="email-actions">
+          <input id="email" type="email" :value="modelValue" disabled class="readonly-input" />
+          <button
+            type="button"
+            class="btn-link align-start btn-link-space"
+            @click="goToChangeParentPin"
+          >
+            Change Parent Pin
+          </button>
+          <button
+            type="button"
+            class="btn-link align-start btn-link-space"
+            @click="resetPassword"
+            :disabled="resetting"
+          >
+            Change Password
+          </button>
+        </div>
+      </template>
+    </EntityEditForm>
+    <div v-if="errorMsg" class="error-message" aria-live="polite">{{ errorMsg }}</div>
+    <ModalDialog
+      v-if="showModal"
+      :title="modalTitle"
+      :subtitle="modalSubtitle"
+      @close="handleModalClose"
+    >
+      <div class="modal-message">{{ modalMessage }}</div>
+      <div class="modal-actions" v-if="!resetting">
+        <button class="btn btn-primary" @click="handleModalClose">OK</button>
       </div>
-      <div class="group">
-        <label for="first-name">First Name</label>
-        <input id="first-name" v-model="firstName" type="text" disabled />
-      </div>
-      <div class="group">
-        <label for="last-name">Last Name</label>
-        <input id="last-name" v-model="lastName" type="text" disabled />
-      </div>
-      <div class="group">
-        <label for="email">Email Address</label>
-        <input id="email" v-model="email" type="email" disabled />
-      </div>
-      <div>
-        <button type="button" class="btn-link" @click="resetPassword" :disabled="resetting">
-          {{ resetting ? 'Sending...' : 'Reset Password' }}
-        </button>
-      </div>
-      <div v-if="successMsg" class="success-message" aria-live="polite">{{ successMsg }}</div>
-      <div v-if="errorMsg" class="error-message" aria-live="polite">{{ errorMsg }}</div>
-    </form>
+    </ModalDialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import ImagePicker from '@/components/utils/ImagePicker.vue'
-import { getCachedImageUrl } from '@/common/imageCache'
-import '@/assets/edit-forms.css'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'
+import { useRouter } from 'vue-router'
+import EntityEditForm from '../shared/EntityEditForm.vue'
+import ModalDialog from '../shared/ModalDialog.vue'
+import '@/assets/styles.css'
+import '@/assets/colors.css'
 
-const firstName = ref('')
-const lastName = ref('')
-const email = ref('')
-const avatarId = ref<string | null>(null)
-const avatarUrl = ref('/static/avatar-default.png')
-const selectedImageId = ref<string | null>(null)
-const localImageFile = ref<File | null>(null)
+const router = useRouter()
+const loading = ref(false)
 const errorMsg = ref('')
 const successMsg = ref('')
 const resetting = ref(false)
+const localImageFile = ref<File | null>(null)
+const showModal = ref(false)
+const modalTitle = ref('')
+const modalSubtitle = ref('')
+const modalMessage = ref('')
+
+const initialData = ref({
+  image_id: null,
+  first_name: '',
+  last_name: '',
+  email: '',
+})
+
+const fields = [
+  { name: 'image_id', label: 'Image', type: 'image', imageType: 1 },
+  { name: 'first_name', label: 'First Name', type: 'text', required: true, maxlength: 64 },
+  { name: 'last_name', label: 'Last Name', type: 'text', required: true, maxlength: 64 },
+  { name: 'email', label: 'Email Address', type: 'custom' },
+]
 
 onMounted(async () => {
+  loading.value = true
   try {
     const res = await fetch('/api/user/profile')
     if (!res.ok) throw new Error('Failed to load profile')
     const data = await res.json()
-    firstName.value = data.first_name || ''
-    lastName.value = data.last_name || ''
-    email.value = data.email || ''
-    avatarId.value = data.image_id || null
-    selectedImageId.value = data.image_id || null
-
-    // Use imageCache to get avatar URL
-    if (avatarId.value) {
-      avatarUrl.value = await getCachedImageUrl(avatarId.value)
-    } else {
-      avatarUrl.value = '/static/avatar-default.png'
+    initialData.value = {
+      image_id: data.image_id || null,
+      first_name: data.first_name || '',
+      last_name: data.last_name || '',
+      email: data.email || '',
     }
   } catch {
     errorMsg.value = 'Could not load user profile.'
-  }
-})
-
-// Watch for avatarId changes (e.g., after updating avatar)
-watch(avatarId, async (id) => {
-  if (id) {
-    avatarUrl.value = await getCachedImageUrl(id)
-  } else {
-    avatarUrl.value = '/static/avatar-default.png'
+  } finally {
+    loading.value = false
   }
 })
 
@@ -89,7 +104,7 @@ function onAddImage({ id, file }: { id: string; file: File }) {
     localImageFile.value = file
   } else {
     localImageFile.value = null
-    selectedImageId.value = id
+    initialData.value.image_id = id
     updateAvatar(id)
   }
 }
@@ -104,15 +119,13 @@ async function updateAvatar(imageId: string) {
       body: JSON.stringify({ image_id: imageId }),
     })
     if (!res.ok) throw new Error('Failed to update avatar')
-    // Update avatarId, which will trigger the watcher to update avatarUrl
-    avatarId.value = imageId
+    initialData.value.image_id = imageId
     successMsg.value = 'Avatar updated!'
   } catch {
     errorMsg.value = 'Failed to update avatar.'
   }
 }
 
-// If uploading a new image file
 watch(localImageFile, async (file) => {
   if (!file) return
   errorMsg.value = ''
@@ -128,35 +141,102 @@ watch(localImageFile, async (file) => {
     })
     if (!resp.ok) throw new Error('Image upload failed')
     const data = await resp.json()
-    selectedImageId.value = data.id
+    initialData.value.image_id = data.id
     await updateAvatar(data.id)
   } catch {
     errorMsg.value = 'Failed to upload avatar image.'
   }
 })
 
+function handleSubmit(form: {
+  image_id: string | null
+  first_name: string
+  last_name: string
+  email: string
+}) {
+  errorMsg.value = ''
+  loading.value = true
+  fetch('/api/user/profile', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      first_name: form.first_name,
+      last_name: form.last_name,
+      image_id: form.image_id,
+    }),
+  })
+    .then(async (res) => {
+      if (!res.ok) throw new Error('Failed to update profile')
+      modalTitle.value = 'Profile Updated'
+      modalSubtitle.value = ''
+      modalMessage.value = 'Your profile was updated successfully.'
+      showModal.value = true
+    })
+    .catch(() => {
+      errorMsg.value = 'Failed to update profile.'
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+async function handleModalClose() {
+  showModal.value = false
+  // Log out user and route to auth landing page
+  try {
+    await fetch('/api/logout', { method: 'POST' })
+  } catch {}
+  // Optionally clear any local auth state here if needed
+  router.push({ name: 'AuthLanding' })
+}
+
 async function resetPassword() {
+  // Show modal immediately with loading message
+  modalTitle.value = 'Change Password'
+  modalMessage.value = 'Sending password change email...'
+  modalSubtitle.value = ''
+  showModal.value = true
   resetting.value = true
   errorMsg.value = ''
-  successMsg.value = ''
   try {
     const res = await fetch('/api/request-password-reset', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email: email.value }),
+      body: JSON.stringify({ email: initialData.value.email }),
     })
     if (!res.ok) throw new Error('Failed to send reset email')
-    successMsg.value =
-      'If this email is registered, you will receive a password reset link shortly.'
+    modalTitle.value = 'Password Change Email Sent'
+    modalMessage.value =
+      'If this email is registered, you will receive a password change link shortly.'
   } catch {
-    errorMsg.value = 'Failed to send password reset email.'
+    modalTitle.value = 'Password Change Failed'
+    modalMessage.value = 'Failed to send password change email.'
   } finally {
     resetting.value = false
   }
 }
+
+function goToChangeParentPin() {
+  router.push({ name: 'ParentPinSetup' })
+}
 </script>
 
 <style scoped>
+/* ...existing styles... */
+.email-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.align-start {
+  align-self: flex-start;
+  margin-top: 0.1rem;
+}
+
+.btn-link-space {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .success-message {
   color: var(--success, #16a34a);
   font-size: 1rem;
@@ -166,4 +246,14 @@ async function resetPassword() {
   font-size: 0.98rem;
   margin-top: 0.4rem;
 }
+.readonly-input {
+  width: 100%;
+  padding: 0.6rem;
+  border-radius: 7px;
+  border: 1px solid var(--form-input-border, #e6e6e6);
+  font-size: 1rem;
+  background: var(--form-input-bg, #f5f5f5);
+  color: var(--form-label, #888);
+  box-sizing: border-box;
+}
 </style>

frontend/vue-app/src/components/reward/RewardEditView.vue

@@ -1,21 +1,24 @@
 <template>
-  <EntityEditForm
-    entityLabel="Reward"
-    :fields="fields"
-    :initialData="initialData"
-    :isEdit="isEdit"
-    :loading="loading"
-    :error="error"
-    @submit="handleSubmit"
-    @cancel="handleCancel"
-    @add-image="handleAddImage"
-  />
+  <div class="edit-view">
+    <EntityEditForm
+      entityLabel="Reward"
+      :fields="fields"
+      :initialData="initialData"
+      :isEdit="isEdit"
+      :loading="loading"
+      :error="error"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+      @add-image="handleAddImage"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import EntityEditForm from '../shared/EntityEditForm.vue'
+import '@/assets/styles.css'
 
 const props = defineProps<{ id?: string }>()
 const router = useRouter()

frontend/vue-app/src/components/shared/ChildrenListView.vue

@@ -32,6 +32,7 @@ const deletingChildId = ref<string | number | null>(null)
 const deleting = ref(false)
 
 const openChildEditor = (child: Child, evt?: Event) => {
+  console.log(' opening child editor for child id ', child.id)
   evt?.stopPropagation()
   router.push({ name: 'ChildEditView', params: { id: child.id } })
 }
@@ -136,6 +137,7 @@ const fetchChildren = async (): Promise<Child[]> => {
         return Promise.resolve()
       }),
     )
+    console.log(' fetched children list: ', childList)
     return childList
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to fetch children'
@@ -172,6 +174,7 @@ onUnmounted(() => {
 const shouldIgnoreNextCardClick = ref(false)
 
 const onDocClick = (e: MouseEvent) => {
+  console.log(' document click detected ')
   if (activeMenuFor.value !== null) {
     const path = (e.composedPath && e.composedPath()) || (e as any).path || []
     const clickedInsideKebab = path.some((node: unknown) => {

frontend/vue-app/src/components/shared/EntityEditForm.vue

@@ -1,51 +1,49 @@
 <template>
-  <div class="entity-edit-view">
-    <h2>{{ isEdit ? `Edit ${entityLabel}` : `Create ${entityLabel}` }}</h2>
-    <div v-if="loading" class="loading-message">Loading {{ entityLabel.toLowerCase() }}...</div>
-    <form v-else @submit.prevent="submit" class="entity-form">
-      <template v-for="field in fields" :key="field.name">
-        <div class="group">
-          <label :for="field.name">
-            {{ field.label }}
-            <!-- Custom field slot -->
-            <slot
-              :name="`custom-field-${field.name}`"
-              :modelValue="formData[field.name]"
-              :update="(val) => (formData[field.name] = val)"
-            >
-              <!-- Default rendering if no slot provided -->
-              <input
-                v-if="field.type === 'text' || field.type === 'number'"
-                :id="field.name"
-                v-model="formData[field.name]"
-                :type="field.type"
-                :required="field.required"
-                :maxlength="field.maxlength"
-                :min="field.min"
-                :max="field.max"
-              />
-              <ImagePicker
-                v-else-if="field.type === 'image'"
-                :id="field.name"
-                v-model="formData[field.name]"
-                :image-type="field.imageType || 1"
-                @add-image="onAddImage"
-              />
-            </slot>
-          </label>
-        </div>
-      </template>
-      <div v-if="error" class="error">{{ error }}</div>
-      <div class="actions">
-        <button type="button" class="btn btn-secondary" @click="onCancel" :disabled="loading">
-          Cancel
-        </button>
-        <button type="submit" class="btn btn-primary" :disabled="loading">
-          {{ isEdit ? 'Save' : 'Create' }}
-        </button>
+  <h2>{{ title ?? (isEdit ? `Edit ${entityLabel}` : `Create ${entityLabel}`) }}</h2>
+  <div v-if="loading" class="loading-message">Loading {{ entityLabel.toLowerCase() }}...</div>
+  <form v-else @submit.prevent="submit" class="entity-form">
+    <template v-for="field in fields" :key="field.name">
+      <div class="group">
+        <label :for="field.name">
+          {{ field.label }}
+          <!-- Custom field slot -->
+          <slot
+            :name="`custom-field-${field.name}`"
+            :modelValue="formData[field.name]"
+            :update="(val) => (formData[field.name] = val)"
+          >
+            <!-- Default rendering if no slot provided -->
+            <input
+              v-if="field.type === 'text' || field.type === 'number'"
+              :id="field.name"
+              v-model="formData[field.name]"
+              :type="field.type"
+              :required="field.required"
+              :maxlength="field.maxlength"
+              :min="field.min"
+              :max="field.max"
+            />
+            <ImagePicker
+              v-else-if="field.type === 'image'"
+              :id="field.name"
+              v-model="formData[field.name]"
+              :image-type="field.imageType || 1"
+              @add-image="onAddImage"
+            />
+          </slot>
+        </label>
       </div>
-    </form>
-  </div>
+    </template>
+    <div v-if="error" class="error">{{ error }}</div>
+    <div class="actions">
+      <button type="button" class="btn btn-secondary" @click="onCancel" :disabled="loading">
+        Cancel
+      </button>
+      <button type="submit" class="btn btn-primary" :disabled="loading || !isDirty">
+        {{ isEdit ? 'Save' : 'Create' }}
+      </button>
+    </div>
+  </form>
 </template>
 
 <script setup lang="ts">
@@ -73,6 +71,7 @@ const props = defineProps<{
   isEdit?: boolean
   loading?: boolean
   error?: string | null
+  title?: string
 }>()
 
 const emit = defineEmits(['submit', 'cancel', 'add-image'])
@@ -107,9 +106,46 @@ function onCancel() {
 function submit() {
   emit('submit', { ...formData.value })
 }
+
+// Editable field names (exclude custom fields that are not editable)
+const editableFieldNames = props.fields
+  .filter((f) => f.type !== 'custom' || f.name === 'is_good' || f.type === 'image')
+  .map((f) => f.name)
+
+const isDirty = ref(false)
+
+function checkDirty() {
+  isDirty.value = editableFieldNames.some((key) => {
+    return JSON.stringify(formData.value[key]) !== JSON.stringify(props.initialData?.[key])
+  })
+}
+
+watch(
+  () => ({ ...formData.value }),
+  () => {
+    checkDirty()
+  },
+  { deep: true },
+)
+
+watch(
+  () => props.initialData,
+  (newVal) => {
+    if (newVal) {
+      formData.value = { ...newVal }
+      checkDirty()
+    }
+  },
+  { immediate: true, deep: true },
+)
 </script>
 
 <style scoped>
+h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--form-heading);
+}
 .entity-edit-view {
   max-width: 420px;
   margin: 0 auto;

frontend/vue-app/src/components/shared/LoginButton.vue

@@ -3,8 +3,9 @@ import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { eventBus } from '@/common/eventBus'
 import { authenticateParent, isParentAuthenticated, logoutParent } from '../../stores/auth'
-import '@/assets/modal.css'
-import '@/assets/actions-shared.css'
+import '@/assets/styles.css'
+import '@/assets/colors.css'
+import ModalDialog from './ModalDialog.vue'
 
 const router = useRouter()
 const show = ref(false)
@@ -14,6 +15,21 @@ const pinInput = ref<HTMLInputElement | null>(null)
 const dropdownOpen = ref(false)
 
 const open = async () => {
+  // Check if user has a pin
+  try {
+    const res = await fetch('/api/user/has-pin', { credentials: 'include' })
+    const data = await res.json()
+    if (!res.ok) throw new Error(data.error || 'Error checking PIN')
+    if (!data.has_pin) {
+      console.log('No PIN set, redirecting to setup')
+      // Route to PIN setup view
+      router.push('/parent/pin-setup')
+      return
+    }
+  } catch (e) {
+    error.value = 'Network error'
+    return
+  }
   pin.value = ''
   error.value = ''
   show.value = true
@@ -26,22 +42,36 @@ const close = () => {
   error.value = ''
 }
 
-const submit = () => {
+const submit = async () => {
   const isDigits = /^\d{4,6}$/.test(pin.value)
   if (!isDigits) {
     error.value = 'Enter 4–6 digits'
     return
   }
 
-  if (pin.value !== '1179') {
-    error.value = 'Incorrect PIN'
-    return
+  try {
+    const res = await fetch('/api/user/check-pin', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pin: pin.value }),
+      credentials: 'include',
+    })
+    const data = await res.json()
+    if (!res.ok) {
+      error.value = data.error || 'Error validating PIN'
+      return
+    }
+    if (!data.valid) {
+      error.value = 'Incorrect PIN'
+      return
+    }
+    // Authenticate parent and navigate
+    authenticateParent()
+    close()
+    router.push('/parent')
+  } catch (e) {
+    error.value = 'Network error'
   }
-
-  // Authenticate parent and navigate
-  authenticateParent()
-  close()
-  router.push('/parent')
 }
 
 const handleLogout = () => {
@@ -117,27 +147,24 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <div v-if="show" class="modal-backdrop" @click.self="close">
-      <div class="modal">
-        <h3>Enter parent PIN</h3>
-        <form @submit.prevent="submit">
-          <input
-            ref="pinInput"
-            v-model="pin"
-            inputmode="numeric"
-            pattern="\d*"
-            maxlength="6"
-            placeholder="4–6 digits"
-            class="pin-input"
-          />
-          <div class="actions">
-            <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
-            <button type="submit" class="btn btn-primary">OK</button>
-          </div>
-        </form>
-        <div v-if="error" class="error">{{ error }}</div>
-      </div>
-    </div>
+    <ModalDialog v-if="show" title="Enter parent PIN" @click.self="close" @close="close">
+      <form @submit.prevent="submit">
+        <input
+          ref="pinInput"
+          v-model="pin"
+          inputmode="numeric"
+          pattern="\d*"
+          maxlength="6"
+          placeholder="4–6 digits"
+          class="pin-input"
+        />
+        <div class="actions modal-actions">
+          <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
+          <button type="submit" class="btn btn-primary">OK</button>
+        </div>
+      </form>
+      <div v-if="error" class="error modal-message">{{ error }}</div>
+    </ModalDialog>
   </div>
 </template>
 

frontend/vue-app/src/components/task/TaskEditView.vue

@@ -48,6 +48,7 @@ button.toggle-btn.bad-active {
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import EntityEditForm from '../shared/EntityEditForm.vue'
+import '@/assets/styles.css'
 
 const props = defineProps<{ id?: string }>()
 const router = useRouter()
@@ -183,34 +184,36 @@ function handleCancel() {
 </script>
 
 <template>
-  <EntityEditForm
-    entityLabel="Task"
-    :fields="fields"
-    :initialData="initialData"
-    :isEdit="isEdit"
-    :loading="loading"
-    :error="error"
-    @submit="handleSubmit"
-    @cancel="handleCancel"
-    @add-image="handleAddImage"
-  >
-    <template #custom-field-is_good="{ modelValue, update }">
-      <div class="good-bad-toggle">
-        <button
-          type="button"
-          :class="['toggle-btn', modelValue ? 'good-active' : '']"
-          @click="update(true)"
-        >
-          Good
-        </button>
-        <button
-          type="button"
-          :class="['toggle-btn', !modelValue ? 'bad-active' : '']"
-          @click="update(false)"
-        >
-          Bad
-        </button>
-      </div>
-    </template>
-  </EntityEditForm>
+  <div class="edit-view">
+    <EntityEditForm
+      entityLabel="Task"
+      :fields="fields"
+      :initialData="initialData"
+      :isEdit="isEdit"
+      :loading="loading"
+      :error="error"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+      @add-image="handleAddImage"
+    >
+      <template #custom-field-is_good="{ modelValue, update }">
+        <div class="good-bad-toggle">
+          <button
+            type="button"
+            :class="['toggle-btn', modelValue ? 'good-active' : '']"
+            @click="update(true)"
+          >
+            Good
+          </button>
+          <button
+            type="button"
+            :class="['toggle-btn', !modelValue ? 'bad-active' : '']"
+            @click="update(false)"
+          >
+            Bad
+          </button>
+        </div>
+      </template>
+    </EntityEditForm>
+  </div>
 </template>

frontend/vue-app/src/layout/ParentLayout.vue

@@ -14,6 +14,9 @@ const handleBack = () => {
   }
 }
 
+// Hide view-selector if on ParentPinSetup (PIN setup flow)
+const hideViewSelector = computed(() => route.name === 'ParentPinSetup')
+
 const showBack = computed(
   () =>
     !(
@@ -45,7 +48,7 @@ onMounted(async () => {
       <div class="back-btn-container">
         <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
       </div>
-      <nav class="view-selector">
+      <nav v-if="!hideViewSelector" class="view-selector">
         <button
           :class="{
             active: [

frontend/vue-app/src/router/index.ts

@@ -18,6 +18,7 @@ import Signup from '@/components/auth/Signup.vue'
 import AuthLanding from '@/components/auth/AuthLanding.vue'
 import Login from '@/components/auth/Login.vue'
 import { isUserLoggedIn, isParentAuthenticated, isAuthReady } from '../stores/auth'
+import ParentPinSetup from '@/components/auth/ParentPinSetup.vue'
 
 const routes = [
   {
@@ -157,6 +158,12 @@ const routes = [
         name: 'UserProfile',
         component: () => import('@/components/profile/UserProfile.vue'),
       },
+      {
+        path: 'pin-setup',
+        name: 'ParentPinSetup',
+        component: ParentPinSetup,
+        meta: { requiresAuth: true, allowNoParent: true },
+      },
     ],
   },
   {
@@ -172,19 +179,12 @@ const router = createRouter({
 
 // Auth guard
 router.beforeEach(async (to, from, next) => {
-  if (!isAuthReady.value) {
-    await new Promise((resolve) => {
-      const stop = watch(isAuthReady, (ready) => {
-        if (ready) {
-          stop()
-          resolve(true)
-        }
-      })
-    })
-  }
+  console.log('navigating to', to.fullPath, 'from', from.fullPath)
+  console.log('isParentAuthenticated:', isParentAuthenticated.value)
+  console.trace()
 
-  // Always allow access to /auth routes
-  if (to.path.startsWith('/auth')) {
+  // Always allow /auth and /parent/pin-setup
+  if (to.path.startsWith('/auth') || to.name === 'ParentPinSetup') {
     return next()
   }
 
@@ -193,13 +193,22 @@ router.beforeEach(async (to, from, next) => {
     return next('/auth')
   }
 
-  // If logged in but not parent-authenticated, redirect to /child (unless already there)
-  if (!isParentAuthenticated.value && !to.path.startsWith('/child')) {
-    return next('/child')
+  // If parent-authenticated, allow all /parent routes
+  if (isParentAuthenticated.value && to.path.startsWith('/parent')) {
+    return next()
   }
 
-  // Otherwise, allow navigation
-  next()
+  // If not parent-authenticated, allow all /child routes
+  if (!isParentAuthenticated.value && to.path.startsWith('/child')) {
+    return next()
+  }
+
+  // Otherwise, redirect based on parent authentication
+  if (isParentAuthenticated.value) {
+    return next('/parent')
+  } else {
+    return next('/child')
+  }
 })
 
 export default router

frontend/vue-app/src/stores/auth.ts

@@ -1,16 +1,21 @@
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
-export const isParentAuthenticated = ref(false)
+export const isParentAuthenticated = ref(localStorage.getItem('isParentAuthenticated') === 'true')
 export const isUserLoggedIn = ref(false)
 export const isAuthReady = ref(false)
 export const currentUserId = ref('')
 
+watch(isParentAuthenticated, (val) => {
+  localStorage.setItem('isParentAuthenticated', val ? 'true' : 'false')
+})
+
 export function authenticateParent() {
   isParentAuthenticated.value = true
 }
 
 export function logoutParent() {
   isParentAuthenticated.value = false
+  localStorage.removeItem('isParentAuthenticated')
 }
 
 export function loginUser() {