admin login migration to new structure, new design

static/admin/js/login.js

@@ -0,0 +1,130 @@
+// Admin Login Component
+function adminLogin() {
+    return {
+        dark: false, // For dark mode toggle
+        credentials: {
+            username: '',
+            password: ''
+        },
+        loading: false,
+        error: null,
+        success: null,
+        errors: {},
+
+        init() {
+            // Check if already logged in
+            this.checkExistingAuth();
+
+            // Check for dark mode preference
+            this.dark = localStorage.getItem('theme') === 'dark';
+        },
+
+        checkExistingAuth() {
+            const token = localStorage.getItem('admin_token') || localStorage.getItem('token');
+            if (token) {
+                // Verify token is still valid
+                const userData = localStorage.getItem('admin_user');
+                if (userData) {
+                    try {
+                        const user = JSON.parse(userData);
+                        if (user.role === 'admin') {
+                            window.location.href = '/static/admin/dashboard.html';
+                        }
+                    } catch (e) {
+                        // Invalid user data, clear storage
+                        this.clearAuthData();
+                    }
+                }
+            }
+        },
+
+        clearAuthData() {
+            localStorage.removeItem('admin_token');
+            localStorage.removeItem('admin_user');
+            localStorage.removeItem('token');
+        },
+
+        clearErrors() {
+            this.error = null;
+            this.success = null;
+            this.errors = {};
+        },
+
+        validateForm() {
+            this.clearErrors();
+            let isValid = true;
+
+            if (!this.credentials.username.trim()) {
+                this.errors.username = 'Username is required';
+                isValid = false;
+            }
+
+            if (!this.credentials.password) {
+                this.errors.password = 'Password is required';
+                isValid = false;
+            } else if (this.credentials.password.length < 6) {
+                this.errors.password = 'Password must be at least 6 characters';
+                isValid = false;
+            }
+
+            return isValid;
+        },
+
+        async handleLogin() {
+            if (!this.validateForm()) {
+                return;
+            }
+
+            this.loading = true;
+            this.clearErrors();
+
+            try {
+                // Use apiClient from api-client.js
+                const response = await apiClient.post('/admin/auth/login', {
+                    username: this.credentials.username.trim(),
+                    password: this.credentials.password
+                });
+
+                // Validate response
+                if (!response.access_token) {
+                    throw new Error('Invalid response from server');
+                }
+
+                // Check if user is admin (if user data is provided)
+                if (response.user && response.user.role !== 'admin') {
+                    throw new Error('Access denied. Admin privileges required.');
+                }
+
+                // Store authentication data
+                localStorage.setItem('admin_token', response.access_token);
+                localStorage.setItem('token', response.access_token); // Backup
+
+                if (response.user) {
+                    localStorage.setItem('admin_user', JSON.stringify(response.user));
+                }
+
+                // Show success message
+                this.success = 'Login successful! Redirecting...';
+
+                // Redirect after short delay
+                setTimeout(() => {
+                    window.location.href = '/static/admin/dashboard.html';
+                }, 1000);
+
+            } catch (error) {
+                console.error('Login error:', error);
+                this.error = error.message || 'Invalid username or password. Please try again.';
+
+                // Clear any partial auth data
+                this.clearAuthData();
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        toggleDarkMode() {
+            this.dark = !this.dark;
+            localStorage.setItem('theme', this.dark ? 'dark' : 'light');
+        }
+    }
+}