From 2cd9d5d539e64e7497edf4b0beeeac64a5752c4a Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 12 Nov 2023 01:41:07 +0800
Subject: [PATCH] update auth page

---
 .../login/(components)/user-auth-form.svelte  | 19 +++++++----
 src/routes/(auth)/login/+page.svelte          | 33 ++++++++++++-------
 .../signup/(components)/user-auth-form.svelte | 20 ++++++++---
 src/routes/(auth)/signup/+page.svelte         | 29 ++++++++++------
 4 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/src/routes/(auth)/login/(components)/user-auth-form.svelte b/src/routes/(auth)/login/(components)/user-auth-form.svelte
index b511e4e..51e333d 100644
--- a/src/routes/(auth)/login/(components)/user-auth-form.svelte
+++ b/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 { LoaderIcon } from 'lucide-svelte';
+	import { Loader2, LoaderIcon } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 
 	let className: string | undefined | null = undefined;
@@ -20,8 +20,8 @@
 
 <div class={cn('grid gap-6', className)} {...$$restProps}>
 	<form on:submit|preventDefault={onSubmit}>
-		<div class="grid gap-2">
-			<div class="grid gap-4">
+		<div class="grid gap-4">
+			<div class="grid gap-1">
 				<Label for="email">Email</Label>
 				<Input
 					id="email"
@@ -35,13 +35,18 @@
 			</div>
 			<div class="grid gap-1">
 				<Label for="password">Password</Label>
-				<Input id="password" placeholder="••••••••" type="password" disabled={isLoading} />
+				<Input
+					id="password"
+					placeholder="••••••••"
+					type="password"
+					disabled={isLoading}
+				/>
 			</div>
-			<Button disabled={isLoading}>
+			<Button disabled={isLoading} type="submit" class="flex gap-2">
 				{#if isLoading}
-					<LoaderIcon />
+					<Loader2 class="animate-spin" />
 				{/if}
-				Sign In with Email
+				Sign In
 			</Button>
 		</div>
 	</form>
diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte
index eecac88..38333bd 100644
--- a/src/routes/(auth)/login/+page.svelte
+++ b/src/routes/(auth)/login/+page.svelte
@@ -9,25 +9,36 @@
 	<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="relative hidden h-full flex-col bg-primary-foreground 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>
+			class="relative z-20 text-primary 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="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>
+				<h1 class="text-2xl font-semibold tracking-tight">
+					Login to your account
+				</h1>
+				<p class="text-sm text-muted-foreground">
+					Enter your email below to login to your account
+				</p>
 			</div>
 			<UserAuthForm />
 			<p class="px-8 text-center text-sm text-muted-foreground">
 				Don't Have An Account? Signup{' '}
-				<a href="/signup" class="underline underline-offset-4 hover:text-primary"> Here </a>{' '}
+				<a
+					href="/signup"
+					class="underline underline-offset-4 hover:text-primary"
+				>
+					Here
+				</a>{' '}
 			</p>
 		</div>
 	</div>
diff --git a/src/routes/(auth)/signup/(components)/user-auth-form.svelte b/src/routes/(auth)/signup/(components)/user-auth-form.svelte
index 55b14f4..d447b8a 100644
--- a/src/routes/(auth)/signup/(components)/user-auth-form.svelte
+++ b/src/routes/(auth)/signup/(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 { LoaderIcon } from 'lucide-svelte';
+	import { Loader2 } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 
 	let className: string | undefined | null = undefined;
@@ -35,17 +35,27 @@
 			</div>
 			<div class="grid gap-1">
 				<Label for="password">Password</Label>
-				<Input id="password" placeholder="••••••••" type="password" disabled={isLoading} />
+				<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} />
+				<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" />
+					<Loader2 class="animate-spin" />
 				{/if}
-				Sign Up with Email
+				Sign Up
 			</Button>
 		</div>
 	</form>
diff --git a/src/routes/(auth)/signup/+page.svelte b/src/routes/(auth)/signup/+page.svelte
index a33b92a..6dd0ed4 100644
--- a/src/routes/(auth)/signup/+page.svelte
+++ b/src/routes/(auth)/signup/+page.svelte
@@ -9,25 +9,34 @@
 	<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="hidden relative h-full flex-col bg-primary-foreground 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>
+			class="relative z-20 text-primary 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="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>
+				<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>{' '}
+				<a
+					href="/login"
+					class="underline underline-offset-4 hover:text-primary"
+				>
+					Here
+				</a>{' '}
 			</p>
 		</div>
 	</div>