sdfkjhjdsjfh
This commit is contained in:
parent
8135e3938f
commit
c7ecd4fe16
1 changed files with 37 additions and 8 deletions
|
@ -1,12 +1,27 @@
|
||||||
<script>
|
<script>
|
||||||
import { blur } from 'svelte/transition';
|
import { blur } from 'svelte/transition';
|
||||||
import { Mail, SquareAsterisk, LogIn, Undo } from 'lucide-svelte';
|
import { Mail, SquareAsterisk, LogIn, Undo } from 'lucide-svelte';
|
||||||
|
import { toast } from 'svelte-sonner';
|
||||||
|
|
||||||
import Logo from '$lib/components/Logo.svelte';
|
import Logo from '$lib/components/Logo.svelte';
|
||||||
import FormInput from '$lib/components/FormInput.svelte';
|
import FormInput from '$lib/components/FormInput.svelte';
|
||||||
import Button from '$lib/components/Button.svelte';
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
import ButtonText from '$lib/components/ButtonText.svelte';
|
||||||
|
import ButtonIcon from '$lib/components/ButtonIcon.svelte';
|
||||||
|
|
||||||
export let callback;
|
export let callback;
|
||||||
|
|
||||||
|
let disabled = false;
|
||||||
|
let email, password;
|
||||||
|
|
||||||
|
async function login() {
|
||||||
|
disabled = true;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
toast('Failed to login.');
|
||||||
|
disabled = false;
|
||||||
|
}, 5_000);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-screen">
|
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-screen">
|
||||||
|
@ -16,20 +31,34 @@
|
||||||
</div>
|
</div>
|
||||||
<form on:submit|preventDefault>
|
<form on:submit|preventDefault>
|
||||||
<div class="flex flex-col space-y-2">
|
<div class="flex flex-col space-y-2">
|
||||||
<FormInput type={'email'} name={'email'} id={'email'} placeholder={'user@example.com'}>
|
<FormInput
|
||||||
|
type={'email'}
|
||||||
|
name={'email'}
|
||||||
|
id={'email'}
|
||||||
|
placeholder={'user@example.com'}
|
||||||
|
bind={email}
|
||||||
|
required={true}
|
||||||
|
>
|
||||||
<Mail />
|
<Mail />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
<FormInput type={'password'} name={'password'} id={'password'} placeholder={'•'.repeat(16)}>
|
<FormInput
|
||||||
|
type={'password'}
|
||||||
|
name={'password'}
|
||||||
|
id={'password'}
|
||||||
|
placeholder={'•'.repeat(16)}
|
||||||
|
bind={password}
|
||||||
|
required={true}
|
||||||
|
>
|
||||||
<SquareAsterisk />
|
<SquareAsterisk />
|
||||||
</FormInput>
|
</FormInput>
|
||||||
<div class="flex place-content-between">
|
<div class="flex place-content-between">
|
||||||
<Button click={callback}>
|
<Button click={callback} {disabled}>
|
||||||
<Undo />
|
<ButtonIcon><Undo /></ButtonIcon>
|
||||||
<p>Go Back</p>
|
<ButtonText><p>Go Back</p></ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
<Button>
|
<Button click={login} {disabled} pulse={disabled}>
|
||||||
<LogIn />
|
<ButtonIcon><LogIn /></ButtonIcon>
|
||||||
<p>Login</p>
|
<ButtonText><p>Login</p></ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue