From 18e35a111add564667822ee06e7a492c5838185a Mon Sep 17 00:00:00 2001
From: Kushal Bansal <321kushalbansal.kb@gmail.com>
Date: Tue, 8 Oct 2024 11:17:15 +0000
Subject: [PATCH] added password toggle and improved ui

---
 firebase.js |  9 +++++++++
 login.css   | 24 ++++++++++++++++++++++--
 login.html  | 11 +++++++++--
 signUp.css  | 24 ++++++++++++++++++++++--
 signUp.html | 29 +++++++++++++++++++----------
 5 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/firebase.js b/firebase.js
index 8ae45553..d355b3a1 100644
--- a/firebase.js
+++ b/firebase.js
@@ -131,3 +131,12 @@ document.getElementById('loginForm').addEventListener('submit', function (e) {
   // Call the login function
   loginWithEmailAndPassword(email, password);
 });
+
+function togglePassword(fieldId) {
+  const passwordField = document.getElementById(fieldId);
+  if (passwordField.type === "password") {
+    passwordField.type = "text";
+  } else {
+    passwordField.type = "password";
+  }
+}
\ No newline at end of file
diff --git a/login.css b/login.css
index 88fcabdc..d87e3d37 100644
--- a/login.css
+++ b/login.css
@@ -92,7 +92,7 @@ body {
 .input-field label {
     display: block; 
     margin-bottom: 0.5rem; 
-    font-weight: bold; 
+    font-weight: 600; 
 }
 
 .input-field input {
@@ -131,9 +131,29 @@ body {
 .signUp-link a {
     color: #3066dc; /* Match the link color with the theme */
     text-decoration: none; /* Remove underline from the link */
-    font-weight: 100; /* Make the link text bold */
+    font-weight: 300; /* Make the link text bold */
 }
 
 .signUp-link a:hover {
     text-decoration: underline; /* Add underline on hover for better UX */
 }
+
+.req{
+    color: red;
+}
+
+.toggle-password {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 55%;
+}
+
+.input-field {
+    position: relative;
+}
+
+.toggle-password svg {
+    width: 20px;
+    height: 20px;
+}
\ No newline at end of file
diff --git a/login.html b/login.html
index a7f5182b..121bc701 100644
--- a/login.html
+++ b/login.html
@@ -44,12 +44,19 @@ <h2>Login</h2>
 
             <form id="loginForm" action="book.html" method="POST">
                 <div class="input-field">
-                    <label for="email">Email:</label>
+                    <label for="email">Email<span class="req">*</span></label>
                     <input type="email" id="email" name="email" required />
                 </div>
                 <div class="input-field">
-                    <label for="password">Password:</label>
+                    <label for="password">Password<span class="req">*</span></label>
                     <input type="password" id="password" name="password" required />
+                    <span class="toggle-password" onclick="togglePassword('password')">
+                        <!-- Eye SVG Icon -->
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"></path>
+                          <circle cx="12" cy="12" r="3"></circle>
+                        </svg>
+                    </span>
                 </div>
                 <div class="input-field">
                     <button type="submit">Continue</button>
diff --git a/signUp.css b/signUp.css
index 14f01186..cf3e3e07 100644
--- a/signUp.css
+++ b/signUp.css
@@ -89,7 +89,7 @@ body {
 .input-field label {
     display: block; 
     margin-bottom: 0.4rem; 
-    font-weight: bold; 
+    font-weight: 600; 
     font-size: medium;
 }
 
@@ -127,9 +127,29 @@ body {
 .signin-link a {
     color: #3066dc; /* Match the link color with the theme */
     text-decoration: none; /* Remove underline from the link */
-    font-weight: 100; /* Make the link text bold */
+    font-weight: 300; /* Make the link text bold */
 }
 
 .signin-link a:hover {
     text-decoration: underline; /* Add underline on hover for better UX */
+}
+
+.req{
+    color: red;
+}
+
+.toggle-password {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 55%;
+}
+
+.input-field {
+    position: relative;
+}
+
+.toggle-password svg {
+    width: 20px;
+    height: 20px;
 }
\ No newline at end of file
diff --git a/signUp.html b/signUp.html
index 04277f43..aa260923 100644
--- a/signUp.html
+++ b/signUp.html
@@ -48,25 +48,34 @@ <h2>Create Account</h2>
 
         <form id="signupForm" action="book.html" method="POST">
           <div class="input-field">
-            <label for="name">Full Name:</label>
+            <label for="name">Full Name<span class="req">*</span></label>
             <input type="text" id="name" name="name" required />
           </div>
           <div class="input-field">
-            <label for="email">Email:</label>
+            <label for="email">Email<span class="req">*</span></label>
             <input type="email" id="email" name="email" required />
           </div>
           <div class="input-field">
-            <label for="password">Password:</label>
+            <label for="password">Password<span class="req">*</span></label>
             <input type="password" id="password" name="password" required />
+            <span class="toggle-password" onclick="togglePassword('password')">
+              <!-- Eye SVG Icon -->
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"></path>
+                <circle cx="12" cy="12" r="3"></circle>
+              </svg>
+            </span>
           </div>
           <div class="input-field">
-            <label for="confirm-password">Confirm Password:</label>
-            <input
-              type="password"
-              id="confirm-password"
-              name="confirm-password"
-              required
-            />
+            <label for="confirm-password">Confirm Password<span class="req">*</span></label>
+            <input type="password" id="confirm-password" name="confirm-password" required />
+            <span class="toggle-password" onclick="togglePassword('confirm-password')">
+              <!-- Eye SVG Icon -->
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"></path>
+                <circle cx="12" cy="12" r="3"></circle>
+              </svg>
+            </span>
           </div>
           <div class="input-field">
             <button type="submit">Sign Up</button>