92 lines
2.6 KiB
Vue
92 lines
2.6 KiB
Vue
<template>
|
|
<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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAvatarService } from '~/composables/useAvatarService'
|
|
|
|
const auth = useAuthStore()
|
|
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>
|