Adding Collapsible component and using for optional fields on signup.

src/lib/components/ui/collapsible/index.ts

@@ -0,0 +1,7 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-svelte";
+
+export const Collapsible = CollapsiblePrimitive.Root;
+
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+export const CollapsibleContent = CollapsiblePrimitive.Content;

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

@@ -102,7 +102,7 @@ export const actions = {
 			// const message = { type: 'success', message: 'Signed Up!' } as const;
 			// throw flashRedirect(message, event);
 		} catch (e) {
-			if (e instanceof LuciaError && e.message === `DUPLICATE_KEY_ID`) {
+			if (e instanceof LuciaError && e.message.toUpperCase() === `DUPLICATE_KEY_ID`) {
 				// key already exists
 				console.error('Lucia Error: ', e);
 			}
@@ -111,8 +111,9 @@ export const actions = {
 				type: 'error',
 				message: 'Unable to create your account. Please try again.'
 			};
+			form.data.password = '';
+			form.data.confirm_password = '';
 			throw error(500, message);
-			// return setError(form, '', message);
 		}
 	}
 };

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

@@ -2,13 +2,20 @@
 	import { page } from '$app/stores';
 	import { superForm } from 'sveltekit-superforms/client';
 	import * as flashModule from 'sveltekit-flash-message/client';
+	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 {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger
+  } from "$components/ui/collapsible";
 
 	export let data;
+	let isOpen = false;
 
   const signUpSchema = userSchema.pick({
     firstName: true,
@@ -25,7 +32,7 @@
 			onError: ({ result, message }) => {
 				const errorMessage = result.error.message;
 				message.set({ type: 'error', message: errorMessage });
-			}
+			},
 		},
     taintedMessage: null,
     validators: signUpSchema,
@@ -41,14 +48,8 @@
 			});
 		}
 	}
-
 </script>
 
-<!-- {#if $flash}
-  {@const bg = $flash.type == 'success' ? '#3D9970' : '#FF4136'}
-  <div style:background-color={bg} class="flash">{$flash.message}</div>
-{/if} -->
-
 <div class="page">
 	<form method="POST" action="/auth/signup" use:enhance>
 		<div class="grid w-full max-w-sm items-center gap-2.5">
@@ -57,36 +58,53 @@
 			>
 				Signup for an account
 			</h2>
-			<Label for="firstName">First Name</Label>
+			<Label for="username">Username <small class="text-destructive">(Required)</small></Label>
-			<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
-			{#if $errors.firstName}
-				<p class="text-sm text-destructive">{$errors.firstName}</p>
-			{/if}
-			<Label for="firstName">Last Name</Label>
-			<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
-			{#if $errors.lastName}
-				<p class="text-sm text-destructive">{$errors.lastName}</p>
-			{/if}
-			<Label for="email">Email</Label>
-			<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
-			{#if $errors.email}
-				<p class="text-sm text-destructive">{$errors.email}</p>
-			{/if}
-			<Label for="username">Username</Label>
 			<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
 			{#if $errors.username}
 				<p class="text-sm text-destructive">{$errors.username}</p>
 			{/if}
-			<Label for="password">Password</Label>
+			<Label for="password">Password <small class="text-destructive">(Required)</small></Label>
 			<Input type="password" id="password" class={$errors.password && "outline outline-destructive"} name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
 			{#if $errors.password}
 				<p class="text-sm text-destructive">{$errors.password}</p>
 			{/if}
-			<Label for="confirm_password">Confirm Password</Label>
+			<Label for="confirm_password">Confirm Password <small class="text-destructive">(Required)</small></Label>
 			<Input type="password" id="confirm_password" class={$errors.confirm_password && "outline outline-destructive"} name="confirm_password" placeholder="Confirm Password" autocomplete="new-password" data-invalid={$errors.confirm_password} bind:value={$form.confirm_password} />
 			{#if $errors.confirm_password}
 				<p class="text-sm text-destructive">{$errors.confirm_password}</p>
 			{/if}
+			<Collapsible open={isOpen} class="grid w-full max-w-sm items-center gap-2.5">
+				<div>
+					Optional Fields:
+					<CollapsibleTrigger>
+						<Button variant="ghost" size="sm" type="button" class="w-9 p-0">
+							<ChevronsUpDown class="h-4 w-4" />
+							<span class="sr-only">Toggle</span>
+						</Button>
+					</CollapsibleTrigger>
+				</div>
+				<CollapsibleContent>
+					<Label for="email">Email</Label>
+					<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
+					{#if $errors.email}
+						<p class="text-sm text-destructive">{$errors.email}</p>
+					{/if}
+				</CollapsibleContent>
+				<CollapsibleContent>
+					<Label for="firstName">First Name</Label>
+					<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
+					{#if $errors.firstName}
+						<p class="text-sm text-destructive">{$errors.firstName}</p>
+					{/if}
+				</CollapsibleContent>
+				<CollapsibleContent>
+					<Label for="firstName">Last Name</Label>
+					<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
+					{#if $errors.lastName}
+						<p class="text-sm text-destructive">{$errors.lastName}</p>
+					{/if}
+				</CollapsibleContent>
+			</Collapsible>
 			<div class="grid grid-cols-2">
 				<Button type="submit">Signup</Button>
 				<Button variant="link" href="/">or Cancel</Button>