Merge branch 'master' of https://github.com/prokawsar/paper-calc

prokawsar · Jul 24, 2024 · 6ddcb83 · 6ddcb83
2 parents ace477b + 0ba11b8
commit 6ddcb83
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 17 deletions.
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/logo.jpeg" />
 		<meta name="viewport" content="width=device-width" />
 		<link
 			rel="manifest"

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -7,6 +7,7 @@
 	import Loader from '$lib/elements/Loader.svelte'
 	import mixpanel from 'mixpanel-browser'
 	import { slide } from 'svelte/transition'
+	import { supabase } from '$lib/db/supabaseClient'
 
 	//Import Mixpanel SDK
 	mixpanel.init(PUBLIC_MIX_TOKEN, {
@@ -16,6 +17,10 @@
 	})
 
 	let showSettings = false
+
+	const handleLogout = async () => {
+		await supabase.auth.signOut()
+	}
 </script>
 
 <main class="h-[100svh] flex flex-col">
@@ -52,7 +57,7 @@
 				transition:slide={{ axis: 'y', duration: 200 }}
 				class="absolute right-2 bottom-7 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-100 p-2 rounded"
 			>
-				<button>Logout</button>
+				<button on:click={() => handleLogout()}>Logout</button>
 				<button>Change pin</button>
 			</div>
 		{/if}

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -47,6 +47,8 @@
 	}
 
 	const removePaper = async (idx: string) => {
+		// const element = document.getElementById(idx)
+		// if (element) inputGroupRef.removeChild(element)
 		paperCount = paperCount.filter((field) => field.id != idx)
 		if (perPaperResult.has(idx)) perPaperResult.delete(idx)
 		perPaperResult = perPaperResult
@@ -92,6 +94,7 @@
 		paperCount = [{ ...paperFields, id: makeid(5) }]
 		finalPrice = 0
 		focusedIndex = 0
+		customer_name = ''
 		perPaperResult.clear()
 		getAllInputs()
 		setFocus()
@@ -165,14 +168,14 @@
 			<input
 				bind:value={customer_name}
 				type="text"
-				placeholder="Customer name"
-				class="border-b border-dashed w-full px-2 focus:outline-none focus:border-teal-500"
+				placeholder="Product name"
+				class="border-b py-[2px] border-dashed w-full h-full px-2 focus:outline-none focus:border-teal-500"
 			/>
 			{#if showSaveHistory}
 				<Button
 					on:click={saveHistory}
 					text="Save cost"
-					classNames="text-sm animate-pulse w-1/4 !px-1"
+					classNames="text-sm animate-pulse !w-[30%] !px-1"
 				/>
 			{/if}
 		</div>
@@ -182,8 +185,9 @@
 		>
 			{#each paperCount as paper, i}
 				<div
+					id={paper.id}
 					class="flex flex-row items-center justify-between rounded"
-					transition:slide={{ axis: 'y', duration: 100 }}
+					transition:slide={{ axis: 'y', duration: 200 }}
 				>
 					<div class="flex flex-row gap-[3px] items-center overflow-x-auto">
 						<button

diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { page } from '$app/stores'
+	import { supabase } from '$lib/db/supabaseClient'
 	import Button from '$lib/elements/Button.svelte'
 	import Input from '$lib/elements/Input.svelte'
+	import { redirect } from '@sveltejs/kit'
+
 	let email = ''
+	let password = ''
 	let otp = ''
 	let isOtpSent = false
 
@@ -13,6 +17,16 @@
 	const verifyOTP = () => {
 		if (!otp) return
 	}
+
+	const handleLogin = async () => {
+		if (!email || !password) return
+		console.log(email, password)
+		const { data, error } = await supabase.auth.signInWithPassword({ email, password })
+		if (error) {
+			return
+		}
+		return redirect(300, '/')
+	}
 </script>
 
 <svelte:head>
@@ -24,7 +38,7 @@
 	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
 
 	<form class="flex w-full flex-col gap-3 items-center">
-		{#if isOtpSent}
+		<!-- {#if isOtpSent}
 			<Input
 				required
 				type="text"
@@ -33,15 +47,27 @@
 				placeholder="******"
 			/>
 			<Button type="submit" text="Login with OTP" on:click={verifyOTP} />
-		{:else}
-			<Input
-				required
-				type="email"
-				bind:value={email}
-				classNames="!w-full text-center"
-				placeholder="Type your email"
-			/>
-			<Button type="submit" text="Send OTP" on:click={handleSendOTP} />
-		{/if}
+		{:else} -->
+		<Input
+			required
+			type="email"
+			bind:value={email}
+			classNames="!w-full text-center"
+			placeholder="Type your email"
+		/>
+		<Input
+			required
+			type="password"
+			bind:value={password}
+			classNames="!w-full text-center font-bold"
+			placeholder="*******"
+		/>
+		<Button type="submit" text="Login" on:click={handleLogin} />
+		<!-- {/if} -->
 	</form>
+
+	<p class="text-center text-slate-500 mt-10">
+		Forget password? Need a new account? <br />
+		Contact: <email>[email protected]</email>
+	</p>
 </section>