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';
@@ -14,10 +16,10 @@
 			module: flashModule,
 			onError: ({ result, message }) => {
 				// Error handling for the flash message:
-      // - result is the ActionResult
-      // - message is the flash store (not the status message store)
-      const errorMessage = result.error.message
-      message.set({ type: 'error', message: errorMessage });
+				// - result is the ActionResult
+				// - message is the flash store (not the status message store)
+				const errorMessage = result.error.message
+				message.set({ type: 'error', message: errorMessage });
 			}
 		},
 		syncFlashMessage: false,
@@ -25,10 +27,33 @@
 		validationMethod: 'oninput',
 		delayMs: 0,
 	});
-	console.log($errors);
+
+	const flash = flashModule.getFlash(page);
+
+	$: {
+		if ($flash) {
+			toast.error($flash.message, {
+				duration: 5000
+			});
+		}
+	}
 </script>
 
-<div>
+<div class="signin">
+	<form method="POST" use:enhance>
+		<div class="grid w-full max-w-sm items-center gap-2">
+			<h2
+				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+			>
+				Sign into your account
+			</h2>
+			<Label for="username">Username</Label>
+			<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
+			<Label for="password">Password</Label>
+			<Input type="password" id="password" name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
+			<Button type="submit">Sign In</Button>
+		</div>
+	</form>
 	{#if $errors._errors}
 		<Alert variant="destructive">
 			<AlertCircle class="h-4 w-4" />
@@ -38,18 +63,11 @@
 			</AlertDescription>
 		</Alert>
 	{/if}
-	<form method="POST" use:enhance>
-		<div class="grid w-full max-w-sm items-center gap-2">
-				<h2
-					class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-				>
-					Sign into your account
-				</h2>
-				<Label for="username">Username</Label>
-				<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
-				<Label for="password">Password</Label>
-				<Input type="password" id="password" name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
-				<Button type="submit">Sign In</Button>
-		</div>
-	</form>
-</div>
+</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>