From 7c408bd19c2f0e00a6cecab81223f34ab17c2712 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 6 Feb 2024 15:44:46 +0100
Subject: [PATCH] feat: tabs for login/register

---
 .../lib/components/site/nav/user-nav.svelte   |   3 +-
 apps/web/src/lib/components/ui/tabs/index.ts  |  18 +++
 .../components/ui/tabs/tabs-content.svelte    |  21 +++
 .../lib/components/ui/tabs/tabs-list.svelte   |  19 +++
 .../components/ui/tabs/tabs-trigger.svelte    |  25 ++++
 apps/web/src/routes/(auth)/auth/+page.svelte  | 137 +++++++++---------
 6 files changed, 156 insertions(+), 67 deletions(-)
 create mode 100644 apps/web/src/lib/components/ui/tabs/index.ts
 create mode 100644 apps/web/src/lib/components/ui/tabs/tabs-content.svelte
 create mode 100644 apps/web/src/lib/components/ui/tabs/tabs-list.svelte
 create mode 100644 apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte

diff --git a/apps/web/src/lib/components/site/nav/user-nav.svelte b/apps/web/src/lib/components/site/nav/user-nav.svelte
index 6cdbb85..4ebc05a 100644
--- a/apps/web/src/lib/components/site/nav/user-nav.svelte
+++ b/apps/web/src/lib/components/site/nav/user-nav.svelte
@@ -45,6 +45,5 @@
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
 {:else}
-	<Button href="/login">Login</Button>
-	<Button href="/register" variant="outline">Signup</Button>
+	<Button href="/auth">Login</Button>
 {/if}
diff --git a/apps/web/src/lib/components/ui/tabs/index.ts b/apps/web/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..f1ab372
--- /dev/null
+++ b/apps/web/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+const Root = TabsPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};
diff --git a/apps/web/src/lib/components/ui/tabs/tabs-content.svelte b/apps/web/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..3866292
--- /dev/null
+++ b/apps/web/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = TabsPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<TabsPrimitive.Content
+	class={cn(
+		"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+		className
+	)}
+	{value}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.Content>
diff --git a/apps/web/src/lib/components/ui/tabs/tabs-list.svelte b/apps/web/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..d271564
--- /dev/null
+++ b/apps/web/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = TabsPrimitive.ListProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<TabsPrimitive.List
+	class={cn(
+		"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.List>
diff --git a/apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte b/apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..3e4cc7e
--- /dev/null
+++ b/apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = TabsPrimitive.TriggerProps;
+	type $$Events = TabsPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<TabsPrimitive.Trigger
+	class={cn(
+		"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focus
+>
+	<slot />
+</TabsPrimitive.Trigger>
diff --git a/apps/web/src/routes/(auth)/auth/+page.svelte b/apps/web/src/routes/(auth)/auth/+page.svelte
index 3928e3d..3c8c33a 100644
--- a/apps/web/src/routes/(auth)/auth/+page.svelte
+++ b/apps/web/src/routes/(auth)/auth/+page.svelte
@@ -4,6 +4,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
+	import * as Tabs from '$lib/components/ui/tabs';
 	import * as Alert from '$lib/components/ui/alert';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { cn } from '$lib/utils';
@@ -42,80 +43,85 @@
 </script>
 
 <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-sm text-muted-foreground">
-				Enter your email and password below to log into your account
-			</p>
-		</div>
-		<div class={cn('grid gap-6')} {...$$restProps}>
+	<Tabs.Root
+		value="login"
+		class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
+	>
+		<Tabs.List class="grid w-full grid-cols-2">
+			<Tabs.Trigger value="login">Login</Tabs.Trigger>
+			<Tabs.Trigger value="register">Register</Tabs.Trigger>
+		</Tabs.List>
+		<Tabs.Content value="login">
+			<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 pb-4">
+					Enter your credentials below to log into your account
+				</p>
+			</div>
+			<div class={cn('grid gap-6')} {...$$restProps}>
+				<form
+					method="POST"
+					action="?/login"
+					use:enhance={() => {
+						isLoading = true;
+					}}
+				>
+					<div class="grid gap-2">
+						<div class="grid gap-2">
+							<Label for="email">Email or username</Label>
+							<Input
+								id="email"
+								name="email"
+								type="email"
+								autocapitalize="none"
+								autocomplete="email"
+								autocorrect="off"
+								disabled={isLoading}
+							/>
+						</div>
+						<div class="grid gap-2">
+							<Label 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>
+		</Tabs.Content>
+		<Tabs.Content value="register">
+			
+		</Tabs.Content>
+		{#if providers.length}
 			<form
 				method="POST"
-				action="?/login"
+				action="?/oauth2"
+				bind:this={oauth2Form}
 				use:enhance={() => {
 					isLoading = true;
 				}}
 			>
-				<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}
-							placeholder="Password"
-						/>
-					</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>
-
-		<form
-			method="POST"
-			action="?/oauth2"
-			bind:this={oauth2Form}
-			use:enhance={() => {
-				isLoading = true;
-			}}
-		>
-			{#if providers.length}
 				<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 py-6 text-muted-foreground"> Or continue with </span>
+						<span class="bg-background text-muted-foreground px-2 py-6"> Or continue with </span>
 					</div>
 				</div>
 				<div
-					class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+					class="border-input hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring flex items-center justify-between whitespace-nowrap rounded-md border bg-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
 				>
 					<input type="hidden" name="provider" bind:value={currentProvider.name} />
 					<div class="flex w-full items-center justify-center space-x-2">
@@ -142,7 +148,7 @@
 					</div>
 					{#if providers.length > 1}
 						<div class="flex items-center space-x-2">
-							<Separator orientation="vertical" class="h-[20px] bg-secondary" />
+							<Separator orientation="vertical" class="bg-secondary h-[20px]" />
 							<div class="flex items-center space-x-2">
 								<DropdownMenu.Root>
 									<DropdownMenu.Trigger asChild let:builder>
@@ -177,10 +183,11 @@
 						</div>
 					{/if}
 				</div>
-			{/if}
-		</form>
-	</div>
-	<p class="px-8 text-center text-xs text-muted-foreground">
+			</form>
+		{/if}
+	</Tabs.Root>
+
+	<p class="text-muted-foreground px-8 py-2 text-center text-xs">
 		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>