22373a0b87
- Replace all AppDrawer with MalioDrawer across 10 drawer components - Replace native <button> with MalioButton/MalioButtonIcon in all pages and components - Fix TimeTrackingExportDrawer: use MalioSelectCheckbox for multi-select filters - Add Malio design system colors (m-btn-*, m-disabled, m-surface) to tailwind.config.ts - Align toggle button heights with MalioButton (h-[40px]) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
101 lines
2.8 KiB
Vue
101 lines
2.8 KiB
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>
|
|
|
|
<!-- 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>
|