Passwort Vergessen Seiten

src/layouts/MinimalLayout.astro

@@ -4,8 +4,8 @@ import i18next from "i18next";
 import "../style/global.scss";
 import "../../svelte-dialogs.config"
 import "svelte-ripple-action/ripple.css"
-import { Sun, Moon } from "radix-svelte-icons";
 import ThemeController from "#components/ThemeController.svelte";
+import {NotificationWrapper} from "@ibcornelsen/ui";
 
 export interface Props {
 	title: string;
@@ -85,7 +85,7 @@ const lightTheme = Astro.cookies.get("theme").value === "light";
 			content="https://online-energieausweis.org/images/energieausweis-online-erstellen.jpg"
 		/>
 		<title>
-			{title || "Energieausweis online erstellen - Online Energieausweis"}
+			{title} | IBCornelsen 
 		</title>
 	</head>
 
@@ -99,5 +99,8 @@ const lightTheme = Astro.cookies.get("theme").value === "light";
 		<div class="absolute top-4 right-4">
 			<ThemeController lightTheme={lightTheme} client:load></ThemeController>
 		</div>
+		<div class="absolute right-4 bottom-4">
+			<NotificationWrapper />
+		</div>
 	</body>
 </html>

src/modules/Auth/PasswortVergessenModule.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { addNotification } from "@ibcornelsen/ui";
+	import { CrossCircled } from "radix-svelte-icons";
+	import CheckCircled from "radix-svelte-icons/src/lib/icons/CheckCircled.svelte";
+	import {client} from "src/trpc";
+	import { fade } from "svelte/transition";
+
+	let email: string;
+
+	export let redirect: string | null = null;
+
+	async function sendPasswordMail(e: SubmitEvent) {
+		e.preventDefault()
+		try {
+			const response = await client.v1.benutzer.passwortAnfrageSenden.query({
+				email
+			})
+
+			showEmailSuccess = true;
+		} catch (e) {
+			addNotification({
+				message: "Ups...",
+				subtext: "Da ist wohl etwas schiefgelaufen... Diese Email Adresse ist bereits in Benutzung, haben sie vielleicht bereits ein Konto bei uns?",
+				type: "error",
+				timeout: 0,
+				dismissable: true
+			})
+		}
+	}
+
+	let showEmailSuccess = false;
+</script>
+
+<div class="mx-auto w-1/3 bg-base-200 p-8 border border-base-300 rounded-lg">
+	<h1 class="text-3xl mb-4">Passwort Vergessen?</h1>
+	<form class="flex flex-col gap-4" on:submit={sendPasswordMail}>
+		<p>Kein Problem. Wir helfen ihnen dabei ihr Passwort zurückzusetzen. Geben sie einfach die Email Adresse ihres Kontos ein und wir senden ihnen einen Link zu, mit dem sie ihr Passwort ändern können.</p>
+		<input
+			type="text"
+			placeholder="Email"
+			name="email"
+			class="input input-bordered text-base text-base-content font-medium"
+			bind:value={email}
+			required
+		/>
+		{#if showEmailSuccess}
+		<div role="alert" class="alert alert-success" in:fade>
+			<CheckCircled size={24} />
+			<span class="font-semibold">Falls sie ein Konto bei uns haben wurde eine Email an sie verschickt.</span>
+		</div>
+		{/if}
+		<button type="submit" class="btn btn-primary" 
+				>Email zum Zurücksetzen des Passworts senden.</button
+			>
+		<div class="flex-row justify-between" style="margin-top: 10px">
+			<a class="link link-hover"
+				href="/auth/login{redirect ? `?redirect=${redirect}` : ""}">Einloggen</a
+			>
+		</div>
+	</form>
+</div>

src/modules/Auth/PasswortZuruecksetzenModule.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { addNotification } from "@ibcornelsen/ui";
+	import {client} from "src/trpc";
+	
+	let passwort: string;
+	let passwortWiederholen: string;
+
+	export let token: string;
+
+	async function confirmResetPassword(e: SubmitEvent) {
+		e.preventDefault()
+		try {
+			await client.v1.benutzer.passwortZuruecksetzen.mutate({
+				passwort,
+				token
+			})
+
+			addNotification({
+				message: "Passwort zurückgesetzt.",
+				subtext: "Ihr Passwort wurde erfolgreich zurückgesetzt, sie können diese Seite nun schließen.",
+				type: "success",
+				timeout: 0,
+				dismissable: true
+			})
+		} catch (e) {
+			addNotification({
+				message: "Ups...",
+				subtext: "Beim zurücksetzen ihres Passworts ist etwas schiefgelaufen, bitte versuchen sie es erneut.",
+				type: "error",
+				timeout: 0,
+				dismissable: true
+			})
+		}
+	}
+</script>
+
+<div class="mx-auto w-1/3 bg-base-200 p-8 border border-base-300 rounded-lg">
+	<h1 class="text-3xl mb-4">Passwort Zurücksetzen</h1>
+	<form class="flex flex-col gap-4" on:submit={confirmResetPassword}>
+		<div class="flex flex-col gap-2">
+			<h4>Passwort</h4>
+			<input
+				type="password"
+				placeholder="********"
+				name="passwort"
+				data-test="passwort"
+				class="input input-bordered text-base text-base-content font-medium"
+				bind:value={passwort}
+				required
+			/>
+			<h4>Passwort wiederholen</h4>
+			<input
+				type="password"
+				placeholder="********"
+				name="passwort_wiederholen"
+				data-test="passwort_wiederholen"
+				class="input input-bordered text-base text-base-content font-medium"
+				bind:value={passwortWiederholen}
+				required
+			/>
+		</div>
+		<button type="submit" class="btn btn-primary" 
+				>Passwort zurückzusetzen</button
+			>
+		<div class="flex-row justify-between" style="margin-top: 10px">
+			<a class="link link-hover"
+				href="/auth/login">Einloggen</a
+			>
+		</div>
+	</form>
+</div>

src/modules/LoginModule.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { addNotification } from "@ibcornelsen/ui";
 	import { loginClient } from "#lib/login";
+	import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
+	import { fade } from "svelte/transition";
 
 	let email: string;
 	let passwort: string;
@@ -12,14 +14,7 @@
 		const response = await loginClient(email, passwort);
 
 		if (response === null) {
-			addNotification({
-				message: "Ups...",
-				subtext:
-					"Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?",
-				type: "error",
-				timeout: 6000,
-				dismissable: true,
-			});
+			errorHidden = false;
 		} else {
 			if (redirect) {
 				window.location.href = redirect;
@@ -29,6 +24,8 @@
 			window.location.href = "/dashboard";
 		}
 	}
+
+	let errorHidden = true;
 </script>
 
 <div class="mx-auto w-1/3 bg-base-200 p-8 border border-base-300 rounded-lg">
@@ -42,6 +39,7 @@
 				placeholder="nutzer@email.com"
 				name="email"
 				bind:value={email}
+				on:focus={() => (errorHidden = true)}
 				required
 			/>
 		</div>
@@ -53,13 +51,20 @@
 				placeholder="********"
 				name="passwort"
 				bind:value={passwort}
+				on:focus={() => (errorHidden = true)}
 				required
 			/>
 		</div>
+		{#if !errorHidden}
+		<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
+			<CrossCircled size={24} />
+			<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
+		</div>
+		{/if}
 		<button class="btn btn-primary" type="submit">Einloggen</button>
 		<div class="flex-row justify-between" style="margin-top: 10px">
-			<a class="link link-hover" href="/auth/signup?redirect={redirect}">Registrieren</a>
-			<a class="link link-hover" href="/user/passwort_vergessen?redirect={redirect}"
+			<a class="link link-hover" href="/auth/signup{redirect ? `?redirect=${redirect}` : ""}">Registrieren</a>
+			<a class="link link-hover" href="/auth/passwort-vergessen{redirect ? `?redirect=${redirect}` : ""}"
 				>Passwort Vergessen?</a
 			>
 		</div>

src/modules/RegisterModule.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { addNotification } from "@ibcornelsen/ui";
+	import { CrossCircled } from "radix-svelte-icons";
 	import {client} from "src/trpc";
+	import { fade } from "svelte/transition";
 
 	let passwort: string;
 	let email: string;
@@ -26,15 +28,12 @@
 
 			window.location.href = "/auth/login";
 		} catch (e) {
-			addNotification({
-				message: "Ups...",
-				subtext: "Da ist wohl etwas schiefgelaufen... Diese Email Adresse ist bereits in Benutzung, haben sie vielleicht bereits ein Konto bei uns?",
-				type: "error",
-				timeout: 0,
-				dismissable: true
-			})
+			errorHidden = false;
 		}
 	}
+
+
+	let errorHidden = true;
 </script>
 
 <div class="mx-auto w-1/3 bg-base-200 p-8 border border-base-300 rounded-lg">
@@ -86,14 +85,20 @@
 				required
 			/>
 		</div>
+		{#if !errorHidden}
+		<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
+			<CrossCircled size={24} />
+			<span class="font-semibold">Da ist wohl etwas schiefgelaufen. Diese Email Adresse ist bereits in Benutzung, haben sie vielleicht bereits ein Konto bei uns?</span>
+		</div>
+		{/if}
 		<button type="submit" class="btn btn-primary" 
 				>Registrieren</button
 			>
 		<div class="flex-row justify-between" style="margin-top: 10px">
 			<a class="link link-hover"
-				href="/auth/login?redirect={redirect}">Einloggen</a
+				href="/auth/login{redirect ? `?redirect=${redirect}` : ""}">Einloggen</a
 			>
-			<a class="link link-hover" href="/user/passwort_vergessen?redirect={redirect}">Passwort Vergessen?</a>
+			<a class="link link-hover" href="/auth/passwort-vergessen{redirect ? `?redirect=${redirect}` : ""}">Passwort Vergessen?</a>
 		</div>
 	</form>
 </div>

src/pages/auth/passwort-vergessen.astro

@@ -0,0 +1,17 @@
+---
+import PasswortVergessenModule from "../../modules/Auth/PasswortVergessenModule.svelte";
+import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
+import MinimalLayout from "#layouts/MinimalLayout.astro";
+
+const valid = await validateAccessTokenServer(Astro)
+
+if (valid) {
+	return Astro.redirect("/dashboard")
+}
+
+const redirect = Astro.url.searchParams.get("redirect")
+---
+
+<MinimalLayout title="Passwort Vergessen">
+	<PasswortVergessenModule client:load redirect={redirect}></PasswortVergessenModule>
+</MinimalLayout>

src/pages/auth/passwort-zuruecksetzen.astro

@@ -0,0 +1,21 @@
+---
+import PasswortZuruecksetzenModule from "../../modules/Auth/PasswortZuruecksetzenModule.svelte";
+import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
+import MinimalLayout from "#layouts/MinimalLayout.astro";
+
+const valid = await validateAccessTokenServer(Astro)
+
+if (valid) {
+	return Astro.redirect("/dashboard")
+}
+
+const token = Astro.url.searchParams.get("token")
+
+if (!token) {
+	return Astro.redirect("/login")
+}
+---
+
+<MinimalLayout title="Passwort Vergessen">
+	<PasswortZuruecksetzenModule token={token} client:load></PasswortZuruecksetzenModule>
+</MinimalLayout>