Merge pull request #28 from sparrowapp-dev/feat/486/internal-demo-fee…

…dback feat: implement loader between auth screens
sparrowapp-dev · Mar 7, 2024 · 58e380a · 58e380a
2 parents 9e6ad1f + fb453cc
commit 58e380a
Show file tree

Hide file tree

Showing 10 changed files with 250 additions and 59 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -23,7 +23,7 @@
 	<Route path="/register/:id" component={RegisterPage} />
 	<Route path="/register" component={RegisterPage} />
 	<Route path="/update/password/:id" component={UpdatePassword} />
-	<Route path="/reset/password/:id" component={ResetPassword} />
+	<Route path="/reset/password/:id/:code" component={ResetPassword} />
 	<Route path="/redirect" component={OauthRedirect} />
 	<!-- <Route path="/success" component={AuthSuccess} /> -->
 	<Route path="/*"><Navigate to="/init" /></Route>

diff --git a/src/lib/components/button/Button.svelte b/src/lib/components/button/Button.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+    import Spinner from "../transition/Spinner.svelte";
+  
+    export let title = "Submit";
+    export let onClick: (e) => void = ()=>{};
+    export let loaderSize = 16;
+    export let disable = false;
+    export let loader = false;
+    export let buttonStyleProp = "";
+    export let buttonClassProp = "";
+    export let textClassProp = "";
+    export let textStyleProp = "";
+    export let allowChild = false;
+    export let type:
+      | "primary"
+      | "dark"
+      | "danger"
+      | "primary-gradient"
+      | "transparent"
+      | "other"
+      | "icon" = "other";
+    enum BtnType {
+      PRIMARY = "primary",
+      DARK = "dark",
+      DANGER = "danger",
+      TRANSPARENT = "transparent",
+      PRIMARY_GRADIENT = "primary-gradient",
+      OTHER = "other",
+      ICON = "icon",
+    }
+    let btnClass = "";
+    switch (type) {
+      case BtnType.PRIMARY:
+        btnClass = "custom-btn-primary";
+        break;
+      case BtnType.DARK:
+        btnClass = "custom-btn-dark";
+        break;
+      case BtnType.DANGER:
+        btnClass = "custom-btn-danger";
+        break;
+      case BtnType.TRANSPARENT:
+        btnClass = "custom-btn-transparent";
+        break;
+      case BtnType.ICON:
+        btnClass = "sparrow-icon-btn";
+        break;
+      case BtnType.PRIMARY_GRADIENT:
+        btnClass = "custom-btn-primary-gradient"
+        break;
+      default:
+        btnClass = "";
+        break;
+    }
+  </script>
+
+  <button
+    disabled={disable}
+    style={`${buttonStyleProp} ${
+      type !== "other" && type !== "icon"
+        ? "border-radius: 4px; padding: 6px 12px;"
+        : ""
+    } `}
+    class={`${buttonClassProp} ${
+      type !== "other" && type !== "icon"
+        ? "py-1 px-3 border-0 d-flex align-items-center"
+        : ""
+    } ${btnClass}`}
+    on:click={(e) => {
+      onClick(e);
+    }}
+  >
+    {#if loader && !allowChild}
+      <span class="mx-2 d-flex justify-content-center">
+        <Spinner size={`${loaderSize}px`} />
+      </span>
+    {:else if !loader && !allowChild}
+      <span class={textClassProp} style={textStyleProp}>
+        {title}
+      </span>
+    {:else if allowChild}
+      <slot />
+    {/if}
+  </button>
+
+  <style lang="scss">
+    .sparrow-icon-btn {
+      background-color: transparent;
+      border: 0px;
+    }
+    .sparrow-icon-btn:hover {
+      background-color: var(--blackColor);
+    }
+    .custom-btn-primary {
+      background-color: var(--primary-btn-color);
+      color: var(--white-color);
+    }
+    .custom-btn-primary-gradient{
+        background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);;
+        color: white;
+    }
+    .custom-btn-dark {
+      background-color: var(--border-color);
+      color: var(--white-color);
+    }
+    .custom-btn-dark:hover {
+      background-color: var(--sparrow-button-background);
+    }
+    .custom-btn-danger {
+      background-color: var(--dangerColor);
+      color: var(--blackColor);
+    }
+    .custom-btn-danger:hover {
+      background-color: var(--delete-hover);
+    }
+    .custom-btn-transparent {
+      background-color: transparent;
+      color: var(--white-color);
+    }
+    .custom-btn-transparent:hover {
+    }
+  </style>
+
diff --git a/src/lib/utils/dto/auth-dto.ts b/src/lib/utils/dto/auth-dto.ts
@@ -23,6 +23,7 @@ export interface verifyPostbody {
 export interface resetPasswordPostBody {
   email: string;
   newPassword: string;
+  verificationCode: string;
 }
 
 export interface RegisterUser {

diff --git a/src/pages/Auth/entry-point/EntryPoint.svelte b/src/pages/Auth/entry-point/EntryPoint.svelte
@@ -7,6 +7,7 @@
 	import SupportHelp from '$lib/components/help/SupportHelp.svelte';
 	import { notifications } from '$lib/components/toast-notification/ToastNotification';
 	import starIcon from '$lib/assets/starIcon.svg';
+	import Button from '$lib/components/button/Button.svelte';
 
 	let isEmailTouched = false;
 	//---------------- Login Validation --------------------//
@@ -28,6 +29,7 @@
 		buttonClick: () => {},
 		loadingMessage: 'Please wait while we are redirecting you to your email account....'
 	};
+	let entryLoader = false;
 </script>
 
 {#if isEntry}
@@ -60,6 +62,7 @@
 					isEmailTouched = true;
 					validationErrors = await handleEntryValidation(entryCredentials);
 					if (!validationErrors?.email) {
+						entryLoader = true;
 						const response = await handleEntry(entryCredentials);
 						if (response.isSuccessful) {
 							if (response?.data?.registeredWith === 'google') {
@@ -86,6 +89,7 @@
 						} else {
 							notifications.error(response?.message);
 						}
+						entryLoader = false;
 					}
 				}}
 			>
@@ -122,7 +126,13 @@
 				</div>
 
 				<div class="mb-1">
-					<button class="btn btn-primary w-100 text-whiteColor border-0">Continue</button>
+					<Button
+						disable={entryLoader}
+						title={"Continue"}
+						buttonClassProp={"w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16"}
+						type={"primary-gradient"}
+						loader={entryLoader}
+				  	/>
 				</div>
 			</form>
 			<SupportHelp />
@@ -131,9 +141,6 @@
 {/if}
 
 <style>
-	.btn-primary {
-		background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
-	}
 	.parent {
 		min-height: 100vh;
 		overflow: auto;

diff --git a/src/pages/Auth/forgot-password/ForgotPassword.svelte b/src/pages/Auth/forgot-password/ForgotPassword.svelte
@@ -6,6 +6,7 @@
 
 	import {  navigate } from 'svelte-navigator';
 	import { notifications } from '$lib/components/toast-notification/ToastNotification';
+	import Button from '$lib/components/button/Button.svelte';
 
 	let validationErrors: any = {};
 
@@ -14,6 +15,7 @@
 	};
 	let responseError = "";
 	let isEmailTouched = false;
+	let forgotPasswordLoader = false;
 </script>
 
 <div class="parent d-flex align-items-center justify-content-center text-white rounded">
@@ -34,8 +36,10 @@
 					isEmailTouched = true;
 					validationErrors = await handleForgotPasswordValidation(forgotPasswordCredential);
 					if(!validationErrors?.email){
+						forgotPasswordLoader = true;
 						const response  = await handleForgotPassword(forgotPasswordCredential);
 						if (response?.isSuccessful) {
+							localStorage.setItem(`timer-${forgotPasswordCredential.email}`, new Date().getTime());
 							navigate(`/update/password/${forgotPasswordCredential.email}`);
 						} else {
 							if(response.message === "Bad Request"){
@@ -45,6 +49,7 @@
 								notifications.error(response?.message);
 							}
 						}
+						forgotPasswordLoader = false;
 					}
 				}}
 			>
@@ -89,15 +94,18 @@
 					{/if}
 				</div>
 				<div class="sendButton">
-					<button class="btn btn-primary text-whiteColor w-100">Send Request</button>
+					<Button
+						disable={forgotPasswordLoader}
+						title={"Send Request"}
+						buttonClassProp={"w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16"}
+						type={"primary-gradient"}
+						loader={forgotPasswordLoader}
+				  	/>
 				</div>
 			</form>
 		</div>
 </div>
 <style>
-	.btn-primary {
-		background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
-	}
 	.parent {
 		min-height: 100vh;
 		overflow: auto;

diff --git a/src/pages/Auth/login-page/LoginPage.svelte b/src/pages/Auth/login-page/LoginPage.svelte
@@ -13,6 +13,7 @@
 	import Oauth from '$lib/components/o-auth/Oauth.svelte';
 	import starIcon from '$lib/assets/starIcon.svg';
 	import { notifications } from '$lib/components/toast-notification/ToastNotification';
+	import Button from '$lib/components/button/Button.svelte';
 	export let id;
 
 	let isEmailTouched = false;
@@ -50,6 +51,7 @@
 		buttonClick: () => {},
 		loadingMessage: 'Please wait while we sign you in....'
 	};
+	let loginLoader = false;
 </script>
 
 {#if isLogin}
@@ -83,6 +85,7 @@
 					isEmailTouched = true;
 					validationErrors = await handleLoginValidation(loginCredentials);
 					if (!validationErrors?.email && !validationErrors?.password) {
+						loginLoader = true;
 						const result = await handleLogin(loginCredentials);
 						if (result.isSuccessful) {
 							const response = result.data;
@@ -115,6 +118,7 @@
 								notifications.error(response);
 							}
 						}
+						loginLoader = false;
 					}
 				}}
 			>
@@ -210,9 +214,13 @@
 				</div>
 
 				<div class="mb-1">
-					<button class="btn btn-primary w-100 text-whiteColor border-0" on:click={() => {}}
-						>Sign In</button
-					>
+					<Button
+						disable={loginLoader}
+						title={"Sign In"}
+						buttonClassProp={"w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16"}
+						type={"primary-gradient"}
+						loader={loginLoader}
+				  	/>
 				</div>
 			</form>
 			<Oauth />
@@ -227,11 +235,7 @@
 		right: 5px;
 		background-color: transparent;
 	}
-
-	.btn-primary {
-		background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
-	}
-
+	
 	.parent {
 		min-height: 100vh;
 		overflow: auto;

diff --git a/src/pages/Auth/register-page/RegisterPage.svelte b/src/pages/Auth/register-page/RegisterPage.svelte
@@ -13,6 +13,7 @@
 	import Oauth from '$lib/components/o-auth/Oauth.svelte';
 	import { notifications } from '$lib/components/toast-notification/ToastNotification';
 	import constants from '$lib/utils/constants';
+	import Button from '$lib/components/button/Button.svelte';
 	export let id;
 	let isRegistered = false;
 	let redirectRules = {
@@ -81,6 +82,7 @@
 			passwordInput.type = isPasswordVisible ? 'text' : 'password';
 		}
 	};
+	let registerLoader = false;
 </script>
 
 {#if isRegistered}
@@ -124,6 +126,7 @@
 						!validationErrors?.password &&
 						userData?.tnsCheckbox
 					) {
+						registerLoader = true;
 						const response = await handleRegister(userData);
 						if (response.isSuccessful) {
 							isRegistered = true;
@@ -153,6 +156,7 @@
 								notifications.error(response.message);
 							}
 						}
+						registerLoader = false;
 					}
 				}}
 			>
@@ -209,7 +213,7 @@
 							: 'border-default'}"
 						type="text"
 						name="name"
-						placeholder="Please enter your first name"
+						placeholder="First name"
 						autocorrect="off"
 						autocapitalize="none"
 						autocomplete="off"
@@ -244,7 +248,7 @@
 									: 'border-default'}"
 						type="text"
 						name="lastname"
-						placeholder="Please enter your last name"
+						placeholder="Last name"
 						autocorrect="off"
 						autocapitalize="none"
 						autocomplete="off"
@@ -385,7 +389,13 @@
 				{/if}
 
 				<div class="mb-3 mt-4">
-					<button class="btn btn-primary w-100 text-whiteColor border-0">Sign Up</button>
+					<Button
+						disable={registerLoader}
+						title={"Sign Up"}
+						buttonClassProp={"w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16"}
+						type={"primary-gradient"}
+						loader={registerLoader}
+				  	/>
 				</div>
 			</form>
 			<Oauth />
@@ -395,9 +405,6 @@
 {/if}
 
 <style>
-	.btn-primary {
-		background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
-	}
 	.eye-icon {
 		top: 10px;
 		right: 5px;