frontend login validation

idkbrowby · Sep 30, 2023 · b65ae3d · b65ae3d
1 parent ef26a1d
commit b65ae3d
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 7 deletions.
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="wintry">
+	<body data-sveltekit-preload-data="hover" data-theme="hamlindigo">
 		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/index.ts b/src/lib/index.ts
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import hljs from 'highlight.js';
 	import 'highlight.js/styles/github-dark.css';
 	import { storeHighlightJs } from '@skeletonlabs/skeleton';
+	import { page } from '$app/stores';
 	storeHighlightJs.set(hljs);
 
 	// asset loading
@@ -18,9 +19,11 @@
 </script>
 
 <svelte:head>
-	{#each images as item}
-		<link as="image" href={item} rel="preload" class="h-full rounded-r-lg" />
-	{/each}
+	{#if !page.user}
+		{#each images as item}
+			<link as="image" href={item} rel="preload" class="h-full rounded-r-lg" />
+		{/each}
+	{/if}
 </svelte:head>
 <AppShell>
 	<slot />

diff --git a/src/routes/login/+page.server.js b/src/routes/login/+page.server.js
@@ -0,0 +1,35 @@
+import * as api from '../../lib/api';
+import { fail, redirect } from '@sveltejs/kit';
+import { MAX_COOKIE_AGE } from '../../lib/constants.ts';
+
+export async function load({ locals }) {
+	if (locals.user) {
+		throw redirect(300, '/');
+	}
+}
+export const actions = {
+	default: async ({ cookies, request }) => {
+		const data = await request.formData();
+		const username = data.get('username')?.toString();
+		const password = data.get('password')?.toString();
+
+		if (!username || !password) {
+			return fail(400, { username, password });
+		}
+		const res = await api.login(username, password);
+		const responseData = res;
+
+		if (responseData.error) {
+			const errorDetail = responseData.error.detail ? responseData.error.detail : 'Unknown error';
+			return fail(400, { message: errorDetail });
+		} else {
+			if (responseData.data) {
+				const value = btoa(JSON.stringify(responseData));
+				cookies.set('user', value, { path: '/', maxAge: MAX_COOKIE_AGE });
+				throw redirect(300, '/');
+			} else {
+				return fail(400, { message: 'Response data is undefined' });
+			}
+		}
+	}
+};
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
@@ -8,6 +8,8 @@
 	// picture switching function and attributes
 	let picture: string = 'assets/image-1.png';
 	let picNum: number = 1;
+	let username: string = '';
+	let password: string = '';
 
 	function pictureSwitch(n: number): number {
 		if (n < 5) {
@@ -54,6 +56,7 @@
 							name="username"
 							placeholder="Username"
 							class=" w-full variant-form-material"
+							bind:value={username}
 							required
 						/>
 					</div>
@@ -66,6 +69,7 @@
 							name="password"
 							placeholder="*********"
 							class=" w-full variant-form-material"
+							bind:value={password}
 							required
 						/>
 					</div>
@@ -80,13 +84,17 @@
 						>
 					</div>
 					{#if form?.message}
-						<div class=" variant-filled-warning flex p-2 m-auto">
+						<div class=" variant-filled-error flex p-2 m-auto">
 							<strong>Password or Username in incorrect</strong>
 						</div>
 					{/if}
 					<!-- Submit button -->
 					<div class="pb-4">
-						<button class="btn variant-filled">Login</button>
+						{#if /\s/.test(username) || password.length < 8}
+							<button class="btn variant-filled" disabled>Login</button>
+						{:else}
+							<button class="btn variant-filled">Login</button>
+						{/if}
 					</div>
 				</div>
 			</form>