Password Change: Mobcash

app.use('/api/auth', authRoutes);

// Real-time match check function validateMatch() if (confirmPw.value !== newPw.value) matchError.textContent = '✗ Passwords do not match'; return false; else matchError.textContent = '✓ Passwords match'; matchError.style.color = '#2ecc71'; return true;

<div class="input-group"> <label>Confirm New Password</label> <div class="password-wrapper"> <input type="password" id="confirmPassword" placeholder="Re-enter new password" required> <span class="toggle-pw" data-target="confirmPassword">👁️</span> </div> <small id="matchError" class="error-msg"></small> </div>

// Show message helper function showMessage(msg, type) messageBox.textContent = msg; messageBox.className = message-box $type ; setTimeout(() => messageBox.style.display = 'none'; , 5000); Mobcash Password Change

button width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 14px; border-radius: 12px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; margin-top: 10px;

.password-wrapper position: relative; display: flex; align-items: center;

.strength-meter height: 4px; background: #eee; border-radius: 4px; margin-top: 8px; overflow: hidden; else matchError.textContent = '✓ Passwords match'

const strengthMap = 0: width: '0%', text: 'Very weak', color: '#e74c3c' , 1: width: '20%', text: 'Weak', color: '#e67e22' , 2: width: '40%', text: 'Fair', color: '#f1c40f' , 3: width: '60%', text: 'Good', color: '#3498db' , 4: width: '80%', text: 'Strong', color: '#2ecc71' , 5: width: '100%', text: 'Very strong', color: '#27ae60' ;

confirmPw.addEventListener('input', validateMatch);

.container width: 100%; max-width: 450px; matchError.style.color = '#2ecc71'

.error-msg color: #e74c3c; font-size: 0.7rem; display: block; margin-top: 4px;

if (confirmPw.value) validateMatch(); );

.header text-align: center; margin-bottom: 30px;

@media (max-width: 480px) .card padding: 20px;