fuel-price/resources/js/views/dashboard/settings/Profile.vue

<template>
    <div class="space-y-6 max-w-lg">
        <!-- Profile form -->
        <form class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-5" @submit.prevent="saveProfile">
            <h2 class="text-lg font-black text-zinc-800">Profile information</h2>

            <div class="space-y-2">
                <label class="text-sm font-bold text-zinc-800">Full name</label>
                <input
                    v-model="profileForm.name"
                    type="text"
                    :class="profileErrors.name ? 'border-red-400' : 'border-zinc-300'"
                    class="w-full h-12 px-4 bg-zinc-50 border rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
                />
                <p v-if="profileErrors.name" class="text-xs text-red-600">{{ profileErrors.name[0] }}</p>
            </div>

            <div class="space-y-2">
                <label class="text-sm font-bold text-zinc-800">Email address</label>
                <input
                    v-model="profileForm.email"
                    type="email"
                    :class="profileErrors.email ? 'border-red-400' : 'border-zinc-300'"
                    class="w-full h-12 px-4 bg-zinc-50 border rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
                />
                <p v-if="profileErrors.email" class="text-xs text-red-600">{{ profileErrors.email[0] }}</p>
            </div>

            <p v-if="profileNetworkError" class="text-sm text-red-600">{{ profileNetworkError }}</p>

            <div class="flex items-center gap-4">
                <button
                    type="submit"
                    :disabled="profileSaving"
                    class="px-8 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent-content transition-all disabled:opacity-50"
                >
                    {{ profileSaving ? 'Saving…' : 'Save changes' }}
                </button>
                <p v-if="profileSaved" class="text-sm font-bold text-green-600">Saved!</p>
            </div>
        </form>

        <!-- Delete account -->
        <div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-4">
            <h2 class="text-lg font-black text-zinc-800">Delete account</h2>
            <p class="text-sm text-zinc-500">Permanently delete your account and all associated data. This cannot be undone.</p>
            <button
                @click="deleteModalOpen = true"
                class="px-6 py-2.5 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-colors"
            >
                Delete my account
            </button>
        </div>

        <!-- Delete account modal -->
        <div
            v-if="deleteModalOpen"
            class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
            @click.self="closeDeleteModal"
        >
            <div class="bg-white rounded-2xl p-6 w-full max-w-md mx-4 space-y-5">
                <h3 class="text-lg font-black text-zinc-800">Are you sure?</h3>
                <p class="text-sm text-zinc-500">Enter your password to confirm account deletion.</p>

                <div class="space-y-2">
                    <label class="text-sm font-bold text-zinc-800">Password</label>
                    <input
                        v-model="deletePassword"
                        type="password"
                        :class="deleteError ? 'border-red-400' : 'border-zinc-300'"
                        class="w-full h-12 px-4 bg-zinc-50 border rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-red-400"
                    />
                    <p v-if="deleteError" class="text-xs text-red-600">{{ deleteError }}</p>
                </div>

                <div class="flex gap-3">
                    <button
                        @click="closeDeleteModal"
                        class="flex-1 py-3 border border-zinc-300 rounded-xl text-sm font-bold text-zinc-500 hover:bg-zinc-50 transition-colors"
                    >
                        Cancel
                    </button>
                    <button
                        @click="confirmDelete"
                        :disabled="deleting"
                        class="flex-1 py-3 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-colors disabled:opacity-50"
                    >
                        {{ deleting ? 'Deleting…' : 'Delete account' }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuth } from '../../../composables/useAuth.js'

const { user, updateProfile, deleteAccount } = useAuth()
const router = useRouter()

const profileForm = ref({ name: '', email: '' })
const profileErrors = ref({})
const profileNetworkError = ref('')
const profileSaving = ref(false)
const profileSaved = ref(false)

onMounted(() => {
    profileForm.value.name = user.value?.name ?? ''
    profileForm.value.email = user.value?.email ?? ''
})

async function saveProfile() {
    profileSaving.value = true
    profileSaved.value = false
    profileErrors.value = {}
    profileNetworkError.value = ''
    try {
        await updateProfile(profileForm.value)
        profileSaved.value = true
        setTimeout(() => { profileSaved.value = false }, 3000)
    } catch (err) {
        if (err.response?.status === 422) {
            profileErrors.value = err.response.data.errors ?? {}
        } else {
            profileNetworkError.value = 'Something went wrong. Please try again.'
        }
    } finally {
        profileSaving.value = false
    }
}

const deleteModalOpen = ref(false)
const deletePassword = ref('')
const deleteError = ref('')
const deleting = ref(false)

function closeDeleteModal() {
    deleteModalOpen.value = false
    deletePassword.value = ''
    deleteError.value = ''
}

async function confirmDelete() {
    deleting.value = true
    deleteError.value = ''
    try {
        await deleteAccount(deletePassword.value)
        router.push('/')
    } catch (err) {
        if (err.response?.status === 422) {
            deleteError.value = err.response.data.errors?.password?.[0] ?? 'Incorrect password.'
        } else {
            deleteError.value = 'Something went wrong. Please try again.'
        }
        deletePassword.value = ''
    } finally {
        deleting.value = false
    }
}
</script>