Spaces:

NikaMimi
/

SirMeowManager

Sleeping

App Files Files Community

NikaMimi commited on Jul 25, 2025

Commit

78f0757

verified ·

1 Parent(s): d5e7dde

Upload 4 files

Browse files

Files changed (4) hide show

index.html +31 -0
login.html +253 -0
static/app.js +116 -2
static/styles.css +91 -0

index.html CHANGED Viewed

@@ -19,6 +19,9 @@
                         <h1>CatGPT Model Manager</h1>
                     </div>
                     <div class="header-stats">
                         <button class="theme-toggle" id="themeToggle" title="Toggle dark mode">
                             <i class="fas fa-moon" id="themeIcon"></i>
                         </button>
@@ -179,6 +182,34 @@
         </div>
     </div>
     <footer class="app-footer">
         <p>For aRfy's Cat Bot</p>
     </footer>

                         <h1>CatGPT Model Manager</h1>
                     </div>
                     <div class="header-stats">
+                        <button class="logout-btn" id="logoutBtn" title="Logout" onclick="modelManager.logout()">
+                            <i class="fas fa-sign-out-alt"></i>
+                        </button>
                         <button class="theme-toggle" id="themeToggle" title="Toggle dark mode">
                             <i class="fas fa-moon" id="themeIcon"></i>
                         </button>
         </div>
     </div>
+    <!-- Login Modal -->
+    <div class="modal-overlay" id="loginModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3><i class="fas fa-lock"></i> Admin Login</h3>
+                <button class="modal-close" id="loginModalClose">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form id="loginForm">
+                    <div class="form-group">
+                        <label for="adminKey">Admin Key</label>
+                        <input type="password" id="adminKey" name="adminKey" required placeholder="Enter admin key">
+                    </div>
+                    <div id="loginError" class="error-message" style="display: none;"></div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary" id="loginSubmit">
+                    <i class="fas fa-sign-in-alt"></i>
+                    Login
+                </button>
+            </div>
+        </div>
+    </div>
     <footer class="app-footer">
         <p>For aRfy's Cat Bot</p>
     </footer>

	@@ -0,0 +1,253 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CatGPT Admin Login</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .login-container {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            padding: 40px;
+            width: 100%;
+            max-width: 400px;
+            text-align: center;
+        }
+        .logo {
+            margin-bottom: 30px;
+        }
+        .logo i {
+            font-size: 3rem;
+            color: #667eea;
+            margin-bottom: 15px;
+        }
+        .logo h1 {
+            font-size: 1.5rem;
+            color: #333;
+            margin-bottom: 10px;
+        }
+        .logo p {
+            color: #666;
+            font-size: 0.9rem;
+        }
+        .login-form {
+            margin-top: 30px;
+        }
+        .form-group {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #333;
+            font-weight: 500;
+            font-size: 0.9rem;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e1e5e9;
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: white;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        .login-btn {
+            width: 100%;
+            padding: 14px;
+            background: #667eea;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        .login-btn:hover {
+            background: #5a67d8;
+            transform: translateY(-1px);
+        }
+        .login-btn:active {
+            transform: translateY(0);
+        }
+        .login-btn:disabled {
+            background: #cbd5e0;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .error-message {
+            background: #fed7d7;
+            color: #c53030;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-size: 0.9rem;
+            display: none;
+        }
+        .loading {
+            opacity: 0.7;
+            pointer-events: none;
+        }
+        .spinner {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="logo">
+            <i class="fas fa-robot"></i>
+            <h1>CatGPT Admin</h1>
+            <p>Please login to access the model manager</p>
+        </div>
+        <div id="errorMessage" class="error-message"></div>
+        <form class="login-form" id="loginForm">
+            <div class="form-group">
+                <label for="adminKey">Admin Key</label>
+                <input
+                    type="password"
+                    id="adminKey"
+                    name="adminKey"
+                    placeholder="Enter your admin key"
+                    required
+                    autocomplete="current-password"
+                >
+            </div>
+            <button type="submit" class="login-btn" id="loginBtn">
+                <i class="fas fa-sign-in-alt"></i>
+                <span>Login</span>
+            </button>
+        </form>
+    </div>
+    <script>
+        const loginForm = document.getElementById('loginForm');
+        const adminKeyInput = document.getElementById('adminKey');
+        const loginBtn = document.getElementById('loginBtn');
+        const errorMessage = document.getElementById('errorMessage');
+        // Focus on the input field when page loads
+        adminKeyInput.focus();
+        // Handle form submission
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const adminKey = adminKeyInput.value.trim();
+            if (!adminKey) {
+                showError('Please enter your admin key');
+                return;
+            }
+            // Show loading state
+            setLoading(true);
+            hideError();
+            try {
+                const response = await fetch('/api/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ admin_key: adminKey })
+                });
+                if (response.ok) {
+                    // Success - redirect to main app
+                    window.location.href = '/';
+                } else {
+                    const error = await response.json();
+                    showError(error.detail || 'Invalid admin key');
+                }
+            } catch (error) {
+                console.error('Login error:', error);
+                showError('Network error. Please try again.');
+            } finally {
+                setLoading(false);
+            }
+        });
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+        }
+        function hideError() {
+            errorMessage.style.display = 'none';
+        }
+        function setLoading(loading) {
+            if (loading) {
+                loginBtn.disabled = true;
+                loginBtn.classList.add('loading');
+                loginBtn.innerHTML = '<i class="fas fa-spinner spinner"></i><span>Logging in...</span>';
+            } else {
+                loginBtn.disabled = false;
+                loginBtn.classList.remove('loading');
+                loginBtn.innerHTML = '<i class="fas fa-sign-in-alt"></i><span>Login</span>';
+            }
+        }
+        // Handle Enter key
+        adminKeyInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                loginForm.dispatchEvent(new Event('submit'));
+            }
+        });
+    </script>
+</body>
+</html>

static/app.js CHANGED Viewed

@@ -5,14 +5,22 @@ class ModelManager {
         this.models = {};
         this.editingModel = null;
         this.imageCache = new Map(); // Cache for model images
         this.init();
     }
-    init() {
         this.initTheme();
         this.bindEvents();
-        this.loadAllModels();
     }
     bindEvents() {
@@ -56,6 +64,47 @@ class ModelManager {
         document.getElementById('modalCancel').addEventListener('click', () => {
             this.closeModal();
         });
         document.getElementById('modalSave').addEventListener('click', () => {
             this.saveModelEdit();
@@ -1282,6 +1331,71 @@ class ModelManager {
             themeIcon.parentElement.title = 'Switch to dark mode';
         }
     }
 }
 // Initialize the application

         this.models = {};
         this.editingModel = null;
         this.imageCache = new Map(); // Cache for model images
+        this.isAuthenticated = false;
         this.init();
     }
+    async init() {
         this.initTheme();
         this.bindEvents();
+        await this.checkAuthStatus();
+        if (this.isAuthenticated) {
+            this.loadAllModels();
+        } else {
+            // Redirect to login page if not authenticated
+            window.location.href = '/login';
+        }
     }
     bindEvents() {
         document.getElementById('modalCancel').addEventListener('click', () => {
             this.closeModal();
         });
+        // Login form events
+        document.getElementById('loginSubmit').addEventListener('click', async () => {
+            const adminKey = document.getElementById('adminKey').value;
+            const loginError = document.getElementById('loginError');
+            if (!adminKey) {
+                loginError.textContent = 'Please enter admin key';
+                loginError.style.display = 'block';
+                return;
+            }
+            const result = await this.login(adminKey);
+            if (!result.success) {
+                loginError.textContent = result.message;
+                loginError.style.display = 'block';
+            } else {
+                loginError.style.display = 'none';
+                document.getElementById('adminKey').value = '';
+            }
+        });
+        // Handle Enter key in login form
+        document.getElementById('adminKey').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                document.getElementById('loginSubmit').click();
+            }
+        });
+        // Login modal close events
+        document.getElementById('loginModalClose').addEventListener('click', () => {
+            this.hideLoginModal();
+        });
+        // Close login modal when clicking outside
+        document.getElementById('loginModal').addEventListener('click', (e) => {
+            if (e.target === document.getElementById('loginModal')) {
+                this.hideLoginModal();
+            }
+        });
         document.getElementById('modalSave').addEventListener('click', () => {
             this.saveModelEdit();
             themeIcon.parentElement.title = 'Switch to dark mode';
         }
     }
+    // Authentication Methods
+    async checkAuthStatus() {
+        try {
+            const response = await fetch('/api/auth-status');
+            const data = await response.json();
+            this.isAuthenticated = data.authenticated;
+        } catch (error) {
+            console.error('Auth check failed:', error);
+            this.isAuthenticated = false;
+        }
+    }
+    async login(adminKey) {
+        try {
+            const response = await fetch('/api/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ admin_key: adminKey })
+            });
+            if (response.ok) {
+                this.isAuthenticated = true;
+                this.hideAuthOverlay();
+                this.hideLoginModal();
+                this.loadAllModels();
+                return { success: true };
+            } else {
+                const error = await response.json();
+                return { success: false, message: error.detail || 'Login failed' };
+            }
+        } catch (error) {
+            console.error('Login error:', error);
+            return { success: false, message: 'Network error' };
+        }
+    }
+    async logout() {
+        try {
+            await fetch('/api/logout', { method: 'POST' });
+            this.isAuthenticated = false;
+            // Redirect to login page
+            window.location.href = '/login';
+        } catch (error) {
+            console.error('Logout error:', error);
+        }
+    }
+    showLoginModal() {
+        document.getElementById('loginModal').classList.add('active');
+        // Clear any previous errors
+        document.getElementById('loginError').style.display = 'none';
+        document.getElementById('adminKey').value = '';
+        // Auto-focus the admin key input
+        setTimeout(() => {
+            document.getElementById('adminKey').focus();
+        }, 100);
+    }
+    hideLoginModal() {
+        document.getElementById('loginModal').classList.remove('active');
+    }
 }
 // Initialize the application

static/styles.css CHANGED Viewed

@@ -882,6 +882,97 @@ body {
     font-weight: 500;
 }
 /* Model Content */
 .model-content {
     padding: 1rem;

     font-weight: 500;
 }
+/* Authentication Styles */
+.auth-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--background);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+.auth-overlay.active {
+    display: flex;
+}
+.auth-content {
+    text-align: center;
+    padding: 2rem;
+    max-width: 400px;
+    width: 100%;
+}
+.auth-logo {
+    margin-bottom: 2rem;
+}
+.auth-logo i {
+    font-size: 4rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+.auth-logo h2 {
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
+}
+.auth-logo p {
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    line-height: 1.5;
+}
+.error-message {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--danger-color);
+    padding: 8px 12px;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    margin-top: 8px;
+}
+/* Login Modal Styles */
+#loginModal {
+    display: none;
+}
+#loginModal.active {
+    display: flex;
+}
+#loginModal .modal-header h3 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+#loginModal .form-group input {
+    width: 100%;
+}
+/* Logout Button */
+.logout-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 8px;
+    border-radius: var(--radius);
+    transition: all 0.2s ease;
+}
+.logout-btn:hover {
+    background: var(--surface-variant);
+    color: var(--text-primary);
+}
 /* Model Content */
 .model-content {
     padding: 1rem;