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