Implement password visibility toggle

Menthub/static/script.js

@@ -2,6 +2,7 @@
 let currentUser = null
 let mentors = []
 let mentorshipRequests = []
+let passwordToggleInitialized = false
 
 // Sample data for demonstration
 const sampleMentors = [
@@ -129,6 +130,7 @@ document.addEventListener("DOMContentLoaded", () => {
   initializeApp()
   setupEventListeners()
   loadSampleData()
+  setupPasswordToggles()
 })
 
 function initializeApp() {
@@ -173,6 +175,8 @@ function setupEventListeners() {
   // Availability toggle
   document.getElementById("availabilityToggle").addEventListener("change", toggleAvailability)
 
+  // Password toggle handled by a single delegated listener; no per-tab setup needed
+
   // Close modal when clicking outside
   document.getElementById("requestModal").addEventListener("click", function (e) {
     if (e.target === this) {
@@ -181,6 +185,31 @@ function setupEventListeners() {
   })
 }
 
+function setupPasswordToggles() {
+  if (passwordToggleInitialized) return
+  passwordToggleInitialized = true
+
+  // One-time delegated listener works for both login and signup tabs
+  document.addEventListener('click', function (e) {
+    const toggle = e.target.closest('.toggle-password')
+    if (!toggle) return
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    const container = toggle.closest('.password-container')
+    const passwordInput = container ? container.querySelector('input[type="password"], input[type="text"]') : null
+    const icon = toggle.querySelector('i')
+
+    if (!passwordInput || !icon) return
+
+    const toText = passwordInput.type === 'password'
+    passwordInput.type = toText ? 'text' : 'password'
+    icon.classList.toggle('fa-eye', !toText)
+    icon.classList.toggle('fa-eye-slash', toText)
+  })
+}
+
 function switchAuthTab(tab) {
   const loginTab = document.getElementById("loginTab")
   const signupTab = document.getElementById("signupTab")
@@ -198,6 +227,8 @@ function switchAuthTab(tab) {
     signupForm.classList.add("active")
     loginForm.classList.remove("active")
   }
+
+  // No need to re-initialize password toggles; listener is delegated and initialized once
 }
 
 function handleLogin(e) {

Menthub/static/styles.css

@@ -184,6 +184,53 @@ body {
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
+/* Password Toggle Styles */
+.password-container {
+  position: relative;
+}
+
+.toggle-password {
+  position: absolute;
+  right: 12px;
+  top: 58%;
+  transform: translateY(-15%);
+  cursor: pointer;
+  color: #666;
+  transition: color 0.3s ease;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+.toggle-password:hover {
+  color: #667eea;
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.toggle-password i {
+  font-size: 14px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.password-container input[type="password"] {
+  padding-right: 45px;
+}
+
+.password-container input[type="text"] {
+  padding-right: 45px;
+}
+
 .radio-group,
 .checkbox-group {
   display: flex;
@@ -833,6 +880,20 @@ input[type="checkbox"] {
   .search-bar input {
     padding: 14px 14px 14px 45px;
   }
+
+  .toggle-password {
+    width: 28px;
+    height: 28px;
+  }
+
+  .toggle-password i {
+    font-size: 16px;
+  }
+
+  .password-container input[type="password"],
+  .password-container input[type="text"] {
+    padding-right: 50px;
+  }
 }
 
 /* Loading States */

Menthub/templates/.env

@@ -0,0 +1,4 @@
+FLASK_APP=app.py
+FLASK_ENV=development
+DATABASE_URL=postgresql://postgres:root@localhost/menthub_db
+

Menthub/templates/index.html

@@ -55,7 +55,10 @@ <h1><i class="fas fa-graduation-cap"></i> MentorConnect</h1>
                     </div>
                     <div class="form-group">
                         <label for="loginPassword">Password</label>
-                        <input type="password" id="loginPassword" name="password" required>
+                        <div class="password-container">
+                            <input type="password" id="loginPassword" name="password" required>
+                            <span class="toggle-password"><i class="fas fa-eye"></i></span>
+                        </div>
                     </div>
                     <button type="submit" class="btn btn-primary">Login</button>
                 </form>
@@ -77,7 +80,10 @@ <h1><i class="fas fa-graduation-cap"></i> MentorConnect</h1>
 
                     <div class="form-group">
                         <label for="signupPassword">Password</label>
-                        <input type="password" id="signupPassword" name="password" required>
+                        <div class="password-container">
+                            <input type="password" id="signupPassword" name="password" required>
+                            <span class="toggle-password"><i class="fas fa-eye"></i></span>
+                        </div>
                     </div>
 
                     <div class="form-row">