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>
88 lines
2.0 KiB
TypeScript
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
|
|
},
|
|
})
|
|
}
|