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>

                <button
                    v-if="auth.user?.avatarUrl"
                    type="button"
                    class="rounded-lg border border-red-300 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50"
                    :disabled="removing"
                    @click="onRemove"
                >
                    {{ $t('profile.removeAvatar') }}
                </button>
            </div>
        </div>

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

<script setup lang="ts">
import { useAvatarService } from '~/composables/useAvatarService'

const auth = useAuthStore()

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

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

const selectedFile = ref<File | null>(null)
const removing = 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
    }
}
</script>