Merge pull request #39 from sparrowapp-dev/fix/fixed-auth-ui

Feat: Added loader in buttons & fixes Ui
sparrowapp-dev · May 28, 2024 · 17b833f · 17b833f
2 parents 9b01650 + 0219851
commit 17b833f
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 11 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -33,5 +33,5 @@
 
 <div style="height: 100vh; top:0; left:0;
 right:0; z-index:-100 !important" class="w-100 position-fixed">
-	<img src={bg} alt="" style="height:100%; width:100%; opacity: 0.5">
+	<img src={bg} alt="" style="height:100%; width:100%; opacity: 0.7">
 </div>
diff --git a/src/lib/components/button/Button.svelte b/src/lib/components/button/Button.svelte
@@ -92,13 +92,20 @@
       background-color: var(--blackColor);
     }
     .custom-btn-primary {
-      background-color: var(--primary-color);
+      background: var(--primary-btn-color);
       color: var(--white-color);
     }
     .custom-btn-primary-gradient{
         // background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
+        background: var(--primary-color);
         color: white;
     }
+    .custom-btn-primary-gradient:hover{
+         background: var( --primary-btn-color-hover)
+    }
+    .custom-btn-primary-gradient:active{
+      background: var(--button-pressed);
+    }
     .custom-btn-dark {
       background-color: var(--border-color);
       color: var(--white-color);

diff --git a/src/pages/Auth/entry-point/EntryPoint.svelte b/src/pages/Auth/entry-point/EntryPoint.svelte
@@ -62,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') {
@@ -88,6 +89,7 @@
 				} else {
 					notifications.error(response?.message);
 				}
+				entryLoader = false;
 			}
 		}}
 	>
@@ -104,7 +106,7 @@
 					: 'border-default'}"
 				id="exampleInputEmail1"
 				aria-describedby="emailHelp"
-				placeholder="Please enter your Email"
+				placeholder="Please enter your Email Id"
 				autocorrect="off"
 				autocapitalize="none"
 				autocomplete="off"
@@ -123,8 +125,14 @@
 			{/if}
 		</div>
 
-		<div class="mb-1">
-			<button class="btn btn-primary w-100 text-whiteColor border-0">Continue</button>
+		<div class="mb-1 ">
+			<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>
 	<Oauth />

diff --git a/src/pages/Auth/forgot-password/ForgotPassword.svelte b/src/pages/Auth/forgot-password/ForgotPassword.svelte
@@ -32,6 +32,7 @@
 			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());
@@ -44,6 +45,7 @@
 						notifications.error(response?.message);
 					}
 				}
+				forgotPasswordLoader = false;
 			}
 		}}
 	>
@@ -94,7 +96,13 @@
 			{/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>
 </BgContainer>

diff --git a/src/pages/Auth/login-page/LoginPage.svelte b/src/pages/Auth/login-page/LoginPage.svelte
@@ -84,8 +84,10 @@
 			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;
 					isLogin = true;
 					const accessToken = response?.accessToken?.token;
@@ -97,7 +99,6 @@
 						redirectRules.description = `Redirecting you to desktop app...`;
 						redirectRules.message = `If the application does not open automatically,
 						please click below.`;
-
 						redirectRules.loadingMessage = '';
 						redirectRules.isSpinner = false;
 						navigate(sparrowRedirect);
@@ -116,6 +117,7 @@
 						notifications.error(response);
 					}
 				}
+				loginLoader = false;
 			}
 		}}
 	>
@@ -212,9 +214,13 @@
 		</div>
 
 		<div class="mb-1">
-			<button class="btn btn-primary w-100 text-whiteColor border-0 py-2" 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 />

diff --git a/src/pages/Auth/reset-password/ResetPassword.svelte b/src/pages/Auth/reset-password/ResetPassword.svelte
@@ -90,6 +90,7 @@
 			isPasswordTouched = true;
 			validatePassword();
 			if (isPasswordValid1 && isPasswordValid1 && isPasswordValid1) {
+				resetPasswordLoader = true;
 				const response = await handleResetPassword(resetPasswordCredential);
 				if (response.isSuccessful) {
 					notifications.success("Password changed successfully");
@@ -102,6 +103,7 @@
 					notifications.error(response.message);
 				}
 				}
+				resetPasswordLoader = false;
 			}
 		}}
 	>
@@ -206,7 +208,13 @@
 		</div>
 
 		<div class="mt-4">
-			<button class="btn btn-primary w-100 text-whiteColor border-0">Submit</button>
+			<Button
+						disable={resetPasswordLoader}
+						title={"Submit"}
+						buttonClassProp={"w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16"}
+						type={"primary-gradient"}
+						loader={resetPasswordLoader}
+				  	/>
 		</div>
 	</form>
 </BgContainer>