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 { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input'; import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label'; import { Label } from '$lib/components/ui/label';
import { LoaderIcon } from 'lucide-svelte'; import { Loader2, LoaderIcon } from 'lucide-svelte';
import { cn } from '$lib/utils'; import { cn } from '$lib/utils';
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined;
@ -20,8 +20,8 @@
<div class={cn('grid gap-6', className)} {...$$restProps}> <div class={cn('grid gap-6', className)} {...$$restProps}>
<form on:submit|preventDefault={onSubmit}> <form on:submit|preventDefault={onSubmit}>
<div class="grid gap-2">
<div class="grid gap-4"> <div class="grid gap-4">
<div class="grid gap-1">
<Label for="email">Email</Label> <Label for="email">Email</Label>
<Input <Input
id="email" id="email"
@ -35,13 +35,18 @@
</div> </div>
<div class="grid gap-1"> <div class="grid gap-1">
<Label for="password">Password</Label> <Label for="password">Password</Label>
<Input id="password" placeholder="••••••••" type="password" disabled={isLoading} /> <Input
id="password"
placeholder="••••••••"
type="password"
disabled={isLoading}
/>
</div> </div>
<Button disabled={isLoading}> <Button disabled={isLoading} type="submit" class="flex gap-2">
{#if isLoading} {#if isLoading}
<LoaderIcon /> <Loader2 class="animate-spin" />
{/if} {/if}
Sign In with Email Sign In
</Button> </Button>
</div> </div>
</form> </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"> <div class="absolute right-4 top-4 md:right-8 md:top-8">
<ThemeToggle /> <ThemeToggle />
</div> </div>
<div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
<div <div
class="absolute inset-0 bg-cover" class="relative hidden h-full flex-col bg-primary-foreground p-10 text-white dark:border-r lg:flex"
style=" >
background-image: <div
url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);" class="relative z-20 text-primary flex items-center text-lg font-medium"
/> >
<div class="relative z-20 flex items-center text-lg font-medium">Shortener</div> Shortener
</div>
</div> </div>
<div class="p-8"> <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"> <div class="flex flex-col space-y-2 text-center">
<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1> <h1 class="text-2xl font-semibold tracking-tight">
<p class="text-sm text-muted-foreground">Enter your email below to create your account</p> Login to your account
</h1>
<p class="text-sm text-muted-foreground">
Enter your email below to login to your account
</p>
</div> </div>
<UserAuthForm /> <UserAuthForm />
<p class="px-8 text-center text-sm text-muted-foreground"> <p class="px-8 text-center text-sm text-muted-foreground">
Don't Have An Account? Signup{' '} 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> </p>
</div> </div>
</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 { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input'; import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label'; import { Label } from '$lib/components/ui/label';
import { LoaderIcon } from 'lucide-svelte'; import { Loader2 } from 'lucide-svelte';
import { cn } from '$lib/utils'; import { cn } from '$lib/utils';
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined;
@ -35,17 +35,27 @@
</div> </div>
<div class="grid gap-1"> <div class="grid gap-1">
<Label for="password">Password</Label> <Label for="password">Password</Label>
<Input id="password" placeholder="••••••••" type="password" disabled={isLoading} /> <Input
id="password"
placeholder="••••••••"
type="password"
disabled={isLoading}
/>
</div> </div>
<div class="grid gap-1"> <div class="grid gap-1">
<Label for="password_confirm">Password Confirm</Label> <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> </div>
<Button disabled={isLoading} type="submit" class="flex gap-2"> <Button disabled={isLoading} type="submit" class="flex gap-2">
{#if isLoading} {#if isLoading}
<LoaderIcon class="animate-spin" /> <Loader2 class="animate-spin" />
{/if} {/if}
Sign Up with Email Sign Up
</Button> </Button>
</div> </div>
</form> </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"> <div class="absolute right-4 top-4 md:right-8 md:top-8">
<ThemeToggle /> <ThemeToggle />
</div> </div>
<div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
<div <div
class="absolute inset-0 bg-cover" class="hidden relative h-full flex-col bg-primary-foreground p-10 text-white dark:border-r lg:flex"
style=" >
background-image: <div
url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);" class="relative z-20 text-primary flex items-center text-lg font-medium"
/> >
<div class="relative z-20 flex items-center text-lg font-medium">Shortener</div> Shortener
</div>
</div> </div>
<div class="p-8"> <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"> <div class="flex flex-col space-y-2 text-center">
<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1> <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> </div>
<UserAuthForm /> <UserAuthForm />
<p class="px-8 text-center text-sm text-muted-foreground"> <p class="px-8 text-center text-sm text-muted-foreground">
Already Have An Account? Login{' '} 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> </p>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save