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