| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ورود به پلتفرم آموزشی - RewardApp</title> |
| <meta name="description" content="ورود به پلتفرم آموزش توسعه وب"> |
| |
| |
| <link rel="stylesheet" href="css/style.css"> |
| <link rel="stylesheet" href="css/auth.css"> |
| <link rel="stylesheet" href="css/responsive.css"> |
| |
| <style> |
| .auth-container { |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| padding: 20px; |
| } |
| |
| .auth-card { |
| background: white; |
| border-radius: 20px; |
| padding: 40px; |
| box-shadow: 0 20px 60px rgba(0,0,0,0.1); |
| width: 100%; |
| max-width: 400px; |
| } |
| |
| .auth-logo { |
| text-align: center; |
| margin-bottom: 30px; |
| } |
| |
| .auth-logo h1 { |
| color: #4a5568; |
| margin-bottom: 10px; |
| font-size: 24px; |
| } |
| |
| .auth-logo p { |
| color: #718096; |
| font-size: 14px; |
| } |
| |
| .auth-form .form-group { |
| margin-bottom: 20px; |
| } |
| |
| .auth-form label { |
| display: block; |
| margin-bottom: 8px; |
| color: #4a5568; |
| font-weight: 600; |
| } |
| |
| .auth-form input { |
| width: 100%; |
| padding: 12px 16px; |
| border: 2px solid #e2e8f0; |
| border-radius: 10px; |
| font-size: 16px; |
| transition: all 0.3s ease; |
| } |
| |
| .auth-form input:focus { |
| outline: none; |
| border-color: #667eea; |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| } |
| |
| .btn-auth { |
| width: 100%; |
| padding: 12px; |
| background: #667eea; |
| color: white; |
| border: none; |
| border-radius: 10px; |
| font-size: 16px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .btn-auth:hover { |
| background: #5a67d8; |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); |
| } |
| |
| .auth-links { |
| text-align: center; |
| margin-top: 20px; |
| padding-top: 20px; |
| border-top: 1px solid #e2e8f0; |
| } |
| |
| .auth-links a { |
| color: #667eea; |
| text-decoration: none; |
| margin: 0 10px; |
| transition: color 0.3s ease; |
| } |
| |
| .auth-links a:hover { |
| color: #5a67d8; |
| text-decoration: underline; |
| } |
| |
| .error-message { |
| background: #fed7d7; |
| color: #742a2a; |
| padding: 10px; |
| border-radius: 8px; |
| margin-bottom: 20px; |
| text-align: center; |
| display: none; |
| } |
| |
| .success-message { |
| background: #c6f6d5; |
| color: #22543d; |
| padding: 10px; |
| border-radius: 8px; |
| margin-bottom: 20px; |
| text-align: center; |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="auth-container"> |
| <div class="auth-card"> |
| <div class="auth-logo"> |
| <h1>🎓 RewardApp</h1> |
| <p>پلتفرم آموزش توسعه وب</p> |
| </div> |
| |
| <div id="errorMessage" class="error-message"></div> |
| <div id="successMessage" class="success-message"></div> |
| |
| <form id="loginForm" class="auth-form"> |
| <div class="form-group"> |
| <label for="username">نام کاربری</label> |
| <input |
| type="text" |
| id="username" |
| name="username" |
| placeholder="نام کاربری خود را وارد کنید" |
| required |
| > |
| </div> |
| |
| <div class="form-group"> |
| <label for="password">رمز عبور</label> |
| <input |
| type="password" |
| id="password" |
| name="password" |
| placeholder="رمز عبور خود را وارد کنید" |
| required |
| > |
| </div> |
| |
| <button type="submit" class="btn-auth">ورود به سیستم</button> |
| </form> |
| |
| <div class="auth-links"> |
| <a href="register.html">حساب کاربری ندارید؟ ثبت نام</a> |
| <br> |
| <a href="index.html">بازگشت به صفحه اصلی</a> |
| </div> |
| |
| <div class="demo-accounts" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0;"> |
| <h3 style="text-align: center; color: #718096; font-size: 14px; margin-bottom: 15px;">حساب‌های دمو:</h3> |
| <div style="display: grid; gap: 10px; font-size: 12px;"> |
| <div style="display: flex; justify-content: space-between;"> |
| <span>دانشجو:</span> |
| <span><strong>student</strong> / <strong>password123</strong></span> |
| </div> |
| <div style="display: flex; justify-content: space-between;"> |
| <span>مدیر:</span> |
| <span><strong>admin</strong> / <strong>admin123</strong></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <script src="js/auth/authentication.js"></script> |
| <script src="js/auth/authorization.js"></script> |
| <script src="js/auth/user_management.js"></script> |
| <script src="js/middleware/validation_middleware.js"></script> |
| |
| <script> |
| class LoginPage { |
| constructor() { |
| this.init(); |
| } |
| |
| init() { |
| this.setupEventListeners(); |
| this.checkExistingAuth(); |
| } |
| |
| setupEventListeners() { |
| const loginForm = document.getElementById('loginForm'); |
| if (loginForm) { |
| loginForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| this.handleLogin(); |
| }); |
| } |
| |
| |
| document.addEventListener('click', () => { |
| this.hideMessages(); |
| }); |
| } |
| |
| checkExistingAuth() { |
| if (authManager.isAuthenticated()) { |
| this.showMessage('شما قبلاً وارد شده‌اید. در حال انتقال...', 'success'); |
| setTimeout(() => { |
| window.location.href = 'index.html'; |
| }, 2000); |
| } |
| } |
| |
| async handleLogin() { |
| const formData = new FormData(document.getElementById('loginForm')); |
| const data = { |
| username: formData.get('username').trim(), |
| password: formData.get('password') |
| }; |
| |
| |
| const validation = ValidationMiddleware.validateLoginData(data); |
| if (!validation.isValid) { |
| this.showMessage(validation.errors.join(' • '), 'error'); |
| return; |
| } |
| |
| |
| const result = authManager.loginUser(data.username, data.password); |
| |
| if (result.success) { |
| this.showMessage('ورود موفقیت‌آمیز! در حال انتقال...', 'success'); |
| |
| |
| authManager.setToken(result.token); |
| authManager.setCurrentUser(result.user); |
| |
| setTimeout(() => { |
| window.location.href = 'index.html'; |
| }, 1500); |
| } else { |
| this.showMessage(result.message || 'خطا در ورود به سیستم', 'error'); |
| } |
| } |
| |
| showMessage(message, type = 'error') { |
| const errorElement = document.getElementById('errorMessage'); |
| const successElement = document.getElementById('successMessage'); |
| |
| if (type === 'error') { |
| errorElement.textContent = message; |
| errorElement.style.display = 'block'; |
| successElement.style.display = 'none'; |
| } else { |
| successElement.textContent = message; |
| successElement.style.display = 'block'; |
| errorElement.style.display = 'none'; |
| } |
| |
| |
| setTimeout(() => { |
| this.hideMessages(); |
| }, 5000); |
| } |
| |
| hideMessages() { |
| document.getElementById('errorMessage').style.display = 'none'; |
| document.getElementById('successMessage').style.display = 'none'; |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| new LoginPage(); |
| }); |
| |
| |
| window.addEventListener('error', (event) => { |
| console.error('Global error:', event.error); |
| }); |
| </script> |
| </body> |
| </html> |
