Recuperar Senha - IH8 CRM</titl  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">  <link rel="stylesheet" href="typography-improvements.css"> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .container { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 40px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); max-width: 500px; width: 100%; } .logo { text-align: center; margin-bottom: 30px; } .logo h1 { color: #1e3a8a; font-size: 28px; margin-bottom: 10px; } .logo p { color: #6b7280; font-size: 16px; } .step { display: none; } .step.active { display: block; } .step-title { color: #1e3a8a; font-size: 24px; font-weight: bold; margin-bottom: 10px; text-align: center; } .step-description { color: #6b7280; text-align: center; margin-bottom: 30px; line-height: 1.6; } .form-group { margin-bottom: 25px; } .form-label { display: block; margin-bottom: 8px; color: #374151; font-weight: bold; } .form-input { width: 100%; padding: 15px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 16px; transition: all 0.3s; } .form-input:focus { outline: none; border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1); } .btn { width: 100%; background: #1e3a8a; color: white; border: none; padding: 15px; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; } .btn:hover { background: #1e40af; transform: translateY(-2px); } .btn:disabled { background: #9ca3af; cursor: not-allowed; transform: none; } .back-link { text-align: center; margin-top: 20px; } .back-link a { color: #1e3a8a; text-decoration: none; font-weight: bold; } .back-link a:hover { text-decoration: underline; } .alert { padding: 15px; border-radius: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; } .alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; } .password-display { background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 10px; padding: 20px; text-align: center; margin: 20px 0; } .password-text { font-size: 24px; font-weight: bold; color: #1e3a8a; font-family: monospace; letter-spacing: 2px; margin: 10px 0; } .copy-btn { background: #10b981; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; margin-top: 10px; } .copy-btn:hover { background: #059669; } .security-tips { background: #fef3c7; border: 1px solid #fbbf24; border-radius: 10px; padding: 15px; margin-top: 20px; } .security-tips h4 { color: #92400e; margin-bottom: 10px; } .security-tips ul { color: #92400e; margin-left: 20px; } .security-tips li { margin-bottom: 5px; } @media (max-width: 768px) { .container { padding: 30px 20px; margin: 10px; } .logo h1 { font-size: 24px; } .step-title { font-size: 20px; } } </style> </head> <body> <div class="container"> <div class="logo"> <h1>🏠 IH8 CRM</h1> <p>Recuperação de Senha</p> </div>  <div id="step1" class="step active"> <h2 class="step-title">Esqueceu sua senha?</h2> <p class="step-description"> Digite seu email abaixo e enviaremos uma nova senha para você. </p> <form id="forgotPasswordForm"> <div class="form-group"> <label class="form-label">Email</label> <input type="email" class="form-input" id="emailInput" placeholder="seu@email.com" required> </div> <button type="submit" class="btn" id="sendBtn"> <i class="fas fa-paper-plane"></i> Enviar Nova Senha </button> </form> <div class="back-link"> <a href="index.html"> <i class="fas fa-arrow-left"></i> Voltar ao Login </a> </div> </div>  <div id="step2" class="step"> <h2 class="step-title">Nova Senha Gerada!</h2> <p class="step-description"> Sua nova senha foi gerada com sucesso. Guarde-a em local seguro. </p> <div class="alert alert-success"> <i class="fas fa-check-circle"></i> Nova senha enviada para seu email! </div> <div class="password-display"> <p><strong>Sua nova senha:</strong></p> <div class="password-text" id="newPasswordDisplay"></div> <button class="copy-btn" onclick="copyPassword()"> <i class="fas fa-copy"></i> Copiar Senha </button> </div> <div class="security-tips"> <h4><i class="fas fa-shield-alt"></i> Dicas de Segurança:</h4> <ul> <li>Altere esta senha após fazer login</li> <li>Use uma senha forte e única</li> <li>Não compartilhe sua senha com ninguém</li> <li>Ative a autenticação em duas etapas quando disponível</li> </ul> </div> <button class="btn" onclick="goToLogin()" style="margin-top: 20px;"> <i class="fas fa-sign-in-alt"></i> Fazer Login Agora </button> </div>  <div id="step3" class="step"> <h2 class="step-title">Email não encontrado</h2> <p class="step-description"> O email informado não está cadastrado em nosso sistema. </p> <div class="alert alert-error"> <i class="fas fa-exclamation-triangle"></i> Email não encontrado no sistema </div> <div class="alert alert-info"> <i class="fas fa-info-circle"></i> Verifique se digitou o email corretamente ou cadastre-se gratuitamente. </div> <button class="btn" onclick="goToStep(1)" style="margin-bottom: 15px;"> <i class="fas fa-arrow-left"></i> Tentar Novamente </button> <div class="back-link"> <a href="signup.html"> <i class="fas fa-user-plus"></i> Criar Conta Gratuita </a> </div> </div> </div>  <script src="email-service.js"></script> <script> let generatedPassword = ''; // Initialize document.addEventListener('DOMContentLoaded', () => { // Initialize UserManager if (typeof UserManager !== 'undefined') { window.userManager = new UserManager(); console.log('✅ UserManager inicializado na recuperação de senha'); } }); // Form submission document.getElementById('forgotPasswordForm').addEventListener('submit', async (e) => { e.preventDefault(); const email = document.getElementById('emailInput').value; const sendBtn = document.getElementById('sendBtn'); // Disable button and show loading sendBtn.disabled = true; sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processando...'; try { // Simulate processing delay await new Promise(resolve => setTimeout(resolve, 2000)); // Check if user exists if (!window.userManager) { throw new Error('Sistema não inicializado'); } const user = window.userManager.users.find(u => u.email.toLowerCase() === email.toLowerCase()); if (!user) { // User not found goToStep(3); return; } // Generate new password generatedPassword = generatePassword(); // Update user password user.password = generatedPassword; window.userManager.saveUsers(); // Send email (simulated) if (window.sendPasswordResetEmail) { window.sendPasswordResetEmail(email, { password: generatedPassword, userName: user.name }); } // Show success step document.getElementById('newPasswordDisplay').textContent = generatedPassword; goToStep(2); } catch (error) { console.error('Erro na recuperação de senha:', error); alert('Erro ao processar solicitação. Tente novamente.'); } finally { // Re-enable button sendBtn.disabled = false; sendBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Enviar Nova Senha'; } }); // Navigation functions function goToStep(stepNumber) { // Hide all steps document.querySelectorAll('.step').forEach(step => { step.classList.remove('active'); }); // Show selected step document.getElementById('step' + stepNumber).classList.add('active'); } function goToLogin() { window.location.href = 'index.html'; } // Utility functions function generatePassword(length = 8) { const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789'; let password = ''; for (let i = 0; i < length; i++) { password += chars.charAt(Math.floor(Math.random() * chars.length)); } return password; } function copyPassword() { navigator.clipboard.writeText(generatedPassword).then(() => { const btn = event.target; const originalText = btn.innerHTML; btn.innerHTML = '<i class="fas fa-check"></i> Copiado!'; btn.style.background = '#059669'; setTimeout(() => { btn.innerHTML = originalText; btn.style.background = '#10b981'; }, 2000); }).catch(() => { // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = generatedPassword; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); alert('Senha copiada para a área de transferência!'); }); } </script> </body> </html>