update auth form

src/routes/(app)/+page.ts

@@ -2,6 +2,8 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
 	return {
-		title: 'Authentication Example'
+		title: 'Authentication Example',
+		data: 'hello',
+		test: 'yo',
 	};
 };

src/routes/(auth)/login/(components)/user-auth-form.svelte

@@ -2,7 +2,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
-	import { Github, LoaderIcon } from 'lucide-svelte';
+	import { LoaderIcon } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 
 	let className: string | undefined | null = undefined;
@@ -21,8 +21,8 @@
 <div class={cn('grid gap-6', className)} {...$$restProps}>
 	<form on:submit|preventDefault={onSubmit}>
 		<div class="grid gap-2">
-			<div class="grid gap-1">
+			<div class="grid gap-4">
-				<Label class="sr-only" for="email">Email</Label>
+				<Label for="email">Email</Label>
 				<Input
 					id="email"
 					placeholder="name@example.com"
@@ -33,6 +33,10 @@
 					disabled={isLoading}
 				/>
 			</div>
+			<div class="grid gap-1">
+				<Label for="password">Password</Label>
+				<Input id="password" placeholder="••••••••" type="password" disabled={isLoading} />
+			</div>
 			<Button disabled={isLoading}>
 				{#if isLoading}
 					<LoaderIcon />
@@ -41,21 +45,4 @@
 			</Button>
 		</div>
 	</form>
-	<div class="relative">
-		<div class="absolute inset-0 flex items-center">
-			<span class="w-full border-t" />
-		</div>
-		<div class="relative flex justify-center text-xs uppercase">
-			<span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
-		</div>
-	</div>
-	<Button variant="outline" type="button" disabled={isLoading}>
-		{#if isLoading}
-			<LoaderIcon />
-		{:else}
-			<Github />
-		{/if}
-		{' '}
-		Github
-	</Button>
 </div>

src/routes/(auth)/login/+page.svelte

@@ -26,15 +26,8 @@
 			</div>
 			<UserAuthForm />
 			<p class="px-8 text-center text-sm text-muted-foreground">
-				By clicking continue, you agree to our{' '}
+				Don't Have An Account? Signup{' '}
-				<a href="/terms" class="underline underline-offset-4 hover:text-primary">
+				<a href="/signup" class="underline underline-offset-4 hover:text-primary"> Here </a>{' '}
-					Terms of Service
-				</a>{' '}
-				and{' '}
-				<a href="/privacy" class="underline underline-offset-4 hover:text-primary">
-					Privacy Policy
-				</a>
-				.
 			</p>
 		</div>
 	</div>

src/routes/(auth)/signup/(components)/user-auth-form.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { LoaderIcon } from 'lucide-svelte';
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	let isLoading = false;
+	async function onSubmit(event: SubmitEvent) {
+		isLoading = true;
+
+		setTimeout(() => {
+			isLoading = false;
+		}, 3000);
+	}
+</script>
+
+<div class={cn('grid gap-6', className)} {...$$restProps}>
+	<form on:submit|preventDefault={onSubmit}>
+		<div class="grid gap-4">
+			<div class="grid gap-1">
+				<Label for="email">Email</Label>
+				<Input
+					id="email"
+					placeholder="name@example.com"
+					type="email"
+					autocapitalize="none"
+					autocomplete="email"
+					autocorrect="off"
+					disabled={isLoading}
+				/>
+			</div>
+			<div class="grid gap-1">
+				<Label for="password">Password</Label>
+				<Input id="password" placeholder="••••••••" type="password" disabled={isLoading} />
+			</div>
+			<div class="grid gap-1">
+				<Label for="password_confirm">Password Confirm</Label>
+				<Input id="password_confirm" placeholder="••••••••" type="password" disabled={isLoading} />
+			</div>
+			<Button disabled={isLoading} type="submit" class="flex gap-2">
+				{#if isLoading}
+					<LoaderIcon class="animate-spin" />
+				{/if}
+				Sign Up with Email
+			</Button>
+		</div>
+	</form>
+</div>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import ThemeToggle from '$lib/components/theme-toggle.svelte';
+	import UserAuthForm from './(components)/user-auth-form.svelte';
+</script>
+
+<div
+	class="container relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"
+>
+	<div class="absolute right-4 top-4 md:right-8 md:top-8">
+		<ThemeToggle />
+	</div>
+	<div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+		<div
+			class="absolute inset-0 bg-cover"
+			style="
+				background-image:
+					url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
+		/>
+		<div class="relative z-20 flex items-center text-lg font-medium">Shortener</div>
+	</div>
+	<div class="p-8">
+		<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+			<div class="flex flex-col space-y-2 text-center">
+				<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
+				<p class="text-sm text-muted-foreground">Enter your email below to create your account</p>
+			</div>
+			<UserAuthForm />
+			<p class="px-8 text-center text-sm text-muted-foreground">
+				Already Have An Account? Login{' '}
+				<a href="/login" class="underline underline-offset-4 hover:text-primary"> Here </a>{' '}
+			</p>
+		</div>
+	</div>
+</div>