69 lines
1.7 KiB
Svelte
69 lines
1.7 KiB
Svelte
<svelte:head>
|
|
<title>Login</title>
|
|
</svelte:head>
|
|
|
|
<script>
|
|
import { login } from '$lib/api';
|
|
import { isValidEmail } from '$lib/utils';
|
|
import Modal from '$components/Modal.svelte';
|
|
import Header from '$components/Header.svelte';
|
|
import Footer from '$components/Footer.svelte';
|
|
import { navigate } from 'svelte-navigator';
|
|
|
|
let showModal = false;
|
|
let modalMessage = 'Test message';
|
|
|
|
let email = '';
|
|
let password = '';
|
|
|
|
async function handleLogin() {
|
|
return;
|
|
if (!isValidEmail(email)){
|
|
modalMessage = "Please enter the email address you used to sign up.";
|
|
showModal = true;
|
|
return;
|
|
}
|
|
try {
|
|
const user = await login(email, password);
|
|
navigate('/profile');
|
|
//reload the page
|
|
location.reload();
|
|
} catch (err) {
|
|
modalMessage = err;
|
|
showModal = true;
|
|
}
|
|
}
|
|
|
|
function closeModal() {
|
|
showModal = false;
|
|
}
|
|
|
|
let showUserNav = false;
|
|
</script>
|
|
|
|
<Header {showUserNav} />
|
|
|
|
<main>
|
|
|
|
<form class="colonel" on:submit={handleLogin}>
|
|
<input type="email" placeholder="Email" bind:value={email} required>
|
|
<input type="password" placeholder="P@s5word" bind:value={password} required>
|
|
|
|
<button type="submit" class="btn-fly">Log in</button>
|
|
</form>
|
|
|
|
<form class="colonel" method="POST">
|
|
<input type="email" name="email" placeholder="Email" bind:value={email} required>
|
|
<input type="password" name="password" placeholder="P@s5word" bind:value={password} required>
|
|
|
|
<button type="submit" class="btn-fly">Log in</button>
|
|
</form>
|
|
|
|
{#if showModal}
|
|
<Modal on:close={closeModal}>
|
|
<p>{modalMessage}</p>
|
|
</Modal>
|
|
{/if}
|
|
|
|
</main>
|
|
<Footer /> |