fix: auth error handling (#144)

CONTRIBUTING.md

@@ -2,26 +2,35 @@
 
 Thank you for considering contributing to this project! All contributors, big or small, are welcomed. To make the contribution process as smooth as possible, please follow the guidelines below.
 
-1. Fork the repository: Start by forking the repository to your own GitHub account. This will create a copy of the repository under your username.
-2. Create a new branch: Clone the forked repository to your local machine and create a new branch for your feature or bug fix.
+## Prerequisites
+
+- Bun
+
+## Steps
+
+1. **Fork the repository:** Start by forking the repository to your own GitHub account. This will create a copy of the repository under your username.
+2. **Create a new branch:** Clone the forked repository to your local machine and create a new branch for your feature or bug fix.
    ```bash
-   git clone https://github.com/goniszewski/grimoire/repository.git
+   git clone https://github.com/your-username/grimoire.git
    cd grimoire
    git checkout -b your-branch-name
    ```
-3. Make the changes: Make the necessary changes to the codebase, ensuring that you follow any coding style guidelines mentioned in the project documentation or README file.
-4. Test your changes: Thoroughly test your changes to ensure that they do not break existing functionality and introduce new bugs.
-5. Commit your changes: Once you are satisfied with your modifications, commit them using a descriptive commit message following the rules of [Semantic Commit Messages](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716).
+3. **Install Deps** run `bun install` to install the deps
+4. **Start the server:** if you are on \*nix systems run `./run-dev.sh`. Might need to chmod it before. On windows just `bun --bun run dev` should work.
+5. **Run migrations:** `bun run-migrations` to run migrations and have base DB setup.
+6. **Make the changes:** Make the necessary changes to the codebase, ensuring that you follow any coding style guidelines mentioned in the project documentation or README file.
+7. **Test your changes:** Thoroughly test your changes to ensure that they do not break existing functionality and introduce new bugs.
+8. **Commit your changes:** Once you are satisfied with your modifications, commit them using a descriptive commit message following the rules of [Semantic Commit Messages](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716).
    ```bash
    git add .
    git commit -m "fix: Your detailed description of your changes."
    ```
-6. Push to your branch: Push your changes to your forked repository on GitHub.
+9. **Push to your branch:** Push your changes to your forked repository on GitHub.
    ```bash
    git push origin your-branch-name
    ```
-7. Submit a Pull Request: Navigate to the GitHub page of the original project and submit a pull request with a clear description of your changes.
-8. Wait for review: Patiently wait for the maintainers to review your pull request. They might ask for additional information or changes, which you can address by updating your branch and submitting an updated pull request.
-9. Let it spark ✨ Yay, your contribution has been accepted and merged into the project! Thank you for making this project better 🤝
+10. **Submit a Pull Request:** Navigate to the GitHub page of the original project and submit a pull request with a clear description of your changes.
+11. **Wait for review:** Patiently wait for the maintainers to review your pull request. They might ask for additional information or changes, which you can address by updating your branch and submitting an updated pull request.
+12. **Let it spark** ✨ Yay, your contribution has been accepted and merged into the project! Thank you for making this project better 🤝
 
 Thank you for contributing to this project! We appreciate your efforts in making it even better. If you have any questions or need further clarification, feel free to reach out to us.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "grimoire",
-	"version": "0.4.1-hotfix.3",
+	"version": "0.4.2",
 	"description": "Bookmark manager for the wizards 🧙",
 	"author": "Robert Goniszewski <robert@goniszewski.com>",
 	"main": "./build/index.js",

src/lib/components/ThemeSwitch/ThemeSwitch.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
-	import { themes } from '$lib/enums/themes';
-	import type { User } from '$lib/types/User.type';
-	import { IconMoon, IconSunHigh } from '@tabler/icons-svelte';
+import { enhance } from '$app/forms';
+import { themes } from '$lib/enums/themes';
+import type { User } from '$lib/types/User.type';
+import { IconMoon, IconSunHigh } from '@tabler/icons-svelte';
 
-	export let user: User | null = null;
-	let themeSwitchForm: HTMLFormElement;
+export let user: User | null = null;
+let themeSwitchForm: HTMLFormElement;
 
-	$: theme = user?.settings?.theme ?? 'light';
+$: theme = user?.settings?.theme ?? 'light';
 
-	function handleThemeChange(theme: keyof typeof themes) {
-		document.documentElement.setAttribute('data-theme', themes[theme]);
-		document.cookie = `theme=${theme}; ${document.cookie}`;
-	}
+function handleThemeChange(theme: keyof typeof themes) {
+	document.documentElement.setAttribute('data-theme', themes[theme]);
+	document.cookie = `theme=${theme}; ${document.cookie}; SameSite=Lax`;
+}
 </script>
 
 <form
@@ -25,16 +25,14 @@
 		handleThemeChange(theme);
 
 		return async () => {};
-	}}
->
+	}}>
 	<label class="btn btn-circle swap swap-rotate btn-sm">
 		<input
 			id="theme"
 			name="theme"
 			type="checkbox"
 			checked={theme === 'dark'}
-			on:change={() => themeSwitchForm.requestSubmit()}
-		/>
+			on:change={() => themeSwitchForm.requestSubmit()} />
 		<IconSunHigh size={20} class="swap-on" />
 		<IconMoon size={20} class="swap-off" />
 	</label>

src/routes/login/+page.server.ts

@@ -6,6 +6,7 @@ import { fail, redirect } from '@sveltejs/kit';
 
 import type { Actions } from './$types';
 
+const USER_NOT_FOUND = 'User not found';
 const INVALID_USERNAME_OR_PASSWORD = 'Invalid username or password';
 export const actions: Actions = {
 	default: async (event) => {
@@ -16,17 +17,10 @@ export const actions: Actions = {
 		const existingUser = await getUserWithoutSerialization(login);
 
 		if (!existingUser) {
-			const randomMs = Math.floor(Math.random() * 1000);
-
-			return new Promise((resolve) => {
-				setTimeout(() => {
-					resolve(
-						fail(401, {
-							login: login,
-							message: INVALID_USERNAME_OR_PASSWORD
-						})
-					);
-				}, randomMs);
+			return fail(401, {
+				login: login,
+				invalid: true,
+				message: USER_NOT_FOUND
 			});
 		}
 
@@ -40,6 +34,7 @@ export const actions: Actions = {
 		if (!validPassword) {
 			return fail(401, {
 				login: login,
+				invalid: true,
 				message: INVALID_USERNAME_OR_PASSWORD
 			});
 		}

src/routes/login/+page.svelte

@@ -7,7 +7,7 @@ export let form: HTMLFormElement;
 {#if form?.invalid}
 	<div role="alert" class="alert alert-error">
 		<IconExclamationCircle />
-		<span> Incorrect credentials. </span>
+		<span> {form.message} </span>
 	</div>
 {/if}
 <div class="mt-24 w-full">

src/routes/signup/+page.server.ts

@@ -1,7 +1,9 @@
 import config from '$lib/config';
 import { createCategory } from '$lib/database/repositories/Category.repository';
 import {
-    createUser, getUserByUsername, getUserCount
+	createUser,
+	getUserByUsername,
+	getUserCount
 } from '$lib/database/repositories/User.repository';
 import { lucia } from '$lib/server/auth';
 import { createSlug } from '$lib/utils/create-slug';
@@ -43,7 +45,9 @@ export const actions: Actions = {
 			username: Joi.string().min(3).max(31),
 			email: Joi.string().email().optional(),
 			password: Joi.string().min(6).max(255),
-			passwordConfirm: Joi.string().valid(Joi.ref('password'))
+			passwordConfirm: Joi.string().valid(Joi.ref('password')).messages({
+				'any.only': 'Passwords do not match.'
+			})
 		});
 
 		const { error, value } = validationSchema.validate({
@@ -55,8 +59,14 @@ export const actions: Actions = {
 		});
 
 		if (error) {
+			const fieldName = error.details[0].path[0] as string;
+
 			return fail(400, {
-				message: error!.message
+				message: error!.message,
+				invalid: true,
+				[fieldName]: {
+					message: error!.message
+				}
 			});
 		}
 
@@ -73,6 +83,10 @@ export const actions: Actions = {
 
 		if (userExists) {
 			return fail(400, {
+				username: {
+					message: 'User with this username already exists'
+				},
+				invalid: true,
 				message: 'User with this username / email already exists'
 			});
 		}

src/routes/signup/+page.svelte

@@ -2,7 +2,22 @@
 import { applyAction, enhance } from '$app/forms';
 import { page } from '$app/stores';
 
-export let form: HTMLFormElement;
+interface FormErrors {
+	invalid?: boolean;
+	username?: { message: string };
+	name?: { message: string };
+	email?: { message: string };
+	password?: { message: string };
+	passwordConfirm?: { message: string };
+	data?: {
+		username?: string;
+		name?: string;
+		email?: string;
+	};
+}
+
+export let form: FormErrors | null;
+
 </script>
 
 <div class="mt-24 w-full">
@@ -19,37 +34,48 @@ export let form: HTMLFormElement;
 			use:enhance={() => {
 				return async ({ result }) => {
 					await applyAction(result);
+					console.log('signup', result);
 				};
 			}}>
 			<div class="form-control mx-auto max-w-xs gap-4">
 				<div>
-					<label class="label" for="username">
-						<span class="label-text">Username</span>
-						<span class="label-text-alt"> (required)</span>
+					<label class="label" for="name">
+						<span class="label-text">Display name</span>
 					</label>
 					<input
 						type="text"
-						name="username"
+						name="name"
 						placeholder="Type here"
 						required
 						class={`input input-bordered w-full max-w-xs ${
-							form?.missing && form?.username ? 'input-error' : ''
+							form?.invalid && form?.name ? 'input-error' : ''
 						}`} />
-					{#if (form?.missing && form?.username) || (form?.invalid && form?.username)}
+					{#if form?.invalid && form?.name}
+
 						<p class="text-error">
-							{form?.missing ? 'This field is required.' : form?.username?.message}
+							{form?.invalid ? form?.name.message : 'Invalid display name.'}
 						</p>
 					{/if}
 				</div>
 				<div>
-					<label class="label" for="name">
-						<span class="label-text">Display name</span>
+					<label class="label" for="username">
+						<span class="label-text">Username</span>
+						<span class="label-text-alt"> (required)</span>
 					</label>
 					<input
 						type="text"
-						name="name"
+						name="username"
 						placeholder="Type here"
-						class="input input-bordered w-full max-w-xs" />
+						required
+						class={`input input-bordered w-full max-w-xs ${
+							form?.invalid && form?.username ? 'input-error' : ''
+						}`} />
+					{#if form?.invalid && form?.username}
+						<p class="text-error">
+							{form?.invalid ? form?.username.message : 'Invalid username.'}
+						</p>
+					{/if}
+
 				</div>
 				<div>
 					<label class="label" for="email">
@@ -61,7 +87,13 @@ export let form: HTMLFormElement;
 						name="email"
 						required
 						placeholder="Type here"
-						class="input input-bordered w-full max-w-xs" />
+						class={`input input-bordered w-full max-w-xs ${
+							form?.invalid && form?.email ? 'input-error' : ''
+						}`} />
+					{#if form?.invalid && form?.email}
+						<p class="text-error">{form?.invalid ? form?.email.message : 'Invalid email.'}</p>
+					{/if}
+
 				</div>
 				<div>
 					<label class="label" for="password">
@@ -74,13 +106,12 @@ export let form: HTMLFormElement;
 						required
 						placeholder="Type here"
 						class={`input input-bordered w-full max-w-xs ${
-							(form?.missing && form?.password) || (form?.invalid && form?.password)
-								? 'input-error'
-								: ''
+							form?.invalid && form?.password?.message ? 'input-error' : ''
 						}`} />
-					{#if (form?.missing && form?.password) || (form?.invalid && form?.password)}
+					{#if form?.invalid && form?.password}
+
 						<p class="text-error">
-							{form?.missing ? 'This field is required.' : form?.password?.message}
+							{form?.invalid ? form?.password?.message : 'Invalid password.'}
 						</p>
 					{/if}
 				</div>
@@ -95,15 +126,12 @@ export let form: HTMLFormElement;
 						placeholder="Type here"
 						required
 						class={`input input-bordered w-full max-w-xs ${
-							(form?.missing && form?.passwordConfirm) || (form?.invalid && form?.password)
-								? 'input-error'
-								: ''
+							form?.invalid && form?.passwordConfirm ? 'input-error' : ''
 						}`} />
-					{#if (form?.missing && form?.passwordConfirm) || (form?.invalid && (form?.passwordConfirm || form?.password))}
+					{#if form?.invalid && form?.passwordConfirm}
+
 						<p class="text-error">
-							{form?.missing
-								? 'This field is required.'
-								: form?.passwordConfirm?.message || form?.password?.message}
+							{form?.invalid ? form?.passwordConfirm.message : 'Invalid password.'}
 						</p>
 					{/if}
 				</div>