feat: add shadcn styling and conditional nav

apps/web/src/lib/components/site/icons/index.ts

@@ -3,12 +3,14 @@ import { Loader2 } from 'lucide-svelte';
 import { GithubLogo, VercelLogo, LinkedinLogo } from 'radix-icons-svelte';
 import Logo from './logo.svelte';
 import Svelte from './svelte.svelte';
+import Microsoft from './microsoft.svelte';
 
 export type Icon = LucideIcon;
 
 export const Icons = {
 	logo: Logo,
 	gitHub: GithubLogo,
+	microsoft: Microsoft,
 	svelte: Svelte,
 	vercel: VercelLogo,
 	linkedIn: LinkedinLogo,

apps/web/src/lib/components/site/icons/microsoft.svelte

@@ -0,0 +1,12 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	version="1.2"
+	baseProfile="tiny"
+	viewBox="0 0 24 24"
+	{...$$restProps}
+	><path
+		d="M10 12.5c0-.3-.2-.5-.5-.5h-6c-.3 0-.5.2-.5.5v5c0 .3.2.5.5.6l6 .7c.3 0 .5-.2.5-.4v-5.9zM11.5 12c-.3 0-.5.2-.5.5v5.9c0 .3.2.5.5.6l9 1c.3 0 .5-.2.5-.4v-7c0-.3-.2-.5-.5-.5l-9-.1zM10 4.7c0-.3-.2-.5-.5-.4l-6 .7c-.3 0-.5.2-.5.5v5c0 .3.2.5.5.5h6c.3 0 .5-.2.5-.5v-5.8zM11.5 4.1c-.3 0-.5.3-.5.6v5.9c0 .3.2.5.5.5h9c.3 0 .5-.2.5-.5v-7c0-.3-.2-.5-.5-.4l-9 .9z"
+	></path></svg
+>

apps/web/src/lib/components/site/nav/main-nav.svelte

@@ -2,16 +2,18 @@
 	import { page } from '$app/stores';
 	import { cn } from '$lib/utils';
 	import { navConfig } from '$lib/config/nav';
+
+	export let authenticated = false;
 </script>
 
 <div class="mr-4 hidden md:flex">
 	<nav class="flex items-center space-x-6 text-sm font-medium">
 		{#each navConfig.mainNav as navItem, index (navItem + index.toString())}
-			{#if navItem.href}
+			{#if navItem.href && (navItem.auth == authenticated || navItem.always)}
 				<a
 					href={navItem.href}
 					class={cn(
-						'transition-colors hover:text-foreground/80',
+						'hover:text-foreground/80 transition-colors',
 						$page.url.pathname === navItem.href ? 'text-foreground' : 'text-foreground/60'
 					)}
 				>

apps/web/src/lib/components/site/nav/mobile-nav.svelte

@@ -8,6 +8,7 @@
 	import MobileLink from './mobile-link.svelte';
 
 	let open = false;
+	export let authenticated = false;
 </script>
 
 <Sheet.Root bind:open>
@@ -30,7 +31,7 @@
 		<div class="my-4 h-[calc(100vh-8rem)] overflow-auto pl-1 pt-10">
 			<div class="flex flex-col space-y-3">
 				{#each navConfig.mainNav as navItem, index (navItem + index.toString())}
-					{#if navItem.href}
+					{#if navItem.href && (navItem.auth == authenticated || navItem.always)}
 						<MobileLink href={navItem.href} bind:open class="pt-2 text-5xl font-bold">
 							{navItem.title}
 						</MobileLink>

apps/web/src/lib/components/site/site-navbar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site';
+
+	export let authenticated = false;
 </script>
 
 <header
@@ -10,12 +12,12 @@
 			<span class="sr-only">Logo (return home)</span>
 			<Icons.logo />
 		</a>
-		<MainNav />
+		<MainNav {authenticated}/>
 		<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
 			<nav class="flex">
 				<ModeToggle />
 			</nav>
 		</div>
-		<MobileNav />
+		<MobileNav {authenticated}/>
 	</div>
 </header>

apps/web/src/lib/config/nav.ts

@@ -9,28 +9,34 @@ export const navConfig: NavConfig = {
 	mainNav: [
 		{
 			title: 'Home',
-			href: '/'
+			href: '/',
-		},
+			always: true
-		{
-			title: 'Login',
-			href: '/login'
-		},
-		{
-			title: 'Register',
-			href: '/register'
 		},
 		{
 			title: 'Dashboard',
-			href: '/dashboard'
+			href: '/dashboard',
+			auth: true
 		},
 		{
 			title: 'Settings',
-			href: '/settings'
+			href: '/settings',
+			auth: true
+		},
+		{
+			title: 'Login',
+			href: '/login',
+			auth: false,
+		},
+		{
+			title: 'Register',
+			href: '/register',
+			auth: false,
 		},
 		{
 			title: 'Logout',
-			href: '/logout'
+			href: '/logout',
-		}
+			auth: true
+		},
 	],
 	sidebarNav: []
 };

apps/web/src/lib/types/nav.ts

@@ -3,6 +3,8 @@ import type { Icons } from '$lib/components/site/icons';
 export type NavItem = {
 	title: string;
 	href: string;
+	auth?: boolean;
+	always?: boolean;
 	disabled?: boolean;
 	external?: boolean;
 	icon?: keyof typeof Icons;

apps/web/src/routes/(auth)/login/+page.server.ts

@@ -1,7 +1,7 @@
 import { error, redirect } from '@sveltejs/kit';
 
 export const actions = {
-	login: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
+	default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
 		const body = Object.fromEntries(await request.formData());
 
 		try {

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

@@ -19,7 +19,7 @@
 			</p>
 		</div>
 		<div class={cn('grid gap-6')} {...$$restProps}>
-			<form action="?/login" method="POST">
+			<form method="POST">
 				<div class="grid gap-2">
 					<div class="grid gap-1">
 						<Label class="sr-only" for="email">Email</Label>
@@ -66,10 +66,10 @@
 				{#if isLoading}
 					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
 				{:else}
-					<Icons.gitHub class="mr-2 h-4 w-4" />
+					<Icons.microsoft class="mr-2 h-4 w-4" />
 				{/if}
 				{' '}
-				GitHub
+				Microsoft
 			</Button>
 		</div>
 		<p class="text-muted-foreground px-8 text-center text-sm">

apps/web/src/routes/(auth)/register/+page.server.ts

@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 
 export const actions = {
-	register: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
+	default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
 		if (locals.pocketBase.authStore.isValid) {
 			return;
 		}
@@ -37,6 +37,10 @@ export const actions = {
 				throw new Error('Password must be at least 8 characters in length');
 			}
 
+			if (password !== formData.get('passwordConfirm')) {
+				throw new Error('Passwords do not match');
+			}
+
 			await locals.pocketBase.collection('users').create({
 				email,
 				password,

apps/web/src/routes/(auth)/register/+page.svelte

@@ -1,39 +1,84 @@
-<div class="flex flex-col items-center h-full w-full">
+<script lang="ts">
-	<h2 class="mt-2 text-center text-3xl font-bold tracking-tight text-base-content">
+	import { Icons } from '$lib/components/site/icons';
-		Register for an account
+	import { Button } from '$lib/components/ui/button';
-	</h2>
+	import { Input } from '$lib/components/ui/input';
-	<p class="text-center mt-1">
+	import { Label } from '$lib/components/ui/label';
-		Or <a href="/login" class="text-primary font-medium hover:cursor-pointer hover:underline"
+	import { cn } from '$lib/utils';
-			>sign in</a
+
-		> if you already have an account.
+	let isLoading = false;
+</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">Create your account</h1>
+			<p class="text-muted-foreground text-sm">
+				Enter your details below to create a new account
 			</p>
-	<form action="?/register" 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="name" class="label font-medium pb-1">
-				<span class="label-text">Name</span>
-			</label>
-			<input type="text" name="name" class="input input-bordered w-full max-w-md" />
 		</div>
-		<div class="form-control w-full max-w-md">
+		<div class={cn('grid gap-6')} {...$$restProps}>
-			<label for="email" class="label font-medium pb-1">
+			<form method="POST">
-				<span class="label-text">Email</span>
+				<div class="grid gap-2">
-			</label>
+					<div class="grid gap-1">
-			<input type="email" name="email" class="input input-bordered w-full max-w-md" />
+						<Label class="sr-only" for="email">Name</Label>
+						<Input
+							id="name"
+							name="name"
+							placeholder="Michael Jackson"
+							type="name"
+							disabled={isLoading}
+						/>
 					</div>
-		<div class="form-control w-full max-w-md">
+					<div class="grid gap-1">
-			<label for="password" class="label font-medium pb-1">
+						<Label class="sr-only" for="email">Email</Label>
-				<span class="label-text">Password</span>
+						<Input
-			</label>
+							id="email"
-			<input type="password" name="password" class="input input-bordered w-full max-w-md" />
+							name="email"
+							placeholder="michael@jackson.com"
+							type="email"
+							autocapitalize="none"
+							autocomplete="email"
+							autocorrect="off"
+							disabled={isLoading}
+						/>
 					</div>
-		<div class="form-control w-full max-w-md">
+					<div class="grid gap-1">
-			<label for="passwordConfirm" class="label font-medium pb-1">
+						<Label class="sr-only" for="password">Password</Label>
-				<span class="label-text">Confirm Password</span>
+						<Input id="password" name="password" type="password" disabled={isLoading} placeholder="Password" />
-			</label>
-			<input type="password" name="passwordConfirm" class="input input-bordered w-full max-w-md" />
 					</div>
-		<div class="w-full max-w-md pt-2">
+					<div class="grid gap-1">
-			<button type="submit" class="btn btn-primary w-full">Register</button>
+						<Label class="sr-only" for="password">Confirm Password</Label>
+						<Input id="password" name="passwordConfirm" type="password" disabled={isLoading} placeholder="Confirm 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>
 			</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>
+			<Button variant="outline" type="button" disabled={isLoading}>
+				{#if isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+				{:else}
+					<Icons.microsoft class="mr-2 h-4 w-4" />
+				{/if}
+				{' '}
+				Microsoft
+			</Button>
+		</div>
+		<p class="text-muted-foreground px-8 text-center text-sm">
+			Or <a class="text-primary underline" href="/login">sign in</a> if you already have an account.<br />
+			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
+		</p>
+	</div>
 </div>

apps/web/src/routes/(auth)/reset-password/+page.server.ts

@@ -1,7 +1,7 @@
 import { error } from '@sveltejs/kit';
 
 export const actions = {
-	resetPassword: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
+	default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
 		const body = Object.fromEntries(await request.formData());
 
 		try {

apps/web/src/routes/(auth)/reset-password/+page.svelte

@@ -1,44 +1,56 @@
-<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 { cn } from '$lib/utils';
+	import { CheckCircled } from "radix-icons-svelte";
+  import * as Alert from "$lib/components/ui/alert";
+
+	let isLoading = false;
 	export let form;
 </script>
 
-<div class="flex flex-col items-center h-full w-full">
+<div class="lg:p-8">
-	<h2 class="mt-2 text-center text-3xl font-bold tracking-tight text-base-content">
+	<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-		Reset Your Password
+		<div class="flex flex-col space-y-2 text-center">
-	</h2>
+			<h1 class="text-2xl font-semibold tracking-tight">Reset password</h1>
-	<p class="text-center mt-1">We'll send you an email with a link to reset your password.</p>
+			<p class="text-muted-foreground text-sm">
-	<form
+				We'll send you an email with a link to reset your password.
-		action="?/resetPassword"
+			</p>
-		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>
-		<div class="w-full max-w-md pt-2">
+		<div class={cn('grid gap-6')} {...$$restProps}>
-			<button type="submit" class="btn btn-primary w-full">Request Password Reset</button>
+			<form 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="michael@hihi.com"
+							type="email"
+							autocapitalize="none"
+							autocomplete="email"
+							autocorrect="off"
+							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?.success}
-			<div class="alert alert-success shadow-lg w-full max-w-md">
+					<Alert.Root variant="default" class="mt-2">
-				<div>
+						<CheckCircled class="h-4 w-4" />
-					<svg
+						<Alert.Description
-						xmlns="http://www.w3.org/2000/svg"
+							>An email has been sent to reset your password.</Alert.Description
-						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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-						/></svg
 						>
-					<span>An email has been sent to reset your password!</span>
+					</Alert.Root>
-				</div>
-			</div>
 				{/if}
 			</form>
+		</div>
+	</div>
 </div>

apps/web/src/routes/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = (async ({ locals }: { locals: App.Locals }) => {
+	return {
+		authenticated: locals.pocketBase.authStore.isValid
+	};
+});

apps/web/src/routes/+layout.svelte

@@ -4,6 +4,9 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import '../app.pcss';
 	import { fade } from 'svelte/transition';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
 </script>
 
 <ModeWatcher />
@@ -11,7 +14,7 @@
 <Metadata />
 
 <div class="relative flex min-h-screen flex-col" id="page">
-	<SiteNavBar />
+	<SiteNavBar authenticated={data.authenticated} />
 	<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 }}>