Adding disclaimer to signup without email and using a specific schema defined in zod-schema.

src/lib/config/zod-schemas.ts

@@ -44,6 +44,31 @@ export const userSchema = z.object({
 	updatedAt: z.date().optional()
 });
 
+export const signUpSchema = userSchema
+	.pick({
+		firstName: true,
+		lastName: true,
+		email: true,
+		username: true,
+		password: true,
+		confirm_password: true,
+		terms: true
+	})
+	.superRefine(({ confirm_password, password }, ctx) => {
+		if (confirm_password !== password) {
+			// ctx.addIssue({
+			// 	code: 'custom',
+			// 	message: 'Password and Confirm Password must match',
+			// 	path: ['password']
+			// });
+			ctx.addIssue({
+				code: 'custom',
+				message: ' Password and Confirm Password must match',
+				path: ['confirm_password']
+			});
+		}
+	});
+
 export const updateUserPasswordSchema = userSchema
 	.pick({ password: true, confirm_password: true })
 	.superRefine(({ confirm_password, password }, ctx) => {

src/routes/auth/signin/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import { superForm } from 'sveltekit-superforms/client';
 	import * as flashModule from 'sveltekit-flash-message/client';
+	import toast from 'svelte-french-toast';
 	import { AlertCircle } from "lucide-svelte";
 	import { userSchema } from '$lib/config/zod-schemas.js';
 	import Label from '$components/ui/label/Label.svelte';
@@ -25,19 +27,19 @@
 		validationMethod: 'oninput',
 		delayMs: 0,
 	});
-	console.log($errors);
+
+	const flash = flashModule.getFlash(page);
+
+	$: {
+		if ($flash) {
+			toast.error($flash.message, {
+				duration: 5000
+			});
+		}
+	}
 </script>
 
-<div>
-	{#if $errors._errors}
-		<Alert variant="destructive">
-			<AlertCircle class="h-4 w-4" />
-			<AlertTitle>Error</AlertTitle>
-			<AlertDescription>
-				{$errors._errors}
-			</AlertDescription>
-		</Alert>
-	{/if}
+<div class="signin">
 	<form method="POST" use:enhance>
 		<div class="grid w-full max-w-sm items-center gap-2">
 			<h2
@@ -52,4 +54,20 @@
 			<Button type="submit">Sign In</Button>
 		</div>
 	</form>
+	{#if $errors._errors}
+		<Alert variant="destructive">
+			<AlertCircle class="h-4 w-4" />
+			<AlertTitle>Error</AlertTitle>
+			<AlertDescription>
+				{$errors._errors}
+			</AlertDescription>
+		</Alert>
+	{/if}
 </div>
+
+<style lang="postcss">
+	.signin {
+		display: grid;
+		gap: 2rem;
+	}
+</style>

src/routes/auth/signup/+page.server.ts

@@ -51,6 +51,8 @@ export const actions = {
 		const form = await superValidate<typeof signUpSchema, Message>(event, signUpSchema);
 
 		if (!form.valid) {
+			form.data.password = '';
+			form.data.confirm_password = '';
 			return fail(400, {
 				form
 			});

src/routes/auth/signup/+page.svelte

@@ -2,30 +2,24 @@
 	import { page } from '$app/stores';
 	import { superForm } from 'sveltekit-superforms/client';
 	import * as flashModule from 'sveltekit-flash-message/client';
+	import toast from 'svelte-french-toast';
 	import { ChevronsUpDown } from "lucide-svelte";
 	import Button from '$components/ui/button/Button.svelte';
   import Input from '$components/ui/input/Input.svelte';
 	import Label from '$components/ui/label/Label.svelte';
-	import { userSchema } from '$lib/config/zod-schemas.js';
-	import toast from 'svelte-french-toast';
+	import { signUpSchema } from '$lib/config/zod-schemas.js';
 	import {
     Collapsible,
     CollapsibleContent,
     CollapsibleTrigger
   } from "$components/ui/collapsible";
+	import Alert from '$components/ui/alert/Alert.svelte';
+	import AlertTitle from '$components/ui/alert/AlertTitle.svelte';
+	import AlertDescription from '$components/ui/alert/AlertDescription.svelte';
 
 	export let data;
 	let isOpen = false;
 
-  const signUpSchema = userSchema.pick({
-    firstName: true,
-    lastName: true,
-    username: true,
-    email: true,
-    password: true,
-		confirm_password: true
-  });
-
   const { form, errors, constraints, enhance, delayed } = superForm(data.form, {
 		flashMessage: {
 			module: flashModule,
@@ -109,6 +103,14 @@
 				<Button type="submit">Signup</Button>
 				<Button variant="link" href="/">or Cancel</Button>
 			</div>
+			{#if !$form.email}
+				<Alert>
+					<AlertTitle>Heads up!</AlertTitle>
+					<AlertDescription>
+						Without an email address, you won't be able to reset your password. Submit only if you are sure. You can always add this later.
+					</AlertDescription>
+				</Alert>
+			{/if}
 		</div>
   </form>
 </div>