mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-10-25 21:59:09 +00:00
feat: add shadcn styling and conditional nav
This commit is contained in:
parent
8b51e6816e
commit
6ebca59554
15 changed files with 200 additions and 102 deletions
|
|
@ -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 {
|
||||
|
|
@ -21,4 +21,4 @@ export const actions = {
|
|||
|
||||
throw redirect(303, '/');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,39 +1,84 @@
|
|||
<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">
|
||||
Register for an account
|
||||
</h2>
|
||||
<p class="text-center mt-1">
|
||||
Or <a href="/login" class="text-primary font-medium hover:cursor-pointer hover:underline"
|
||||
>sign in</a
|
||||
> if you already have an 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" />
|
||||
<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';
|
||||
|
||||
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>
|
||||
</div>
|
||||
<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={cn('grid gap-6')} {...$$restProps}>
|
||||
<form method="POST">
|
||||
<div class="grid gap-2">
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="email">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Michael Jackson"
|
||||
type="name"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="michael@jackson.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>
|
||||
<div class="grid gap-1">
|
||||
<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>
|
||||
<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="form-control w-full max-w-md">
|
||||
<label for="passwordConfirm" class="label font-medium pb-1">
|
||||
<span class="label-text">Confirm Password</span>
|
||||
</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">
|
||||
<button type="submit" class="btn btn-primary w-full">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<h2 class="mt-2 text-center text-3xl font-bold tracking-tight text-base-content">
|
||||
Reset Your Password
|
||||
</h2>
|
||||
<p class="text-center mt-1">We'll send you an email with a link to reset your password.</p>
|
||||
<form
|
||||
action="?/resetPassword"
|
||||
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">Reset password</h1>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
We'll send you an email with a link to reset your password.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full max-w-md pt-2">
|
||||
<button type="submit" class="btn btn-primary w-full">Request Password Reset</button>
|
||||
</div>
|
||||
{#if form?.success}
|
||||
<div class="alert alert-success 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="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>
|
||||
<div class={cn('grid gap-6')} {...$$restProps}>
|
||||
<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>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
{#if form?.success}
|
||||
<Alert.Root variant="default" class="mt-2">
|
||||
<CheckCircled class="h-4 w-4" />
|
||||
<Alert.Description
|
||||
>An email has been sent to reset your password.</Alert.Description
|
||||
>
|
||||
</Alert.Root>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
7
apps/web/src/routes/+layout.server.ts
Normal file
7
apps/web/src/routes/+layout.server.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = (async ({ locals }: { locals: App.Locals }) => {
|
||||
return {
|
||||
authenticated: locals.pocketBase.authStore.isValid
|
||||
};
|
||||
});
|
||||
|
|
@ -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 }}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue