From ea5d3d06004b639c1d4a9740150b78d82c5762c7 Mon Sep 17 00:00:00 2001
From: Md Asif Raza <itsmdasifraza@gmail.com>
Date: Mon, 4 Nov 2024 18:57:48 +0530
Subject: [PATCH] fix: login ui issues

---
 src/pages/Auth/login-page/LoginPage.svelte        | 11 ++++++++---
 src/pages/Auth/register-page/RegisterPage.svelte  | 13 +++++++++----
 .../Auth/reset-password/ResetPassword.svelte      | 15 ++++++++++-----
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/pages/Auth/login-page/LoginPage.svelte b/src/pages/Auth/login-page/LoginPage.svelte
index 664a2d4..cbbea46 100644
--- a/src/pages/Auth/login-page/LoginPage.svelte
+++ b/src/pages/Auth/login-page/LoginPage.svelte
@@ -190,7 +190,7 @@
 						type="password"
 						autocomplete="off"
 						id="exampleInputPassword1"
-						placeholder="Please enter your Password"
+						placeholder="Please enter your password"
 						autocorrect="off"
 						autocapitalize="none"
 						bind:value={loginCredentials.password}
@@ -210,13 +210,14 @@
 							validationErrors = await handleLoginValidation(loginCredentials);
 							authenticationError = false;
 						}}
+						maxlength="32"
 					/>
 					<button
 						type="button"
 						on:click={togglePasswordVisibility}
 						class="border-0 position-absolute eye-icon d-flex align-items-center"
 					>
-						{#if isPasswordVisible}
+						{#if !isPasswordVisible}
 							<img src={eyeShow} alt="eye-show" />
 						{:else}
 							<img src={eyeHide} alt="eye-hie" />
@@ -258,8 +259,9 @@
 
 <style>
 	.eye-icon {
-		top: 5px;
 		right: 5px;
+		top: 50%;
+    	transform: translateY(-50%);
 		background-color: transparent;
 	}
 
@@ -275,4 +277,7 @@
 	input {
 		background-color: transparent !important;
 	}
+	input:disabled{
+		opacity: 0.5;
+	}
 </style>
diff --git a/src/pages/Auth/register-page/RegisterPage.svelte b/src/pages/Auth/register-page/RegisterPage.svelte
index a5fdbe5..ae0db78 100644
--- a/src/pages/Auth/register-page/RegisterPage.svelte
+++ b/src/pages/Auth/register-page/RegisterPage.svelte
@@ -270,9 +270,9 @@
 						<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label
 					>
 				</div>
-				<div class="d-flex position-relative">
+				<div class="d-flex position-relative mt-1">
 					<input
-						class="form-control sparrow-fs-16 mt-1 pe-5 border:{validationErrors?.password &&
+						class="form-control sparrow-fs-16 pe-5 border:{validationErrors?.password &&
 						isPasswordTouched
 							? '3px'
 							: '1px'} solid {validationErrors?.password && isPasswordTouched
@@ -294,13 +294,14 @@
 							validationErrors = await handleRegisterValidation(userData);
 							validatePassword();
 						}}
+						maxlength="32"
 					/>
 					<button
 						type="button"
 						on:click={togglePasswordVisibility}
 						class=" border-0 position-absolute eye-icon d-flex align-items-center"
 					>
-						{#if isPasswordVisible}
+						{#if !isPasswordVisible}
 							<img src={eyeShow} alt="eye-show" />
 						{:else}
 							<img src={eyeHide} alt="eye-hie" />
@@ -406,8 +407,9 @@
 
 <style>
 	.eye-icon {
-		top: 10px;
 		right: 5px;
+		top: 50%;
+    	transform: translateY(-50%);
 		background-color: transparent;
 	}
 	input {
@@ -422,4 +424,7 @@
 	.btn-primary:active {
 		background: var(--button-pressed);
 	}
+	input:disabled{
+		opacity: 0.5;
+	}
 </style>
diff --git a/src/pages/Auth/reset-password/ResetPassword.svelte b/src/pages/Auth/reset-password/ResetPassword.svelte
index e470881..61cdb9c 100644
--- a/src/pages/Auth/reset-password/ResetPassword.svelte
+++ b/src/pages/Auth/reset-password/ResetPassword.svelte
@@ -113,11 +113,14 @@
 
 		<div class="form-group mb-1 text-lightGray">
 			<div>
-				<label for="password" class="sparrow-fs-16">New Password</label>
+				<label for="password" class="sparrow-fs-16 d-flex">New Password
+					<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p>
+				</label>
+				
 			</div>
-			<div class="d-flex position-relative">
+			<div class="d-flex position-relative mt-1">
 				<input
-					class="form-control mt-1 sparrow-fs-16 pe-5 border:{(!isPasswordValid1 || !isPasswordValid2 || !isPasswordValid3) &&
+					class="form-control sparrow-fs-16 pe-5 border:{(!isPasswordValid1 || !isPasswordValid2 || !isPasswordValid3) &&
 						isPasswordTouched
 						? '3px'
 						: '1px'} solid {(!isPasswordValid1 || !isPasswordValid2 || !isPasswordValid3) &&
@@ -137,13 +140,14 @@
 						validatePassword();
 					}}
 					on:input={validatePassword}
+					maxlength="32"
 				/>
 				<button
 					type="button"
 					on:click={togglePasswordVisibility}
 					class=" border-0 position-absolute eye-icon d-flex align-items-center"
 				>
-					{#if isPasswordVisible}
+					{#if !isPasswordVisible}
 						<img src={eyeShow} alt="eye-show" />
 					{:else}
 						<img src={eyeHide} alt="eye-hie" />
@@ -269,8 +273,9 @@
 		background: var(--primary-color);
 	}
 	.eye-icon {
-		top: 10px;
 		right: 5px;
+		top: 50%;
+    	transform: translateY(-50%);
 		background-color: transparent;
 	}
 	input {