Update login.html

login.html

@@ -6,7 +6,274 @@
     <title>نظام المصادقة الذكي</title>
     <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        /* Your existing CSS remains the same */
+        :root {
+            --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
+            --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+            --text-primary: #ffffff;
+            --text-secondary: #94a3b8;
+            --text-error: #ef4444;
+            --text-success: #10b981;
+            --bg-dark: #0f172a;
+            --bg-card: rgba(255, 255, 255, 0.05);
+            --border-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Cairo', sans-serif;
+        }
+
+        body {
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: var(--bg-dark);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .background-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            opacity: 0.5;
+        }
+
+        .circle {
+            position: absolute;
+            border-radius: 50%;
+            animation: float 15s infinite ease-in-out;
+        }
+
+        .circle-1 {
+            width: 400px;
+            height: 400px;
+            background: var(--primary-gradient);
+            top: -200px;
+            left: -200px;
+            opacity: 0.2;
+        }
+
+        .circle-2 {
+            width: 500px;
+            height: 500px;
+            background: var(--secondary-gradient);
+            bottom: -250px;
+            right: -250px;
+            opacity: 0.15;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            50% { transform: translate(30px, 30px) rotate(15deg); }
+        }
+
+        .container {
+            width: 100%;
+            max-width: 420px;
+            padding: 2rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        .auth-card {
+            background: var(--bg-card);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--border-color);
+            border-radius: 24px;
+            padding: 2.5rem;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            animation: cardAppear 0.6s ease-out;
+        }
+
+        @keyframes cardAppear {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .card-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .card-header h1 {
+            color: var(--text-primary);
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            animation: glowText 2s infinite alternate;
+        }
+
+        .card-header p {
+            color: var(--text-secondary);
+            font-size: 1rem;
+        }
+
+        @keyframes glowText {
+            from { text-shadow: 0 0 10px rgba(79, 70, 229, 0); }
+            to { text-shadow: 0 0 20px rgba(79, 70, 229, 0.5); }
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+
+        .form-label {
+            display: block;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+            font-size: 0.95rem;
+            font-weight: 500;
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            color: var(--text-primary);
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .form-input:focus {
+            outline: none;
+            border-color: #4f46e5;
+            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
+        }
+
+        .form-input::placeholder {
+            color: var(--text-secondary);
+        }
+
+        .submit-btn {
+            width: 100%;
+            padding: 1rem;
+            background: var(--primary-gradient);
+            border: none;
+            border-radius: 12px;
+            color: var(--text-primary);
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .submit-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
+        }
+
+        .message {
+            padding: 1rem;
+            border-radius: 12px;
+            margin-bottom: 1.5rem;
+            text-align: center;
+            animation: messageSlide 0.3s ease-out;
+            font-weight: 500;
+        }
+
+        @keyframes messageSlide {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .error-message {
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.2);
+            color: var(--text-error);
+        }
+
+        .success-message {
+            background: rgba(16, 185, 129, 0.1);
+            border: 1px solid rgba(16, 185, 129, 0.2);
+            color: var(--text-success);
+        }
+
+        .switch-form {
+            text-align: center;
+            margin-top: 1.5rem;
+            color: var(--text-secondary);
+        }
+
+        .switch-form a {
+            color: #4f46e5;
+            text-decoration: none;
+            font-weight: 500;
+            margin-right: 0.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .switch-form a:hover {
+            color: #818cf8;
+            text-decoration: underline;
+        }
+
+        .loading .submit-btn {
+            pointer-events: none;
+            opacity: 0.7;
+        }
+
+        .loading .submit-btn::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 20px;
+            height: 20px;
+            border: 2px solid #ffffff;
+            border-radius: 50%;
+            border-top-color: transparent;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+
+        .tabs {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 2rem;
+            gap: 1rem;
+        }
+
+        .tab {
+            padding: 0.5rem 1.5rem;
+            border: none;
+            background: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 1rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+
+        .tab.active {
+            color: var(--text-primary);
+            position: relative;
+        }
+
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: var(--primary-gradient);
+            border-radius: 2px;
+        }
     </style>
 </head>
 <body>
@@ -16,51 +283,75 @@
     </div>
 
     <div class="container">
-        <div class="login-card">
+        <div class="auth-card">
             <div class="card-header">
-                <h1>تسجيل الدخول</h1>
+                <h1>نظام المصادقة</h1>
                 <p>مرحباً بك في نظام المصادقة الذكي</p>
             </div>
 
-            <form id="loginForm">
-                <div id="messageBox"></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
-                    >
+                    <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
-                    >
+                    <input type="password" class="form-input" name="password" placeholder="أدخل كلمة المرور" required>
                 </div>
-
                 <button type="submit" class="submit-btn">تسجيل الدخول</button>
             </form>
 
-            <div class="switch-form">
-                <p>ليس لديك حساب؟ <a href="#" id="switchToRegister">إنشاء حساب جديد</a></p>
-            </div>
+            <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>
+        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('messageBox');
+            const messageBox = document.getElementById('loginMessage');
             
             try {
                 form.classList.add('loading');
@@ -85,12 +376,56 @@
                     localStorage.setItem('token', data.access_token);
                     // Redirect or update UI as needed
                 } else {
-                    throw new Error(data.detail || 'حدث خطأ أثناء تسجيل الدخول');
+                    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('http://localhost:6000/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}
+                        ${error.message === 'Failed to fetch' ? 'فشل الاتصال بالخادم' : error.message}
                     </div>
                 `;
             } finally {