feat(#23): Add email notifications

legalconsenthub/app/pages/settings.vue

@@ -72,6 +72,33 @@
             </div>
           </div>
         </UCard>
+
+        <!-- Email Notifications Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.email.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('settings.email.description') }}</p>
+            </div>
+          </template>
+
+          <div class="space-y-4">
+            <UInput
+              v-model="emailAddress"
+              :label="$t('settings.email.emailAddress')"
+              type="email"
+              placeholder="user@example.com"
+              class="w-full max-w-md"
+            />
+
+            <div class="space-y-3">
+              <UCheckbox v-model="emailOnFormCreated" :label="$t('settings.email.onFormCreated')" />
+              <UCheckbox v-model="emailOnFormSubmitted" :label="$t('settings.email.onFormSubmitted')" />
+            </div>
+
+            <UButton :label="$t('common.save')" color="primary" :loading="isSaving" @click="saveEmailPreferences" />
+          </div>
+        </UCard>
       </div>
     </template>
   </UDashboardPanel>
@@ -79,6 +106,8 @@
 
 <script setup lang="ts">
 import { de, en } from '@nuxt/ui/locale'
+import { useUserStore } from '~~/stores/useUserStore'
+import { useUser } from '~/composables'
 
 definePageMeta({
   layout: 'default'
@@ -87,6 +116,9 @@ definePageMeta({
 const { t: $t, locale, setLocale } = useI18n()
 const colorMode = useColorMode()
 const appConfig = useAppConfig()
+const toast = useToast()
+const userStore = useUserStore()
+const { getUserById, updateEmailPreferences } = useUser()
 
 const colors = [
   'red',
@@ -107,6 +139,50 @@ const colors = [
   'pink'
 ]
 
+const emailAddress = ref('')
+const emailOnFormCreated = ref(true)
+const emailOnFormSubmitted = ref(true)
+const isSaving = ref(false)
+
+onMounted(async () => {
+  if (userStore.user) {
+    try {
+      const userData = await getUserById(userStore.user.keycloakId)
+      emailAddress.value = userData.email || ''
+      emailOnFormCreated.value = userData.emailOnFormCreated ?? true
+      emailOnFormSubmitted.value = userData.emailOnFormSubmitted ?? true
+    } catch (error) {
+      console.error('Failed to load user email preferences:', error)
+    }
+  }
+})
+
+async function saveEmailPreferences() {
+  if (!userStore.user) return
+
+  isSaving.value = true
+  try {
+    await updateEmailPreferences(
+      userStore.user.keycloakId,
+      emailAddress.value || null,
+      emailOnFormCreated.value,
+      emailOnFormSubmitted.value
+    )
+
+    toast.add({
+      title: $t('settings.email.saved'),
+      color: 'success'
+    })
+  } catch {
+    toast.add({
+      title: $t('common.error'),
+      color: 'error'
+    })
+  } finally {
+    isSaving.value = false
+  }
+}
+
 function handleLocaleChange(newLocale: string | undefined) {
   if (newLocale) {
     setLocale(newLocale as 'de' | 'en')