feat: account settings with Vuexy tab pattern and MFA banner fix

Restructures account/profile pages to match Vuexy's account-settings
tab pattern (Account, Security, Notifications) and fixes the MFA
enforcement banner that stayed visible after successful setup.

Backend:
- Add phone column to users table with migration
- Add PUT /me/profile endpoint for profile updates
- Create UpdateProfileRequest form request
- Update MeResource to include phone field

Organizer app:
- Rewrite account-settings as tabbed page (VTabs pill style + VWindow)
- Create AccountTab: avatar, profile form, email change, danger zone
- Create SecurityTab: password change, MFA method cards, backup codes,
  trusted devices, disable MFA danger zone
- Create NotificationsTab: placeholder with disabled toggles
- Fix MFA banner: set authStore.mfaSetupRequired = false on setup complete
- Update router guard to redirect to ?tab=security for MFA enforcement
- Update UserProfile menu links to use tab query params

Portal:
- Restructure profiel.vue with VTabs (Mijn profiel + Beveiliging)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-15 22:18:16 +02:00
parent cd2c775692
commit 79b7fe0b42
22 changed files with 1860 additions and 1101 deletions

View File

@@ -76,18 +76,18 @@ function handleLogout() {
<VDivider class="my-2" />
<VListItem :to="{ name: 'account-settings' }">
<VListItem :to="{ name: 'account-settings', query: { tab: 'account' } }">
<template #prepend>
<VIcon
class="me-2"
icon="tabler-settings"
icon="tabler-user"
size="22"
/>
</template>
<VListItemTitle>Accountinstellingen</VListItemTitle>
<VListItemTitle>Mijn profiel</VListItemTitle>
</VListItem>
<VListItem :to="{ name: 'account-settings-security' }">
<VListItem :to="{ name: 'account-settings', query: { tab: 'security' } }">
<template #prepend>
<VIcon
class="me-2"