frontend signup validation

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

@@ -1,10 +1,12 @@
 import * as api from '../../lib/api';
-import { error, fail } from '@sveltejs/kit';
-// export async function load({ cookies }) {
-//     const { data, error } = await api.signup(cookies.username, cookies.password, cookies.email);
-//     return { data, error };
-// }
+import { redirect, fail } from '@sveltejs/kit';
+import { MAX_COOKIE_AGE } from '$lib/constants';
 
+export async function load({ locals }) {
+	if (locals.user) {
+		throw redirect(307, '/');
+	}
+}
 export const actions = {
 	default: async ({ cookies, request }) => {
 		const data = await request.formData();
@@ -20,15 +22,12 @@ export const actions = {
 
 		if (responseData.error) {
 			const errorDetail = responseData.error.detail ? responseData.error.detail : 'Unknown error';
-			throw error(400, { message: errorDetail.toString() });
-		} else {
-			if (responseData.data) {
-				cookies.set('sessionid', responseData.data['session-id']?.toString());
-			} else {
-				throw error(400, { message: 'Response data is undefined' });
-			}
+			const errorMessage = Array.isArray(errorDetail) ? errorDetail[0].msg : errorDetail;
+			console.log('error detail is ', errorMessage);
+			throw fail(400, { message: errorMessage });
 		}
-
-		console.log('response data is ', responseData);
+		const value = btoa(JSON.stringify(responseData));
+		cookies.set('user', value, { path: '/', maxAge: MAX_COOKIE_AGE });
+		throw redirect(300, '/');
 	}
 };

src/routes/signup/+page.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import BasicNavbar from '$lib/components/BasicNavbar.svelte';
-	import { onMount } from 'svelte';
-	export let form: any = undefined;
-	$: console.log(form);
+
+	// variables for validation
+	let username: string = '';
+	let pass: string = '';
+	let confpass: string = '';
+	let tncagreed: boolean = false;
+	export let form;
 </script>
 
 <BasicNavbar />
@@ -14,7 +18,7 @@
 		>
 			<strong class="text-6xl font-extrabold">Sign Up</strong>
 
-			<form method="POST" use:enhance>
+			<form method="POST" use:enhance autocomplete="off">
 				<div class="space-y-4 py-4">
 					<!-- Username -->
 					<div class="w-full flex-col space-y-2">
@@ -26,6 +30,7 @@
 							placeholder="Username"
 							class=" w-full variant-form-material"
 							required
+							bind:value={username}
 						/>
 					</div>
 					<!-- Email ID -->
@@ -49,18 +54,20 @@
 							name="password"
 							placeholder="*********"
 							class=" w-full variant-form-material"
+							bind:value={pass}
 							required
 						/>
 					</div>
 					<!-- Confirm Password -->
 					<div class="w-full flex-col space-y-2">
-						<span class="text-xl">Password</span>
+						<span class="text-xl">Confirm Password</span>
 						<input
 							type="password"
 							id="confpass"
 							name="confpass"
 							placeholder="*********"
 							class=" w-full variant-form-material"
+							bind:value={confpass}
 							required
 						/>
 					</div>
@@ -73,9 +80,27 @@
 							<a class="text-primary-800-100-token" href="/login"> Login Here</a>
 						</strong>
 					</div>
+					<div class="flex space-x-2">
+						<label for="tncagreed" class="cursor-pointer">
+							<input
+								type="checkbox"
+								id="tncagreed"
+								name="tncagreed"
+								bind:checked={tncagreed}
+								required
+								class="mr-2"
+							/>
+							I agree to the
+						</label>
+						<strong><a class="text-primary-800-100-token" href="#">Terms and Conditions</a></strong>
+					</div>
 					<!-- Submit Button -->
 					<div>
-						<button class="btn variant-filled">Sign Up</button>
+						{#if /\s/.test(username) || pass.length < 8 || pass != confpass}
+							<button class="btn variant-filled" disabled>Sign Up</button>
+						{:else}
+							<button class="btn variant-filled">Sign Up</button>
+						{/if}
 					</div>
 				</div>
 			</form>