Update npm packages to address audit vulnerabilities

package.json

@@ -10,7 +10,7 @@
       "dev": "cross-env NODE_ENV=development vite",
       "build_main": "cross-env NODE_ENV=production vite build && npx workbox generateSW workbox-config.js",
       "postinstall": "cpy --flat ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy --flat ./node_modules/material-icons/iconfont/*.* ./src/fonts/",
-      "proxy": "./proxy.sh",
+      "proxy": "node proxy-server.js",
       "watch": "webpack-cli --config webpack.dev.js --watch --progress",
       "build": "webpack-cli --config webpack.dev.js --progress",
       "build:update": "npm run postinstall && webpack-cli --config webpack.dev.js --progress",
@@ -26,16 +26,17 @@
       "atomicjs": "^4.4.1",
       "dom7": "^4.0.6",
       "eventemitter2": "^6.4.9",
-      "framework7": "^8.0.5",
+      "framework7": "^9.0.3",
       "framework7-icons": "^5.0.5",
       "lodash": "^4.17.21",
       "material-icons": "^1.13.6",
       "moment": "^2.29.4",
-      "nanoid": "^4.0.2",
+      "nanoid": "^5.1.6",
       "papaparse": "^5.5.3",
       "semver": "^7.7.3",
       "skeleton-elements": "^4.0.1",
-      "swiper": "^9.3.2"
+      "swiper": "^12.1.2",
+      "uuid": "^13.0.0"
    },
    "devDependencies": {
       "@babel/core": "^7.22.9",
@@ -44,19 +45,21 @@
       "@babel/preset-react": "^7.22.5",
       "babel-loader": "^9.1.3",
       "clean-webpack-plugin": "^4.0.0",
-      "compression-webpack-plugin": "^10.0.0",
+      "compression-webpack-plugin": "^12.0.0",
+      "copy-webpack-plugin": "^12.0.2",
       "cpy-cli": "^4.2.0",
       "cross-env": "^7.0.3",
       "css-loader": "^5.0.1",
       "eslint": "^8.21.0",
       "eslint-config-prettier": "^8.5.0",
       "eslint-plugin-prettier": "^4.2.1",
+      "express": "^4.21.0",
       "framework7-loader": "^3.0.2",
       "html-loader": "^4.2.0",
       "html-webpack-plugin": "^5.5.0",
+      "http-proxy-middleware": "^3.0.3",
       "less": "^4.1.3",
       "less-loader": "^11.1.3",
-      "local-cors-proxy": "^1.1.0",
       "postcss-preset-env": "^8.3.2",
       "prettier": "^2.2.1",
       "rollup-plugin-framework7": "^1.2.1",
@@ -66,6 +69,11 @@
       "webpack": "^5.74.0",
       "webpack-cli": "^4.10.0",
       "webpack-merge": "^5.8.0",
-      "workbox-cli": "^6.5.4"
+      "workbox-cli": "^7.4.0"
+   },
+   "overrides": {
+      "swiper": "^12.1.2",
+      "serialize-javascript": "^7.0.3",
+      "tmp": "^0.2.4"
    }
 }

proxy-server.js

@@ -0,0 +1,39 @@
+/**
+ * Local CORS proxy for development. Replaces local-cors-proxy (which depended on vulnerable request/form-data).
+ * Usage: PROXY_URL=https://example.com/ ORIGIN=http://localhost:5173 PORT=8010 node proxy-server.js
+ */
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const express = require('express');
+
+const PROXY_URL = process.env.PROXY_URL || 'https://design.digiserve.org/';
+const ORIGIN = process.env.ORIGIN || 'http://localhost:5173';
+const PORT = Number(process.env.PORT) || 8010;
+
+const app = express();
+
+app.use((req, res, next) => {
+  res.setHeader('Access-Control-Allow-Origin', ORIGIN);
+  res.setHeader('Access-Control-Allow-Credentials', 'true');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+  if (req.method === 'OPTIONS') return res.sendStatus(204);
+  next();
+});
+
+app.use(
+  '/',
+  createProxyMiddleware({
+    target: PROXY_URL.replace(/\/$/, ''),
+    changeOrigin: true,
+    secure: true,
+    pathRewrite: { '^/': '/' },
+    onProxyReq: (proxyReq, req) => {
+      const origin = new URL(PROXY_URL);
+      proxyReq.setHeader('Host', origin.host);
+    },
+  })
+);
+
+app.listen(PORT, () => {
+  console.log(`CORS proxy running at http://localhost:${PORT} -> ${PROXY_URL} (origin: ${ORIGIN})`);
+});

proxy.sh

@@ -1,2 +1,5 @@
 #!/bin/bash
-lcp --proxyUrl https://design.digiserve.org/ --credentials --origin http://localhost:5173
+# Proxy URL and origin can be overridden via env (defaults match previous lcp behavior)
+export PROXY_URL="${PROXY_URL:-https://design.digiserve.org/}"
+export ORIGIN="${ORIGIN:-http://localhost:5173}"
+exec node proxy-server.js

src/js/AppBuilder/ABFactory.js

@@ -104,6 +104,9 @@ class ABFactory extends ABFactoryCore {
    constructor(definitions) {
       super(definitions);
 
+      // PLUGIN code now expects a this.platform
+      this.platform = "pwa";
+
       // Common Reference to Configuration Values
       this.Config = Config;
       let appDiv = document.querySelector("#app");

src/js/AppBuilder/platform/mobile/ABMobileViewList.js

@@ -45,8 +45,10 @@ export default class ABMobileViewList extends ABMobileViewListCore {
 
       setTimeout(() => {
          let dc = this.datacollection;
-         let allVals = dc.$state[dc.id];
-         dc.$state[dc.id] = allVals;
+         if (dc) {
+            let allVals = dc.$state[dc.id];
+            dc.$state[dc.id] = allVals;
+         }
       }, 30);
 
       // let dc = this.datacollection;
@@ -72,7 +74,7 @@ export default class ABMobileViewList extends ABMobileViewListCore {
             let L = this.AB.Label();
             this.AB.$f7.dialog.alert(
                L("No rows were effected.  This does not seem right."),
-               L("Error")
+               L("Error"),
             );
             return false;
          }
@@ -101,7 +103,7 @@ export default class ABMobileViewList extends ABMobileViewListCore {
       // if there is a detailPage set, then transition there:
       if (this.settings.linkPageDetail) {
          const DetailPage = this.application.pageByID(
-            this.settings.linkPageDetail
+            this.settings.linkPageDetail,
          );
 
          DetailPage.show(true);
@@ -176,7 +178,7 @@ export default class ABMobileViewList extends ABMobileViewListCore {
                   ${L("Delete")}
                </a>
             </div>
-         </li>`
+         </li>`,
       );
    }
 
@@ -248,7 +250,7 @@ export default class ABMobileViewList extends ABMobileViewListCore {
                         (/* x, i */) => $h`
                         <li>
                            <a href="#">Skeleton text will go here</a>
-                        </li>`
+                        </li>`,
                      )}
                   </ul>
                </div>

src/js/app.js

@@ -39,7 +39,7 @@ var app = new Framework7({
    el: "#app", // App root element
    component: App(AB), // App main component
    // App store
-   store: store(AB),
+   store: store(AB, version),
    // App routes
    routes: routes(AB),
    version: version,

src/js/store.js

@@ -1,6 +1,6 @@
 import { createStore } from "framework7";
 
-export default (AB) => {
+export default (AB, appVersion = "") => {
    const allDCs = AB.datacollections();
 
    const configStore = {
@@ -49,7 +49,7 @@ export default (AB) => {
             };
          },
          getVersion({ state }) {
-            state.version = app.f7.params.version;
+            state.version = appVersion;
          },
       },
    };

src/pages/app.f7.jsx

@@ -213,23 +213,6 @@ export default (AB) => {
                         </div>
                         <div class="list list-outline list-strong list-dividers list-translucent">
                            <ul>
-                              <li>
-                                 <a
-                                    href="/list"
-                                    class="item-link item-content panel-close"
-                                 >
-                                    <div class="item-media">
-                                       <i class="material-icons">
-                                          {L("contacts")}
-                                       </i>
-                                    </div>
-                                    <div class="item-inner">
-                                       <div class="item-title">
-                                          {L("List of People")}
-                                       </div>
-                                    </div>
-                                 </a>
-                              </li>
                               {pagesMenu.map((p) => {
                                  return (
                                     <li>

webpack.common.js

@@ -2,6 +2,7 @@ const path = require("path");
 const APP = path.resolve(__dirname);
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
    context: APP,
@@ -54,6 +55,22 @@ module.exports = {
       new CleanWebpackPlugin({
          cleanOnceBeforeBuildPatterns: ["*.js", "*.js.map"],
       }),
+      new CopyWebpackPlugin({
+         patterns: [
+            {
+               from: "*.{woff,woff2}",
+               context: path.join(APP, "node_modules", "material-icons", "iconfont"),
+               to: "fonts",
+               noErrorOnMissing: true,
+            },
+            {
+               from: "*.{woff,woff2}",
+               context: path.join(APP, "node_modules", "framework7-icons", "fonts"),
+               to: "fonts",
+               noErrorOnMissing: true,
+            },
+         ],
+      }),
    ],
    resolve: {
       alias: {