|
|
<!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: 450px; |
|
|
} |
|
|
|
|
|
.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, .auth-form select { |
|
|
width: 100%; |
|
|
padding: 12px 16px; |
|
|
border: 2px solid #e2e8f0; |
|
|
border-radius: 10px; |
|
|
font-size: 16px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.auth-form input:focus, .auth-form select:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|
|
} |
|
|
|
|
|
.form-row { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
.password-strength { |
|
|
margin-top: 5px; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.strength-weak { color: #e53e3e; } |
|
|
.strength-medium { color: #dd6b20; } |
|
|
.strength-strong { color: #38a169; } |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.form-row { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.auth-card { |
|
|
padding: 30px 20px; |
|
|
} |
|
|
} |
|
|
</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="registerForm" class="auth-form"> |
|
|
<div class="form-row"> |
|
|
<div class="form-group"> |
|
|
<label for="firstName">نام</label> |
|
|
<input |
|
|
type="text" |
|
|
id="firstName" |
|
|
name="firstName" |
|
|
placeholder="نام خود را وارد کنید" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="lastName">نام خانوادگی</label> |
|
|
<input |
|
|
type="text" |
|
|
id="lastName" |
|
|
name="lastName" |
|
|
placeholder="نام خانوادگی خود را وارد کنید" |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="username">نام کاربری *</label> |
|
|
<input |
|
|
type="text" |
|
|
id="username" |
|
|
name="username" |
|
|
placeholder="نام کاربری مورد نظر" |
|
|
required |
|
|
> |
|
|
<small style="color: #718096; font-size: 12px;">نام کاربری باید 3-20 کاراکتر و فقط شامل حروف، اعداد و زیرخط باشد</small> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="email">ایمیل *</label> |
|
|
<input |
|
|
type="email" |
|
|
id="email" |
|
|
name="email" |
|
|
placeholder="example@email.com" |
|
|
required |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="password">رمز عبور *</label> |
|
|
<input |
|
|
type="password" |
|
|
id="password" |
|
|
name="password" |
|
|
placeholder="حداقل 6 کاراکتر" |
|
|
required |
|
|
oninput="checkPasswordStrength(this.value)" |
|
|
> |
|
|
<div id="passwordStrength" class="password-strength"></div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="confirmPassword">تکرار رمز عبور *</label> |
|
|
<input |
|
|
type="password" |
|
|
id="confirmPassword" |
|
|
name="confirmPassword" |
|
|
placeholder="تکرار رمز عبور" |
|
|
required |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="role">نقش کاربری</label> |
|
|
<select id="role" name="role"> |
|
|
<option value="student">دانشجو</option> |
|
|
<option value="instructor">مربی</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="bio">درباره من</label> |
|
|
<textarea |
|
|
id="bio" |
|
|
name="bio" |
|
|
rows="3" |
|
|
placeholder="توضیح مختصری درباره خودتان..." |
|
|
style="width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; resize: vertical; font-family: inherit;" |
|
|
></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="form-group" style="display: flex; align-items: start; gap: 10px; font-size: 14px;"> |
|
|
<input type="checkbox" id="terms" name="terms" required style="width: auto; margin-top: 3px;"> |
|
|
<label for="terms" style="margin: 0;"> |
|
|
با <a href="#" style="color: #667eea;">قوانین و مقررات</a> پلتفرم موافقم |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="btn-auth">ایجاد حساب کاربری</button> |
|
|
</form> |
|
|
|
|
|
<div class="auth-links"> |
|
|
<a href="login.html">قبلاً ثبت نام کرده‌اید؟ ورود</a> |
|
|
<br> |
|
|
<a href="index.html">بازگشت به صفحه اصلی</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="js/auth/authentication.js"></script> |
|
|
<script src="js/auth/user_management.js"></script> |
|
|
<script src="js/middleware/validation_middleware.js"></script> |
|
|
|
|
|
<script> |
|
|
class RegisterPage { |
|
|
constructor() { |
|
|
this.init(); |
|
|
} |
|
|
|
|
|
init() { |
|
|
this.setupEventListeners(); |
|
|
this.checkExistingAuth(); |
|
|
} |
|
|
|
|
|
setupEventListeners() { |
|
|
const registerForm = document.getElementById('registerForm'); |
|
|
if (registerForm) { |
|
|
registerForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
this.handleRegistration(); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('click', () => { |
|
|
this.hideMessages(); |
|
|
}); |
|
|
} |
|
|
|
|
|
checkExistingAuth() { |
|
|
if (authManager.isAuthenticated()) { |
|
|
this.showMessage('شما قبلاً وارد شده‌اید. در حال انتقال...', 'success'); |
|
|
setTimeout(() => { |
|
|
window.location.href = 'index.html'; |
|
|
}, 2000); |
|
|
} |
|
|
} |
|
|
|
|
|
async handleRegistration() { |
|
|
const formData = new FormData(document.getElementById('registerForm')); |
|
|
const data = { |
|
|
firstName: formData.get('firstName')?.trim(), |
|
|
lastName: formData.get('lastName')?.trim(), |
|
|
username: formData.get('username').trim(), |
|
|
email: formData.get('email').trim(), |
|
|
password: formData.get('password'), |
|
|
confirmPassword: formData.get('confirmPassword'), |
|
|
role: formData.get('role'), |
|
|
bio: formData.get('bio')?.trim(), |
|
|
terms: formData.get('terms') |
|
|
}; |
|
|
|
|
|
|
|
|
const validation = ValidationMiddleware.validateRegisterData(data); |
|
|
if (!validation.isValid) { |
|
|
this.showMessage(validation.errors.join(' • '), 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (!data.terms) { |
|
|
this.showMessage('پذیرش قوانین و مقررات الزامی است', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const profile = { |
|
|
fullName: `${data.firstName || ''} ${data.lastName || ''}`.trim(), |
|
|
bio: data.bio || '' |
|
|
}; |
|
|
|
|
|
|
|
|
const result = authManager.registerUser( |
|
|
data.username, |
|
|
data.email, |
|
|
data.password, |
|
|
data.role, |
|
|
profile |
|
|
); |
|
|
|
|
|
if (result.success) { |
|
|
this.showMessage('حساب کاربری با موفقیت ایجاد شد! در حال انتقال به صفحه ورود...', 'success'); |
|
|
|
|
|
|
|
|
document.getElementById('registerForm').reset(); |
|
|
document.getElementById('passwordStrength').textContent = ''; |
|
|
|
|
|
setTimeout(() => { |
|
|
window.location.href = 'login.html'; |
|
|
}, 3000); |
|
|
} 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'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function checkPasswordStrength(password) { |
|
|
const strengthElement = document.getElementById('passwordStrength'); |
|
|
if (!password) { |
|
|
strengthElement.textContent = ''; |
|
|
return; |
|
|
} |
|
|
|
|
|
let strength = 0; |
|
|
let feedback = ''; |
|
|
|
|
|
if (password.length >= 6) strength++; |
|
|
if (password.length >= 8) strength++; |
|
|
if (/[A-Z]/.test(password)) strength++; |
|
|
if (/[0-9]/.test(password)) strength++; |
|
|
if (/[^A-Za-z0-9]/.test(password)) strength++; |
|
|
|
|
|
if (strength <= 2) { |
|
|
feedback = 'ضعیف'; |
|
|
strengthElement.className = 'password-strength strength-weak'; |
|
|
} else if (strength <= 4) { |
|
|
feedback = 'متوسط'; |
|
|
strengthElement.className = 'password-strength strength-medium'; |
|
|
} else { |
|
|
feedback = 'قوی'; |
|
|
strengthElement.className = 'password-strength strength-strong'; |
|
|
} |
|
|
|
|
|
strengthElement.textContent = `قدرت رمز: ${feedback}`; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
new RegisterPage(); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('error', (event) => { |
|
|
console.error('Global error:', event.error); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
