online-energieausweis/src/modules/Dashboard/DashboardEinstellungenModule.svelte

<script lang="ts">
	import {
		Person,
	} from "radix-svelte-icons";
	import { Tabs, Tab, TabList, TabPanel } from "../../components/Tabs/index.js";
	import { dialogs } from "../../../svelte-dialogs.config.js";
	import { BenutzerClient } from "#components/Ausweis/types.js";
	import { exclude } from "#lib/exclude.js";
	import { api } from "astro-typesafe-api/client";
	import Cookies from "js-cookie";
	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";

	export let benutzer: BenutzerClient;

	let passwort: string = "";
	let passwortVerify: string = "";
	async function profilSpeichern(e: SubmitEvent) {
		e.preventDefault()
		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 api.user.POST.fetch(benutzerObjekt, {
			headers: {
				Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})

		dialogs.success({
			title: "Profil gespeichert",
			text: "Deine Änderungen wurden erfolgreich gespeichert.",
			dismissButtonClass: "btn btn-success"
		})
	}
</script>

<h1 class="text-4xl font-medium mb-8">Einstellungen</h1>
<Tabs class="h-[calc(100%-6rem)]">
	<div class="grid grid-cols-1 md:grid-cols-[1fr_3fr] h-full gap-8">
		<TabList>
			<Tab>
				<Person size={22} />
				Profil
			</Tab>
		</TabList>
		<div
			class="border border-base-300 w-full h-full rounded-lg bg-base-200 p-8"
		>
			<TabPanel>
				<h2 class="text-2xl font-medium">Profil</h2>
				<form class="flex flex-col gap-4 my-4 max-w-2xl" on:submit={profilSpeichern}>
					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
						<div class="flex flex-col">
							<span class="whitespace-nowrap">Vorname</span>
							<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="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="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="grid grid-cols-1 md:grid-cols-3 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="grid grid-cols-1 md:grid-cols-2 gap-4">
						<div class="flex flex-col">
							<span class="whitespace-nowrap">Passwort</span>
							<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="*********" bind:value={passwortVerify}>
						</div>
					</div>
					<button class="btn btn-primary" type="submit">Speichern</button>
				</form>
			</TabPanel>
			<TabPanel>
				<h2 class="text-2xl font-medium">Ausweise</h2>
				<p>In Zukunft werden sie hier spezifische Einstellungen für die Ausweisgenerierung ansehen können. Bitte haben sie Geduld.</p>
			</TabPanel>
		</div>
	</div>
</Tabs>

<style>
	:global(.tab-list) {
		@apply flex flex-col gap-2 px-0 bg-base-200 rounded-lg border;
	}

	@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

	:global(*) {
		font-family: Poppins !important;
	}

	:global(.tab.selected) {
		@apply bg-gray-200;
	}

	:global(.tab) {
		@apply flex flex-row py-4 rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content;
	}

	:global(.tab:hover) {
		@apply bg-gray-200 outline-0;
	}

	:global(.tab:focus) {
		@apply shadow-none;
	}

	:global(summary.tab::after) {
		@apply ml-auto;
	}
</style>