Spaces:

joermd
/

mostasharak

Running

App Files Files Community

joermd commited on Jan 11, 2025

Commit

36cd920

verified ·

1 Parent(s): 36cff15

Update login.html

Browse files

Files changed (1) hide show

@@ -153,7 +153,12 @@
             margin-top: 10px;
         }
-        button:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(218, 165, 32, 0.4);
         }
@@ -179,7 +184,7 @@
         }
         .message {
-            padding: 10px;
             margin-top: 15px;
             border-radius: 8px;
             text-align: center;
@@ -188,16 +193,40 @@
         .message.show {
             display: block;
         }
         .message.error {
             background-color: #ffebee;
             color: #d32f2f;
         }
         .message.success {
             background-color: #e8f5e9;
             color: #388e3c;
         }
         @media (max-width: 520px) {
@@ -213,12 +242,18 @@
             h2 {
                 font-size: 26px;
             }
         }
     </style>
 </head>
 <body>
     <div class="logo-container">
-        <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" class="logo" style="width: 100%; height: 100%; object-fit: contain; border-radius: 50%;">
     </div>
     <div class="container">
@@ -237,7 +272,10 @@
                         <input type="password" id="loginPassword" required placeholder="أدخل كلمة المرور">
                     </div>
-                    <button type="submit">تسجيل الدخول</button>
                     <div id="loginMessage" class="message"></div>
                 </form>
@@ -282,7 +320,10 @@
                         <input type="password" id="registerPassword" required placeholder="8 أحرف على الأقل" minlength="8">
                     </div>
-                    <button type="submit">إنشاء الحساب</button>
                     <div id="registerMessage" class="message"></div>
                 </form>
@@ -298,9 +339,18 @@
     <script>
         const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6500/api';
         function toggleForm() {
             document.querySelector('.forms-container').classList.toggle('flipped');
             clearMessages();
         }
         function clearMessages() {
@@ -316,7 +366,30 @@
             element.className = `message ${isError ? 'error' : 'success'} show`;
         }
-        function handleLogin(event) {
             event.preventDefault();
             const email = document.getElementById('loginEmail').value;
@@ -331,12 +404,45 @@
                 showMessage('loginMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
                 return false;
             }
-            showMessage('loginMessage', 'جاري تسجيل الدخول...', false);
             return false;
         }
-        function handleRegister(event) {
             event.preventDefault();
             const officeName = document.getElementById('officeName').value;
@@ -367,13 +473,62 @@
                 return false;
             }
-            showMessage('registerMessage', 'جاري إنشاء الحساب...', false);
             return false;
         }
         function isValidEmail(email) {
             return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
         }
     </script>
 </body>
 </html>

             margin-top: 10px;
         }
+        button:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+        }
+        button:hover:not(:disabled) {
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(218, 165, 32, 0.4);
         }
         }
         .message {
+            padding: 12px;
             margin-top: 15px;
             border-radius: 8px;
             text-align: center;
         .message.show {
             display: block;
+            animation: fadeIn 0.3s ease-in;
         }
         .message.error {
             background-color: #ffebee;
             color: #d32f2f;
+            border: 1px solid #ffcdd2;
         }
         .message.success {
             background-color: #e8f5e9;
             color: #388e3c;
+            border: 1px solid #c8e6c9;
+        }
+        .loading-spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: #fff;
+            animation: spin 1s ease-in-out infinite;
+            margin-left: 10px;
+            vertical-align: middle;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
         @media (max-width: 520px) {
             h2 {
                 font-size: 26px;
             }
+            .logo-container {
+                width: 120px;
+                height: 120px;
+                top: 20px;
+            }
         }
     </style>
 </head>
 <body>
     <div class="logo-container">
+        <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; border-radius: 50%;">
     </div>
     <div class="container">
                         <input type="password" id="loginPassword" required placeholder="أدخل كلمة المرور">
                     </div>
+                    <button type="submit" id="loginButton">
+                        تسجيل الدخول
+                        <span class="loading-spinner" style="display: none;"></span>
+                    </button>
                     <div id="loginMessage" class="message"></div>
                 </form>
                         <input type="password" id="registerPassword" required placeholder="8 أحرف على الأقل" minlength="8">
                     </div>
+                    <button type="submit" id="registerButton">
+                        إنشاء الحساب
+                        <span class="loading-spinner" style="display: none;"></span>
+                    </button>
                     <div id="registerMessage" class="message"></div>
                 </form>
     <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'; // توجيه المستخدم للوحة التحكم إذا كان مسجل دخول
+            }
+        });
         function toggleForm() {
             document.querySelector('.forms-container').classList.toggle('flipped');
             clearMessages();
+            enableButtons();
         }
         function clearMessages() {
             element.className = `message ${isError ? 'error' : 'success'} show`;
         }
+        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 ? 'inline-block' : 'none';
+            // تعطيل جميع المدخلات أثناء التحميل
+            form.querySelectorAll('input, select').forEach(input => {
+                input.disabled = isLoading;
+            });
+        }
+        function enableButtons() {
+            document.querySelectorAll('button').forEach(button => {
+                button.disabled = false;
+            });
+            document.querySelectorAll('.loading-spinner').forEach(spinner => {
+                spinner.style.display = 'none';
+            });
+        }
+        async function handleLogin(event) {
             event.preventDefault();
             const email = document.getElementById('loginEmail').value;
                 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();
             const officeName = document.getElementById('officeName').value;
                 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);
+        });
     </script>
 </body>
 </html>