Creating two schemas and forms for profile update.

src/lib/validations/account.ts

@@ -4,10 +4,13 @@ import { userSchema } from './zod-schemas';
 export const profileSchema = userSchema.pick({
 	firstName: true,
 	lastName: true,
-	email: true,
 	username: true
 });
 
+export const changeEmailSchema = userSchema.pick({
+	email: true,
+});
+
 export const changeUserPasswordSchema = z
 	.object({
 		current_password: z.string({ required_error: 'Current Password is required' }),

src/routes/(app)/(protected)/profile/+page.server.ts

@@ -3,21 +3,12 @@ import { eq } from 'drizzle-orm';
 import { zod } from 'sveltekit-superforms/adapters';
 import { message, setError, superValidate } from 'sveltekit-superforms/server';
 import { redirect } from 'sveltekit-flash-message/server';
-import { userSchema } from '$lib/validations/zod-schemas';
+import { changeEmailSchema, profileSchema } from '$lib/validations/account';
 import type { PageServerLoad } from './$types';
 import { users } from '../../../../schema';
 import db from '$lib/drizzle';
 
-const profileSchema = userSchema.pick({
-	firstName: true,
-	lastName: true,
-	email: true,
-	username: true
-});
-
 export const load: PageServerLoad = async (event) => {
-	const form = await superValidate(event, zod(profileSchema));
-
 	if (!event.locals.user) {
 		const message = { type: 'error', message: 'You are not signed in' } as const;
 		throw redirect(302, '/login', message, event);
@@ -25,14 +16,22 @@ export const load: PageServerLoad = async (event) => {
 
 	const { user } = event.locals;
 
-	form.data = {
-		firstName: user.firstName,
-		lastName: user.lastName,
-		email: user.email,
-		username: user.username
-	};
+	const profileForm = await superValidate(zod(profileSchema), {
+		defaults: {
+			firstName: user.firstName,
+			lastName: user.lastName,
+			username: user.username
+		}
+	});
+	const emailForm = await superValidate(zod(changeEmailSchema), {
+		defaults: {
+			email: user.email
+		}
+	});
+
 	return {
-		form
+		profileForm,
+		emailForm,
 	};
 };
 

src/routes/(app)/(protected)/profile/+page.svelte

@@ -2,7 +2,7 @@
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { superForm } from 'sveltekit-superforms/client';
 	import { AlertTriangle, KeyRound } from 'lucide-svelte';
-	import { profileSchema } from '$lib/validations/account';
+	import { changeEmailSchema, profileSchema } from '$lib/validations/account';
 	import * as Alert from "$lib/components/ui/alert";
 	import { Label } from '$lib/components/ui/label';
 	import { Input } from '$components/ui/input';
@@ -10,14 +10,20 @@
 
 	export let data;
 
-	const { form, errors, enhance, message } = superForm(data.form, {
+	const { form: profileForm, errors: profileErrors, enhance: profileEnhance } = superForm(data.profileForm, {
 		taintedMessage: null,
 		validators: zodClient(profileSchema),
 		delayMs: 0
 	});
+
+	const { form: emailForm, errors: emailErrors, enhance: emailEnhance } = superForm(data.emailForm, {
+		taintedMessage: null,
+		validators: zodClient(changeEmailSchema),
+		delayMs: 0
+	})
 </script>
 
-<form method="POST" use:enhance>
+<form method="POST" use:profileEnhance>
 	<!--<SuperDebug data={$form} />-->
 	<h3>Your Profile</h3>
 	<hr class="!border-t-2 mt-2 mb-6" />
@@ -31,32 +37,50 @@
 	{/if}
 	<div class="mt-6">
 		<Label for="username">Username</Label>
-		<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
-		{#if $errors.username}
-			<small>{$errors.username}</small>
+		<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$profileErrors.username} bind:value={$profileForm.username} />
+		{#if $profileErrors.username}
+			<small>{$profileErrors.username}</small>
 		{/if}
 	</div>
 	<div class="mt-6">
 		<Label for="firstName">First Name</Label>
-		<Input type="text" id="firstName" name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
-		{#if $errors.firstName}
-			<small>{$errors.firstName}</small>
+		<Input type="text" id="firstName" name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$profileErrors.firstName} bind:value={$profileForm.firstName} />
+		{#if $profileErrors.firstName}
+			<small>{$profileErrors.firstName}</small>
 		{/if}
 	</div>
 	<div class="mt-6">
 		<Label for="lastName">Last Name</Label>
-		<Input type="text" id="lastName" name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
-		{#if $errors.lastName}
-			<small>{$errors.lastName}</small>
+		<Input type="text" id="lastName" name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$profileErrors.lastName} bind:value={$profileForm.lastName} />
+		{#if $profileErrors.lastName}
+			<small>{$profileErrors.lastName}</small>
 		{/if}
 	</div>
 	<div class="grid gap-2 mt-6">
 		<Label for="email">Email address</Label>
-		<Input type="email" id="email" name="email" placeholder="Email Address" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
-		{#if $errors.email}
-			<small>{$errors.email}</small>
+		<Input
+			type="email"
+			id="email"
+			name="email"
+			placeholder="Email Address"
+			autocorrect="off"
+			autocomplete="email"
+			data-invalid={$profileErrors.email}
+			bind:value={$profileForm.email}
+		/>
+		<!-- <Input
+			type="email"
+			autocapitalize="none"
+			autocorrect="off"
+			autocomplete="username"
+			bind:value={$profileFormData.email}
+			{...attrs}
+			{...constraints}
+		/> -->
+		{#if $profileErrors.email}
+			<small>{$profileErrors.email}</small>
 		{/if}
-		{#if !$form.email}
+		{#if !$profileForm.email}
 			<Alert.Root variant="destructive">
 				<AlertTriangle class="h-4 w-4" />
 				<Alert.Title>Heads up!</Alert.Title>