diff --git a/apps/web/src/lib/components/site/nav/user-nav.svelte b/apps/web/src/lib/components/site/nav/user-nav.svelte index 69dc92f..864e252 100644 --- a/apps/web/src/lib/components/site/nav/user-nav.svelte +++ b/apps/web/src/lib/components/site/nav/user-nav.svelte @@ -4,13 +4,6 @@ import * as DropdownMenu from '$lib/components/ui/dropdown-menu'; import type { BaseAuthStore } from 'pocketbase'; - const fullNameToInitials = (fullName: string) => - fullName - .split(' ') - .map((word) => word[0].toUpperCase()) - .slice(0, 2) - .join(''); - export let authenticated = false; export let user: BaseAuthStore['model']; @@ -21,7 +14,7 @@ diff --git a/apps/web/src/routes/(dashboard)/settings/+page.svelte b/apps/web/src/routes/(dashboard)/settings/+page.svelte index 3f0786c..02d2ac4 100644 --- a/apps/web/src/routes/(dashboard)/settings/+page.svelte +++ b/apps/web/src/routes/(dashboard)/settings/+page.svelte @@ -2,7 +2,9 @@ import type { PageData } from './$types'; import ProfileForm from './profile-form.svelte'; import { Separator } from '$lib/components/ui/separator'; + export let data: PageData; + export let { form, user } = data;
@@ -11,5 +13,5 @@

This is how others will see you on the site.

- + diff --git a/apps/web/src/routes/(dashboard)/settings/profile-form.svelte b/apps/web/src/routes/(dashboard)/settings/profile-form.svelte index 48b6ab6..d7ac350 100644 --- a/apps/web/src/routes/(dashboard)/settings/profile-form.svelte +++ b/apps/web/src/routes/(dashboard)/settings/profile-form.svelte @@ -5,12 +5,8 @@ .string() .min(2, 'Username must be at least 2 characters.') .max(30, 'Username must not be longer than 30 characters'), - email: z.string({ required_error: 'Please select an email to display' }).email(), - bio: z.string().min(4).max(160).default('I own a computer.'), - website: z - .string() - .url({ message: 'Please enter a valid URL.' }) - .default('https://shadcn-svelte.com') + email: z.string({ required_error: 'Please enter a valid email' }).email(), + avatar: z.any().refine((val) => val.length > 0, 'File is required') }); export type ProfileFormSchema = typeof profileFormSchema; @@ -19,7 +15,11 @@ import * as Form from '$lib/components/ui/form'; import type { SuperValidated } from 'sveltekit-superforms'; import { dev } from '$app/environment'; + import type { LayoutData } from '../$types'; + import * as Avatar from '$lib/components/ui/avatar'; + export let data: SuperValidated; + export let user: LayoutData['user']; - - - Username - - - This is your public display name. It can be your real name or a pseudonym. - - - - - - - Email - - - - m@example.com - - m@google.com - m@support.com - - - - - You can manage verified email addresses in your email settings. - - - - - - - Bio - - - You can @mention other users and organizations to link to them. - - - - - - - Website - - Your personal website, blog, or portfolio. - - - +
+
+ + + Username + + + This is your public display name. It can be your real name or a pseudonym. + + + + + + + Email + + + + This is the email address associated with your account. + + + + + +
+ + + Profile Picture + + + {user?.initials} + + + + Your avatar image displayed. + + + + +
Update profile diff --git a/apps/web/src/routes/+layout.server.ts b/apps/web/src/routes/+layout.server.ts index f11efcd..0df51af 100644 --- a/apps/web/src/routes/+layout.server.ts +++ b/apps/web/src/routes/+layout.server.ts @@ -1,8 +1,18 @@ import type { LayoutServerLoad } from './$types'; +const fullNameToInitials = (fullName: string) => + fullName + .split(' ') + .map((word) => word[0].toUpperCase()) + .slice(0, 2) + .join(''); + export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals }) => { const user = locals.pocketBase.authStore.model; - if (user) user.avatarUrl = locals.pocketBase.getFileUrl(user, user.avatar); + if (user) { + user.avatarUrl = locals.pocketBase.getFileUrl(user, user.avatar); + user.initials = fullNameToInitials(user.name); + } return { authenticated: locals.pocketBase.authStore.isValid, diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte index 79e7b01..8af2ea0 100644 --- a/apps/web/src/routes/+page.svelte +++ b/apps/web/src/routes/+page.svelte @@ -31,7 +31,9 @@ class="text-primary-500 ml-1 h-3 w-3 tracking-normal transition-transform duration-150 ease-in-out group-hover:translate-x-0.5" /> - +