Spaces:

joermd
/

mostasharak

Running

App Files Files Community

joermd commited on Jan 9, 2025

Commit

edb4daf

verified ·

1 Parent(s): 87874cf

Update login.html

Browse files

Files changed (1) hide show

@@ -1,177 +1,202 @@
 <!DOCTYPE html>
 <html lang="ar" dir="rtl">
-<!-- Previous head and style sections remain exactly the same -->
 <head>
-    <!-- Previous head content remains the same -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>نظام المصادقة الذكي</title>
-    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        /* Previous styles remain exactly the same */
-        /* ... */
     </style>
 </head>
 <body>
-    <!-- Previous HTML structure remains exactly the same until the script section -->
-    <div class="background-animation">
-        <div class="circle circle-1"></div>
-        <div class="circle circle-2"></div>
-    </div>
     <div class="container">
-        <div class="auth-card">
-            <div class="card-header">
-                <h1>نظام المصادقة</h1>
-                <p>مرحباً بك في نظام المصادقة الذكي</p>
             </div>
-            <div class="tabs">
-                <button class="tab active" onclick="switchTab('login')">تسجيل الدخول</button>
-                <button class="tab" onclick="switchTab('register')">حساب جديد</button>
             </div>
-            <form id="loginForm" style="display: block;">
-                <div id="loginMessage"></div>
-                <div class="form-group">
-                    <label class="form-label">اسم المستخدم</label>
-                    <input type="text" class="form-input" name="username" placeholder="أدخل اسم المستخدم" required>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">كلمة المرور</label>
-                    <input type="password" class="form-input" name="password" placeholder="أدخل كلمة المرور" required>
-                </div>
-                <button type="submit" class="submit-btn">تسجيل الدخول</button>
-            </form>
-            <form id="registerForm" style="display: none;">
-                <div id="registerMessage"></div>
-                <div class="form-group">
-                    <label class="form-label">اسم المستخدم</label>
-                    <input type="text" class="form-input" name="username" placeholder="أدخل اسم المستخدم" required>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">البريد الإلكتروني</label>
-                    <input type="email" class="form-input" name="email" placeholder="أدخل البريد الإلكتروني" required>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">الاسم الكامل</label>
-                    <input type="text" class="form-input" name="fullName" placeholder="أدخل اسمك الكامل">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">كلمة المرور</label>
-                    <input type="password" class="form-input" name="password" placeholder="أدخل كلمة المرور" required>
-                </div>
-                <button type="submit" class="submit-btn">إنشاء حساب</button>
-            </form>
         </div>
     </div>
     <script>
-        // API Base URL
-        const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6000';
-        function switchTab(tab) {
-            const loginForm = document.getElementById('loginForm');
-            const registerForm = document.getElementById('registerForm');
-            const tabs = document.querySelectorAll('.tab');
-            tabs.forEach(t => t.classList.remove('active'));
-            if (tab === 'login') {
-                loginForm.style.display = 'block';
-                registerForm.style.display = 'none';
-                tabs[0].classList.add('active');
-            } else {
-                loginForm.style.display = 'none';
-                registerForm.style.display = 'block';
-                tabs[1].classList.add('active');
-            }
         }
-        document.getElementById('loginForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const form = e.target;
-            const messageBox = document.getElementById('loginMessage');
             try {
-                form.classList.add('loading');
-                const formData = new FormData();
-                formData.append('username', form.username.value);
-                formData.append('password', form.password.value);
-                const response = await fetch(`${API_URL}/token`, {
                     method: 'POST',
-                    body: formData
                 });
                 const data = await response.json();
                 if (response.ok) {
-                    messageBox.innerHTML = `
-                        <div class="message success-message">
-                            تم تسجيل الدخول بنجاح
-                        </div>
-                    `;
-                    localStorage.setItem('token', data.access_token);
-                    // يمكنك إضافة إعادة توجيه هنا إذا كنت ترغب
                 } else {
-                    throw new Error(data.detail || 'خطأ في تسجيل الدخول');
                 }
             } catch (error) {
-                messageBox.innerHTML = `
-                    <div class="message error-message">
-                        ${error.message === 'Failed to fetch' ? 'فشل الاتصال بالخادم' : error.message}
-                    </div>
-                `;
-            } finally {
-                form.classList.remove('loading');
             }
-        });
-        document.getElementById('registerForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const form = e.target;
-            const messageBox = document.getElementById('registerMessage');
             try {
-                form.classList.add('loading');
                 const response = await fetch(`${API_URL}/register`, {
                     method: 'POST',
                     headers: {
-                        'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify({
-                        username: form.username.value,
-                        email: form.email.value,
-                        full_name: form.fullName.value,
-                        password: form.password.value
-                    })
                 });
                 const data = await response.json();
                 if (response.ok) {
-                    messageBox.innerHTML = `
-                        <div class="message success-message">
-                            تم إنشاء الحساب بنجاح
-                        </div>
-                    `;
-                    setTimeout(() => switchTab('login'), 2000);
                 } else {
-                    throw new Error(data.detail || 'خطأ في إنشاء الحساب');
                 }
             } catch (error) {
-                messageBox.innerHTML = `
-                    <div class="message error-message">
-                        ${error.message === 'Failed to fetch' ? 'فشل الاتصال بالخادم' : error.message}
-                    </div>
-                `;
-            } finally {
-                form.classList.remove('loading');
             }
-        });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>نظام تسجيل الدخول</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Cairo', sans-serif;
+        }
+        body {
+            background: linear-gradient(120deg, #2980b9, #8e44ad);
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .container {
+            width: 100%;
+            max-width: 400px;
+            padding: 20px;
+        }
+        .form-box {
+            background: white;
+            padding: 40px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            display: none;
+        }
+        .form-box.active {
+            display: block;
+        }
+        h2 {
+            text-align: center;
+            color: #2c3e50;
+            margin-bottom: 30px;
+        }
+        .input-group {
+            margin-bottom: 20px;
+        }
+        input {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        button {
+            width: 100%;
+            padding: 12px;
+            background: #3498db;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        button:hover {
+            background: #2980b9;
+        }
+        .switch-form {
+            text-align: center;
+            margin-top: 20px;
+            color: white;
+            cursor: pointer;
+        }
+        .error-message {
+            color: #e74c3c;
+            margin-top: 10px;
+            text-align: center;
+        }
+        .success-message {
+            color: #2ecc71;
+            margin-top: 10px;
+            text-align: center;
+        }
     </style>
 </head>
 <body>
     <div class="container">
+        <!-- نموذج تسجيل الدخول -->
+        <div id="loginForm" class="form-box active">
+            <h2>تسجيل الدخول</h2>
+            <div class="input-group">
+                <input type="text" id="loginUsername" placeholder="اسم المستخدم">
             </div>
+            <div class="input-group">
+                <input type="password" id="loginPassword" placeholder="كلمة المرور">
             </div>
+            <button onclick="login()">دخول</button>
+            <div id="loginError" class="error-message"></div>
+            <div id="loginSuccess" class="success-message"></div>
+            <div class="switch-form" onclick="toggleForms()">إنشاء حساب جديد</div>
+        </div>
+        <!-- نموذج إنشاء حساب -->
+        <div id="registerForm" class="form-box">
+            <h2>إنشاء حساب جديد</h2>
+            <div class="input-group">
+                <input type="text" id="registerUsername" placeholder="اسم المستخدم">
+            </div>
+            <div class="input-group">
+                <input type="password" id="registerPassword" placeholder="كلمة المرور">
+            </div>
+            <button onclick="register()">إنشاء حساب</button>
+            <div id="registerError" class="error-message"></div>
+            <div id="registerSuccess" class="success-message"></div>
+            <div class="switch-form" onclick="toggleForms()">تسجيل الدخول</div>
         </div>
     </div>
     <script>
+        const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6500/api';  // قم بتغيير هذا إلى عنوان RunPod الخاص بك
+        function toggleForms() {
+            document.getElementById('loginForm').classList.toggle('active');
+            document.getElementById('registerForm').classList.toggle('active');
+            // مسح رسائل الخطأ والنجاح
+            clearMessages();
+        }
+        function clearMessages() {
+            document.getElementById('loginError').textContent = '';
+            document.getElementById('loginSuccess').textContent = '';
+            document.getElementById('registerError').textContent = '';
+            document.getElementById('registerSuccess').textContent = '';
         }
+        async function login() {
+            const username = document.getElementById('loginUsername').value;
+            const password = document.getElementById('loginPassword').value;
             try {
+                const response = await fetch(`${API_URL}/login`, {
                     method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ username, password })
                 });
                 const data = await response.json();
                 if (response.ok) {
+                    document.getElementById('loginSuccess').textContent = data.message;
+                    setTimeout(() => {
+                        window.location.href = data.redirect_url;
+                    }, 1000);
                 } else {
+                    document.getElementById('loginError').textContent = data.detail;
                 }
             } catch (error) {
+                document.getElementById('loginError').textContent = 'حدث خطأ في الاتصال';
             }
+        }
+        async function register() {
+            const username = document.getElementById('registerUsername').value;
+            const password = document.getElementById('registerPassword').value;
             try {
                 const response = await fetch(`${API_URL}/register`, {
                     method: 'POST',
                     headers: {
+                        'Content-Type': 'application/json'
                     },
+                    body: JSON.stringify({ username, password })
                 });
                 const data = await response.json();
                 if (response.ok) {
+                    document.getElementById('registerSuccess').textContent = data.message;
+                    setTimeout(() => {
+                        toggleForms();
+                    }, 1500);
                 } else {
+                    document.getElementById('registerError').textContent = data.detail;
                 }
             } catch (error) {
+                document.getElementById('registerError').textContent = 'حدث خطأ في الاتصال';
             }
+        }
     </script>
 </body>
 </html>