Lesstime/frontend/pages/profile.vue

<template>
    <NuxtLayout :name="isClientOnly ? 'portal' : 'default'">
    <div class="mx-auto max-w-lg px-4 py-10">
        <h1 class="mb-8 text-2xl font-bold text-neutral-900">{{ $t('profile.title') }}</h1>

        <div class="flex flex-col items-center gap-6 rounded-xl border border-neutral-200 bg-white p-8 shadow-sm">
            <!-- Current avatar -->
            <UserAvatar
                v-if="auth.user"
                :user="auth.user"
                size="lg"
            />

            <p class="text-lg font-semibold text-neutral-800">{{ auth.user?.username }}</p>

            <div class="flex gap-3">
                <label
                    class="cursor-pointer rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500"
                >
                    {{ $t('profile.changeAvatar') }}
                    <input
                        type="file"
                        accept="image/jpeg,image/png,image/webp,image/gif"
                        class="hidden"
                        @change="onFileSelect"
                    />
                </label>

                <MalioButton
                    v-if="auth.user?.avatarUrl"
                    variant="danger"
                    button-class="w-auto px-4"
                    :disabled="removing"
                    :label="$t('profile.removeAvatar')"
                    @click="onRemove"
                />
            </div>
        </div>

        <!-- API Token MCP (interne uniquement) -->
        <div
            v-if="!isClientOnly"
            class="mt-8 rounded-xl border border-neutral-200 bg-white p-6 shadow-sm"
        >
            <h2 class="mb-1 text-lg font-bold text-neutral-900">{{ $t('profile.apiToken.title') }}</h2>
            <p class="mb-4 text-sm text-neutral-600">{{ $t('profile.apiToken.help') }}</p>

            <div v-if="auth.user?.apiToken">
                <MalioInputPassword
                    :model-value="auth.user.apiToken"
                    :label="$t('profile.apiToken.label')"
                    readonly
                    @update:model-value="() => {}"
                />
                <div class="mt-3 flex flex-wrap gap-3">
                    <MalioButton
                        variant="secondary"
                        button-class="w-auto px-4"
                        icon-name="mdi:content-copy"
                        icon-position="left"
                        :label="$t('profile.apiToken.copy')"
                        @click="onCopy"
                    />
                    <MalioButton
                        variant="danger"
                        button-class="w-auto px-4"
                        icon-name="mdi:refresh"
                        icon-position="left"
                        :disabled="regenerating"
                        :label="$t('profile.apiToken.regenerate')"
                        @click="showConfirm = true"
                    />
                </div>
            </div>

            <div v-else>
                <p class="mb-4 text-sm text-neutral-500 italic">{{ $t('profile.apiToken.empty') }}</p>
                <MalioButton
                    variant="primary"
                    button-class="w-auto px-4"
                    icon-name="mdi:key-plus"
                    icon-position="left"
                    :disabled="regenerating"
                    :label="$t('profile.apiToken.generate')"
                    @click="onRegenerate"
                />
            </div>
        </div>

        <!-- Crop modal -->
        <AvatarCropper
            v-if="selectedFile"
            :image-file="selectedFile"
            @crop="onCrop"
            @cancel="selectedFile = null"
        />

        <!-- Confirm regenerate modal -->
        <Teleport v-if="showConfirm" to="body">
            <div class="fixed inset-0 z-[70] flex items-center justify-center">
                <div class="absolute inset-0 bg-black/30" @click.stop="showConfirm = false" />
                <div class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
                    <h3 class="text-lg font-bold text-neutral-900">{{ $t('profile.apiToken.confirmTitle') }}</h3>
                    <p class="mt-3 text-sm text-neutral-600">
                        {{ $t('profile.apiToken.confirmMessage') }}
                    </p>
                    <div class="mt-6 flex justify-end gap-3">
                        <MalioButton
                            variant="tertiary"
                            button-class="w-auto px-4"
                            :label="$t('common.cancel')"
                            @click="showConfirm = false"
                        />
                        <MalioButton
                            variant="danger"
                            button-class="w-auto px-4"
                            :disabled="regenerating"
                            :label="$t('profile.apiToken.regenerate')"
                            @click="onRegenerate"
                        />
                    </div>
                </div>
            </div>
        </Teleport>
    </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import { useAvatarService } from '~/composables/useAvatarService'
import { useApiTokenService } from '~/services/api-token'

const auth = useAuthStore()
const toast = useToast()
const { t } = useI18n()

const isClientOnly = computed(() =>
    auth.user?.roles?.includes('ROLE_CLIENT') && !auth.user?.roles?.includes('ROLE_ADMIN')
)

definePageMeta({
    layout: false,
})
const { upload, remove } = useAvatarService()
const { regenerate } = useApiTokenService()

const selectedFile = ref<File | null>(null)
const removing = ref(false)
const regenerating = ref(false)
const showConfirm = ref(false)

function onFileSelect(event: Event) {
    const input = event.target as HTMLInputElement
    const file = input.files?.[0]
    if (file) {
        selectedFile.value = file
    }
    input.value = ''
}

async function onCrop(blob: Blob) {
    selectedFile.value = null
    if (!auth.user) return

    try {
        await upload(auth.user.id, blob)
        await auth.refreshUser()
    } catch {
        // Upload error — $fetch will throw on non-2xx
    }
}

async function onRemove() {
    if (!auth.user) return
    removing.value = true

    try {
        await remove(auth.user.id)
        await auth.refreshUser()
    } finally {
        removing.value = false
    }
}

async function onCopy() {
    if (!auth.user?.apiToken) return
    try {
        await navigator.clipboard.writeText(auth.user.apiToken)
        toast.success({ message: t('profile.apiToken.copied') })
    } catch {
        toast.error({ message: t('profile.apiToken.copyFailed') })
    }
}

async function onRegenerate() {
    regenerating.value = true
    try {
        const newToken = await regenerate()
        if (auth.user) {
            auth.user.apiToken = newToken
        }
        showConfirm.value = false
        toast.success({ message: t('profile.apiToken.regenerated') })
    } finally {
        regenerating.value = false
    }
}
</script>