From 84f1ab334b5d970032e2dbd2c0b36f6781ebb5db Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 26 Jul 2024 19:38:09 +0200
Subject: [PATCH] bugfixing loginpopup

---
 src/lib/components/Input.svelte      |  2 +
 src/lib/components/LoginPopup.svelte | 59 ++++++++++++++++++----------
 src/lib/components/Pricing.svelte    |  5 ++-
 src/routes/+layout.svelte            |  2 +-
 src/routes/+page.server.ts           | 39 +++++++++++++++---
 src/routes/+page.svelte              |  3 +-
 src/routes/pricing/+page.svelte      |  4 +-
 src/routes/register/+page.server.ts  |  2 +-
 src/routes/register/+page.svelte     |  2 +-
 9 files changed, 85 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
index 278ad119..5ba2b4a5 100644
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@@ -231,6 +231,7 @@ $: {
 			</div>
 		{/if}
 	</div>
+
 	{#if errors}
 		<label for={id} class="label py-0 pt-1">
 			<span class="label-text-alt text-error">
@@ -238,4 +239,5 @@ $: {
 			</span>
 		</label>
 	{/if}
+	
 </div>
\ No newline at end of file
diff --git a/src/lib/components/LoginPopup.svelte b/src/lib/components/LoginPopup.svelte
index 51fd3b7e..eb759447 100644
--- a/src/lib/components/LoginPopup.svelte
+++ b/src/lib/components/LoginPopup.svelte
@@ -7,8 +7,11 @@
     export let form;
     
     let oauthLoading = false;
-
+    let isClicked = false;
+	let loading = false;
+    
     const submitLogin = () => {
+        loading = true;
             return async ({ result, update}) => {
                 switch (result.type) {
                     case 'success':
@@ -26,7 +29,8 @@
                             await update();
                             break;
                         }
-                    case 'redirect':
+                        case 'redirect':
+                        isClicked = true;
                         toast.success('Login successfully!', {
                             style: 'border-radius: 200px; background: #333; color: #fff;'});
                         await update();
@@ -56,18 +60,18 @@
             }, 280);
             */
            
-            
+            loading = false;
+
             }
         }
     
-        let loading = false;
     
         const submitRegistration= () => {
             loading = true;
             return async ({ result, update}) => {
-                console.log(result.type);
                 switch (result.type) {
                     case 'success':
+                        isClicked = true;
                         toast.success('Registration successfully!', {
                          style: 'border-radius: 200px; background: #333; color: #fff;'});
                         await update();
@@ -113,10 +117,6 @@ const output = await response.json();
 
 let displaySection = 'login';
 
-function changeSection(state)
-{
-    displaySection = state;
-}
 
 let isHoveredGoogle = false;
 let isHoveredDiscord = false;
@@ -140,22 +140,21 @@ function handleHoverGithub() {
 </script>
 
     
+<svelte:options immutable={true} />
 
 
-    
-
 {#if $screenWidth > 640}
 <!--Start Login Modal-->
 
 <input type="checkbox" id="userLogin" class="modal-toggle" />
     
-    <dialog id="userLogin" class="modal modal-bottom sm:modal-middle border border-slate-800">
+    <dialog id="userLogin" class="modal modal-bottom sm:modal-middle">
     
     
         <label on:click={() => form= []} id="userLogin" for="userLogin"  class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05] "></label>
         
         
-        <div class="modal-box w-full bg-[#000] border border-slate-800 {$screenWidth < 640 ? 'min-h-screen' : ''}">
+        <div class="modal-box w-full bg-[#000] border border-gray-800 {$screenWidth < 640 ? 'min-h-screen' : ''}">
       
           
     
@@ -190,13 +189,22 @@ function handleHoverGithub() {
                             label="Password" 
                             errors={form?.errors?.password} 
                         />
-                        <div class="w-full max-w-lg">
-                            <a href="/reset-password" class="text-sm font-semibold text-[#FB6A67] hover:cursor-pointer hover:underline">Forgot Password?</a>
+                        <div class="text-start w-full max-w-lg">
+                            <a href="/reset-password" class="text-start text-sm font-semibold text-[#FB6A67] hover:cursor-pointer hover:underline">Forgot Password?</a>
                         </div>
                         <div class="w-full max-w-lg pt-5 m-auto pb-5">
-                            <button type="submit" class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-md">
-                                Login
-                            </button>
+                            {#if !loading && !isClicked}
+								<button type="submit" class="btn bg-purple-600 border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
+									<span class="text-white">Login</span>
+								</button>
+							{:else}
+								<label class="cursor-not-allowed btn bg-purple-600 opacity-[0.5] border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
+									<div class="flex flex-row m-auto items-center">
+										<span class="loading loading-infinity"></span>
+										<span class="text-white ml-1.5">Signing Up</span>
+									</div>
+								</label>
+							{/if}
                         </div>
 
                         <div class="divider divider-[#fff] pt-10 pb-10">
@@ -305,9 +313,18 @@ function handleHoverGithub() {
                         />
     
                         <div class="w-full max-w-lg pt-5 m-auto pb-3">
-                            <button type="submit" class="btn bg-[#09090B] border border-gray-600 sm:hover:bg-[#313131] text-white btn-md w-full rounded-lg m-auto font-semibold text-md">
-                                Register
-                            </button>
+                            {#if !loading && !isClicked}
+                                <button type="submit" class="btn bg-purple-600 border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
+                                    <span class="text-white">Register</span>
+                                </button>
+                            {:else}
+                                <label class="cursor-not-allowed btn bg-purple-600 opacity-[0.5] border border-gray-600 sm:hover:bg-purple-700 transition duration-100 text-white btn-md w-full rounded-lg m-auto text-white font-semibold text-[1rem]">
+                                    <div class="flex flex-row m-auto items-center">
+                                        <span class="loading loading-infinity"></span>
+                                        <span class="text-white ml-1.5">Signing Up</span>
+                                    </div>
+                                </label>
+                            {/if}
                         </div>
 
                         <div class="divider divider-[#fff] pt-10 pb-10">
diff --git a/src/lib/components/Pricing.svelte b/src/lib/components/Pricing.svelte
index 19373b1c..028c4246 100644
--- a/src/lib/components/Pricing.svelte
+++ b/src/lib/components/Pricing.svelte
@@ -1,10 +1,11 @@
 <script lang='ts'>
-    import { globalForm } from '$lib/store';
     import { onMount } from 'svelte';
     
     //import proTierLogo from "$lib/images/pro_tier_logo.png";
     
     export let data;
+    export let form;
+
     let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
     
     let mode = false;
@@ -339,7 +340,7 @@ onMount(async () => {
 
 <!--Start Login Modal-->
 {#if LoginPopup}
-  <LoginPopup form={$globalForm}/> 
+  <LoginPopup form={form}/> 
 {/if}   
 <!--End Login Modal-->
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7da76be9..89f10a78 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -347,7 +347,7 @@ $: {
 
 <main class="w-full">
   <slot />
-
+  <Toaster class="bg-[#1A1A27] text-white text-medium"/>
   {#if Cookie && $showCookieConsent === true}
   <Cookie />
   {/if}
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 6e509232..a460baa8 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -15,6 +15,19 @@ export const load = ({ cookies }) => {
 
 */
 
+async function checkDisposableEmail(email) {
+	const url = `https://disposable.debounce.io/?email=${encodeURIComponent(email)}`;
+		const response = await fetch(url, {
+			method: 'GET',
+			headers: {
+			"Content-Type": "application/json"
+			},
+		});
+		const output = (await response.json())?.disposable ?? false;
+		return output
+	}
+
+	
 
 export const actions = {
 	
@@ -51,27 +64,36 @@ export const actions = {
 		}
 
 
-		redirect(302, '/');
+		redirect(301, '/home');
 	},
 	
     register: async ({ locals, request }) => {
-		const { formData, errors } = await validateData(await request.formData(), registerUserSchema);
 
+
+		const { formData, errors } = await validateData(await request.formData(), registerUserSchema);
 		if (errors) {
 			return fail(400, {
 				data: formData,
 				errors: errors.fieldErrors
 			});
 		}
+		const isEmailDisposable = await checkDisposableEmail(formData?.email);
 
+		if(isEmailDisposable === "true") {
+			error(400, 'Disposable Email Addresses not allowed!');
+		}
+
+
+		//let username = generateUsername(formData.name.split(' ').join('')).toLowerCase();
 
 		try {
-			let newUser = await locals.pb.collection('users').create(formData);
+			const newUser = await locals.pb.collection('users').create(formData);
 			await locals.pb?.collection('users').update(
 				newUser?.id, {
 					'freeTrial' : true,
 					'tier': 'Pro', //Give new users a free trial for the Pro Subscription
 			});
+
 			await locals.pb.collection('users').requestVerification(formData.email);
 		} catch (err) {
 			console.log('Error: ', err);
@@ -83,13 +105,20 @@ export const actions = {
 				.collection("users")
 				.authWithPassword(formData.email, formData.password);
 			
-		
+			/*
+			if (!locals.pb?.authStore?.model?.verified) {
+				locals.pb.authStore.clear();
+				return {
+					notVerified: true,
+				};
+			}
+			*/
 		} catch (err) {
 			console.log("Error: ", err);
 			error(err.status, err.message);
 		}
 
-		redirect(303, "/");
+		redirect(301, "/home");
 	},
 	
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ab05aef9..44c27b0c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,6 +6,7 @@
   import { intersect } from 'svelte-intersection-observer-action';
 
   export let data;
+  export let form;
 
   let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
@@ -454,7 +455,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
                                 </div>
 
 
-                                <Pricing />
+                                <Pricing data={data} form={form}/>
 
 
                                 </div>
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index ab69f8a8..60506505 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -7,6 +7,8 @@ import { onMount } from 'svelte';
 //import proTierLogo from "$lib/images/pro_tier_logo.png";
 
 export let data;
+export let form;
+
 let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
 let mode = false;
@@ -747,7 +749,7 @@ async function purchasePlan(subscriptionType:string='') {
 
 <!--Start Login Modal-->
 {#if LoginPopup}
-  <LoginPopup form={$globalForm}/> 
+  <LoginPopup form={form}/> 
 {/if}   
 <!--End Login Modal-->
 
diff --git a/src/routes/register/+page.server.ts b/src/routes/register/+page.server.ts
index cfabdfe2..3260b986 100644
--- a/src/routes/register/+page.server.ts
+++ b/src/routes/register/+page.server.ts
@@ -64,7 +64,7 @@ export const actions = {
 			*/
 		} catch (err) {
 			console.log("Error: ", err);
-			//error(err.status, err.message);
+			error(err.status, err.message);
 		}
 
 		redirect(301, "/");
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 03f61e79..57f3da95 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -11,10 +11,10 @@
 	let loading = false;
 	let oauthLoading = false;
 	
+
 	const submitRegistration= () => {
 		loading = true;
 		return async ({ result, update}) => {
-
 			switch (result.type) {
 				case 'success':
 				case 'redirect':