feat(KAN-36): rebuild profile and appearance settings
This commit is contained in:
@@ -1,39 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { Monitor, Moon, Sun } from 'lucide-vue-next';
|
||||
import { Check, Monitor, Moon, Sun } from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import { useAppearance } from '@/composables/useAppearance';
|
||||
import { useLocalization } from '@/composables/useLocalization';
|
||||
|
||||
const { appearance, updateAppearance } = useAppearance();
|
||||
const { t } = useLocalization();
|
||||
|
||||
const tabs = [
|
||||
{ value: 'light', Icon: Sun, label: 'appearance.light' },
|
||||
{ value: 'dark', Icon: Moon, label: 'appearance.dark' },
|
||||
{ value: 'system', Icon: Monitor, label: 'appearance.system' },
|
||||
] as const;
|
||||
const tabs = computed(() => [
|
||||
{
|
||||
value: 'light' as const,
|
||||
Icon: Sun,
|
||||
label: t('appearance.light'),
|
||||
description: t('appearance.lightDescription'),
|
||||
},
|
||||
{
|
||||
value: 'dark' as const,
|
||||
Icon: Moon,
|
||||
label: t('appearance.dark'),
|
||||
description: t('appearance.darkDescription'),
|
||||
},
|
||||
{
|
||||
value: 'system' as const,
|
||||
Icon: Monitor,
|
||||
label: t('appearance.system'),
|
||||
description: t('appearance.systemDescription'),
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
role="group"
|
||||
:aria-label="t('appearance.label')"
|
||||
class="border-border bg-muted inline-flex max-w-full gap-1 rounded-lg border p-1"
|
||||
>
|
||||
<button
|
||||
v-for="{ value, Icon, label } in tabs"
|
||||
:key="value"
|
||||
type="button"
|
||||
:aria-pressed="appearance === value"
|
||||
@click="updateAppearance(value)"
|
||||
:class="[
|
||||
'min-h-control text-body focus-visible:outline-ring flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
appearance === value
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
||||
]"
|
||||
>
|
||||
<component :is="Icon" class="size-4 shrink-0" aria-hidden="true" />
|
||||
<span>{{ t(label) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<fieldset class="min-w-0">
|
||||
<legend class="sr-only">{{ t('appearance.label') }}</legend>
|
||||
<div class="grid min-w-0 gap-3 sm:grid-cols-3">
|
||||
<label
|
||||
v-for="{ value, Icon, label, description } in tabs"
|
||||
:key="value"
|
||||
class="relative min-w-0"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="appearance"
|
||||
:value="value"
|
||||
:checked="appearance === value"
|
||||
:aria-describedby="`appearance-${value}-description`"
|
||||
class="peer sr-only"
|
||||
@change="updateAppearance(value)"
|
||||
/>
|
||||
<span
|
||||
class="peer-checked:border-primary peer-checked:bg-accent/50 peer-focus-visible:ring-ring/40 gap-stack bg-background hover:border-primary/50 flex h-full min-h-32 cursor-pointer flex-col rounded-lg border p-4 transition-colors peer-focus-visible:ring-2"
|
||||
>
|
||||
<span class="flex items-center justify-between gap-3">
|
||||
<span
|
||||
class="bg-accent text-primary flex size-10 items-center justify-center rounded-lg"
|
||||
>
|
||||
<component
|
||||
:is="Icon"
|
||||
class="size-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<Check
|
||||
v-if="appearance === value"
|
||||
class="text-primary size-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<span class="font-semibold">{{ label }}</span>
|
||||
<span
|
||||
:id="`appearance-${value}-description`"
|
||||
class="text-caption text-muted-foreground"
|
||||
>
|
||||
{{ description }}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
import { Form } from '@inertiajs/vue3';
|
||||
import { useTemplateRef } from 'vue';
|
||||
import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import InputError from '@/components/InputError.vue';
|
||||
import PasswordInput from '@/components/PasswordInput.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
@@ -17,97 +17,104 @@ import {
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useLocalization } from '@/composables/useLocalization';
|
||||
|
||||
const passwordInput = useTemplateRef('passwordInput');
|
||||
const { t } = useLocalization();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<Heading
|
||||
variant="small"
|
||||
title="Delete account"
|
||||
description="Delete your account and all of its resources"
|
||||
/>
|
||||
<div
|
||||
class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10"
|
||||
>
|
||||
<div class="relative space-y-0.5 text-red-600 dark:text-red-100">
|
||||
<p class="font-medium">Warning</p>
|
||||
<p class="text-sm">
|
||||
Please proceed with caution, this cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
<Dialog>
|
||||
<DialogTrigger as-child>
|
||||
<Button variant="destructive" data-test="delete-user-button"
|
||||
>Delete account</Button
|
||||
>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<Form
|
||||
v-bind="ProfileController.destroy.form()"
|
||||
reset-on-success
|
||||
@error="() => passwordInput?.focus()"
|
||||
:options="{
|
||||
preserveScroll: true,
|
||||
}"
|
||||
class="space-y-6"
|
||||
v-slot="{ errors, processing, reset, clearErrors }"
|
||||
>
|
||||
<DialogHeader class="space-y-3">
|
||||
<DialogTitle
|
||||
>Are you sure you want to delete your
|
||||
account?</DialogTitle
|
||||
>
|
||||
<DialogDescription>
|
||||
Once your account is deleted, all of its
|
||||
resources and data will also be permanently
|
||||
deleted. Please enter your password to confirm
|
||||
you would like to permanently delete your
|
||||
account.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Card
|
||||
class="border-destructive/35 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.delete.title') }}</h2>
|
||||
<p class="text-muted-foreground">
|
||||
{{ t('profile.delete.description') }}
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent class="p-5 sm:p-6">
|
||||
<div
|
||||
class="bg-destructive/8 border-destructive/25 gap-column grid rounded-lg border p-4"
|
||||
>
|
||||
<div class="gap-stack grid">
|
||||
<p class="text-destructive font-semibold">
|
||||
{{ t('profile.delete.warning') }}
|
||||
</p>
|
||||
<p class="text-body text-muted-foreground">
|
||||
{{ t('profile.delete.warningDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
<Dialog>
|
||||
<DialogTrigger as-child>
|
||||
<Button
|
||||
variant="destructive"
|
||||
class="justify-self-start"
|
||||
data-test="delete-user-button"
|
||||
>{{ t('profile.delete.action') }}</Button
|
||||
>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<Form
|
||||
v-bind="ProfileController.destroy.form()"
|
||||
reset-on-success
|
||||
@error="() => passwordInput?.focus()"
|
||||
:options="{
|
||||
preserveScroll: true,
|
||||
}"
|
||||
class="space-y-6"
|
||||
v-slot="{ errors, processing, reset, clearErrors }"
|
||||
>
|
||||
<DialogHeader class="space-y-3">
|
||||
<DialogTitle>{{
|
||||
t('profile.delete.confirmTitle')
|
||||
}}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{{ t('profile.delete.confirmDescription') }}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password" class="sr-only"
|
||||
>Password</Label
|
||||
>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
name="password"
|
||||
ref="passwordInput"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<InputError :message="errors.password" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="password" class="sr-only">{{
|
||||
t('profile.delete.password')
|
||||
}}</Label>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
name="password"
|
||||
ref="passwordInput"
|
||||
:placeholder="t('profile.delete.password')"
|
||||
/>
|
||||
<InputError :message="errors.password" />
|
||||
</div>
|
||||
|
||||
<DialogFooter class="gap-2">
|
||||
<DialogClose as-child>
|
||||
<Button
|
||||
variant="secondary"
|
||||
@click="
|
||||
() => {
|
||||
clearErrors();
|
||||
reset();
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</Button>
|
||||
</DialogClose>
|
||||
|
||||
<DialogFooter class="gap-2">
|
||||
<DialogClose as-child>
|
||||
<Button
|
||||
variant="secondary"
|
||||
@click="
|
||||
() => {
|
||||
clearErrors();
|
||||
reset();
|
||||
}
|
||||
"
|
||||
type="submit"
|
||||
variant="destructive"
|
||||
:disabled="processing"
|
||||
data-test="confirm-delete-user-button"
|
||||
>
|
||||
Cancel
|
||||
{{ t('profile.delete.confirmAction') }}
|
||||
</Button>
|
||||
</DialogClose>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="destructive"
|
||||
:disabled="processing"
|
||||
data-test="confirm-delete-user-button"
|
||||
>
|
||||
Delete account
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import {
|
||||
GitBranch,
|
||||
KeyRound,
|
||||
Palette,
|
||||
Settings2,
|
||||
ShieldCheck,
|
||||
UserRound,
|
||||
} from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
||||
import { useLocalization } from '@/composables/useLocalization';
|
||||
import { toUrl } from '@/lib/utils';
|
||||
@@ -19,22 +24,27 @@ const sidebarNavItems = computed<NavItem[]>(() => [
|
||||
{
|
||||
title: t('navigation.profile'),
|
||||
href: editProfile(),
|
||||
icon: UserRound,
|
||||
},
|
||||
{
|
||||
title: t('navigation.security'),
|
||||
href: editSecurity(),
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
title: t('navigation.gitConnections'),
|
||||
href: editGitConnections(),
|
||||
icon: GitBranch,
|
||||
},
|
||||
{
|
||||
title: t('navigation.applications'),
|
||||
href: editApplications(),
|
||||
icon: KeyRound,
|
||||
},
|
||||
{
|
||||
title: t('navigation.appearance'),
|
||||
href: editAppearance(),
|
||||
icon: Palette,
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -42,47 +52,60 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-4 py-6">
|
||||
<Heading
|
||||
:title="t('navigation.settings')"
|
||||
:description="t('navigation.settingsDescription')"
|
||||
/>
|
||||
<div
|
||||
class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-6xl flex-1 flex-col p-4"
|
||||
>
|
||||
<header class="gap-stack grid min-w-0">
|
||||
<div class="text-primary flex items-center gap-2">
|
||||
<Settings2 class="size-4" aria-hidden="true" />
|
||||
<p class="text-label text-muted-foreground uppercase">
|
||||
{{ t('settings.eyebrow') }}
|
||||
</p>
|
||||
</div>
|
||||
<h1 class="text-headline-mobile md:text-headline break-words">
|
||||
{{ t('navigation.settings') }}
|
||||
</h1>
|
||||
<p class="text-muted-foreground max-w-2xl">
|
||||
{{ t('navigation.settingsDescription') }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="flex min-w-0 flex-col gap-6 lg:flex-row lg:gap-12">
|
||||
<aside class="w-full min-w-0 lg:w-52 lg:shrink-0">
|
||||
<div
|
||||
class="bg-card grid min-w-0 overflow-hidden rounded-xl border shadow-sm lg:grid-cols-[15rem_minmax(0,1fr)]"
|
||||
>
|
||||
<aside
|
||||
class="bg-muted/35 border-b p-3 lg:border-b-0 lg:border-r lg:p-4"
|
||||
>
|
||||
<nav
|
||||
class="flex gap-1 overflow-x-auto lg:flex-col"
|
||||
class="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
|
||||
:aria-label="t('navigation.settings')"
|
||||
>
|
||||
<Button
|
||||
<Link
|
||||
v-for="item in sidebarNavItems"
|
||||
:key="toUrl(item.href)"
|
||||
variant="ghost"
|
||||
:href="item.href"
|
||||
:aria-current="
|
||||
isCurrentOrParentUrl(item.href) ? 'page' : undefined
|
||||
"
|
||||
:class="[
|
||||
'shrink-0 justify-start lg:w-full',
|
||||
{ 'bg-muted': isCurrentOrParentUrl(item.href) },
|
||||
'text-body focus-visible:ring-ring/40 flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 font-medium outline-none transition-colors focus-visible:ring-2 lg:w-full',
|
||||
isCurrentOrParentUrl(item.href)
|
||||
? 'border-primary/25 bg-accent text-accent-foreground shadow-xs'
|
||||
: 'text-muted-foreground hover:border-border hover:bg-background hover:text-foreground border-transparent',
|
||||
]"
|
||||
as-child
|
||||
>
|
||||
<Link
|
||||
:href="item.href"
|
||||
:aria-current="
|
||||
isCurrentOrParentUrl(item.href)
|
||||
? 'page'
|
||||
: undefined
|
||||
"
|
||||
>
|
||||
<component :is="item.icon" class="h-4 w-4" />
|
||||
{{ item.title }}
|
||||
</Link>
|
||||
</Button>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="whitespace-nowrap">{{ item.title }}</span>
|
||||
</Link>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<Separator class="lg:hidden" />
|
||||
|
||||
<div class="min-w-0 flex-1 md:max-w-2xl">
|
||||
<section class="max-w-xl space-y-12">
|
||||
<div class="min-w-0 p-4 sm:p-6 lg:p-8">
|
||||
<section class="mx-auto grid max-w-3xl gap-8">
|
||||
<slot />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -359,6 +359,7 @@ export const en = {
|
||||
'navigation.appearance': 'Appearance',
|
||||
'navigation.settingsDescription':
|
||||
'Manage your profile, security, and Git integration settings.',
|
||||
'settings.eyebrow': 'Account settings',
|
||||
'navigation.createTicket': 'New ticket',
|
||||
'navigation.createProject': 'New project',
|
||||
'navigation.open': 'Open navigation',
|
||||
@@ -373,8 +374,58 @@ export const en = {
|
||||
'navigation.breadcrumbs': 'Breadcrumbs',
|
||||
'appearance.label': 'Color theme',
|
||||
'appearance.light': 'Light',
|
||||
'appearance.lightDescription':
|
||||
'Use a bright workspace with dark text and clear borders.',
|
||||
'appearance.dark': 'Dark',
|
||||
'appearance.darkDescription':
|
||||
'Reduce glare with a darker workspace and balanced contrast.',
|
||||
'appearance.system': 'System',
|
||||
'appearance.systemDescription':
|
||||
'Follow the light or dark preference set on this device.',
|
||||
'appearance.title': 'Appearance',
|
||||
'appearance.description': 'Choose how KanbanGit looks on this device.',
|
||||
'appearance.persistenceHint':
|
||||
'Your choice is saved on this device and restored when you open KanbanGit again.',
|
||||
'profile.title': 'Profile',
|
||||
'profile.description':
|
||||
'Keep your personal details and profile picture up to date.',
|
||||
'profile.information': 'Profile information',
|
||||
'profile.picture': 'Profile picture',
|
||||
'profile.pictureDescription':
|
||||
'Help teammates recognize you throughout the workspace.',
|
||||
'profile.picturePreview': 'Profile picture preview',
|
||||
'profile.choosePicture': 'Choose picture',
|
||||
'profile.changePicture': 'Choose another',
|
||||
'profile.discardPicture': 'Discard selection',
|
||||
'profile.removePicture': 'Remove picture',
|
||||
'profile.removingPicture': 'Removing picture…',
|
||||
'profile.selectedPicture': 'Selected: {name}',
|
||||
'profile.pictureHelp':
|
||||
'Choose a PNG, JPG, or WebP image up to 2 MB. On mobile, you can select from your photo library or camera.',
|
||||
'profile.name': 'Name',
|
||||
'profile.namePlaceholder': 'Full name',
|
||||
'profile.email': 'Email address',
|
||||
'profile.emailPlaceholder': 'Email address',
|
||||
'profile.emailUnverified': 'Your email address is unverified.',
|
||||
'profile.resendVerification': 'Resend the verification email',
|
||||
'profile.verificationSent':
|
||||
'A new verification link has been sent to your email address.',
|
||||
'profile.save': 'Save profile',
|
||||
'profile.saving': 'Saving profile…',
|
||||
'profile.unsaved': 'You have unsaved profile changes.',
|
||||
'profile.delete.title': 'Delete account',
|
||||
'profile.delete.description':
|
||||
'Permanently delete your account and all of its resources.',
|
||||
'profile.delete.warning': 'This action cannot be undone',
|
||||
'profile.delete.warningDescription':
|
||||
'Your account and associated data will be permanently removed.',
|
||||
'profile.delete.action': 'Delete account',
|
||||
'profile.delete.confirmTitle':
|
||||
'Are you sure you want to delete your account?',
|
||||
'profile.delete.confirmDescription':
|
||||
'Enter your password to confirm that you want to permanently delete your account and its data.',
|
||||
'profile.delete.password': 'Password',
|
||||
'profile.delete.confirmAction': 'Permanently delete account',
|
||||
'common.cancel': 'Cancel',
|
||||
'common.close': 'Close',
|
||||
'common.retry': 'Try again',
|
||||
|
||||
@@ -1,35 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import AppearanceTabs from '@/components/AppearanceTabs.vue';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { useLocalization } from '@/composables/useLocalization';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import SettingsLayout from '@/layouts/settings/Layout.vue';
|
||||
import { edit } from '@/routes/appearance/index';
|
||||
import type { BreadcrumbItem } from '@/types';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
const { t } = useLocalization();
|
||||
const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
|
||||
{
|
||||
title: 'Appearance settings',
|
||||
title: t('navigation.appearance'),
|
||||
href: edit(),
|
||||
},
|
||||
];
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :breadcrumbs="breadcrumbItems">
|
||||
<Head title="Appearance settings" />
|
||||
|
||||
<h1 class="sr-only">Appearance settings</h1>
|
||||
<Head :title="t('appearance.title')" />
|
||||
|
||||
<SettingsLayout>
|
||||
<div class="space-y-6">
|
||||
<Heading
|
||||
variant="small"
|
||||
title="Appearance settings"
|
||||
description="Update your account's appearance settings"
|
||||
/>
|
||||
<AppearanceTabs />
|
||||
</div>
|
||||
<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('appearance.title') }}</h2>
|
||||
<p class="text-muted-foreground">
|
||||
{{ t('appearance.description') }}
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent class="gap-column grid p-5 sm:p-6">
|
||||
<AppearanceTabs />
|
||||
<p class="text-caption text-muted-foreground">
|
||||
{{ t('appearance.persistenceHint') }}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
@@ -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