115 lines
2.0 KiB
Svelte
115 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
|
|
import type { PageProps } from "./$types"
|
|
import { enhance } from "$app/forms"
|
|
import { page } from "$app/state"
|
|
|
|
const { data, form }: PageProps = $props()
|
|
|
|
$inspect(data)
|
|
|
|
</script>
|
|
|
|
<form method="POST" id="form_edit" action={`?/edit&${page.url.searchParams.toString()}`} use:enhance={() => {
|
|
return async ({update}) => { update({ reset: false }) }
|
|
}}>
|
|
<input type="hidden" name="id" value={data.user.id} />
|
|
|
|
<div class="root">
|
|
|
|
<h1>Benutzer</h1>
|
|
|
|
<p>{form?.message}</p>
|
|
|
|
<table>
|
|
<colgroup>
|
|
<col class="leader2" />
|
|
<col class="form2" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr><th colspan="2">Persönliche Daten</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name</td>
|
|
<td><input type="text" name="name" value={data.user.name} /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Geschlecht</td>
|
|
<td><select name="gender">
|
|
<option selected={ data.user?.gender === "M" }>M</option>
|
|
<option selected={ data.user?.gender === "W" }>W</option></select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Addresse</td>
|
|
<td><input type="text" name="address" value={data.user.address} /></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table>
|
|
<colgroup>
|
|
<col class="leader3" />
|
|
<col class="form3" />
|
|
<col class="form3" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr><th colspan="3">Benutzer</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Benutzername</td>
|
|
<td colspan="2"><input type="text" name="username" value={data.user.username} /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Passwort ändern</td>
|
|
<td><input type="password" name="password1" /></td>
|
|
<td><input type="password" name="password2" placeholder="Wiederholen"/></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<button type="submit">Speichern</button>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<style>
|
|
|
|
.root {
|
|
margin: auto;
|
|
width: 50%;
|
|
}
|
|
|
|
|
|
table {
|
|
width: 100%;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
td {
|
|
padding: 5px;
|
|
}
|
|
|
|
.form2 {
|
|
width: 75%;
|
|
}
|
|
.form3 {
|
|
width: 37.5%
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: solid 1px black;
|
|
}
|
|
|
|
button {
|
|
width: 15%;
|
|
margin-left: 85%;
|
|
}
|
|
|
|
</style>
|