mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-06-27 19:59:11 +00:00
feat: user settings and profile pages
This commit is contained in:
parent
a50f2c12a8
commit
68ae0e7d1e
13 changed files with 122 additions and 302 deletions
|
|
@ -11,13 +11,14 @@ export const load: PageServerLoad = async () => {
|
|||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async (event) => {
|
||||
const form = await superValidate(event, zod(appearanceFormSchema));
|
||||
default: async ({ request, locals }) => {
|
||||
const form = await superValidate(request, zod(appearanceFormSchema));
|
||||
if (!form.valid) {
|
||||
return fail(400, {
|
||||
form,
|
||||
});
|
||||
}
|
||||
await locals.pocketBase.collection('users').update(locals.id, form.data);
|
||||
return {
|
||||
form,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { z } from 'zod';
|
||||
|
||||
export const appearanceFormSchema = z.object({
|
||||
theme: z.enum(['system', 'light', 'dark'], {
|
||||
appearanceMode: z.enum(['system', 'light', 'dark'], {
|
||||
required_error: 'Please select a theme.'
|
||||
})
|
||||
});
|
||||
|
|
@ -13,35 +13,86 @@
|
|||
<script lang="ts">
|
||||
import { browser, dev } from '$app/environment';
|
||||
import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
|
||||
import SuperDebug, { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
|
||||
import SuperDebug, {
|
||||
type SuperValidated,
|
||||
type Infer,
|
||||
superForm,
|
||||
} from 'sveltekit-superforms';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import * as Form from '$lib/components/ui/form';
|
||||
import * as RadioGroup from '$lib/components/ui/radio-group';
|
||||
import Label from '$lib/components/ui/label/label.svelte';
|
||||
import { zodClient } from 'sveltekit-superforms/adapters';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Icons } from '$lib/components/site';
|
||||
import { resetMode, setMode } from 'mode-watcher';
|
||||
|
||||
export let data: SuperValidated<Infer<AppearanceFormSchema>>;
|
||||
let isLoading = false;
|
||||
|
||||
const form = superForm(data, {
|
||||
validators: zodClient(appearanceFormSchema)
|
||||
validators: zodClient(appearanceFormSchema),
|
||||
onSubmit: () => {
|
||||
isLoading = true;
|
||||
toast.loading('Updating appearance...');
|
||||
},
|
||||
onUpdated: ({ form: f }) => {
|
||||
isLoading = false;
|
||||
setMode(f.data.appearanceMode)
|
||||
if (f.valid) {
|
||||
toast.success('Appearance has been updated.');
|
||||
} else {
|
||||
toast.error('Please fix the errors in the form.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const { form: formData, enhance } = form;
|
||||
</script>
|
||||
|
||||
<form method="POST" use:enhance class="space-y-8">
|
||||
<Form.Fieldset {form} name="theme">
|
||||
<Form.Legend>Theme</Form.Legend>
|
||||
<Form.Description>Select the theme for the dashboard.</Form.Description>
|
||||
<Form.FieldErrors />
|
||||
<RadioGroup.Root
|
||||
class="grid grid-cols-3 gap-8 pt-2"
|
||||
orientation="horizontal"
|
||||
bind:value={$formData.theme}
|
||||
>
|
||||
<Form.Control let:attrs>
|
||||
<Label class="[&:has([data-state=checked])>div]:border-primary">
|
||||
<RadioGroup.Item {...attrs} value="system" class="sr-only" />
|
||||
<!-- <div class="container">
|
||||
<div class="div1">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Change your mode</Card.Title>
|
||||
<Card.Description>
|
||||
You can modify the mode for your theme preference.
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<form method="POST" use:enhance class="space-y-2">
|
||||
<Form.Fieldset {form} name="appearanceMode">
|
||||
<Form.Legend>Theme</Form.Legend>
|
||||
<Form.FieldErrors />
|
||||
<RadioGroup.Root
|
||||
class="grid grid-cols-3 gap-8 pt-2"
|
||||
orientation="horizontal"
|
||||
bind:value={$formData.appearanceMode}
|
||||
>
|
||||
<Form.Control let:attrs>
|
||||
<Label class="[&:has([data-state=checked])>div]:border-primary">
|
||||
<RadioGroup.Item {...attrs} value="system" class="sr-only" />
|
||||
<div
|
||||
class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<div class="space-y-2 rounded-sm bg-slate-500 p-2">
|
||||
<div class="space-y-2 rounded-md bg-slate-400 p-2 shadow-sm">
|
||||
<div class="h-2 w-4 rounded-lg bg-slate-200" />
|
||||
<div class="h-2 w-full rounded-lg bg-slate-200" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-slate-200" />
|
||||
<div class="h-2 w-full rounded-lg bg-slate-200" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-slate-200" />
|
||||
<div class="h-2 w-full rounded-lg bg-slate-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="block w-full p-2 text-center font-normal"> System </span>
|
||||
</Label>
|
||||
</Form.Control>
|
||||
<Form.Control let:attrs>
|
||||
<Label class="[&:has([data-state=checked])>div]:border-primary">
|
||||
<RadioGroup.Item {...attrs} value="light" class="sr-only" />
|
||||
<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
|
||||
<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
|
||||
<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
|
||||
|
|
@ -58,8 +109,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div2"> -->
|
||||
<span class="block w-full p-2 text-center font-normal"> Light </span>
|
||||
</Label>
|
||||
</Form.Control>
|
||||
<Form.Control let:attrs>
|
||||
<Label class="[&:has([data-state=checked])>div]:border-primary">
|
||||
<RadioGroup.Item {...attrs} value="dark" class="sr-only" />
|
||||
<div
|
||||
class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
|
|
@ -78,83 +133,22 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
<span class="block w-full p-2 text-center font-normal"> System </span>
|
||||
</Label>
|
||||
</Form.Control>
|
||||
<Form.Control let:attrs>
|
||||
<Label class="[&:has([data-state=checked])>div]:border-primary">
|
||||
<RadioGroup.Item {...attrs} value="light" class="sr-only" />
|
||||
<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
|
||||
<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
|
||||
<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
|
||||
<div class="h-2 w-4 rounded-lg bg-[#ecedef]" />
|
||||
<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
|
||||
<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
|
||||
<div class="h-2 w-full rounded-lg bg-[#ecedef]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="block w-full p-2 text-center font-normal"> Light </span>
|
||||
</Label>
|
||||
</Form.Control>
|
||||
<Form.Control let:attrs>
|
||||
<Label class="[&:has([data-state=checked])>div]:border-primary">
|
||||
<RadioGroup.Item {...attrs} value="dark" class="sr-only" />
|
||||
<div
|
||||
class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<div class="space-y-2 rounded-sm bg-slate-950 p-2">
|
||||
<div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
||||
<div class="h-2 w-4 rounded-lg bg-slate-400" />
|
||||
<div class="h-2 w-full rounded-lg bg-slate-400" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-slate-400" />
|
||||
<div class="h-2 w-full rounded-lg bg-slate-400" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-slate-400" />
|
||||
<div class="h-2 w-full rounded-lg bg-slate-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="block w-full p-2 text-center font-normal"> Dark </span>
|
||||
</Label>
|
||||
</Form.Control>
|
||||
<RadioGroup.Input name="theme" />
|
||||
</RadioGroup.Root>
|
||||
</Form.Fieldset>
|
||||
<Form.Button>Update preferences</Form.Button>
|
||||
</form>
|
||||
<span class="block w-full p-2 text-center font-normal"> Dark </span>
|
||||
</Label>
|
||||
</Form.Control>
|
||||
<RadioGroup.Input name="appearanceMode" />
|
||||
</RadioGroup.Root>
|
||||
</Form.Fieldset>
|
||||
<Form.Button disabled={isLoading}>
|
||||
{#if isLoading}
|
||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||
{/if}
|
||||
Update appearance
|
||||
</Form.Button>
|
||||
</form>
|
||||
|
||||
{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
|
||||
<SuperDebug data={$formData} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.div1,
|
||||
.div2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
clip-path: polygon(0 0, 100% 0, 0 100%);
|
||||
}
|
||||
</style>
|
||||
{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
|
||||
<SuperDebug data={$formData} />
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue