Update login.html

login.html

@@ -342,197 +342,272 @@
     </div>
 
     <script>
-        const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6500/api';
-        
-        // التحقق من وجود token عند تحميل الصفحة
-        document.addEventListener('DOMContentLoaded', function() {
-            const token = localStorage.getItem('userToken');
-            if (token) {
-                window.location.href = '/dashboard';
-            }
-        });
+         // الثوابت والتكوينات
+const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6500/api';
+const VALIDATION_RULES = {
+    officeName: {
+        minLength: 3,
+        maxLength: 100
+    },
+    password: {
+        minLength: 8,
+        maxLength: 50
+    },
+    phone: {
+        pattern: /^(\+201|01)[0-2|5][0-9]{8}$/,
+        message: 'الرجاء إدخال رقم هاتف مصري صحيح'
+    },
+    email: {
+        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+        message: 'الرجاء إدخال بريد إلكتروني صحيح'
+    }
+};
+
+// وظائف المساعدة
+function validateInput(value, rules) {
+    if (!value || typeof value !== 'string') {
+        return 'هذا الحقل مطلوب';
+    }
+
+    value = value.trim();
+
+    if (rules.minLength && value.length < rules.minLength) {
+        return `يجب أن يكون الحقل ${rules.minLength} أحرف على الأقل`;
+    }
+
+    if (rules.maxLength && value.length > rules.maxLength) {
+        return `يجب أن لا يتجاوز الحقل ${rules.maxLength} حرف`;
+    }
+
+    if (rules.pattern && !rules.pattern.test(value)) {
+        return rules.message;
+    }
+
+    return null;
+}
+
+function formatPhoneNumber(phone) {
+    // تنسيق رقم الهاتف بشكل موحد
+    phone = phone.trim().replace(/\s+/g, '');
+    if (phone.startsWith('01')) {
+        return phone;
+    }
+    if (phone.startsWith('+201')) {
+        return '0' + phone.slice(3);
+    }
+    return phone;
+}
+
+function showMessage(elementId, message, isError = false) {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+    
+    element.textContent = message;
+    element.className = `message ${isError ? 'error' : 'success'} ${message ? 'show' : ''}`;
+}
 
-        function toggleForm() {
-            document.querySelector('.forms-container').classList.toggle('flipped');
-            clearMessages();
-            enableButtons();
-        }
+function toggleLoadingState(formId, isLoading) {
+    const form = document.getElementById(formId);
+    if (!form) return;
 
-        function clearMessages() {
-            document.querySelectorAll('.message').forEach(msg => {
-                msg.className = 'message';
-                msg.textContent = '';
-            });
-        }
+    const button = form.querySelector('button[type="submit"]');
+    const spinner = button?.querySelector('.loading-spinner');
+    const inputs = form.querySelectorAll('input, select');
+    
+    if (button) button.disabled = isLoading;
+    if (spinner) spinner.style.display = isLoading ? 'block' : 'none';
+    inputs.forEach(input => input.disabled = isLoading);
+}
+
+// التحقق من صحة نموذج التسجيل
+function validateRegistrationForm(formData) {
+    const errors = [];
+
+    // التحقق من اسم المكتب
+    const officeNameError = validateInput(formData.officeName, VALIDATION_RULES.officeName);
+    if (officeNameError) errors.push(officeNameError);
+
+    // التحقق من الدور
+    if (!formData.userRole) {
+        errors.push('الرجاء اختيار صفة المسجل');
+    }
+
+    // التحقق من رقم الهاتف
+    const phoneError = validateInput(formData.phone, VALIDATION_RULES.phone);
+    if (phoneError) errors.push(phoneError);
+
+    // التحقق من البريد الإلكتروني
+    const emailError = validateInput(formData.email, VALIDATION_RULES.email);
+    if (emailError) errors.push(emailError);
+
+    // التحقق من كلمة المرور
+    const passwordError = validateInput(formData.password, VALIDATION_RULES.password);
+    if (passwordError) errors.push(passwordError);
+
+    return errors.length ? errors.join('\n') : null;
+}
+
+// معالجة التسجيل
+async function handleRegister(event) {
+    event.preventDefault();
+    
+    // جمع البيانات من النموذج
+    const formData = {
+        officeName: document.getElementById('officeName').value,
+        userRole: document.getElementById('userRole').value,
+        phone: document.getElementById('phone').value,
+        email: document.getElementById('registerEmail').value,
+        password: document.getElementById('registerPassword').value
+    };
+
+    // التحقق من صحة البيانات
+    const validationError = validateRegistrationForm(formData);
+    if (validationError) {
+        showMessage('registerMessage', validationError, true);
+        return false;
+    }
+
+    try {
+        toggleLoadingState('registerForm', true);
+        showMessage('registerMessage', 'جاري إنشاء الحساب...', false);
+
+        const response = await fetch(`${API_URL}/register`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({
+                officeName: formData.officeName.trim(),
+                userRole: formData.userRole,
+                phone: formatPhoneNumber(formData.phone),
+                email: formData.email.toLowerCase().trim(),
+                password: formData.password
+            })
+        });
 
-        function showMessage(elementId, message, isError = false) {
-            const element = document.getElementById(elementId);
-            element.textContent = message;
-            element.className = `message ${isError ? 'error' : 'success'} show`;
-        }
+        const data = await response.json();
 
-        function toggleLoadingState(formId, isLoading) {
-            const form = document.getElementById(formId);
-            const button = form.querySelector('button[type="submit"]');
-            const spinner = button.querySelector('.loading-spinner');
-            
-            button.disabled = isLoading;
-            spinner.style.display = isLoading ? 'block' : 'none';
+        if (response.ok) {
+            showMessage('registerMessage', 'تم إنشاء الحساب بنجاح! يمكنك الآن تسجيل الدخول', false);
             
-            form.querySelectorAll('input, select').forEach(input => {
-                input.disabled = isLoading;
-            });
-        }
+            // التحويل إلى صفحة تسجيل الدخول
+            setTimeout(() => {
+                toggleForm();
+                document.getElementById('loginEmail').value = formData.email;
+            }, 2000);
+        } else {
+            // معالجة أخطاء محددة من الخادم
+            const errorMessage = data.message || 'فشل إنشاء الحساب. الرجاء المحاولة مرة أخرى';
+            throw new Error(errorMessage);
+        }
+    } catch (error) {
+        showMessage('registerMessage', error.message, true);
+        console.error('Registration error:', error);
+    } finally {
+        toggleLoadingState('registerForm', false);
+    }
+
+    return false;
+}
+
+// معالجة تسجيل الدخول
+async function handleLogin(event) {
+    event.preventDefault();
+    
+    const email = document.getElementById('loginEmail').value;
+    const password = document.getElementById('loginPassword').value;
+
+    // التحقق الأساسي من البيانات
+    if (!email || !password) {
+        showMessage('loginMessage', 'الرجاء إدخال جميع البيانات المطلوبة', true);
+        return false;
+    }
+
+    const emailError = validateInput(email, VALIDATION_RULES.email);
+    if (emailError) {
+        showMessage('loginMessage', emailError, true);
+        return false;
+    }
+
+    try {
+        toggleLoadingState('loginForm', true);
+        showMessage('loginMessage', 'جاري تسجيل الدخول...', false);
+        
+        const response = await fetch(`${API_URL}/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({ 
+                email: email.toLowerCase().trim(), 
+                password 
+            })
+        });
 
-        function enableButtons() {
-            document.querySelectorAll('button').forEach(button => {
-                button.disabled = false;
-            });
-            document.querySelectorAll('.loading-spinner').forEach(spinner => {
-                spinner.style.display = 'none';
-            });
-        }
+        const data = await response.json();
 
-        async function handleLogin(event) {
-            event.preventDefault();
+        if (response.ok) {
+            localStorage.setItem('userToken', data.token);
+            localStorage.setItem('userData', JSON.stringify(data.user));
             
-            const email = document.getElementById('loginEmail').value;
-            const password = document.getElementById('loginPassword').value;
-
-            if (!email || !password) {
-                showMessage('loginMessage', 'الرجاء إدخال جميع البيانات المطلوبة', true);
-                return false;
-            }
-
-            if (!isValidEmail(email)) {
-                showMessage('loginMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
-                return false;
-            }
-          try {
-                toggleLoadingState('loginForm', true);
-                showMessage('loginMessage', 'جاري تسجيل الدخول...', false);
-                
-                const response = await fetch(`${API_URL}/login`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify({ email, password })
-                });
-
-                const data = await response.json();
-
-                if (response.ok) {
-                    // تخزين token في localStorage
-                    localStorage.setItem('userToken', data.token);
-                    localStorage.setItem('userData', JSON.stringify(data.user));
-                    
-                    showMessage('loginMessage', 'تم تسجيل الدخول بنجاح! جاري التحويل...', false);
-                    
-                    // التوجيه إلى لوحة التحكم بعد ثانية
-                    setTimeout(() => {
-                        window.location.href = '/dashboard';
-                    }, 1000);
-                } else {
-                    throw new Error(data.message || 'فشل تسجيل الدخول');
-                }
-            } catch (error) {
-                showMessage('loginMessage', error.message || 'حدث خطأ أثناء تسجيل الدخول. الرجاء المحاولة مرة أخرى', true);
-            } finally {
-                toggleLoadingState('loginForm', false);
-            }
-
-            return false;
-        }
-
-        async function handleRegister(event) {
-            event.preventDefault();
+            showMessage('loginMessage', 'تم تسجيل الدخول بنجاح! جاري التحويل...', false);
             
-            const officeName = document.getElementById('officeName').value;
-            const userRole = document.getElementById('userRole').value;
-            const phone = document.getElementById('phone').value;
-            const email = document.getElementById('registerEmail').value;
-            const password = document.getElementById('registerPassword').value;
-
-            if (!officeName || !userRole || !phone || !email || !password) {
-                showMessage('registerMessage', 'الرجاء إكمال جميع الحقول المطلوبة', true);
-                return false;
-            }
-
-            if (!isValidEmail(email)) {
-                showMessage('registerMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
-                return false;
-            }
-
-            if (password.length < 8) {
-                showMessage('registerMessage', 'كلمة المرور يجب أن تكون 8 أحرف على الأقل', true);
-                return false;
-            }
-
-            // التحقق من صحة رقم الهاتف المصري
-            const egyptianPhoneRegex = /^(\+201|01)[0-2|5][0-9]{8}$/;
-            if (!egyptianPhoneRegex.test(phone)) {
-                showMessage('registerMessage', 'الرجاء إدخال رقم هاتف مصري صحيح', true);
-                return false;
-            }
-
-            try {
-                toggleLoadingState('registerForm', true);
-                showMessage('registerMessage', 'جاري إنشاء الحساب...', false);
-
-                const response = await fetch(`${API_URL}/register`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        officeName,
-                        userRole,
-                        phone,
-                        email,
-                        password
-                    })
-                });
-
-                const data = await response.json();
-
-                if (response.ok) {
-                    showMessage('registerMessage', 'تم إنشاء الحساب بنجاح! يمكنك الآن تسجيل الدخول', false);
-                    
-                    // العودة إلى نموذج تسجيل الدخول بعد ثانيتين
-                    setTimeout(() => {
-                        toggleForm();
-                        document.getElementById('loginEmail').value = email;
-                    }, 2000);
-                } else {
-                    throw new Error(data.message || 'فشل إنشاء الحساب');
-                }
-            } catch (error) {
-                showMessage('registerMessage', error.message || 'حدث خطأ أثناء إنشاء الحساب. الرجاء المحاولة مرة أخرى', true);
-            } finally {
-                toggleLoadingState('registerForm', false);
-            }
-
-            return false;
-        }
-
-        function isValidEmail(email) {
-            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-        }
-
-        // معالجة الأخطاء العامة
-        window.onerror = function(msg, url, lineNo, columnNo, error) {
-            console.error('Error: ' + msg + '\nURL: ' + url + '\nLine: ' + lineNo + '\nColumn: ' + columnNo + '\nError object: ' + JSON.stringify(error));
-            return false;
-        };
-
-        // معالجة أخطاء الشبكة
-        window.addEventListener('offline', function(e) {
-            showMessage('loginMessage', 'لا يوجد اتصال بالإنترنت', true);
-            showMessage('registerMessage', 'لا يوجد اتصال بالإنترنت', true);
-        });
+            setTimeout(() => {
+                window.location.href = '/dashboard';
+            }, 1000);
+        } else {
+            throw new Error(data.message || 'فشل تسجيل الدخول');
+        }
+    } catch (error) {
+        showMessage('loginMessage', error.message, true);
+        console.error('Login error:', error);
+    } finally {
+        toggleLoadingState('loginForm', false);
+    }
+
+    return false;
+}
+
+// إضافة مستمعي الأحداث
+document.addEventListener('DOMContentLoaded', function() {
+    // التحقق من وجود token
+    const token = localStorage.getItem('userToken');
+    if (token) {
+        window.location.href = '/dashboard';
+    }
+
+    // إضافة مستمعي النماذج
+    const loginForm = document.getElementById('loginForm');
+    const registerForm = document.getElementById('registerForm');
+
+    if (loginForm) loginForm.addEventListener('submit', handleLogin);
+    if (registerForm) registerForm.addEventListener('submit', handleRegister);
+});
+
+// معالجة الأخطاء العامة
+window.onerror = function(msg, url, lineNo, columnNo, error) {
+    console.error('Error:', {
+        message: msg,
+        url: url,
+        line: lineNo,
+        column: columnNo,
+        error: error
+    });
+    return false;
+};
+
+// معالجة حالة الاتصال بالإنترنت
+window.addEventListener('offline', function() {
+    showMessage('loginMessage', 'لا يوجد اتصال بالإنترنت', true);
+    showMessage('registerMessage', 'لا يوجد اتصال بالإنترنت', true);
+});
+
+window.addEventListener('online', function() {
+    showMessage('loginMessage', '');
+    showMessage('registerMessage', '');
+});
     </script>
 </body>
 </html>