52 lines
1.1 KiB
Svelte
52 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { PageProps } from "./$types";
|
|
import { enhance } from "$app/forms";
|
|
|
|
let { form }: PageProps = $props();
|
|
|
|
</script>
|
|
|
|
<div>
|
|
<h1>Login</h1>
|
|
<form id="login" method="POST" action="?/login" use:enhance={({formElement}) => { formElement.reset() }}>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td><label for="username">Benutzername:</label></td>
|
|
<td><input type="text" id="username" name="username" value={form?.username ?? ""} required /></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="password">Passwort:</label></td>
|
|
<td><input type="password" id="password" name="password" required /></td> <!-- form.password should never be defined -->
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"><button type="submit">Login</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
<p>{form?.message}<br></p>
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
position: absolute;
|
|
top: 33%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
table {
|
|
margin: auto;
|
|
}
|
|
tr td:first-of-type {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
button {
|
|
margin: 0 auto;
|
|
padding: 0 auto;
|
|
}
|
|
|
|
</style>
|