diff --git a/src/routes/(user)/settings/+page.svelte b/src/routes/(user)/settings/+page.svelte
index 243074f..7447931 100644
--- a/src/routes/(user)/settings/+page.svelte
+++ b/src/routes/(user)/settings/+page.svelte
@@ -2,8 +2,8 @@
import type { PageData } from "./$types";
import ProfileForm from "./profile-form.svelte";
import { Separator } from "$lib/components/ui/separator";
+
export let data: PageData;
- let { user, form } = data;
@@ -12,5 +12,5 @@
This is how others will see you on the site.
-
+
diff --git a/src/routes/(user)/settings/profile-form.svelte b/src/routes/(user)/settings/profile-form.svelte
index e8fcf4d..1af763d 100644
--- a/src/routes/(user)/settings/profile-form.svelte
+++ b/src/routes/(user)/settings/profile-form.svelte
@@ -1,7 +1,7 @@
@@ -16,12 +16,26 @@
import { browser, dev } from '$app/environment';
import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
import type { LayoutData } from '../$types';
+ import { toast } from 'svelte-sonner';
export let user: LayoutData['user'];
export let data: SuperValidated>;
+ let isLoading = false;
const form = superForm(data, {
- validators: zodClient(profileFormSchema)
+ validators: zodClient(profileFormSchema),
+ onSubmit: () => {
+ isLoading = true;
+ toast.success('Updating your name...');
+ },
+ onUpdated: ({ form: f }) => {
+ isLoading = false;
+ if (f.valid) {
+ toast.success('Your name has been updated.');
+ } else {
+ toast.error('Please fix the errors in the form.');
+ }
+ }
});
const { form: formData, enhance } = form;
@@ -45,7 +59,7 @@
- Update name
+ Update name
{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}