Merge pull request #286 from kushal7201/feature1

Added password toggle and improved UI
PriyaGhosal · Oct 8, 2024 · a93066c · a93066c
2 parents 2441ea8 + 18e35a1
commit a93066c
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 16 deletions.
diff --git 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";
+  }
+}
diff --git 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;
+}
diff --git 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
@@ -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;
 }
diff --git 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>