145 lines
3.9 KiB
Vue
145 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3'
|
|
import ProfileSettingsPanel from '@/components/profile/ProfileSettingsPanel.vue'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import DashboardLayout from '@/layouts/DashboardLayout.vue'
|
|
|
|
defineOptions({
|
|
layout: DashboardLayout,
|
|
})
|
|
|
|
const { flash, user } = useAuth()
|
|
|
|
const form = useForm({
|
|
first_name: user.value?.first_name ?? '',
|
|
last_name: user.value?.last_name ?? '',
|
|
username: user.value?.username ?? '',
|
|
email: user.value?.email ?? '',
|
|
})
|
|
|
|
function updateProfile() {
|
|
form.patch('/profile', {
|
|
preserveScroll: true,
|
|
onSuccess: () => form.defaults(),
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ProfileSettingsPanel>
|
|
<UAlert
|
|
v-if="flash.success"
|
|
color="success"
|
|
icon="i-lucide-check-circle"
|
|
:title="flash.success"
|
|
/>
|
|
|
|
<form @submit.prevent="updateProfile">
|
|
<UPageCard
|
|
title="Profile"
|
|
description="Manage the personal information used for your account."
|
|
variant="naked"
|
|
orientation="horizontal"
|
|
class="mb-4"
|
|
>
|
|
<UButton
|
|
type="submit"
|
|
label="Save changes"
|
|
color="neutral"
|
|
class="w-fit lg:ms-auto"
|
|
:loading="form.processing"
|
|
:disabled="!form.isDirty"
|
|
/>
|
|
</UPageCard>
|
|
|
|
<UPageCard variant="subtle">
|
|
<UFormField
|
|
label="Avatar"
|
|
description="Generated from your account name until avatar uploads are configured."
|
|
class="flex items-center justify-between gap-4"
|
|
>
|
|
<UAvatar :alt="user?.full_name" size="lg" />
|
|
</UFormField>
|
|
|
|
<USeparator />
|
|
|
|
<UFormField
|
|
label="First name"
|
|
name="first_name"
|
|
description="Used to personalize your account."
|
|
required
|
|
:error="form.errors.first_name"
|
|
class="flex max-sm:flex-col items-start justify-between gap-4"
|
|
>
|
|
<UInput
|
|
v-model="form.first_name"
|
|
autocomplete="given-name"
|
|
class="w-full sm:w-64"
|
|
/>
|
|
</UFormField>
|
|
|
|
<USeparator />
|
|
|
|
<UFormField
|
|
label="Last name"
|
|
name="last_name"
|
|
description="Displayed together with your first name."
|
|
required
|
|
:error="form.errors.last_name"
|
|
class="flex max-sm:flex-col items-start justify-between gap-4"
|
|
>
|
|
<UInput
|
|
v-model="form.last_name"
|
|
autocomplete="family-name"
|
|
class="w-full sm:w-64"
|
|
/>
|
|
</UFormField>
|
|
|
|
<USeparator />
|
|
|
|
<UFormField
|
|
label="Username"
|
|
name="username"
|
|
description="Your unique username for signing in."
|
|
required
|
|
:error="form.errors.username"
|
|
class="flex max-sm:flex-col items-start justify-between gap-4"
|
|
>
|
|
<UInput
|
|
v-model="form.username"
|
|
autocomplete="username"
|
|
class="w-full sm:w-64"
|
|
/>
|
|
</UFormField>
|
|
|
|
<USeparator />
|
|
|
|
<UFormField
|
|
label="Email"
|
|
name="email"
|
|
description="Changing it requires email verification again when enabled."
|
|
required
|
|
:error="form.errors.email"
|
|
class="flex max-sm:flex-col items-start justify-between gap-4"
|
|
>
|
|
<div class="flex w-full flex-col items-end gap-2 sm:w-64">
|
|
<UInput
|
|
v-model="form.email"
|
|
type="email"
|
|
autocomplete="email"
|
|
class="w-full"
|
|
/>
|
|
<UBadge
|
|
:color="user?.email_verified_at ? 'success' : 'warning'"
|
|
variant="subtle"
|
|
:icon="user?.email_verified_at ? 'i-lucide-badge-check' : 'i-lucide-circle-alert'"
|
|
>
|
|
{{ user?.email_verified_at ? 'Email verified' : 'Email not verified' }}
|
|
</UBadge>
|
|
</div>
|
|
</UFormField>
|
|
</UPageCard>
|
|
</form>
|
|
</ProfileSettingsPanel>
|
|
</template>
|