From d97c7900572f54f0bacb828cbfb07cca8e1256af Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Thu, 9 Nov 2023 03:42:54 +0800
Subject: [PATCH] added demo login page

---
 src/lib/components/ui/input/index.ts          | 25 +++++++
 src/lib/components/ui/input/input.svelte      | 33 +++++++++
 src/lib/components/ui/label/index.ts          |  7 ++
 src/lib/components/ui/label/label.svelte      | 21 ++++++
 src/routes/(app)/+layout.svelte               |  6 ++
 src/routes/{ => (app)}/+page.svelte           |  0
 .../login/(components)/user-auth-form.svelte  | 61 ++++++++++++++++
 src/routes/(auth)/login/+page.svelte          | 73 +++++++++++++++++++
 src/routes/(auth)/login/+page.ts              |  7 ++
 src/routes/+layout.svelte                     |  2 -
 10 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/ui/input/index.ts
 create mode 100644 src/lib/components/ui/input/input.svelte
 create mode 100644 src/lib/components/ui/label/index.ts
 create mode 100644 src/lib/components/ui/label/label.svelte
 create mode 100644 src/routes/(app)/+layout.svelte
 rename src/routes/{ => (app)}/+page.svelte (100%)
 create mode 100644 src/routes/(auth)/login/(components)/user-auth-form.svelte
 create mode 100644 src/routes/(auth)/login/+page.svelte
 create mode 100644 src/routes/(auth)/login/+page.ts

diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..914dce5
--- /dev/null
+++ b/src/lib/components/ui/input/index.ts
@@ -0,0 +1,25 @@
+import Root from "./input.svelte";
+
+type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..a10ad75
--- /dev/null
+++ b/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+	import type { InputEvents } from ".";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<input
+	class={cn(
+		"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000..2c3128c
--- /dev/null
+++ b/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label
+};
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..264c8fd
--- /dev/null
+++ b/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = LabelPrimitive.Props;
+	type $$Events = LabelPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...$$restProps}
+	on:mousedown
+>
+	<slot />
+</LabelPrimitive.Root>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
new file mode 100644
index 0000000..b1e32a8
--- /dev/null
+++ b/src/routes/(app)/+layout.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import ThemeToggle from '$lib/components/theme-toggle.svelte';
+</script>
+
+<ThemeToggle />
+<slot />
diff --git a/src/routes/+page.svelte b/src/routes/(app)/+page.svelte
similarity index 100%
rename from src/routes/+page.svelte
rename to src/routes/(app)/+page.svelte
diff --git a/src/routes/(auth)/login/(components)/user-auth-form.svelte b/src/routes/(auth)/login/(components)/user-auth-form.svelte
new file mode 100644
index 0000000..ed13b9c
--- /dev/null
+++ b/src/routes/(auth)/login/(components)/user-auth-form.svelte
@@ -0,0 +1,61 @@
+<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 { Github, 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() {
+		isLoading = true;
+
+		setTimeout(() => {
+			isLoading = false;
+		}, 3000);
+	}
+</script>
+
+<div class={cn('grid gap-6', className)} {...$$restProps}>
+	<form on:submit|preventDefault={onSubmit}>
+		<div class="grid gap-2">
+			<div class="grid gap-1">
+				<Label class="sr-only" for="email">Email</Label>
+				<Input
+					id="email"
+					placeholder="name@example.com"
+					type="email"
+					autocapitalize="none"
+					autocomplete="email"
+					autocorrect="off"
+					disabled={isLoading}
+				/>
+			</div>
+			<Button disabled={isLoading}>
+				{#if isLoading}
+					<LoaderIcon />
+				{/if}
+				Sign In with Email
+			</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>
diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte
new file mode 100644
index 0000000..fad0292
--- /dev/null
+++ b/src/routes/(auth)/login/+page.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import UserAuthForm from './(components)/user-auth-form.svelte';
+</script>
+
+<div class="md:hidden">
+	<img
+		src="/examples/authentication-light.png"
+		width={1280}
+		height={843}
+		alt="Authentication"
+		class="block dark:hidden"
+	/>
+	<img
+		src="/examples/authentication-dark.png"
+		width={1280}
+		height={843}
+		alt="Authentication"
+		class="hidden dark:block"
+	/>
+</div>
+<div
+	class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"
+>
+	<Button
+		href="/examples/authentication"
+		variant="ghost"
+		class="absolute right-4 top-4 md:right-8 md:top-8"
+	>
+		Login
+	</Button>
+	<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">
+			<!-- <Command class="mr-2 h-6 w-6" /> -->
+			Acme Inc
+		</div>
+		<div class="relative z-20 mt-auto">
+			<blockquote class="space-y-2">
+				<p class="text-lg">
+					&ldquo;This library has saved me countless hours of work and helped me deliver stunning
+					designs to my clients faster than ever before. Highly recommended!&rdquo;
+				</p>
+				<footer class="text-sm">Sofia Davis</footer>
+			</blockquote>
+		</div>
+	</div>
+	<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">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">
+				By clicking continue, you agree to our{' '}
+				<a href="/terms" class="underline underline-offset-4 hover:text-primary">
+					Terms of Service
+				</a>{' '}
+				and{' '}
+				<a href="/privacy" class="underline underline-offset-4 hover:text-primary">
+					Privacy Policy
+				</a>
+				.
+			</p>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/(auth)/login/+page.ts b/src/routes/(auth)/login/+page.ts
new file mode 100644
index 0000000..4dee893
--- /dev/null
+++ b/src/routes/(auth)/login/+page.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	return {
+		title: 'Authentication Example'
+	};
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 240d26f..184abfa 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,7 @@
 <script>
 	import '../app.postcss';
 	import { ModeWatcher } from 'mode-watcher';
-	import ThemeToggle from '$lib/components/theme-toggle.svelte';
 </script>
 
 <ModeWatcher />
-<ThemeToggle />
 <slot />