@riligar/elysia-backup 1.2.0 → 1.4.0

package/src/services/backup.service.js

@@ -0,0 +1,169 @@
+import { readdir, stat, readFile, writeFile, mkdir } from 'node:fs/promises'
+import { join, relative, dirname } from 'node:path'
+import { createS3Client } from './s3-client.js'
+
+/**
+ * Create a backup service instance
+ * @param {Function} getConfig - Function to get current configuration
+ * @returns {Object} Backup service with all operations
+ */
+export const createBackupService = getConfig => {
+    /**
+     * Get a configured S3 client
+     */
+    const getS3 = () => createS3Client(getConfig())
+
+    /**
+     * Upload a single file to S3
+     * @param {string} filePath - Local file path
+     * @param {string} rootDir - Root directory for relative path calculation
+     * @param {string} timestampPrefix - Timestamp to prepend to filename
+     */
+    const uploadFile = async (filePath, rootDir, timestampPrefix) => {
+        const config = getConfig()
+        const s3 = getS3()
+        const fileContent = await readFile(filePath)
+
+        const relativePath = relative(rootDir, filePath)
+        const dir = dirname(relativePath)
+        const filename = relativePath.split('/').pop()
+
+        // Format: YYYY-MM-DD_HH-mm-ss_filename.ext
+        const timestamp = timestampPrefix || new Date().toISOString()
+        const newFilename = `${timestamp}_${filename}`
+
+        // Reconstruct path with new filename
+        const finalPath = dir === '.' ? newFilename : join(dir, newFilename)
+        const key = config.prefix ? join(config.prefix, finalPath) : finalPath
+
+        console.log(`Uploading ${key}...`)
+        await s3.write(key, fileContent)
+    }
+
+    /**
+     * Process a directory recursively and upload all matching files
+     * @param {string} dir - Directory to process
+     * @param {string} timestampPrefix - Timestamp for all files in this batch
+     */
+    const processDirectory = async (dir, timestampPrefix) => {
+        const config = getConfig()
+        const files = await readdir(dir)
+
+        for (const file of files) {
+            const fullPath = join(dir, file)
+            const stats = await stat(fullPath)
+
+            if (stats.isDirectory()) {
+                await processDirectory(fullPath, timestampPrefix)
+            } else {
+                // Filter by extension
+                const allowedExtensions = config.extensions || []
+                const hasExtension = allowedExtensions.some(ext => file.endsWith(ext))
+
+                // Skip files that look like backups to prevent recursion/duplication
+                const timestampRegex = /^(\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}|\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z)_/
+                if (timestampRegex.test(file)) {
+                    console.log(`Skipping backup-like file: ${file}`)
+                    continue
+                }
+
+                if (allowedExtensions.length === 0 || hasExtension) {
+                    await uploadFile(fullPath, config.sourceDir, timestampPrefix)
+                }
+            }
+        }
+    }
+
+    /**
+     * List all files in the remote bucket
+     * @returns {Array} List of file objects with Key, Size, LastModified
+     */
+    const listRemoteFiles = async () => {
+        const config = getConfig()
+        const s3 = getS3()
+
+        try {
+            const response = await s3.list({ prefix: config.prefix || '' })
+
+            // Handle array response
+            if (Array.isArray(response)) {
+                return response.map(f => ({
+                    Key: f.key || f.name,
+                    Size: f.size,
+                    LastModified: f.lastModified,
+                }))
+            }
+
+            // Handle AWS-like response with contents
+            if (response.contents) {
+                return response.contents.map(f => ({
+                    Key: f.key,
+                    Size: f.size,
+                    LastModified: f.lastModified,
+                }))
+            }
+
+            console.log('Unknown list response structure:', response)
+            return []
+        } catch (e) {
+            console.error('Error listing files with Bun.s3:', e)
+            return []
+        }
+    }
+
+    /**
+     * Restore a file from backup to local filesystem
+     * @param {string} key - S3 key of the file to restore
+     * @returns {string} Local path where file was restored
+     */
+    const restoreFile = async key => {
+        const config = getConfig()
+        const s3 = getS3()
+        const file = s3.file(key)
+
+        if (!(await file.exists())) {
+            throw new Error(`File ${key} not found in bucket`)
+        }
+
+        const arrayBuffer = await file.arrayBuffer()
+        const byteArray = new Uint8Array(arrayBuffer)
+
+        // Remove prefix from key to get relative path
+        const relativePath = config.prefix ? key.replace(config.prefix, '') : key
+        const cleanRelative = relativePath.replace(/^[\/\\]/, '')
+
+        // Extract directory and filename
+        const dir = dirname(cleanRelative)
+        const filename = cleanRelative.split('/').pop()
+
+        // Strip timestamp prefix to restore original filename
+        const timestampRegex = /^(\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}|\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z)_/
+        const originalFilename = filename.replace(timestampRegex, '')
+
+        const finalLocalRelativePath = dir === '.' ? originalFilename : join(dir, originalFilename)
+        const localPath = join(config.sourceDir, finalLocalRelativePath)
+
+        // Ensure directory exists
+        await mkdir(dirname(localPath), { recursive: true })
+        await writeFile(localPath, byteArray)
+
+        return localPath
+    }
+
+    /**
+     * Delete a file from the remote bucket
+     * @param {string} key - S3 key of the file to delete
+     */
+    const deleteFile = async key => {
+        const s3 = getS3()
+        await s3.delete(key)
+    }
+
+    return {
+        uploadFile,
+        processDirectory,
+        listRemoteFiles,
+        restoreFile,
+        deleteFile,
+    }
+}

package/src/services/s3-client.js

@@ -0,0 +1,28 @@
+import { S3Client } from 'bun'
+
+/**
+ * Create an S3/R2 client with the given configuration
+ * @param {Object} config - Configuration object
+ * @param {string} config.bucket - Bucket name
+ * @param {string} config.endpoint - S3/R2 endpoint URL
+ * @param {string} config.accessKeyId - Access key ID
+ * @param {string} config.secretAccessKey - Secret access key
+ * @returns {S3Client} Configured S3 client
+ */
+export const createS3Client = config => {
+    // Debug config (masked for security)
+    console.log('S3 Config:', {
+        bucket: config.bucket,
+        endpoint: config.endpoint,
+        accessKeyId: config.accessKeyId ? '***' + config.accessKeyId.slice(-4) : 'missing',
+        hasSecret: !!config.secretAccessKey,
+    })
+
+    return new S3Client({
+        accessKeyId: config.accessKeyId,
+        secretAccessKey: config.secretAccessKey,
+        endpoint: config.endpoint,
+        bucket: config.bucket,
+        region: 'auto',
+    })
+}

package/src/views/DashboardPage.js

@@ -0,0 +1,56 @@
+/**
+ * Dashboard page component - Modular version
+ * Composes all dashboard components
+ * @param {{ config: object, jobStatus: object, hasAuth: boolean }} props
+ * @returns {string} HTML string
+ */
+import { Head } from './components/Head.js'
+import { Header } from './components/Header.js'
+import { StatusCards } from './components/StatusCards.js'
+import { ActionArea } from './components/ActionArea.js'
+import { FilesTab } from './components/FilesTab.js'
+import { SettingsTab } from './components/SettingsTab.js'
+import { SecuritySection } from './components/SecuritySection.js'
+import { backupAppScript } from './scripts/backupApp.js'
+
+export const DashboardPage = ({ config, jobStatus, hasAuth }) => `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    ${Head({ title: 'R2 Backup Manager' })}
+</head>
+<body class="bg-gray-50 text-gray-900 min-h-screen p-12 antialiased selection:bg-gray-900 selection:text-white">
+    <div class="max-w-5xl mx-auto" x-data="backupApp()">
+        <!-- Header -->
+        ${Header({ hasAuth })}
+
+        <!-- Dashboard Tab -->
+        <div x-show="activeTab === 'dashboard'" class="space-y-12" 
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0 translate-y-2"
+             x-transition:enter-end="opacity-100 translate-y-0">
+            
+            <!-- Status Cards -->
+            ${StatusCards()}
+
+            <!-- Action Area -->
+            ${ActionArea()}
+        </div>
+
+        <!-- Files Tab -->
+        ${FilesTab()}
+
+        <!-- Settings Tab -->
+        <div x-show="activeTab === 'settings'" class="max-w-3xl mx-auto" 
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0 translate-y-2"
+             x-transition:enter-end="opacity-100 translate-y-0">
+            ${SettingsTab()}
+            ${SecuritySection()}
+        </div>
+    </div>
+
+    ${backupAppScript({ config, jobStatus })}
+</body>
+</html>
+`

package/src/views/LoginPage.js

@@ -0,0 +1,23 @@
+/**
+ * Login page component - Modular version
+ * Composes login components
+ * @param {{ totpEnabled: boolean }} props
+ * @returns {string} HTML string
+ */
+import { Head } from './components/Head.js'
+import { LoginCard } from './components/LoginCard.js'
+import { loginAppScript } from './scripts/loginApp.js'
+
+export const LoginPage = ({ totpEnabled = false }) => `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    ${Head({ title: 'Login - Backup Manager' })}
+</head>
+<body class="bg-gray-50 min-h-screen flex items-center justify-center p-6 antialiased">
+    ${LoginCard({ totpEnabled })}
+
+    ${loginAppScript({ totpEnabled })}
+</body>
+</html>
+`

package/src/views/components/ActionArea.js

@@ -0,0 +1,48 @@
+/**
+ * Action area component with backup button and activity logs
+ * @returns {string} HTML string
+ */
+export const ActionArea = () => `
+    <div class="bg-white rounded-2xl border border-gray-100 shadow-[0_2px_8px_rgba(0,0,0,0.04)] overflow-hidden">
+        <div class="p-10 flex flex-col items-center justify-center text-center">
+            <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-6 text-gray-400">
+                <i data-lucide="save" class="w-8 h-8"></i>
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 mb-2">Trigger Manual Backup</h3>
+            <p class="text-gray-500 max-w-md mb-8 leading-relaxed">Initiate a backup of your local directory to the configured R2 bucket. This will upload all files recursively.</p>
+            
+            <button 
+                @click="runBackup()" 
+                :disabled="loading"
+                class="group relative inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white transition-all duration-200 bg-gray-900 rounded-xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-70 disabled:cursor-not-allowed">
+                <span x-show="!loading" class="flex items-center gap-2">
+                    <i data-lucide="play-circle" class="w-5 h-5"></i>
+                    Start Backup Process
+                </span>
+                <span x-show="loading" class="flex items-center gap-2">
+                    <i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>
+                    Processing...
+                </span>
+            </button>
+        </div>
+        
+        <!-- Logs -->
+        <div class="bg-gray-50 border-t border-gray-100 p-8">
+            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Activity Log</h4>
+            <div class="space-y-3">
+                <template x-for="log in logs" :key="log.id">
+                    <div class="flex items-start gap-4 text-sm">
+                        <span class="font-mono text-xs text-gray-400 mt-0.5" x-text="log.time"></span>
+                        <div class="flex items-center gap-2">
+                            <i :data-lucide="log.type === 'error' ? 'alert-circle' : 'info'" 
+                               :class="log.type === 'error' ? 'text-red-600' : 'text-gray-400'"
+                               class="w-4 h-4"></i>
+                            <span :class="log.type === 'error' ? 'text-red-600 font-medium' : 'text-gray-600'" x-text="log.message"></span>
+                        </div>
+                    </div>
+                </template>
+                <div x-show="logs.length === 0" class="text-gray-400 text-sm italic">No recent activity recorded.</div>
+            </div>
+        </div>
+    </div>
+`

package/src/views/components/FilesTab.js

@@ -0,0 +1,111 @@
+/**
+ * Files tab component with remote files table
+ * @returns {string} HTML string
+ */
+export const FilesTab = () => `
+    <div x-show="activeTab === 'files'" class="bg-white rounded-2xl border border-gray-100 shadow-[0_2px_8px_rgba(0,0,0,0.04)] overflow-hidden" 
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0 translate-y-2"
+         x-transition:enter-end="opacity-100 translate-y-0">
+        <div class="p-8 border-b border-gray-100 flex justify-between items-center">
+            <div>
+                <h2 class="text-xl font-bold text-gray-900 flex items-center gap-2">
+                    <i data-lucide="server" class="w-5 h-5 text-gray-400"></i>
+                    Remote Files
+                </h2>
+                <p class="text-gray-500 text-sm mt-1">Files currently stored in your R2 bucket</p>
+            </div>
+            <button @click="fetchFiles()" class="text-gray-900 hover:text-gray-600 font-semibold text-sm transition-colors flex items-center gap-2">
+                <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+                Refresh List
+            </button>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full text-left">
+                <thead>
+                    <tr class="border-b border-gray-100">
+                        <th class="px-8 py-4 text-xs font-bold text-gray-400 uppercase tracking-wider">File Key</th>
+                        <th class="px-8 py-4 text-xs font-bold text-gray-400 uppercase tracking-wider">Size</th>
+                        <th class="px-8 py-4 text-xs font-bold text-gray-400 uppercase tracking-wider">Last Modified</th>
+                        <th class="px-8 py-4 text-xs font-bold text-gray-400 uppercase tracking-wider text-right">Action</th>
+                    </tr>
+                </thead>
+                <template x-for="group in groups" :key="group.name">
+                    <tbody class="divide-y divide-gray-50 border-b border-gray-100">
+                        <!-- Folder Header -->
+                        <tr class="bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors select-none" 
+                            @click="group.expanded = !group.expanded; $nextTick(() => lucide.createIcons())">
+                            <td colspan="4" class="px-8 py-3">
+                                <div class="flex items-center gap-3">
+                                    <i :data-lucide="group.expanded ? 'folder-open' : 'folder'" class="w-5 h-5 text-gray-400"></i>
+                                    <span class="font-bold text-gray-700 text-sm" x-text="formatDateHeader(group.name)"></span>
+                                    <span class="text-xs font-medium text-gray-500 bg-gray-200 px-2 py-0.5 rounded-full" x-text="group.files.length"></span>
+                                </div>
+                            </td>
+                        </tr>
+
+                        <!-- Files in Group -->
+                        <template x-for="file in group.files" :key="file.key">
+                            <tr x-show="group.expanded" class="hover:bg-gray-50 transition-colors duration-150 group bg-white">
+                                <td class="px-8 py-5 font-medium text-gray-900 text-sm pl-12" x-text="file.key"></td>
+                                <td class="px-8 py-5 text-gray-500 text-sm" x-text="formatBytes(file.size)"></td>
+                                <td class="px-8 py-5 text-gray-500 text-sm" x-text="new Date(file.lastModified).toLocaleString()"></td>
+                                <td class="px-8 py-5 text-right">
+                                    <div class="flex justify-end gap-3 items-center">
+                                        <!-- Restore Button -->
+                                        <button 
+                                            x-data="holdButton(() => restoreFile(file.key))"
+                                            @mousedown="start()" @touchstart.prevent="start()"
+                                            @mouseup="stop()" @mouseleave="stop()" @touchend="stop()"
+                                            class="relative overflow-hidden px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider text-blue-600 bg-blue-50 hover:bg-blue-100 transition-colors select-none"
+                                            title="Hold 3s to Restore"
+                                        >
+                                            <div class="absolute inset-0 bg-blue-200/50 origin-left transition-all duration-0 ease-linear" :style="'width: ' + progress + '%'"></div>
+                                            <span class="relative z-10 flex items-center gap-2">
+                                                <i data-lucide="rotate-ccw" class="w-3 h-3"></i>
+                                                <span x-text="progress > 0 ? 'Hold...' : 'Restore'"></span>
+                                            </span>
+                                        </button>
+
+                                        <!-- Delete Button -->
+                                        <button 
+                                            x-data="holdButton(() => deleteFile(file.key))"
+                                            @mousedown="start()" @touchstart.prevent="start()"
+                                            @mouseup="stop()" @mouseleave="stop()" @touchend="stop()"
+                                            class="relative overflow-hidden px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider text-red-600 bg-red-50 hover:bg-red-100 transition-colors select-none"
+                                            title="Hold 3s to Delete"
+                                        >
+                                            <div class="absolute inset-0 bg-red-200/50 origin-left transition-all duration-0 ease-linear" :style="'width: ' + progress + '%'"></div>
+                                            <span class="relative z-10 flex items-center gap-2">
+                                                <i data-lucide="trash-2" class="w-3 h-3"></i>
+                                                <span x-text="progress > 0 ? 'Hold...' : 'Delete'"></span>
+                                            </span>
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </template>
+                
+                <!-- Empty State -->
+                <tbody x-show="groups.length === 0">
+                    <tr>
+                        <td colspan="4" class="px-8 py-16 text-center">
+                            <div class="flex flex-col items-center justify-center">
+                                <span x-show="!loadingFiles" class="text-gray-500 font-medium flex flex-col items-center gap-2">
+                                    <i data-lucide="inbox" class="w-8 h-8 text-gray-300"></i>
+                                    No files found in bucket
+                                </span>
+                                <span x-show="loadingFiles" class="text-gray-500 font-medium animate-pulse flex flex-col items-center gap-2">
+                                    <i data-lucide="loader" class="w-8 h-8 animate-spin text-gray-300"></i>
+                                    Loading remote files...
+                                </span>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+`

package/src/views/components/Head.js

@@ -0,0 +1,43 @@
+/**
+ * Shared HTML head component
+ * Contains Tailwind config, Alpine.js, Lucide icons, and fonts
+ * @param {{ title: string }} props
+ * @returns {string} HTML string for head section
+ */
+export const Head = ({ title = 'Backup Manager' }) => `
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${title}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Montserrat', 'sans-serif'],
+                    },
+                    colors: {
+                        gray: {
+                            50: '#F9FAFB',
+                            100: '#F3F4F6',
+                            200: '#E5E7EB',
+                            300: '#D1D5DB',
+                            400: '#9CA3AF',
+                            500: '#6B7280',
+                            600: '#4B5563',
+                            700: '#374151',
+                            800: '#1F2937',
+                            900: '#111827',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+`

package/src/views/components/Header.js

@@ -0,0 +1,54 @@
+/**
+ * Dashboard header component with tabs
+ * @param {{ hasAuth: boolean }} props
+ * @returns {string} HTML string
+ */
+export const Header = ({ hasAuth }) => `
+    <div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
+        <div>
+            <h6 class="text-xs font-bold tracking-widest text-gray-500 uppercase mb-2 flex items-center gap-2">
+                <i data-lucide="shield-check" class="w-4 h-4"></i>
+                System Administration
+            </h6>
+            <h1 class="text-4xl font-bold text-gray-900 tracking-tight flex items-center gap-3">
+                Backup Manager
+            </h1>
+        </div>
+        
+        <div class="flex items-center gap-4">
+            <!-- Tabs -->
+            <div class="flex p-1 bg-gray-200/50 rounded-xl">
+                <button @click="activeTab = 'dashboard'; $nextTick(() => lucide.createIcons())" 
+                    :class="activeTab === 'dashboard' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
+                    class="px-6 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2">
+                    <i data-lucide="layout-dashboard" class="w-4 h-4"></i>
+                    Overview
+                </button>
+                <button @click="activeTab = 'files'; fetchFiles()" 
+                    :class="activeTab === 'files' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
+                    class="px-6 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2">
+                    <i data-lucide="folder-open" class="w-4 h-4"></i>
+                    Files & Restore
+                </button>
+                <button @click="activeTab = 'settings'; $nextTick(() => lucide.createIcons())" 
+                    :class="activeTab === 'settings' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
+                    class="px-6 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2">
+                    <i data-lucide="settings" class="w-4 h-4"></i>
+                    Settings
+                </button>
+            </div>
+
+            ${
+                hasAuth
+                    ? `
+            <!-- Logout Button -->
+            <button @click="logout" class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold text-sm rounded-lg transition-all">
+                <i data-lucide="log-out" class="w-4 h-4"></i>
+                <span>Logout</span>
+            </button>
+            `
+                    : ''
+            }
+        </div>
+    </div>
+`

package/src/views/components/LoginCard.js

@@ -0,0 +1,114 @@
+/**
+ * Login card component
+ * @param {{ totpEnabled: boolean }} props
+ * @returns {string} HTML string
+ */
+export const LoginCard = ({ totpEnabled }) => `
+    <div class="w-full max-w-md" x-data="loginApp()">
+        <!-- Login Card -->
+        <div class="bg-white rounded-2xl border border-gray-100 shadow-[0_8px_30px_rgba(0,0,0,0.08)] overflow-hidden">
+            <!-- Header -->
+            <div class="p-10 text-center border-b border-gray-100">
+                <div class="w-16 h-16 bg-gray-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="shield-check" class="w-8 h-8 text-white"></i>
+                </div>
+                <h1 class="text-2xl font-bold text-gray-900 mb-2">Backup Manager</h1>
+                <p class="text-sm text-gray-500">Access Control Panel</p>
+            </div>
+
+            <!-- Form -->
+            <div class="p-10">
+                <form @submit.prevent="login" class="space-y-6">
+                    <!-- Error Message -->
+                    <div x-show="error" x-cloak class="bg-red-50 border border-red-200 rounded-lg p-4">
+                        <div class="flex items-center gap-3">
+                            <i data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
+                            <span class="text-sm text-red-800 font-medium" x-text="error"></span>
+                        </div>
+                    </div>
+
+                    <!-- Username -->
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Username</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                                <i data-lucide="user" class="w-5 h-5 text-gray-400"></i>
+                            </div>
+                            <input 
+                                type="text" 
+                                x-model="username"
+                                required
+                                class="w-full bg-gray-50 border border-gray-200 rounded-lg pl-12 pr-4 py-3 text-gray-900 focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all font-medium"
+                                placeholder="Enter your username"
+                                autofocus
+                            >
+                        </div>
+                    </div>
+
+                    <!-- Password -->
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Password</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                                <i data-lucide="lock" class="w-5 h-5 text-gray-400"></i>
+                            </div>
+                            <input 
+                                type="password" 
+                                x-model="password"
+                                required
+                                class="w-full bg-gray-50 border border-gray-200 rounded-lg pl-12 pr-4 py-3 text-gray-900 focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all font-medium"
+                                placeholder="Enter your password"
+                            >
+                        </div>
+                    </div>
+
+                    <!-- TOTP Code (only shown when TOTP is enabled) -->
+                    <div x-show="totpEnabled" x-cloak>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Authenticator Code</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                                <i data-lucide="smartphone" class="w-5 h-5 text-gray-400"></i>
+                            </div>
+                            <input 
+                                type="text" 
+                                x-model="totpCode"
+                                inputmode="numeric"
+                                pattern="[0-9]*"
+                                maxlength="6"
+                                :required="totpEnabled"
+                                class="w-full bg-gray-50 border border-gray-200 rounded-lg pl-12 pr-4 py-3 text-gray-900 focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all font-medium tracking-widest text-center text-lg"
+                                placeholder="000000"
+                            >
+                        </div>
+                        <p class="text-xs text-gray-500 mt-2 flex items-center gap-1">
+                            <i data-lucide="info" class="w-3 h-3"></i>
+                            Enter the 6-digit code from your authenticator app
+                        </p>
+                    </div>
+
+                    <!-- Submit Button -->
+                    <button 
+                        type="submit"
+                        :disabled="loading"
+                        class="w-full bg-gray-900 hover:bg-gray-800 text-white font-bold py-3.5 px-6 rounded-xl transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none"
+                    >
+                        <span x-show="!loading" class="flex items-center gap-2">
+                            <span>Sign In</span>
+                            <i data-lucide="arrow-right" class="w-5 h-5"></i>
+                        </span>
+                        <span x-show="loading" class="flex items-center gap-2">
+                            <i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>
+                            <span>Authenticating...</span>
+                        </span>
+                    </button>
+                </form>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="text-center mt-6 text-sm text-gray-500">
+            <i data-lucide="info" class="w-4 h-4 inline-block mr-1"></i>
+            Secure connection required for production use
+        </div>
+    </div>
+`