separate routes made as edge functions, added functionality to add mo…

…ney to logged in user

src/routes/+error.svelte

@@ -4,5 +4,7 @@
 
 {#if $page.error}
 	<h1 class="text-5xl text-center text-red-500">{$page.error.message}</h1>
-	<a href="/" role="button" class="btn">Back to Home 🚀!</a>
+	<div class="flex items-center justify-center">
+		<a href="/" role="button" class="btn btn-md">Back to Home 🚀!</a>
+	</div>
 {/if}

src/routes/+layout.svelte

@@ -21,18 +21,13 @@
 
 <main>
 	<Toaster />
-	<div class="flex justify-center items-center mb-20">
+	<div class="flex justify-center items-center mb-20 mt-40">
 		<img src="/favicon.svg" alt="logo" class="img" />
 	</div>
 	<slot />
 </main>
 
 <style>
-	main {
-		height: 100vh;
-		display: grid;
-		place-content: center;
-	}
 	.img {
 		max-width: 14rem;
 		min-width: 1rem;

src/routes/+page.server.ts

@@ -5,34 +5,37 @@ let loadeddatainFormAction: string;
 let newAmount: number;
 
 export const actions: Actions = {
-	payto: async ({ request }) => {
+	add: async ({ request, locals }) => {
 		const formdata = await request.formData();
 		const amount = <string>(<unknown>formdata.get('amount')); // type casting the data.get('amount') to number to be able to assign to the variable
-		const vendorName = formdata.get('vendorName');
+		const session = await locals.getSession();
 
 		const { data: loadData, error: loadErr } = await supabase
 			.from('profiles')
 			.select('balance')
-			.eq(`raw_user_meta_data->username`, JSON.stringify(vendorName))
+			.eq('id', session?.user.id)
 			.single(); // Returns the data in a single object instead of an array(really cool find from the docs :D)
-		if (loadErr)
+		if (loadErr) {
 			return fail(500, {
 				err: loadErr,
 				message: 'Vendor not found. Please try again later.'
 			});
-		else loadeddatainFormAction = loadData.balance;
+		} else {
+			loadeddatainFormAction = loadData.balance;
+		}
 
 		newAmount = parseFloat(amount) + parseFloat(loadeddatainFormAction);
 
 		const { error: err } = await supabase
 			.from('profiles')
 			.update({ balance: newAmount })
-			.eq('raw_user_meta_data->username', JSON.stringify(vendorName));
-		if (err)
+			.eq('id', session?.user.id);
+		if (err) {
 			return fail(500, {
 				err: loadErr,
 				message: 'Oops! The transaction failed. Please try again later.'
 			});
+		}
 	} //updating the balance of the vendor
 };
 

src/routes/+page.svelte

@@ -6,19 +6,28 @@
 	import QRCode from 'qrcode';
 	import { onMount } from 'svelte';
 	export let data: PageData;
-	export let form: ActionData;
+	//export let form: ActionData;
 
-	if (form?.err) {
-		toast.error(form.err.message);
-	}
 	const formValidation: SubmitFunction = ({ data, cancel }) => {
-		const { amount, vendorName } = Object.fromEntries(data);
-		if (amount.length < 1 || vendorName.length < 1) {
+		const { amount } = Object.fromEntries(data);
+		if (amount.length < 1) {
 			toast.error(' Amount or Vendor Username cannot be empty!', {
 				style: 'border-radius: 200px; background: #333; color: #fff;'
 			});
 			cancel();
 		}
+
+		return async ({ result, update }) => {
+			if (result.type === 'success') {
+				toast.success('Successfully Transferred 🤑!', {
+					style: 'border-radius: 200px; background: #333; color: #fff;'
+				});
+				await update();
+			} else
+				toast.error('Something went wrong try again later', {
+					style: 'border-radius: 200px; background: #333; color: #fff;'
+				});
+		};
 	};
 	let qrDataURL: string;
 	let uuid: string;
@@ -56,14 +65,14 @@
 						data.userBalance?.balance}
 				</p>
 			{/if}
-			<button class="btn mx-2" on:click={toggleBalanceView}
+			<button class="btn btn-md mx-2" on:click={toggleBalanceView}
 				>{#if showParagraph} Hide Balance {:else} Show Balance{/if}</button
 			>
 			<div class="flex items-center justify-center max-w-lg">
 				<img src={qrDataURL} alt="qrcode" class="rounded-md" />
 			</div>
 			<form method="POST" action="/logout" class="flex items-center justify-center">
-				<button class="btn px-14" type="submit"> Logout </button>
+				<button class="btn btn-md px-14" type="submit"> Logout </button>
 			</form>
 		{:else if data.session !== null && data.session.user.user_metadata.name !== null}
 			<p class="text-2xl text-center mx-1">
@@ -75,44 +84,40 @@
 						data.userBalance?.balance}
 				</p>
 			{/if}
-			<button class="btn mx-2" on:click={toggleBalanceView}
+			<button class="btn btn-md mx-2" on:click={toggleBalanceView}
 				>{#if showParagraph} Hide Balance {:else} Show Balance{/if}</button
 			>
 			<div class="flex justify-center items-center">
 				<div>
 					<form
 						method="POST"
-						action="?/payto"
-						class="grid grid-cols-1 sm:grid-cols-2 gap-4"
+						action="?/add"
+						class="flex justify-center items-center gap-4"
 						use:enhance={formValidation}
 					>
 						<label class="input-group">
-							<span>₹</span><input
+							<span>₹</span>
+							<input
 								type="number"
 								name="amount"
 								placeholder="Amount"
-								class="input input-bordered w-full"
-							/></label
-						>
-						<input
-							type="text"
-							name="vendorName"
-							placeholder="Vendor Username"
-							class="input input-bordered w-full"
-						/>
-						<div class="sm:col-span-2">
-							<button class="btn w-full" type="submit">Pay</button>
+								class="input input-bordered input-lg w-full max-w-xs col-span-1"
+							/>
+						</label>
+
+						<div>
+							<button class="btn btn-md w-full" type="submit">Add Money to your account</button>
 						</div>
 					</form>
 					<form method="POST" action="/logout" class="flex justify-center items-center mt-4">
-						<button type="submit" class="btn w-full">Logout</button>
+						<button type="submit" class="btn btn-md w-full">Logout</button>
 					</form>
 				</div>
 			</div>
 		{:else}
 			<div class="flex justify-center gap-7 mt-2">
-				<a href="/login" role="button" class="btn item text-2xl">Login</a>
-				<a href="/register/vendor" role="button" class="btn text-2xl"> Register</a>
+				<a href="/login" role="button" class="btn btn-md item text-2xl">Login</a>
+				<a href="/register/vendor" role="button" class="btn btn-md text-2xl"> Register</a>
 			</div>
 		{/if}
 	</div>

src/routes/confirmemail/+page.svelte

@@ -10,7 +10,7 @@
 		</h1>
 	</div>
 {:else}
-	<a href="/" role="button" class="btn text-l text-center font-bold"
+	<a href="/" role="button" class="btn btn-md text-l text-center font-bold"
 		>Your email is already confirmed! Click here to redirect to login page!</a
 	>
 {/if}

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

@@ -1,6 +1,11 @@
 import { AuthApiError, type Provider } from '@supabase/supabase-js';
 import { fail, redirect } from '@sveltejs/kit';
 import type { Actions } from './$types';
+import type { Config } from '@sveltejs/adapter-vercel';
+
+export const config: Config = {
+	runtime: 'edge'
+};
 
 export const actions: Actions = {
 	login: async ({ request, locals, url }) => {
@@ -25,9 +30,8 @@ export const actions: Actions = {
 
 		if (err) {
 			if (err instanceof AuthApiError && err.status === 400) {
-				return fail(400, { err: err, message: 'Invalid email or password' });
-			} else return fail(500, { err: err, message: 'Oops, something went wrong!' });
-		}
-		throw redirect(303, '/');
+				return fail(400, { message: 'Invalid email or password' });
+			} else return fail(500, { message: 'Oops, something went wrong!' });
+		} else throw redirect(303, '/');
 	}
 };

src/routes/login/+page.svelte

@@ -4,8 +4,10 @@
 	import type { ActionData, SubmitFunction } from './$types';
 	import toast from 'svelte-french-toast';
 
-	if (form?.err) {
-		toast.error(form.err.message);
+	if (form?.message) {
+		toast.error(form.message, {
+			style: 'border-radius: 200px; background: #333; color: #fff;'
+		});
 	}
 	const formValidation: SubmitFunction = ({ data, cancel }) => {
 		const { email, password } = Object.fromEntries(data);
@@ -36,21 +38,21 @@
 			<input
 				type="text"
 				name="email"
-				class="input input-bordered w-full max-w-xs"
+				class="input input-bordered input-lg w-full max-w-xs"
 				placeholder="Email"
 			/>
 
 			<input
 				type="password"
 				name="password"
-				class="input input-bordered w-full max-w-xs"
+				class="input input-bordered input-lg w-full max-w-xs"
 				placeholder="Password"
 			/>
-			<button type="submit" class="btn">Login as Vendor</button>
+			<button type="submit" class="btn btn-md">Login as Vendor</button>
 		</form>
 		<form class="oauth flex justify-center items-center mt-4" method="POST" use:enhance>
 			<button
-				class="btn"
+				class=" btn btn-md"
 				type="submit"
 				formaction="?/login&provider=google"
 				data-sveltekit-preload-data

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

@@ -1,6 +1,11 @@
 import { error, redirect } from '@sveltejs/kit';
-import type { Actions, RequestEvent } from './$types';
-//import type {Actions} from 'module';
+import type { Actions } from './$types';
+import type { Config } from '@sveltejs/adapter-vercel';
+
+export const config: Config = {
+	runtime: 'edge'
+};
+
 export const actions: Actions = {
 	default: async ({ locals }) => {
 		const { error: err } = await locals.supabase.auth.signOut();

src/routes/payto/[id]/+page.server.ts

@@ -1,6 +1,11 @@
 import type { PageServerLoad, Actions } from './$types';
 import { supabase } from '$lib/supabaseClient';
 import { fail } from '@sveltejs/kit';
+import type { Config } from '@sveltejs/adapter-vercel';
+
+export const config: Config = {
+	runtime: 'edge'
+};
 let loadeddatainFormAction: string; // defined a variable so that I can load the vendorBalance only when action is triggered and not on page load
 let newAmount: number;
 export const actions: Actions = {

src/routes/payto/[id]/+page.svelte

@@ -22,7 +22,8 @@
 				toast.success('Successfully Transferred 🤑!', {
 					style: 'border-radius: 200px; background: #333; color: #fff;'
 				});
-			} else await update();
+				await update();
+			}
 		};
 	};
 </script>
@@ -45,25 +46,25 @@
 						name="amount"
 						id="amount"
 						placeholder="Amount"
-						class="input input-bordered w-full"
+						class="input input-bordered input-lg w-full max-w-xs"
 					/>
 				</label>
 			</div>
-			<button type="submit" class="btn w-full mt-4 text-xl">Pay</button>
+			<button type="submit" class="btn btn-md w-full mt-4 text-xl">Pay</button>
 		</form>
 	</div>
 {:else if !data.session}
 	<div class="flex justify-center items-center custom-height">
 		<div class="grid grid-rows-2 grid-cols-1 gap-4 text-center px-4">
 			<h1 class="alert alert-error font-bold text-xl">❌ Please login first to make a payment!</h1>
-			<a href="/login" role="button" class="btn text-xl">Login</a>
+			<a href="/login" role="button" class="btn btn-md text-xl">Login</a>
 		</div>
 	</div>
 {:else}
 	<div class="flex justify-center items-center custom-height">
 		<div class="grid grid-rows-2 grid-cols-1 gap-4 text-center px-4">
 			<h1 class="alert alert-error font-bold text-xl">❌ Invalid Vendor ID <br /> 😖</h1>
-			<a href="/" role="button" class="btn text-l">Pay Using Vendor Name</a>
+			<a href="/" role="button" class="btn btn-md text-l">Pay Using Vendor Name</a>
 		</div>
 	</div>
 {/if}

src/routes/register/vendor/+page.server.ts

@@ -11,7 +11,7 @@ export const actions: Actions = {
 		const email = body.get('email');
 		const password = body.get('password');
 
-		const { data, error: err } = await locals.supabase.auth.signUp({
+		const { error: err } = await locals.supabase.auth.signUp({
 			email: email as string,
 			password: password as string,
 			options: {
@@ -21,11 +21,14 @@ export const actions: Actions = {
 				}
 			}
 		});
-		if (err) {
-			if (err instanceof AuthApiError && err.status === 400) {
-				return fail(400, { error: 'Invalid email or password!' });
-			}
-			return fail(500, { error: 'Oops something went wrong , Please try again later!' });
+		if (err instanceof AuthApiError && err.status === 400) {
+			console.log(err);
+			return fail(400, { data: email, error: JSON.stringify(err) });
+		} else if (err?.status === 500) {
+			return fail(500, {
+				data: err,
+				error: 'Oops something went wrong , Please try again later!'
+			});
 		}
 
 		throw redirect(303, '/confirmemail');