|
|
<!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> |
