feat: add multi-step onboarding wizard for initial setup and remove static configuration files.

Author: ciro-maciel

.DS_Store

@@ -138,4 +138,5 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
-bun.lock
+bun.lock
+.DS_Store

.gitignore

@@ -1,18 +1,16 @@
 {
+  "endpoint": "https://fb81cb0efe496349aa882e65d6704c6f.r2.cloudflarestorage.com",
   "bucket": "2025-12-20",
+  "prefix": "",
   "accessKeyId": "135b46a7ebe62a798198865c64eee178",
   "secretAccessKey": "3ae633898d81a7aeb0ce1179a92095ab836bb3a60f601cdd43d4e2b6b6152646",
-  "endpoint": "https://fb81cb0efe496349aa882e65d6704c6f.r2.cloudflarestorage.com",
-  "sourceDir": "./data",
-  "prefix": "",
   "extensions": [
     ".json"
   ],
-  "cronSchedule": "0 * * * *",
-  "cronEnabled": false,
+  "cronSchedule": "0 0 * * *",
+  "cronEnabled": true,
   "auth": {
     "username": "admin",
-    "password": "admin123",
-    "totpSecret": "DQMRAQL6ANCSI2BJ"
+    "password": "q1w2e3r4t5"
   }
 }

config.json

@@ -20,21 +20,8 @@ const write = (file, data) => writeFileSync(file, JSON.stringify(data, null, 2))
 const app = new Elysia()
     .use(
         r2Backup({
-            bucket: process.env.R2_BUCKET || 'demo-bucket',
-            accessKeyId: process.env.R2_ACCESS_KEY_ID || '',
-            secretAccessKey: process.env.R2_SECRET_ACCESS_KEY || '',
-            endpoint: process.env.R2_ENDPOINT || 'https://example.r2.cloudflarestorage.com',
             sourceDir: './data',
-            prefix: 'backups/',
-            extensions: ['.json'],
-            cronSchedule: '0 * * * *',
-            cronEnabled: false,
-            // Authentication - provide username and password to enable auth
-            auth: {
-                username: process.env.BACKUP_USERNAME,
-                password: process.env.BACKUP_PASSWORD,
-                totpSecret: process.env.BACKUP_TOTP_SECRET, // Optional: base32 secret for 2FA
-            },
+            configPath: './config.json',
         })
     )
     .get(

demo/.env.example

@@ -14,6 +14,7 @@ import { html } from '@elysiajs/html'
 // Import page components
 import { LoginPage } from './views/LoginPage.js'
 import { DashboardPage } from './views/DashboardPage.js'
+import { OnboardingPage } from './views/OnboardingPage.js'
 
 // Session Management
 const sessions = new Map()
@@ -93,6 +94,19 @@ export const r2Backup = initialConfig => app => {
     let config = { ...initialConfig, ...savedConfig }
     let backupJob = null
 
+    // Helper to check if config.json exists and has required fields
+    const hasValidConfig = () => {
+        if (!existsSync(configPath)) return false
+        try {
+            const content = readFileSync(configPath, 'utf-8')
+            const parsed = JSON.parse(content)
+            // Check minimum required fields for system to work
+            return !!(parsed.bucket && parsed.endpoint && parsed.accessKeyId && parsed.secretAccessKey && parsed.auth?.username && parsed.auth?.password)
+        } catch {
+            return false
+        }
+    }
+
     const getS3Client = () => {
         console.log('S3 Config:', {
             bucket: config.bucket,
@@ -275,14 +289,27 @@ export const r2Backup = initialConfig => app => {
     return app.use(html()).group('/backup', app => {
         // Authentication Middleware
         const authMiddleware = context => {
+            // Skip auth entirely if no valid config (needs onboarding)
+            if (!hasValidConfig()) {
+                return
+            }
+
             if (!config.auth || !config.auth.username || !config.auth.password) {
                 return
             }
 
             const path = context.path
 
-            // Skip auth for login, logout, and static assets
-            if (path === '/backup/login' || path === '/backup/auth/login' || path === '/backup/auth/logout' || path === '/backup/favicon.ico' || path === '/backup/logo.png') {
+            // Skip auth for login, logout, onboarding, and static assets
+            if (
+                path === '/backup/login' ||
+                path === '/backup/auth/login' ||
+                path === '/backup/auth/logout' ||
+                path === '/backup/onboarding' ||
+                path === '/backup/api/onboarding' ||
+                path === '/backup/favicon.ico' ||
+                path === '/backup/logo.png'
+            ) {
                 return
             }
 
@@ -620,8 +647,95 @@ export const r2Backup = initialConfig => app => {
                     })
                 })
 
+                // ONBOARDING: Setup Page
+                .get('/onboarding', ({ set }) => {
+                    // If already configured, redirect to dashboard
+                    if (hasValidConfig()) {
+                        set.status = 302
+                        set.headers['Location'] = '/backup'
+                        return
+                    }
+                    return OnboardingPage({ sourceDir: config.sourceDir })
+                })
+
+                // ONBOARDING: Save Initial Config
+                .post(
+                    '/api/onboarding',
+                    async ({ body, set }) => {
+                        // Don't allow if already configured
+                        if (hasValidConfig()) {
+                            set.status = 403
+                            return { status: 'error', message: 'System is already configured' }
+                        }
+
+                        const { endpoint, bucket, prefix, accessKeyId, secretAccessKey, extensions, cronSchedule, cronEnabled, username, password } = body
+
+                        // Parse extensions
+                        let parsedExtensions = []
+                        if (extensions) {
+                            parsedExtensions = extensions
+                                .split(',')
+                                .map(e => e.trim())
+                                .filter(Boolean)
+                        }
+
+                        // Build initial config
+                        const initialConfigData = {
+                            endpoint,
+                            bucket,
+                            prefix: prefix || '',
+                            accessKeyId,
+                            secretAccessKey,
+                            extensions: parsedExtensions,
+                            cronSchedule: cronSchedule || '0 0 * * *',
+                            cronEnabled: cronEnabled !== false,
+                            auth: {
+                                username,
+                                password,
+                            },
+                        }
+
+                        try {
+                            await writeFile(configPath, JSON.stringify(initialConfigData, null, 2))
+
+                            // Update runtime config
+                            config = { ...config, ...initialConfigData }
+
+                            // Setup cron if enabled
+                            setupCron()
+
+                            return { status: 'success', message: 'Configuration saved successfully' }
+                        } catch (e) {
+                            console.error('Failed to save onboarding config:', e)
+                            set.status = 500
+                            return { status: 'error', message: 'Failed to save configuration' }
+                        }
+                    },
+                    {
+                        body: t.Object({
+                            endpoint: t.String(),
+                            bucket: t.String(),
+                            prefix: t.Optional(t.String()),
+                            accessKeyId: t.String(),
+                            secretAccessKey: t.String(),
+                            extensions: t.Optional(t.String()),
+                            cronSchedule: t.Optional(t.String()),
+                            cronEnabled: t.Optional(t.Boolean()),
+                            username: t.String(),
+                            password: t.String(),
+                        }),
+                    }
+                )
+
                 // UI: Dashboard
-                .get('/', () => {
+                .get('/', ({ set }) => {
+                    // Redirect to onboarding if no valid config
+                    if (!hasValidConfig()) {
+                        set.status = 302
+                        set.headers['Location'] = '/backup/onboarding'
+                        return
+                    }
+
                     const jobStatus = getJobStatus()
                     const hasAuth = !!(config.auth && config.auth.username && config.auth.password)
                     return DashboardPage({ config, jobStatus, hasAuth })

demo/config.json

@@ -0,0 +1,22 @@
+/**
+ * Onboarding page component
+ * First-run setup wizard for configuring the backup system
+ * @returns {string} HTML string
+ */
+import { Head } from './components/Head.js'
+import { OnboardingCard } from './components/OnboardingCard.js'
+import { onboardingAppScript } from './scripts/onboardingApp.js'
+
+export const OnboardingPage = ({ sourceDir }) => `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    ${Head({ title: 'Setup - Backup Manager' })}
+</head>
+<body class="bg-gray-50 min-h-screen flex items-center justify-center p-6 antialiased">
+    ${OnboardingCard({ sourceDir })}
+
+    ${onboardingAppScript({ sourceDir })}
+</body>
+</html>
+`