mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-04-27 07:21:20 +00:00
feat: shadcnify the login page
This commit is contained in:
parent
c660963ab8
commit
8b51e6816e
7 changed files with 161 additions and 55 deletions
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
21
apps/web/src/lib/components/ui/alert/alert-title.svelte
Normal file
21
apps/web/src/lib/components/ui/alert/alert-title.svelte
Normal file
|
|
@ -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>
|
||||
17
apps/web/src/lib/components/ui/alert/alert.svelte
Normal file
17
apps/web/src/lib/components/ui/alert/alert.svelte
Normal file
|
|
@ -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>
|
||||
32
apps/web/src/lib/components/ui/alert/index.ts
Normal file
32
apps/web/src/lib/components/ui/alert/index.ts
Normal file
|
|
@ -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
|
||||
};
|
||||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Reference in a new issue