Merge pull request #5 from VaquitApp/add-login

feat: add login API integration
VaquitApp · May 12, 2024 · c7ed018 · c7ed018
2 parents 8e970cf + 21dd157
commit c7ed018
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 17 deletions.
diff --git a/my-app/src/app.html b/my-app/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en" data-theme="light">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐮</text></svg>">
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/my-app/src/routes/login/+page.server.ts b/my-app/src/routes/login/+page.server.ts
@@ -1,5 +1,31 @@
+import { error, fail } from '@sveltejs/kit';
 import type { Actions } from './$types';
+import { post } from '$lib/api';
 
 export const actions: Actions = {
-	default: async (event) => {}
+	default: async ({ cookies, request }) => {
+		const data = await request.formData();
+		const email = data.get('email');
+
+		if (!email) {
+			throw error(400, 'Email is required');
+		}
+
+		const password = data.get('password');
+
+		const body = await post('user/login', {
+			email: email,
+			password: password
+		});
+
+		if (body.errors) {
+			throw fail(400, body);
+		}
+
+		// save JWT in cookie
+		const value = body.id;
+		cookies.set('jwt', value, { path: '/' });
+
+		return { success: true };
+	}
 };
diff --git a/my-app/src/routes/login/+page.svelte b/my-app/src/routes/login/+page.svelte
@@ -1,16 +1,33 @@
-<form method="POST">
-	<fieldset>
-		<label>
-			Ingrese su email
-			<input type="email" name="email" placeholder="Email" />
-		</label>
-		<label>
-			Ingrese su contraseña
-			<input type="password" name="password" placeholder="Contaseña" />
-			<a href="/recover">Olvidé mi contraseña</a>
-		</label>
-	</fieldset>
+<script>
+	import { title } from '$lib';
 
-	<button type="submit">Ingresar</button>
-	<a href="/register">Registrarme</a>
-</form>
+	/** @type {import('./$types').ActionData} */
+	export let form;
+</script>
+
+<svelte:head>
+	<title>{title} - Login</title>
+</svelte:head>
+
+{#if form?.success}
+	<!-- this message is ephemeral; it exists because the page was rendered in
+		   response to a form submission. it will vanish if the user reloads -->
+	<p>Successfully logged in!</p>
+{:else}
+	<form method="POST">
+		<fieldset>
+			<label>
+				Ingrese su email
+				<input type="email" name="email" placeholder="Email" />
+			</label>
+			<label>
+				Ingrese su contraseña
+				<input type="password" name="password" placeholder="Contaseña" />
+				<a href="/recover">Olvidé mi contraseña</a>
+			</label>
+		</fieldset>
+
+		<button type="submit">Ingresar</button>
+		<a href="/register">Registrarme</a>
+	</form>
+{/if}