69 lines
1.1 KiB
Svelte
69 lines
1.1 KiB
Svelte
|
||
|
||
<script>
|
||
let user = '';
|
||
let password = '';
|
||
let loading = false;
|
||
let error = '';
|
||
</script>
|
||
|
||
<form class="login" on:submit|preventDefault={handleLogin}>
|
||
<h2>Login</h2>
|
||
|
||
<label>
|
||
User
|
||
<input type="text" bind:value={user} required />
|
||
</label>
|
||
|
||
<label>
|
||
Password
|
||
<input type="password" bind:value={password} required />
|
||
</label>
|
||
|
||
{#if error}
|
||
<p class="error">{error}</p>
|
||
{/if}
|
||
|
||
<button disabled={loading}>
|
||
{loading ? 'Logging in…' : 'Login'}
|
||
</button>
|
||
</form>
|
||
|
||
<script>
|
||
async function handleLogin() {
|
||
error = '';
|
||
loading = true;
|
||
|
||
try {
|
||
// placeholder – we’ll add real auth next
|
||
if user !== 'test@test.com' || password !== '1234') {
|
||
throw new Error('Invalid credentials');
|
||
}
|
||
|
||
alert('Logged in!');
|
||
} catch (e) {
|
||
error = e.message;
|
||
} finally {
|
||
loading = false;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.login {
|
||
max-width: 320px;
|
||
margin: 4rem auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.error {
|
||
color: red;
|
||
}
|
||
</style> |