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/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>