Merge pull request #26 from gitmotion/feature/add-pwa-registration

Add PWA Registration, Optional CORS Support, docker-compose.yml, toast-manager, and readme.md updates

Author: abiteman

.gitignore

@@ -132,5 +132,11 @@ dist
 # Local data files
 data/transactions.json
 
-# Development config
-nodemon.json
+## Development config
+# nodemon.json
+
+# Generated PWA Files
+/public/*manifest.json
+/public/logo.*
+/public/assets/logo.*
+/public/assets/*manifest.json

README.md

@@ -18,6 +18,7 @@ A simple, secure personal budgeting app with PIN protection. Track your income a
 - 📤 Export to CSV
 - 🔍 Filter transactions by type
 - 💱 Multi-currency support
+- 🌐 PWA Support
 
 ## Supported Currencies
 
@@ -61,6 +62,33 @@ docker run -d \
   dumbwareio/dumbbudget:latest
 ```
 
+```yaml
+services:
+  dumbbudget:
+    image: dumbwareio/dumbbudget:latest
+    container_name: dumbbudget
+    restart: unless-stopped
+    ports:
+      - ${DUMBBUDGET_PORT:-3000}:3000
+    volumes:
+      - ${DUMBBUDGET_DATA_PATH:-./data}:/app/data
+    environment:
+      - DUMBBUDGET_PIN=${DUMBBUDGET_PIN:-} # PIN to access the site
+      - BASE_URL=${DUMBBUDGET_BASE_URL:-http://localhost:3000} # URL to access the site
+      - CURRENCY=${DUMBBUDGET_CURRENCY:-USD} # Supported Currency Code: https://github.com/DumbWareio/DumbBudget?tab=readme-ov-file#supported-currencies
+      - SITE_TITLE=${DUMBBUDGET_SITE_TITLE:-DumbBudget} # Name to show on site
+      - INSTANCE_NAME=${DUMBBUDGET_INSTANCE_NAME:-} # Name of instance/account
+      # (OPTIONAL)
+      # Restrict origins - ex: https://subdomain.domain.tld,https://auth.proxy.tld,http://internalip:port' (default is '*')
+      # - ALLOWED_ORIGINS=${DUMBBUDGET_ALLOWED_ORIGINS:-http://localhost:3000}
+    # healthcheck:
+    #   test: wget --spider -q  http://127.0.0.1:3000
+    #   start_period: 20s
+    #   interval: 20s
+    #   timeout: 5s
+    #   retries: 3
+```
+
 > **Note**: Replace `/path/to/your/data` with the actual path where you want to store your transaction data on the host machine.
 
 ### Environment Variables
@@ -93,7 +121,9 @@ PORT=3000
 NODE_ENV=development
 BASE_URL=http://localhost:3000
 CURRENCY=USD
-SITE_TITLE='My Account'
+SITE_TITLE='DumbBudget'
+INSTANCE_NAME='My Account'
+ALLOWED_ORIGINS=* # Restrict origins - ex: https://subdomain.domain.tld,https://auth.proxy.tld,http://internalip:port' (default is '*')
 ```
 
 4. Start the development server:

docker-compose.yml

@@ -0,0 +1,25 @@
+
+services:
+  dumbbudget:
+    image: dumbwareio/dumbbudget:latest
+    container_name: dumbbudget
+    restart: unless-stopped
+    ports:
+      - ${DUMBBUDGET_PORT:-3000}:3000
+    volumes:
+      - ${DUMBBUDGET_DATA_PATH:-./data}:/app/data
+    environment:
+      - DUMBBUDGET_PIN=${DUMBBUDGET_PIN:-} # PIN to access the site
+      - BASE_URL=${DUMBBUDGET_BASE_URL:-http://localhost:3000} # URL to access the site
+      - CURRENCY=${DUMBBUDGET_CURRENCY:-USD} # Supported Currency Code: https://github.com/DumbWareio/DumbBudget?tab=readme-ov-file#supported-currencies
+      - SITE_TITLE=${DUMBBUDGET_SITE_TITLE:-DumbBudget} # Name to show on site
+      - INSTANCE_NAME=${DUMBBUDGET_INSTANCE_NAME:-} # Name of instance/account
+      # (OPTIONAL)
+      # Restrict origins - ex: https://subdomain.domain.tld,https://auth.proxy.tld,http://internalip:port' (default is '*')
+      # - ALLOWED_ORIGINS=${DUMBBUDGET_ALLOWED_ORIGINS:-http://localhost:3000}
+    # healthcheck:
+    #   test: wget --spider -q  http://127.0.0.1:3000
+    #   start_period: 20s
+    #   interval: 20s
+    #   timeout: 5s
+    #   retries: 3

nodemon.json

@@ -0,0 +1,3 @@
+{
+  "ignore": ["asset-manifest.json", "manifest.json"]
+}

package-lock.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "cookie-parser": "^1.4.7",
+    "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "dumbdateparser": "^1.2.0",
     "express": "^4.18.2",

package.json

@@ -11,6 +11,8 @@
     --success: #4CAF50;
     --danger: #f44336;
     --card-bg: #ffffff;
+    --success-status-bg: rgba(37, 99, 235, 0.6);
+    --danger-status-bg:rgba(220, 38, 38, 0.6);
 }
 
 [data-theme="dark"] {
@@ -20,6 +22,8 @@
     --border: #404040;
     --shadow: 0 2px 4px rgba(0,0,0,0.2);
     --card-bg: #363636;
+    --success-status-bg: rgba(96, 165, 250, 0.5);
+    --danger-status-bg:rgba(220, 38, 38, 0.5);
 }
 
 /* Base styles */
@@ -57,9 +61,9 @@ main {
     padding: 1.5rem 1rem 1rem;
     border-radius: 8px;
     box-shadow: var(--shadow);
-    width: calc(100% - 1rem);
-    max-width: 600px;
-    min-height: calc(100vh - 1rem);
+    width: 100%;
+    max-width: 70%;
+    min-height: calc(100vh - 2rem);
     transition: background var(--transition), box-shadow var(--transition);
     margin: 0 auto;
     display: flex;
@@ -254,14 +258,14 @@ header {
     background: var(--card-bg);
     border-radius: 8px;
     box-shadow: var(--shadow);
-    width: 75%;
+    width: 60%;
 }
 
 .date-input-group {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.5rem;
+    gap: 0.25rem;
 }
 
 .date-input-group input[type="date"] {
@@ -273,7 +277,8 @@ header {
     font-size: 0.875rem;
     font-family: inherit;
     width: auto;
-    min-width: 130px;
+    min-width: 45%;
+    text-align: center;
 }
 
 .date-input-group input[type="date"]::-webkit-calendar-picker-indicator {
@@ -292,7 +297,7 @@ header {
     font-size: 0.875rem;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 670px) {
     .date-input-group {
         flex-direction: column;
         gap: 0.25rem;
@@ -642,9 +647,10 @@ footer {
 }
 
 /* Responsive adjustments */
-@media (max-width: 600px) {
+@media (max-width: 860px) {
     .container {
         padding: 1rem 0.75rem;
+        max-width: 100%;
     }
 
     .summary-cards {
@@ -1008,4 +1014,42 @@ footer {
 
 #cancelCategory:hover {
     background: color-mix(in srgb, var(--danger) 85%, black);
-}
+}
+
+.toast-container {
+    position: fixed;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 2000;
+}
+
+.toast {
+    color: #ffffff;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    max-width: 300px;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    font-size: 0.875rem;
+    cursor: pointer;
+    text-align: center;
+}
+
+.toast.show {
+    opacity: 1;
+}
+
+.toast.success {
+    background-color: var(--success-status-bg);
+}
+
+.toast.error {
+    background-color: var(--danger-status-bg);
+}

public/styles.css public/assets/styles.csspublic/styles.css renamed to public/assets/styles.css

@@ -5,15 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Loading...</title>
     <script src="config.js"></script>
+    <link rel="manifest" href="manifest.json">
     <script>
+        // Prevent theme flicker by setting theme immediately
+        (function() {
+            const theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            document.documentElement.setAttribute('data-theme', theme);
+        })();
         document.addEventListener('DOMContentLoaded', () => {
-            const siteTitle = window.appConfig.title || 'DumbBudget';
+            const siteTitle = window.appConfig.title;
             document.title = siteTitle;
             document.querySelector('h1').textContent = siteTitle;
         });
     </script>
     <link rel="icon" type="image/svg+xml" href="assets/logo.svg">
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="assets/styles.css">
 </head>
 <body>
     <main>
@@ -120,6 +126,7 @@ <h3>Transactions</h3>
                 </button>
             </footer>
         </div>
+        <div id="toast-container" class="toast-container"></div>
     </main>
 
     <!-- Transaction Modal -->
@@ -158,6 +165,6 @@ <h3>Transactions</h3>
         </div>
     </div>
 
-    <script src="script.js"></script>
+    <script src="script.js" type="module"></script>
 </body>
 </html> 

public/index.html

@@ -6,14 +6,19 @@
     <title>Loading...</title>
     <script src="config.js"></script>
     <script>
+        // Prevent theme flicker by setting theme immediately
+        (function() {
+            const theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            document.documentElement.setAttribute('data-theme', theme);
+        })();
         document.addEventListener('DOMContentLoaded', () => {
-            const siteTitle = window.appConfig.title || 'DumbBudget';
+            const siteTitle = window.appConfig.title;
             document.title = `${siteTitle} - Login`;
             document.querySelector('h1').textContent = siteTitle;
         });
     </script>
     <link rel="icon" type="image/svg+xml" href="assets/logo.svg">
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="assets/styles.css">
 </head>
 <body>
     <main>
@@ -40,6 +45,6 @@ <h2>Enter PIN</h2>
             <div class="pin-error" role="alert" aria-hidden="true">Incorrect PIN. Please try again.</div>
         </form>
     </main>
-    <script src="script.js"></script>
+    <script src="script.js" type="module"></script>
 </body>
 </html>