From 8b51e6816edfea1320537ec80d3416af7443705f Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 30 Jan 2024 01:50:59 +0100
Subject: [PATCH] feat: shadcnify the login page

---
 .../src/lib/components/site/icons/index.ts    |   4 +-
 .../ui/alert/alert-description.svelte         |  13 ++
 .../components/ui/alert/alert-title.svelte    |  21 +++
 .../src/lib/components/ui/alert/alert.svelte  |  17 +++
 apps/web/src/lib/components/ui/alert/index.ts |  32 +++++
 apps/web/src/routes/(auth)/login/+page.svelte | 127 ++++++++++--------
 apps/web/src/routes/+layout.svelte            |   2 +-
 7 files changed, 161 insertions(+), 55 deletions(-)
 create mode 100644 apps/web/src/lib/components/ui/alert/alert-description.svelte
 create mode 100644 apps/web/src/lib/components/ui/alert/alert-title.svelte
 create mode 100644 apps/web/src/lib/components/ui/alert/alert.svelte
 create mode 100644 apps/web/src/lib/components/ui/alert/index.ts

diff --git a/apps/web/src/lib/components/site/icons/index.ts b/apps/web/src/lib/components/site/icons/index.ts
index 7a0a45b..c1d5f31 100644
--- a/apps/web/src/lib/components/site/icons/index.ts
+++ b/apps/web/src/lib/components/site/icons/index.ts
@@ -1,4 +1,5 @@
 import type { Icon as LucideIcon } from 'lucide-svelte';
+import { Loader2 } from 'lucide-svelte';
 import { GithubLogo, VercelLogo, LinkedinLogo } from 'radix-icons-svelte';
 import Logo from './logo.svelte';
 import Svelte from './svelte.svelte';
@@ -10,5 +11,6 @@ export const Icons = {
 	gitHub: GithubLogo,
 	svelte: Svelte,
 	vercel: VercelLogo,
-	linkedIn: LinkedinLogo
+	linkedIn: LinkedinLogo,
+	spinner: Loader2
 };
diff --git a/apps/web/src/lib/components/ui/alert/alert-description.svelte b/apps/web/src/lib/components/ui/alert/alert-description.svelte
new file mode 100644
index 0000000..42a9133
--- /dev/null
+++ b/apps/web/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/apps/web/src/lib/components/ui/alert/alert-title.svelte b/apps/web/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 0000000..72d0138
--- /dev/null
+++ b/apps/web/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from ".";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/apps/web/src/lib/components/ui/alert/alert.svelte b/apps/web/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 0000000..8c6790f
--- /dev/null
+++ b/apps/web/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { alertVariants, type Variant } from ".";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+	<slot />
+</div>
diff --git a/apps/web/src/lib/components/ui/alert/index.ts b/apps/web/src/lib/components/ui/alert/index.ts
new file mode 100644
index 0000000..2ece0cd
--- /dev/null
+++ b/apps/web/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,32 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+
+export const alertVariants = tv({
+	base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+	variants: {
+		variant: {
+			default: "bg-background text-foreground",
+			destructive:
+				"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
+
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle
+};
diff --git a/apps/web/src/routes/(auth)/login/+page.svelte b/apps/web/src/routes/(auth)/login/+page.svelte
index b29edd2..999796a 100644
--- a/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/web/src/routes/(auth)/login/+page.svelte
@@ -1,59 +1,80 @@
-<script>
+<script lang="ts">
+	import { Icons } from '$lib/components/site/icons';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import * as Alert from "$lib/components/ui/alert";
+	import { cn } from '$lib/utils';
+
 	export let form;
+	let isLoading = false;
 </script>
 
-<div class="flex flex-col items-center h-full w-full">
-	<h2 class="mt-2 text-center text-3xl font-bold tracking-tight text-base-content">
-		Login to your account
-	</h2>
-	<p class="text-center mt-1">
-		Or <a href="/register" class="text-primary font-medium hover:cursor-pointer hover:underline"
-			>register</a
-		> if you don't already have an account.
-	</p>
-	<form action="?/login" method="POST" class="flex flex-col items-center space-y-2 w-full pt-4">
-		<div class="form-control w-full max-w-md">
-			<label for="email" class="label font-medium pb-1">
-				<span class="label-text">Email</span>
-			</label>
-			<input type="email" name="email" class="input input-bordered w-full max-w-md" />
+<div class="lg: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">Log into your account</h1>
+			<p class="text-muted-foreground text-sm">
+				Enter your email and password below to log into your account
+			</p>
 		</div>
-		<div class="form-control w-full max-w-md">
-			<label for="password" class="label font-medium pb-1">
-				<span class="label-text">Password</span>
-			</label>
-			<input type="password" name="password" class="input input-bordered w-full max-w-md" />
-		</div>
-		<div class="w-full max-w-md">
-			<a
-				href="/reset-password"
-				class="font-medium text-primary hover:cursor-pointer hover:underline"
-			>
-				Forgot Password?</a
-			>
-		</div>
-
-		<div class="w-full max-w-md pt-2">
-			<button type="submit" class="btn btn-primary w-full">Login</button>
-		</div>
-		{#if form?.notVerified}
-			<div class="alert alert-error shadow-lg w-full max-w-md">
-				<div>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="stroke-current flex-shrink-0 h-6 w-6"
-						fill="none"
-						viewBox="0 0 24 24"
-						><path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-						/></svg
-					>
-					<span>You must verify your email before you can login.</span>
+		<div class={cn('grid gap-6')} {...$$restProps}>
+			<form action="?/login" method="POST">
+				<div class="grid gap-2">
+					<div class="grid gap-1">
+						<Label class="sr-only" for="email">Email</Label>
+						<Input
+							id="email"
+							name="email"
+							placeholder="name@example.com"
+							type="email"
+							autocapitalize="none"
+							autocomplete="email"
+							autocorrect="off"
+							disabled={isLoading}
+						/>
+					</div>
+					<div class="grid gap-1">
+						<Label class="sr-only" for="password">Password</Label>
+						<Input id="password" name="password" type="password" disabled={isLoading} />
+					</div>
+					<Button type="submit" disabled={isLoading}>
+						{#if isLoading}
+							<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+						{/if}
+						Sign In
+					</Button>
+				</div>
+				{#if form?.notVerified}
+					<Alert.Root>
+						<Alert.Title></Alert.Title>
+						<Alert.Description>
+							You must verify your email before you can login.
+						</Alert.Description>
+					</Alert.Root>
+				{/if}
+			</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 text-muted-foreground px-2"> Or continue with </span>
 				</div>
 			</div>
-		{/if}
-	</form>
-</div>
\ No newline at end of file
+			<Button variant="outline" type="button" disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{:else}
+					<Icons.gitHub class="mr-2 h-4 w-4" />
+				{/if}
+				{' '}
+				GitHub
+			</Button>
+		</div>
+		<p class="text-muted-foreground px-8 text-center text-sm">
+			Don't have an account? <a class="text-primary underline" href="/register">Sign up.</a> <br />
+			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
+		</p>
+	</div>
+</div>
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 30ac010..285f941 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -12,7 +12,7 @@
 
 <div class="relative flex min-h-screen flex-col" id="page">
 	<SiteNavBar />
-	<main class="container relative mb-4 max-w-[980px] flex-1">
+	<main class="container relative mb-4 max-w-[980px] flex-1 mt-12">
 		<!-- {#key data.url} -->
 			<div in:fade={{ duration: 200, delay: 100 }} out:fade={{ duration: 100 }}>
 				<slot />