TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update auth page

Browse Source
pull/3/head
TZGyn 2 years ago
parent 09b8f8468c
commit 2cd9d5d539
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
4 changed files with 68 additions and 33 deletions
Show Stats Download Patch File Download Diff File

17
src/routes/(auth)/login/(components)/user-auth-form.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { LoaderIcon } from 'lucide-svelte';
import { Loader2, LoaderIcon } from 'lucide-svelte';
import { cn } from '$lib/utils';
let className: string | undefined | null = undefined;
@ -20,8 +20,8 @@
<div class={cn('grid gap-6', className)} {...$$restProps}>
<form on:submit|preventDefault={onSubmit}>
<div class="grid gap-2">
<div class="grid gap-4">
<div class="grid gap-1">
<Label for="email">Email</Label>
<Input
id="email"
@ -35,13 +35,18 @@
</div>
<div class="grid gap-1">
<Label for="password">Password</Label>
<Input id="password" placeholder="••••••••" type="password" disabled={isLoading} />
<Input
id="password"
placeholder="••••••••"
type="password"
disabled={isLoading}
/>
</div>
<Button disabled={isLoading}>
<Button disabled={isLoading} type="submit" class="flex gap-2">
{#if isLoading}
<LoaderIcon />
<Loader2 class="animate-spin" />
{/if}
Sign In with Email
Sign In
</Button>
</div>
</form>

33
src/routes/(auth)/login/+page.svelte
Unescape Escape View File

@ -9,25 +9,36 @@
<div class="absolute right-4 top-4 md:right-8 md:top-8">
<ThemeToggle />
</div>
<div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
<div
class="absolute inset-0 bg-cover"
style="
background-image:
url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
/>
<div class="relative z-20 flex items-center text-lg font-medium">Shortener</div>
class="relative hidden h-full flex-col bg-primary-foreground p-10 text-white dark:border-r lg:flex"
>
<div
class="relative z-20 text-primary flex items-center text-lg font-medium"
>
Shortener
</div>
</div>
<div class="p-8">
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<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 an account</h1>
<p class="text-sm text-muted-foreground">Enter your email below to create your account</p>
<h1 class="text-2xl font-semibold tracking-tight">
Login to your account
</h1>
<p class="text-sm text-muted-foreground">
Enter your email below to login to your account
</p>
</div>
<UserAuthForm />
<p class="px-8 text-center text-sm text-muted-foreground">
Don't Have An Account? Signup{' '}
<a href="/signup" class="underline underline-offset-4 hover:text-primary"> Here </a>{' '}
<a
href="/signup"
class="underline underline-offset-4 hover:text-primary"
>
Here
</a>{' '}
</p>
</div>
</div>

20
src/routes/(auth)/signup/(components)/user-auth-form.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { LoaderIcon } from 'lucide-svelte';
import { Loader2 } from 'lucide-svelte';
import { cn } from '$lib/utils';
let className: string | undefined | null = undefined;
@ -35,17 +35,27 @@
</div>
<div class="grid gap-1">
<Label for="password">Password</Label>
<Input id="password" placeholder="••••••••" type="password" disabled={isLoading} />
<Input
id="password"
placeholder="••••••••"
type="password"
disabled={isLoading}
/>
</div>
<div class="grid gap-1">
<Label for="password_confirm">Password Confirm</Label>
<Input id="password_confirm" placeholder="••••••••" type="password" disabled={isLoading} />
<Input
id="password_confirm"
placeholder="••••••••"
type="password"
disabled={isLoading}
/>
</div>
<Button disabled={isLoading} type="submit" class="flex gap-2">
{#if isLoading}
<LoaderIcon class="animate-spin" />
<Loader2 class="animate-spin" />
{/if}
Sign Up with Email
Sign Up
</Button>
</div>
</form>

29
src/routes/(auth)/signup/+page.svelte
Unescape Escape View File

@ -9,25 +9,34 @@
<div class="absolute right-4 top-4 md:right-8 md:top-8">
<ThemeToggle />
</div>
<div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
<div
class="absolute inset-0 bg-cover"
style="
background-image:
url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
/>
<div class="relative z-20 flex items-center text-lg font-medium">Shortener</div>
class="hidden relative h-full flex-col bg-primary-foreground p-10 text-white dark:border-r lg:flex"
>
<div
class="relative z-20 text-primary flex items-center text-lg font-medium"
>
Shortener
</div>
</div>
<div class="p-8">
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<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 an account</h1>
<p class="text-sm text-muted-foreground">Enter your email below to create your account</p>
<p class="text-sm text-muted-foreground">
Enter your email below to create your account
</p>
</div>
<UserAuthForm />
<p class="px-8 text-center text-sm text-muted-foreground">
Already Have An Account? Login{' '}
<a href="/login" class="underline underline-offset-4 hover:text-primary"> Here </a>{' '}
<a
href="/login"
class="underline underline-offset-4 hover:text-primary"
>
Here
</a>{' '}
</p>
</div>
</div>

Write Preview
Loading…
Cancel
Save