orion/static/admin/js/login.js

// 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');
        }
    }
}