feat: add a way to reset password

README.md

@@ -2,37 +2,25 @@
 
 Another reddit clone to train me.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
 ## Developing
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Sveltekit
-
 ```sh
-npm run dev
+pnpm run dev
+```
 
-# or start the server and open the app in a new browser tab
+Pocketbase
-npm run dev -- --open
+```sh
+pnpm run db_dev
+```
+
+SMTP Server
+```sh
+docker run --rm -it -p 5000:80 -p 2525:25 rnwood/smtp4dev
 ```
 
 ## Building
 
-To create a production version of your app:
-
 ```sh
-npm run build
+pnpm run build
-```
+```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

src/lib/schemas/passwordReset.ts

@@ -0,0 +1,5 @@
+import * as z from 'zod';
+
+export const resetPasswordSchema = z.object({
+    email: z.email()
+})

src/routes/auth/resetPassword/+page.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { pb } from '$lib/db.svelte';
+	import { goto } from '$app/navigation';
+	import { resetPasswordSchema } from '$lib/schemas/passwordReset';
+	import { ZodError } from 'zod';
+	import { ClientResponseError } from 'pocketbase';
+
+	let error = '';
+
+	const form = {
+		email: ''
+	};
+
+	interface FormErrors {
+		email: boolean;
+		[key: string]: boolean;
+	}
+
+	const formErrors = {
+		email: false
+	} as FormErrors;
+
+	function validateForm() {
+		try {
+			resetPasswordSchema.parse(form);
+			return true;
+		} catch (e) {
+			if (e instanceof ZodError) {
+				error = e.issues[0].message;
+				formErrors[e.issues[0].path[0] as string] = true;
+				return false;
+			}
+		}
+	}
+
+	function handleDBErrors(e: ClientResponseError) {
+		if (Object.keys(e.data).length > 0) {
+			const element = Object.keys(e.data.data)[0];
+			formErrors[element] = true;
+			const dbError = e.data.data[element];
+			error = dbError.message;
+		} else {
+			formErrors.email = true;
+			formErrors.password = true;
+			error = e.message;
+		}
+	}
+
+	async function resetPassword() {
+		// reset all errors
+		error = '';
+		Object.keys(formErrors).forEach((i) => {
+			formErrors[i] = false;
+		});
+
+		if (validateForm()) {
+			try {
+                await pb.collection("users").requestPasswordReset(form.email)
+				await goto('/');
+				window.location.reload();
+			} catch (e) {
+				console.log(e);
+				if (e instanceof ClientResponseError) {
+					handleDBErrors(e);
+				}
+			}
+		}
+	}
+</script>
+
+<Card.Root class="absolute top-[50%] left-[50%] w-full max-w-sm translate-[-50%]">
+	<Card.Header>
+		<Card.Title>Password reset</Card.Title>
+		<Card.Description>Enter your email below to reset your password</Card.Description>
+		<Card.Action>
+			<Button variant="link" href="/auth/login">Login</Button>
+		</Card.Action>
+	</Card.Header>
+	<Card.Content>
+		<form>
+			<div class="flex flex-col gap-6">
+				<div class="grid gap-2">
+					<Label for="email">Email</Label>
+					<Input
+						id="email"
+						type="email"
+						placeholder="someone@example.com"
+						required
+						aria-invalid={formErrors.email}
+						bind:value={form.email}
+					/>
+				</div>
+			</div>
+		</form>
+	</Card.Content>
+	<Card.Footer class="flex-col gap-2">
+		<Button type="submit" class="w-full cursor-pointer" onclick={resetPassword}>Reset</Button>
+		<p class="mt-4 text-red-700">{error}</p>
+	</Card.Footer>
+</Card.Root>