Dashboard Verbessert

This commit is contained in:
Moritz Utcke
2024-02-25 12:30:30 +07:00
parent 1bfd491f97
commit 23c480dae1
7 changed files with 116 additions and 20 deletions

View File

@@ -7,14 +7,57 @@
} from "radix-svelte-icons";
import { Tabs, Tab, TabList, TabPanel } from "../../components/Tabs";
import { dialogs } from "../../../svelte-dialogs.config";
import { BenutzerClient } from "#components/Ausweis/types";
import { client } from "src/trpc";
import { exclude } from "#lib/exclude";
function profilSpeichern() {
dialogs.confirm({
export let benutzer: BenutzerClient;
let passwort: string | undefined = undefined;
let passwortVerify: string | undefined = undefined;
async function profilSpeichern(e: SubmitEvent) {
e.preventDefault()
if (!passwort) {
passwort = undefined
} else {
if (passwort.length < 8) {
dialogs.alert({
title: "Passwort zu kurz",
text: "Das Passwort muss mindestens 8 Zeichen lang sein.",
})
return
} else if (passwort !== passwortVerify) {
dialogs.alert({
title: "Passwörter stimmen nicht überein",
text: "Die eingegebenen Passwörter stimmen nicht überein.",
})
return
}
}
const response = await dialogs.confirm({
title: "Profil speichern",
text: "Möchtest du deine Änderungen speichern?",
confirmButtonText: "Speichern",
declineButtonText: "Abbrechen",
})
if (!response) return;
const benutzerObjekt = exclude({
...benutzer,
passwort
}, ["rolle"])
// Wir wollen die Rolle nicht mit übertragen.
// Diese wird zwar sowieso rausgeschmissen aber sonst kommen wir nicht durch die Validation durch...
await client.v1.benutzer.update.mutate(benutzerObjekt)
dialogs.success({
title: "Profil gespeichert",
text: "Deine Änderungen wurden erfolgreich gespeichert.",
dismissButtonClass: "btn btn-success"
})
}
</script>
@@ -62,34 +105,51 @@
>
<TabPanel>
<h2 class="text-2xl font-medium">Profil</h2>
<div class="flex flex-col gap-4 my-4 max-w-2xl">
<form class="flex flex-col gap-4 my-4 max-w-2xl" on:submit={profilSpeichern}>
<div class="flex flex-row gap-4">
<div class="flex flex-col">
<span class="whitespace-nowrap">Vorname</span>
<input type="password" class="input text-base-content font-medium" placeholder="Max">
<input type="text" class="input text-base-content font-medium" placeholder="Max" bind:value={benutzer.vorname}>
</div>
<div class="flex flex-col">
<span class="whitespace-nowrap">Nachname</span>
<input type="password" class="input text-base-content font-medium" placeholder="Müller">
<input type="text" class="input text-base-content font-medium" placeholder="Müller" bind:value={benutzer.name}>
</div>
</div>
<div class="flex flex-col">
<span class="whitespace-nowrap">Email Adresse</span>
<input type="text" class="input text-base-content font-medium" placeholder="name@email.com" value="zobhusdi@wo.tk">
<input type="email" class="input text-base-content font-medium" placeholder="name@email.com" bind:value={benutzer.email}>
</div>
<div class="flex flex-col">
<span class="whitespace-nowrap">Telefonnummer</span>
<input type="phone" class="input text-base-content font-medium" placeholder="040 12345678" bind:value={benutzer.telefon}>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-col">
<span class="whitespace-nowrap">Adresse</span>
<input type="text" class="input text-base-content font-medium" placeholder="Musterstraße 123" bind:value={benutzer.adresse}>
</div>
<div class="flex flex-col">
<span class="whitespace-nowrap">PLZ</span>
<input type="text" class="input text-base-content font-medium" placeholder="12345" bind:value={benutzer.plz}>
</div>
<div class="flex flex-col">
<span class="whitespace-nowrap">Ort</span>
<input type="text" class="input text-base-content font-medium" placeholder="Musterhausen" bind:value={benutzer.ort}>
</div>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-col">
<span class="whitespace-nowrap">Passwort</span>
<input type="password" class="input text-base-content font-medium" placeholder="*********">
<input type="password" class="input text-base-content font-medium" placeholder="*********" bind:value={passwort}>
</div>
<div class="flex flex-col">
<span class="whitespace-nowrap">Passwort bestätigen</span>
<input type="password" class="input text-base-content font-medium" placeholder="*********">
<input type="password" class="input text-base-content font-medium" placeholder="*********" bind:value={passwortVerify}>
</div>
</div>
</div>
<button class="btn btn-primary" on:click={profilSpeichern}>Speichern</button>
<button class="btn btn-primary" type="submit">Speichern</button>
</form>
</TabPanel>
<TabPanel>
<h1>Panel Two</h1>