feat(KAN-36): rebuild profile and appearance settings
This commit is contained in:
@@ -1,209 +1,385 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head, Link, useForm, usePage } from '@inertiajs/vue3';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { computed, onBeforeUnmount, ref } from 'vue';
|
||||
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
|
||||
import { Camera, RotateCcw, Trash2 } from 'lucide-vue-next';
|
||||
import { computed, onBeforeUnmount, ref, useTemplateRef } from 'vue';
|
||||
import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
|
||||
import DeleteUser from '@/components/DeleteUser.vue';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import FormFeedback from '@/components/FormFeedback.vue';
|
||||
import InputError from '@/components/InputError.vue';
|
||||
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useFormProtection } from '@/composables/useFormProtection';
|
||||
import { useLocalization } from '@/composables/useLocalization';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import SettingsLayout from '@/layouts/settings/Layout.vue';
|
||||
import { edit } from '@/routes/profile/index';
|
||||
import { send } from '@/routes/verification';
|
||||
import type { BreadcrumbItem, SettingsProfilePageProps } from '@/types';
|
||||
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
|
||||
import type { UserModel } from '@/types/models/user-model';
|
||||
|
||||
defineProps<SettingsProfilePageProps>();
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Profile settings',
|
||||
href: edit(),
|
||||
},
|
||||
];
|
||||
|
||||
const { t } = useLocalization();
|
||||
const page = usePage();
|
||||
const user = computed(() => page.props.auth.user);
|
||||
const avatarPreview = ref<string | null>(null);
|
||||
const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
|
||||
{
|
||||
title: t('navigation.profile'),
|
||||
href: edit(),
|
||||
},
|
||||
]);
|
||||
const profileForm = useForm('SettingsProfile', {
|
||||
name: user.value.name,
|
||||
email: user.value.email,
|
||||
avatar: null as File | null,
|
||||
});
|
||||
const profileProtection = useFormProtection(profileForm);
|
||||
const avatarDeleteForm = useForm({});
|
||||
const avatarDeleteProtection = useFormProtection(avatarDeleteForm);
|
||||
const avatarInput = useTemplateRef<HTMLInputElement>('avatarInput');
|
||||
const avatarPreview = ref<string | null>(null);
|
||||
const displayedAvatar = computed(
|
||||
() => avatarPreview.value ?? user.value.avatar,
|
||||
);
|
||||
const displayedUser = computed<UserModel>(() => ({
|
||||
...user.value,
|
||||
avatar: displayedAvatar.value,
|
||||
}));
|
||||
const canRemoveAvatar = computed(
|
||||
() => user.value.avatar !== null && !user.value.avatar_is_generated,
|
||||
() =>
|
||||
avatarPreview.value === null &&
|
||||
user.value.avatar !== null &&
|
||||
!user.value.avatar_is_generated,
|
||||
);
|
||||
const profileUpdateForm = ProfileController.update.form();
|
||||
const profileUpdateTarget = {
|
||||
url: profileUpdateForm.action,
|
||||
method: profileUpdateForm.method,
|
||||
};
|
||||
|
||||
const clearAvatarPreview = (): void => {
|
||||
function clearAvatarPreview(): void {
|
||||
if (avatarPreview.value) {
|
||||
URL.revokeObjectURL(avatarPreview.value);
|
||||
avatarPreview.value = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleAvatarChange = (event: Event) => {
|
||||
function clearAvatarSelection(): void {
|
||||
clearAvatarPreview();
|
||||
profileForm.avatar = null;
|
||||
profileForm.clearErrors('avatar');
|
||||
profileProtection.clearFeedback();
|
||||
if (avatarInput.value) {
|
||||
avatarInput.value.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function handleAvatarChange(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
const file = input.files?.[0] ?? null;
|
||||
|
||||
clearAvatarPreview();
|
||||
profileForm.avatar = file;
|
||||
profileForm.clearErrors('avatar');
|
||||
profileProtection.clearFeedback();
|
||||
|
||||
if (file) {
|
||||
avatarPreview.value = URL.createObjectURL(file);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const removeAvatar = (): void => {
|
||||
avatarDeleteForm.delete(ProfileController.destroyAvatar.url(), {
|
||||
function submitProfile(): void {
|
||||
profileProtection.submit(profileUpdateTarget, {
|
||||
forceFormData: true,
|
||||
preserveScroll: true,
|
||||
onSuccess: clearAvatarPreview,
|
||||
onSuccess: () => {
|
||||
profileForm.defaults({
|
||||
name: profileForm.name,
|
||||
email: profileForm.email,
|
||||
avatar: null,
|
||||
});
|
||||
clearAvatarSelection();
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearAvatarPreview();
|
||||
});
|
||||
function removeAvatar(): void {
|
||||
avatarDeleteProtection.submit(ProfileController.destroyAvatar(), {
|
||||
preserveScroll: true,
|
||||
onSuccess: clearAvatarSelection,
|
||||
});
|
||||
}
|
||||
|
||||
onBeforeUnmount(clearAvatarPreview);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :breadcrumbs="breadcrumbItems">
|
||||
<Head title="Profile settings" />
|
||||
|
||||
<h1 class="sr-only">Profile settings</h1>
|
||||
<Head :title="t('profile.title')" />
|
||||
|
||||
<SettingsLayout>
|
||||
<div class="flex flex-col space-y-6">
|
||||
<Heading
|
||||
variant="small"
|
||||
title="Profile information"
|
||||
description="Update your name, email address, and profile picture"
|
||||
/>
|
||||
<Card class="gap-0 overflow-hidden rounded-xl py-0 shadow-none">
|
||||
<CardHeader class="gap-stack border-b p-5 sm:p-6">
|
||||
<h2 class="text-title">{{ t('profile.title') }}</h2>
|
||||
<p class="text-muted-foreground">
|
||||
{{ t('profile.description') }}
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<Form
|
||||
v-bind="ProfileController.update.form()"
|
||||
class="space-y-6"
|
||||
v-slot="{
|
||||
errors,
|
||||
processing,
|
||||
progress,
|
||||
recentlySuccessful,
|
||||
}"
|
||||
>
|
||||
<div class="grid gap-3">
|
||||
<Label for="avatar">Profile picture</Label>
|
||||
<div class="flex items-center gap-4">
|
||||
<UserAvatar class="size-16" />
|
||||
<div class="grid flex-1 gap-2">
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<Input
|
||||
id="avatar"
|
||||
name="avatar"
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
@change="handleAvatarChange"
|
||||
/>
|
||||
<Button
|
||||
v-if="canRemoveAvatar"
|
||||
type="button"
|
||||
variant="outline"
|
||||
:disabled="avatarDeleteForm.processing"
|
||||
data-test="delete-profile-picture-button"
|
||||
@click="removeAvatar"
|
||||
<CardContent class="p-5 sm:p-6">
|
||||
<form
|
||||
class="gap-column grid min-w-0"
|
||||
:aria-busy="profileForm.processing"
|
||||
@submit.prevent="submitProfile"
|
||||
>
|
||||
<FormFeedback
|
||||
:state="profileProtection.state.value"
|
||||
:title="
|
||||
profileForm.processing
|
||||
? t('profile.saving')
|
||||
: undefined
|
||||
"
|
||||
@retry="submitProfile"
|
||||
/>
|
||||
|
||||
<fieldset
|
||||
class="gap-column grid min-w-0"
|
||||
:disabled="profileForm.processing"
|
||||
>
|
||||
<legend class="sr-only">
|
||||
{{ t('profile.information') }}
|
||||
</legend>
|
||||
|
||||
<section
|
||||
aria-labelledby="profile-picture-title"
|
||||
class="gap-column grid min-w-0 border-b pb-6"
|
||||
>
|
||||
<div class="gap-stack grid">
|
||||
<h3
|
||||
id="profile-picture-title"
|
||||
class="font-semibold"
|
||||
>
|
||||
<Trash2 class="size-4" />
|
||||
Remove
|
||||
</Button>
|
||||
{{ t('profile.picture') }}
|
||||
</h3>
|
||||
<p
|
||||
class="text-caption text-muted-foreground"
|
||||
>
|
||||
{{ t('profile.pictureDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
PNG, JPG, or WebP up to 2 MB.
|
||||
|
||||
<div
|
||||
class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<UserAvatar
|
||||
:user="displayedUser"
|
||||
size="xl"
|
||||
class="ring-border shrink-0 ring-1"
|
||||
:label="t('profile.picturePreview')"
|
||||
/>
|
||||
<div class="gap-stack grid min-w-0 flex-1">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button as-child variant="outline">
|
||||
<label
|
||||
for="avatar"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<Camera
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{
|
||||
avatarPreview
|
||||
? t(
|
||||
'profile.changePicture',
|
||||
)
|
||||
: t(
|
||||
'profile.choosePicture',
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="avatarPreview"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
@click="clearAvatarSelection"
|
||||
>
|
||||
<RotateCcw aria-hidden="true" />
|
||||
{{
|
||||
t('profile.discardPicture')
|
||||
}}
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="canRemoveAvatar"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
:disabled="
|
||||
avatarDeleteForm.processing
|
||||
"
|
||||
data-test="delete-profile-picture-button"
|
||||
@click="removeAvatar"
|
||||
>
|
||||
<Trash2 aria-hidden="true" />
|
||||
{{ t('profile.removePicture') }}
|
||||
</Button>
|
||||
</div>
|
||||
<input
|
||||
id="avatar"
|
||||
ref="avatarInput"
|
||||
name="avatar"
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
class="sr-only"
|
||||
aria-describedby="avatar-help avatar-error"
|
||||
:aria-invalid="
|
||||
!!profileForm.errors.avatar
|
||||
"
|
||||
@change="handleAvatarChange"
|
||||
/>
|
||||
<p
|
||||
v-if="profileForm.avatar"
|
||||
class="text-caption min-w-0 break-all font-medium"
|
||||
>
|
||||
{{
|
||||
t('profile.selectedPicture', {
|
||||
name: profileForm.avatar
|
||||
.name,
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p
|
||||
id="avatar-help"
|
||||
class="text-caption text-muted-foreground"
|
||||
>
|
||||
{{ t('profile.pictureHelp') }}
|
||||
</p>
|
||||
<progress
|
||||
v-if="profileForm.progress"
|
||||
class="h-1 w-full overflow-hidden rounded-full"
|
||||
:value="
|
||||
profileForm.progress.percentage
|
||||
"
|
||||
max="100"
|
||||
>
|
||||
{{
|
||||
profileForm.progress.percentage
|
||||
}}%
|
||||
</progress>
|
||||
<InputError
|
||||
id="avatar-error"
|
||||
:message="profileForm.errors.avatar"
|
||||
/>
|
||||
<FormFeedback
|
||||
:state="
|
||||
avatarDeleteProtection.state
|
||||
.value
|
||||
"
|
||||
:title="
|
||||
avatarDeleteForm.processing
|
||||
? t(
|
||||
'profile.removingPicture',
|
||||
)
|
||||
: undefined
|
||||
"
|
||||
@retry="removeAvatar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">{{
|
||||
t('profile.name')
|
||||
}}</Label>
|
||||
<Input
|
||||
id="name"
|
||||
v-model="profileForm.name"
|
||||
name="name"
|
||||
required
|
||||
autocomplete="name"
|
||||
:placeholder="t('profile.namePlaceholder')"
|
||||
:aria-invalid="!!profileForm.errors.name"
|
||||
aria-describedby="name-error"
|
||||
/>
|
||||
<InputError
|
||||
id="name-error"
|
||||
:message="profileForm.errors.name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">{{
|
||||
t('profile.email')
|
||||
}}</Label>
|
||||
<Input
|
||||
id="email"
|
||||
v-model="profileForm.email"
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
autocomplete="username"
|
||||
:placeholder="t('profile.emailPlaceholder')"
|
||||
:aria-invalid="!!profileForm.errors.email"
|
||||
aria-describedby="email-error"
|
||||
/>
|
||||
<InputError
|
||||
id="email-error"
|
||||
:message="profileForm.errors.email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
mustVerifyEmail && !user.email_verified_at
|
||||
"
|
||||
class="bg-muted/55 rounded-lg border p-4"
|
||||
>
|
||||
<p class="text-body text-muted-foreground">
|
||||
{{ t('profile.emailUnverified') }}
|
||||
<Link
|
||||
:href="send()"
|
||||
as="button"
|
||||
class="text-primary font-medium underline underline-offset-4"
|
||||
>
|
||||
{{ t('profile.resendVerification') }}
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<p
|
||||
v-if="status === 'verification-link-sent'"
|
||||
role="status"
|
||||
class="text-success-foreground mt-2 text-sm font-medium"
|
||||
>
|
||||
{{ t('profile.verificationSent') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<progress
|
||||
v-if="progress"
|
||||
class="h-1 w-full overflow-hidden rounded-full"
|
||||
:value="progress.percentage"
|
||||
max="100"
|
||||
>
|
||||
{{ progress.percentage }}%
|
||||
</progress>
|
||||
<InputError class="mt-1" :message="errors.avatar" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
class="mt-1 block w-full"
|
||||
name="name"
|
||||
:default-value="user.name"
|
||||
required
|
||||
autocomplete="name"
|
||||
placeholder="Full name"
|
||||
/>
|
||||
<InputError class="mt-2" :message="errors.name" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
class="mt-1 block w-full"
|
||||
name="email"
|
||||
:default-value="user.email"
|
||||
required
|
||||
autocomplete="username"
|
||||
placeholder="Email address"
|
||||
/>
|
||||
<InputError class="mt-2" :message="errors.email" />
|
||||
</div>
|
||||
|
||||
<div v-if="mustVerifyEmail && !user.email_verified_at">
|
||||
<p class="text-muted-foreground -mt-4 text-sm">
|
||||
Your email address is unverified.
|
||||
<Link
|
||||
:href="send()"
|
||||
as="button"
|
||||
class="text-foreground hover:decoration-current! underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out dark:decoration-neutral-500"
|
||||
>
|
||||
Click here to resend the verification email.
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="status === 'verification-link-sent'"
|
||||
class="mt-2 text-sm font-medium text-green-600"
|
||||
>
|
||||
A new verification link has been sent to your email
|
||||
address.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<Button
|
||||
:disabled="processing"
|
||||
data-test="update-profile-button"
|
||||
>Save</Button
|
||||
>
|
||||
|
||||
<Transition
|
||||
enter-active-class="transition ease-in-out"
|
||||
enter-from-class="opacity-0"
|
||||
leave-active-class="transition ease-in-out"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<p
|
||||
v-show="recentlySuccessful"
|
||||
class="text-sm text-neutral-600"
|
||||
>
|
||||
Saved.
|
||||
</p>
|
||||
</Transition>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="profileForm.processing"
|
||||
data-test="update-profile-button"
|
||||
>
|
||||
{{
|
||||
profileForm.processing
|
||||
? t('profile.saving')
|
||||
: t('profile.save')
|
||||
}}
|
||||
</Button>
|
||||
<p
|
||||
v-if="profileForm.isDirty"
|
||||
class="text-caption text-muted-foreground"
|
||||
>
|
||||
{{ t('profile.unsaved') }}
|
||||
</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<DeleteUser />
|
||||
</SettingsLayout>
|
||||
|
||||
Reference in New Issue
Block a user