Files
crewli/apps/app/src/composables/api/useAccount.ts
bert.hausmans 79b7fe0b42 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>
2026-04-15 22:18:16 +02:00

88 lines
2.0 KiB
TypeScript

import { useMutation, useQueryClient } from '@tanstack/vue-query'
import type { Ref } from 'vue'
import { apiClient } from '@/lib/axios'
interface ApiResponse<T> {
success: boolean
data: T
message: string
}
export interface UpdateProfilePayload {
first_name: string
last_name: string
phone?: string | null
date_of_birth?: string | null
timezone: string
locale: string
}
export interface ChangePasswordPayload {
current_password: string
password: string
password_confirmation: string
}
export interface ChangeEmailPayload {
new_email: string
password: string
app: 'app' | 'portal' | 'admin'
}
export interface AdminChangeEmailPayload {
new_email: string
}
export function useUpdateProfile() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (payload: UpdateProfilePayload) => {
const { data } = await apiClient.put<ApiResponse<null>>(
'/me/profile',
payload,
)
return data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
},
})
}
export function useChangePassword() {
return useMutation({
mutationFn: async (payload: ChangePasswordPayload) => {
const { data } = await apiClient.post<ApiResponse<null>>(
'/me/change-password',
payload,
)
return data
},
})
}
export function useChangeEmail() {
return useMutation({
mutationFn: async (payload: ChangeEmailPayload) => {
const { data } = await apiClient.post<ApiResponse<null>>(
'/me/change-email',
payload,
)
return data
},
})
}
export function useAdminChangeEmail(orgId: Ref<string>) {
return useMutation({
mutationFn: async ({ userId, newEmail }: { userId: string; newEmail: string }) => {
const { data } = await apiClient.post<ApiResponse<null>>(
`/organisations/${orgId.value}/members/${userId}/change-email`,
{ new_email: newEmail },
)
return data
},
})
}