feat: integrate footer component into dashboard, login, and onboarding pages, and update README documentation

ciro-maciel · ciro-maciel · commit 23ec7dc715cb · 2025-12-20T10:20:01.000-03:00
diff --git a/README.md b/README.md
@@ -1,23 +1,37 @@
-# ElysiaJS Backup Plugin
+# @riligar/elysia-backup
 
-Elysia plugin for R2/S3 backup with a built-in UI dashboard. Uses native Bun S3 client for optimal performance.
+[![Open Source](https://img.shields.io/badge/Open%20Source-RiLiGar-blue)](https://riligar.click/)
+[![npm version](https://img.shields.io/npm/v/@riligar/elysia-backup.svg)](https://www.npmjs.com/package/@riligar/elysia-backup)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
 
-## Features
+> **An open source project by [RiLiGar](https://riligar.click/)**
 
--   📁 Backup local directories to R2/S3
--   🔄 Scheduled backups with cron expressions
--   🖥️ Built-in UI dashboard
--   ⬇️ One-click restore
--   🗑️ Delete remote backups
--   ⚙️ Runtime configuration
+A powerful Elysia plugin for R2/S3 backup with a beautiful built-in UI dashboard. Designed for Bun runtime with native S3 client for optimal performance.
 
-## Installation
+## ✨ Features
+
+-   📁 **Smart Backup** — Backup local directories to R2/S3 with file filtering
+-   🔄 **Scheduled Backups** — Cron-based automatic backups
+-   🖥️ **Beautiful Dashboard** — Modern UI with real-time status
+-   🔐 **Secure Authentication** — Session-based auth with 2FA/TOTP support
+-   🧭 **Guided Onboarding** — Multi-step setup wizard for first-time configuration
+-   ⬇️ **One-Click Restore** — Easily restore files from backup
+-   🗑️ **Backup Management** — Delete old backups from the UI
+-   ⚙️ **Runtime Configuration** — Update settings without restarting
+
+## 📦 Installation
 
 ```bash
 bun add @riligar/elysia-backup
 ```
 
-## Usage
+### Peer Dependencies
+
+```bash
+bun add elysia @elysiajs/html
+```
+
+## 🚀 Quick Start
 
 ```javascript
 import { Elysia } from 'elysia'
@@ -26,60 +40,158 @@ import { r2Backup } from '@riligar/elysia-backup'
 const app = new Elysia()
     .use(
         r2Backup({
-            bucket: process.env.R2_BUCKET,
-            accessKeyId: process.env.R2_ACCESS_KEY_ID,
-            secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
-            endpoint: process.env.R2_ENDPOINT,
             sourceDir: './data',
-            prefix: 'backups/',
-            extensions: ['.db', '.sqlite'],
-            cronSchedule: '0 0 * * *', // Daily at midnight
-            cronEnabled: true,
+            configPath: './config.json',
         })
     )
     .listen(3000)
 
-console.log('Server running at http://localhost:3000')
-console.log('Backup UI at http://localhost:3000/backup')
+console.log('🦊 Server running at http://localhost:3000')
+console.log('📦 Backup UI at http://localhost:3000/backup')
 ```
 
-## Configuration
+On first run, you'll be guided through an onboarding wizard to configure:
+
+-   Storage credentials (R2/S3)
+-   Backup schedule
+-   Admin authentication
+
+## ⚙️ Configuration
+
+### Plugin Options
 
-| Option            | Type     | Required | Description                                            |
-| ----------------- | -------- | -------- | ------------------------------------------------------ |
-| `bucket`          | string   | ✅       | R2/S3 bucket name                                      |
-| `accessKeyId`     | string   | ✅       | R2/S3 Access Key ID                                    |
-| `secretAccessKey` | string   | ✅       | R2/S3 Secret Access Key                                |
-| `endpoint`        | string   | ✅       | R2/S3 Endpoint URL                                     |
-| `sourceDir`       | string   | ✅       | Local directory to backup                              |
-| `prefix`          | string   | ❌       | Prefix for S3 keys (e.g., 'backups/')                  |
-| `extensions`      | string[] | ❌       | File extensions to include                             |
-| `cronSchedule`    | string   | ❌       | Cron expression for scheduled backups                  |
-| `cronEnabled`     | boolean  | ❌       | Enable/disable scheduled backups                       |
-| `configPath`      | string   | ❌       | Path to save runtime config (default: './config.json') |
+| Option       | Type   | Required | Description                                            |
+| ------------ | ------ | -------- | ------------------------------------------------------ |
+| `sourceDir`  | string | ✅       | Local directory to backup                              |
+| `configPath` | string | ❌       | Path to save runtime config (default: `./config.json`) |
 
-## API Endpoints
+### Runtime Configuration (via UI or config.json)
+
+| Option            | Type     | Description                                    |
+| ----------------- | -------- | ---------------------------------------------- |
+| `bucket`          | string   | R2/S3 bucket name                              |
+| `accessKeyId`     | string   | R2/S3 Access Key ID                            |
+| `secretAccessKey` | string   | R2/S3 Secret Access Key                        |
+| `endpoint`        | string   | R2/S3 Endpoint URL                             |
+| `prefix`          | string   | Prefix for S3 keys (e.g., `backups/`)          |
+| `extensions`      | string[] | File extensions to include (empty = all files) |
+| `cronSchedule`    | string   | Cron expression for scheduled backups          |
+| `cronEnabled`     | boolean  | Enable/disable scheduled backups               |
+| `auth.username`   | string   | Admin username                                 |
+| `auth.password`   | string   | Admin password                                 |
+| `auth.totpSecret` | string   | TOTP secret for 2FA (optional)                 |
+
+## 🔌 API Endpoints
 
 The plugin adds the following routes under `/backup`:
 
-| Method | Path                  | Description           |
-| ------ | --------------------- | --------------------- |
-| GET    | `/backup`             | UI Dashboard          |
-| POST   | `/backup/api/run`     | Trigger manual backup |
-| GET    | `/backup/api/files`   | List remote files     |
-| POST   | `/backup/api/restore` | Restore a file        |
-| POST   | `/backup/api/delete`  | Delete a remote file  |
-| POST   | `/backup/api/config`  | Update configuration  |
+### Pages
+
+| Method | Path                 | Description             |
+| ------ | -------------------- | ----------------------- |
+| GET    | `/backup`            | Dashboard UI            |
+| GET    | `/backup/login`      | Login page              |
+| GET    | `/backup/onboarding` | First-time setup wizard |
+
+### Authentication
+
+| Method | Path                  | Description       |
+| ------ | --------------------- | ----------------- |
+| POST   | `/backup/auth/login`  | Authenticate user |
+| POST   | `/backup/auth/logout` | End session       |
+
+### Backup Operations
+
+| Method | Path                  | Description                 |
+| ------ | --------------------- | --------------------------- |
+| POST   | `/backup/api/run`     | Trigger manual backup       |
+| GET    | `/backup/api/files`   | List remote backup files    |
+| POST   | `/backup/api/restore` | Restore a specific file     |
+| POST   | `/backup/api/delete`  | Delete a remote backup file |
+| POST   | `/backup/api/config`  | Update configuration        |
+
+### Two-Factor Authentication (TOTP)
+
+| Method | Path                        | Description                   |
+| ------ | --------------------------- | ----------------------------- |
+| GET    | `/backup/api/totp/status`   | Check 2FA status              |
+| POST   | `/backup/api/totp/generate` | Generate new TOTP secret & QR |
+| POST   | `/backup/api/totp/verify`   | Verify and enable 2FA         |
+| POST   | `/backup/api/totp/disable`  | Disable 2FA                   |
 
-## Environment Variables Example
+## 🔐 Security Features
+
+### Session-Based Authentication
+
+-   Secure session tokens with configurable expiration
+-   HTTP-only cookies for session management
+-   Automatic session cleanup
+
+### Two-Factor Authentication (TOTP)
+
+-   Compatible with any authenticator app (Google Authenticator, Authy, etc.)
+-   QR code for easy setup
+-   Backup codes support
+
+## 📂 Project Structure
+
+```
+src/
+├── index.js              # Main plugin entry
+├── assets/               # Static assets (favicon, logo)
+├── views/
+│   ├── LoginPage.js      # Login page
+│   ├── DashboardPage.js  # Main dashboard
+│   ├── OnboardingPage.js # Setup wizard
+│   ├── components/       # UI components
+│   │   ├── ActionArea.js
+│   │   ├── FilesTab.js
+│   │   ├── Footer.js
+│   │   ├── Head.js
+│   │   ├── Header.js
+│   │   ├── LoginCard.js
+│   │   ├── OnboardingCard.js
+│   │   ├── SecuritySection.js
+│   │   ├── SettingsTab.js
+│   │   └── StatusCards.js
+│   └── scripts/          # Client-side JavaScript
+│       ├── backupApp.js
+│       ├── loginApp.js
+│       └── onboardingApp.js
+```
+
+## 🌍 Environment Variables Example
 
 ```env
+# Optional - for initial configuration
 R2_BUCKET=your-bucket-name
 R2_ACCESS_KEY_ID=your-access-key
 R2_SECRET_ACCESS_KEY=your-secret-key
 R2_ENDPOINT=https://your-account.r2.cloudflarestorage.com
 ```
 
-## License
+> **Note:** All configuration can be set via the onboarding wizard. Environment variables are optional.
+
+## 📸 Screenshots
+
+The dashboard provides:
+
+-   **Status Overview** — Cron status, next run time, bucket info
+-   **Quick Actions** — Manual backup trigger with real-time feedback
+-   **Files Browser** — View, restore, and delete backup files
+-   **Settings** — Update storage and backup configuration
+-   **Security** — Enable/disable 2FA
+
+## 🤝 Contributing
+
+Contributions are welcome! See our [GitHub repository](https://github.com/riligar-solutions/elysia-backup) for more information.
+
+## 📄 License
+
+MIT © [RiLiGar](https://riligar.click/)
+
+---
 
-MIT
+<p align="center">
+  Made with ❤️ by <a href="https://riligar.click/">RiLiGar</a>
+</p>
diff --git a/src/index.js b/src/index.js
@@ -191,7 +191,6 @@ export const r2Backup = initialConfig => app => {
                 backupJob = new CronJob(
                     config.cronSchedule,
                     async () => {
-                        console.log('Running scheduled backup...')
                         try {
                             const now = new Date()
                             const timestamp =
diff --git a/src/services/backup.service.js b/src/services/backup.service.js
@@ -47,7 +47,6 @@ export const createBackupService = getConfig => {
         }
         const key = config.prefix ? join(config.prefix, finalPath) : finalPath
 
-        console.log(`Uploading ${key}...`)
         await s3.write(key, fileContent)
     }
 
diff --git a/src/views/DashboardPage.js b/src/views/DashboardPage.js
@@ -11,6 +11,7 @@ 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 { Footer } from './components/Footer.js'
 import { backupAppScript } from './scripts/backupApp.js'
 
 export const DashboardPage = ({ config, jobStatus, hasAuth }) => `
@@ -48,6 +49,9 @@ export const DashboardPage = ({ config, jobStatus, hasAuth }) => `
             ${SettingsTab()}
             ${SecuritySection()}
         </div>
+        
+        <!-- Footer -->
+        ${Footer()}
     </div>
 
     ${backupAppScript({ config, jobStatus })}
diff --git a/src/views/LoginPage.js b/src/views/LoginPage.js
@@ -6,6 +6,7 @@
  */
 import { Head } from './components/Head.js'
 import { LoginCard } from './components/LoginCard.js'
+import { Footer } from './components/Footer.js'
 import { loginAppScript } from './scripts/loginApp.js'
 
 export const LoginPage = ({ totpEnabled = false }) => `
@@ -14,8 +15,14 @@ export const LoginPage = ({ totpEnabled = false }) => `
 <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 })}
+<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-6 antialiased">
+    <div class="flex-1 flex items-center justify-center w-full">
+        ${LoginCard({ totpEnabled })}
+    </div>
+    
+    <div class="w-full max-w-md">
+        ${Footer()}
+    </div>
 
     ${loginAppScript({ totpEnabled })}
 </body>
diff --git a/src/views/OnboardingPage.js b/src/views/OnboardingPage.js
@@ -5,6 +5,7 @@
  */
 import { Head } from './components/Head.js'
 import { OnboardingCard } from './components/OnboardingCard.js'
+import { Footer } from './components/Footer.js'
 import { onboardingAppScript } from './scripts/onboardingApp.js'
 
 export const OnboardingPage = ({ sourceDir }) => `
@@ -13,8 +14,14 @@ export const OnboardingPage = ({ sourceDir }) => `
 <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 })}
+<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-6 antialiased">
+    <div class="flex-1 flex items-center justify-center w-full">
+        ${OnboardingCard({ sourceDir })}
+    </div>
+    
+    <div class="w-full max-w-2xl">
+        ${Footer()}
+    </div>
 
     ${onboardingAppScript({ sourceDir })}
 </body>
diff --git a/src/views/components/Footer.js b/src/views/components/Footer.js
@@ -4,7 +4,7 @@
  * @returns {string} HTML string
  */
 export const Footer = () => `
-    <footer class="mt-12 pt-8 border-t border-gray-200 text-center">
+    <footer class="pt-4 text-center">
         <p class="text-sm text-gray-500">
             Open source project by 
             <a href="https://riligar.click/" target="_blank" rel="noopener noreferrer" 

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,6 @@ export const createBackupService = getConfig => {`
`47`	`47`	`}`
`48`	`48`	`const key = config.prefix ? join(config.prefix, finalPath) : finalPath`
`49`	`49`
`50`		- console.log(`Uploading ${key}...`)
`51`	`50`	`await s3.write(key, fileContent)`
`52`	`51`	`}`
`53`	`52`