bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-10-25 21:59:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: oauth login user navigation and settings layout

Browse source
This commit is contained in:
Bart van der Braak 2024-02-06 15:28:57 +01:00
parent b4b2eb9055
commit e8ac1ac2f7
17 changed files with 333 additions and 328 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/routes/(dashboard)/settings/+layout.svelte
View file

@ -7,10 +7,6 @@
title: 'Profile',
href: '/settings'
},
{
title: 'Account',
href: '/settings/account'
},
{
title: 'Appearance',
href: '/settings/appearance'

4
apps/web/src/routes/(dashboard)/settings/+page.svelte
View file

@ -9,8 +9,8 @@
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium">Profile</h3>
<p class="text-sm text-muted-foreground">This is how others will see you on the site.</p>
<h3 class="text-lg font-medium">Account</h3>
<p class="text-sm text-muted-foreground">Update your account and profile settings.</p>
</div>
<Separator />
<ProfileForm data={form} {user} />

24
apps/web/src/routes/(dashboard)/settings/account/+page.server.ts
View file

@ -1,24 +0,0 @@
import { superValidate } from 'sveltekit-superforms/server';
import type { PageServerLoad } from './$types';
import { accountFormSchema } from './account-form.svelte';
import { fail, type Actions } from '@sveltejs/kit';
export const load: PageServerLoad = async () => {
return {
form: await superValidate(accountFormSchema)
};
};
export const actions: Actions = {
default: async (event) => {
const form = await superValidate(event, accountFormSchema);
if (!form.valid) {
return fail(400, {
form
});
}
return {
form
};
}
};

19
apps/web/src/routes/(dashboard)/settings/account/+page.svelte
View file

@ -1,19 +0,0 @@
<script lang="ts">
import { Separator } from '$lib/components/ui/separator';
import AccountForm from './account-form.svelte';
import type { PageData } from './$types';
export let data: PageData;
export let { form, user } = data;
</script>
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium">Account</h3>
<p class="text-sm text-muted-foreground">
Update your account settings. Set your preferred language and timezone.
</p>
</div>
<Separator />
<AccountForm data={form} {user} />
</div>

45
apps/web/src/routes/(dashboard)/settings/account/account-form.svelte
View file

@ -1,45 +0,0 @@
<script lang="ts" context="module">
import { z } from 'zod';
export const accountFormSchema = z.object({
name: z
.string({
required_error: 'Required.'
})
.min(2, 'Name must be at least 2 characters.')
.max(30, 'Name must not be longer than 30 characters')
});
export type AccountFormSchema = typeof accountFormSchema;
</script>
<script lang="ts">
import * as Form from '$lib/components/ui/form';
import type { SuperValidated } from 'sveltekit-superforms';
import { dev } from '$app/environment';
import type { LayoutData } from '../$types';
export let data: SuperValidated<AccountFormSchema>;
export let user: LayoutData['user'];
</script>
<Form.Root
method="POST"
class="space-y-8"
let:config
schema={accountFormSchema}
form={data}
debug={dev ? true : false}
>
<Form.Item>
<Form.Field name="name" {config}>
<Form.Label>Name</Form.Label>
<Form.Input placeholder={user?.name} />
<Form.Description>
This is the name that will be displayed on your profile and in emails.
</Form.Description>
<Form.Validation />
</Form.Field>
</Form.Item>
<Form.Button>Update account</Form.Button>
</Form.Root>

18
apps/web/src/routes/(dashboard)/settings/profile-form.svelte
View file

@ -1,6 +1,12 @@
<script lang="ts" context="module">
import { z } from 'zod';
export const profileFormSchema = z.object({
name: z
.string({
required_error: 'Required.'
})
.min(2, 'Name must be at least 2 characters.')
.max(30, 'Name must not be longer than 30 characters'),
username: z
.string()
.min(2, 'Username must be at least 2 characters.')
@ -32,6 +38,16 @@
>
<div class="grid grid-cols-[1fr,16rem] gap-4">
<div>
<Form.Item>
<Form.Field name="name" {config}>
<Form.Label>Name</Form.Label>
<Form.Input placeholder={user?.name} />
<Form.Description>
This is the name that will be displayed on your profile and in emails.
</Form.Description>
<Form.Validation />
</Form.Field>
</Form.Item>
<Form.Item>
<Form.Field {config} name="username">
<Form.Label>Username</Form.Label>
@ -60,7 +76,7 @@
<Form.Label>Profile Picture</Form.Label>
<Avatar.Root class="aspect-square h-auto w-full">
<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
<Avatar.Fallback>{user?.initials}</Avatar.Fallback>
<Avatar.Fallback class="text-8xl">{user?.initials}</Avatar.Fallback>
</Avatar.Root>
<Form.Input type="file" placeholder={user?.email} />
<Form.Description>