Merge pull request #74 from sparrowapp-dev/fix/login-ui-issues

fix: login ui issues
sparrowapp-dev · Nov 4, 2024 · 675d3ca · 675d3ca
2 parents 518a590 + 403300d
commit 675d3ca
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 21 deletions.
diff --git 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
@@ -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
@@ -113,11 +113,14 @@
 
 		<div class="form-group mb-1 text-lightGray">
 			<div>
-				<label for="password" class="sparrow-fs-16 d-flex">New Password <p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></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 {

diff --git a/src/pages/Auth/update-password/UpdatePassword.svelte b/src/pages/Auth/update-password/UpdatePassword.svelte
@@ -108,6 +108,13 @@
 			notifications.success('Verification code sent successfully');
 			localStorage.setItem(`timer-${id}`, new Date().getTime());
 			startTimer();
+			verificationCode1 = '';
+			verificationCode2 = '';
+			verificationCode3 = '';
+			verificationCode4 = '';
+			verificationCode5 = '';
+			verificationCode6 = '';
+			onCodeInput();
 		} else {
 			notifications.error(response.message);
 		}
@@ -441,9 +448,7 @@
 						</div>
 						{#if verificationCodeError === true}
 							<small class="form-text text-dangerColor">
-								{errorMessage === 'Unauthorized Access'
-								? 'You have entered the wrong code. Please check again.'
-								: errorMessage}
+								 {errorMessage}
 							</small>
 						{/if}
 					</div>

diff --git a/src/pages/Auth/update-password/update-password.ts b/src/pages/Auth/update-password/update-password.ts
@@ -17,7 +17,7 @@ export const handleVerifyEmail = async (
 		navigate(`/reset/password/${verifyCodeCredential.email}/${response?.data}`);
 	} else {
     isSuccessfulResponse.set(true);
-    if (response.message === "verificationCode should not be empty") {
+    if (response.message === "verificationCode should not be empty" || response.message === "verificationCode must be longer than or equal to 6 characters") {
       errorMessageText.set("Please enter the 6-digit verification code.");
     }
 

diff --git a/src/pages/Auth/verify-email/VerifyEmail.svelte b/src/pages/Auth/verify-email/VerifyEmail.svelte
@@ -124,6 +124,13 @@
 			notifications.success('Verification code sent successfully');
 			localStorage.setItem(`timer-verify-${id}`, new Date().getTime());
 			startTimer();
+			verificationCode1 = '';
+			verificationCode2 = '';
+			verificationCode3 = '';
+			verificationCode4 = '';
+			verificationCode5 = '';
+			verificationCode6 = '';
+			onCodeInput();
 		} else {
 			notifications.error(response.message);
 		}
@@ -469,9 +476,7 @@
 							</div>
 							{#if verificationCodeError === true}
 								<small class="form-text text-dangerColor">
-									{errorMessage === 'Unauthorized Access'
-										? 'You have entered the wrong code. Please check again.'
-										: errorMessage}
+									{errorMessage}
 								</small>
 							{/if}
 						</div>

diff --git a/src/pages/Auth/verify-email/verify-email.ts b/src/pages/Auth/verify-email/verify-email.ts
@@ -11,12 +11,12 @@ export const handleVerifyUserEmail = async (verifyCodeCredential: verifyPostbody
         errorMessageText.set("");
 	} else { 
 		isSuccessfulResponse.set(true);
-		if (response.message === 'verificationCode should not be empty') {
+		if (response.message === 'verificationCode should not be empty' || response.message === "verificationCode must be longer than or equal to 6 characters") {
 			errorMessageText.set('Please enter the 6-digit verification code.');
 		}
 
 		if (response.message === 'Wrong Code') {
-			errorMessageText.set('You have entered wrong code, Please check again.');
+			errorMessageText.set('You have entered wrong code, please check your email.');
 		}
 	}
 	return response;