mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-04-27 23:41:21 +00:00
80 lines
2.5 KiB
Svelte
80 lines
2.5 KiB
Svelte
<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="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={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="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>
|
|
<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">
|
|
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>
|