@saltcorn/mobile-app 1.1.0-beta.9 → 1.1.0

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

package/build_scripts/modify_android_manifest.js

@@ -0,0 +1,47 @@
+const { parseStringPromise, Builder } = require("xml2js");
+const { join } = require("path");
+const { readFileSync, writeFileSync } = require("fs");
+
+(async () => {
+  try {
+    const androidManifest = join(
+      "android",
+      "app",
+      "src",
+      "main",
+      "AndroidManifest.xml"
+    );
+    const content = readFileSync(androidManifest);
+    const parsed = await parseStringPromise(content);
+
+    parsed.manifest["uses-permission"] = [
+      { $: { "android:name": "android.permission.READ_EXTERNAL_STORAGE" } },
+      { $: { "android:name": "android.permission.WRITE_EXTERNAL_STORAGE" } },
+      { $: { "android:name": "android.permission.INTERNET" } },
+      { $: { "android:name": "android.permission.CAMERA" } },
+      { $: { "android:name": "android.permission.ACCESS_COARSE_LOCATION" } },
+      { $: { "android:name": "android.permission.ACCESS_FINE_LOCATION" } },
+    ];
+    parsed.manifest["uses-feature"] = [
+      { $: { "android:name": "android.hardware.location.gps" } },
+    ];
+
+    parsed.manifest.application[0].$ = {
+      ...parsed.manifest.application[0].$,
+      "android:allowBackup": "false",
+      "android:fullBackupContent": "false",
+      "android:dataExtractionRules": "@xml/data_extraction_rules",
+      "android:networkSecurityConfig": "@xml/network_security_config",
+      "android:usesCleartextTraffic": "true",
+    };
+    const xmlBuilder = new Builder();
+    const newCfg = xmlBuilder.buildObject(parsed);
+    writeFileSync(androidManifest, newCfg);
+  } catch (error) {
+    console.log(
+      `Unable to modify the AndroidManifest.xml: ${
+        error.message ? error.message : "Unknown error"
+      }`
+    );
+  }
+})();

package/build_scripts/modify_gradle_cfg.js

@@ -0,0 +1,21 @@
+const { join } = require("path");
+const { readFileSync, writeFileSync } = require("fs");
+
+console.log("Writing gradle config");
+console.log("args", process.argv);
+const args = process.argv.slice(2);
+const appVersion = args[0].split("=")[1];
+
+const gradleFile = join(__dirname, "..", "android", "app", "build.gradle");
+const gradleContent = readFileSync(gradleFile, "utf8");
+
+// generate versionCode from appVersion
+const parts = appVersion.split(".");
+const versionCode =
+  parseInt(parts[0]) * 1000000 + parseInt(parts[1]) * 1000 + parseInt(parts[2]);
+let newGradleContent = gradleContent
+  .replace(/versionName "1.0"/, `versionName "${appVersion}"`)
+  .replace(/versionCode 1/, `versionCode ${versionCode}`);
+
+console.log("newGradleContent", newGradleContent);
+writeFileSync(gradleFile, newGradleContent, "utf8");

package/package.json

@@ -1,25 +1,34 @@
 {
   "name": "@saltcorn/mobile-app",
   "displayName": "Saltcorn mobile app",
-  "version": "1.1.0-beta.9",
-  "description": "Apache Cordova application with @saltcorn/markup",
+  "version": "1.1.0",
+  "description": "Saltcorn mobile app for Android and iOS",
   "main": "index.js",
   "scripts": {
-    "add-platform": "cordova platform add",
-    "add-plugin": "cordova plugin add",
-    "build-app": "cordova build --verbose",
+    "build": "webpack",
+    "add-platform": "npx cap add",
+    "modify-gradle-cfg": "node build_scripts/modify_gradle_cfg.js",
+    "modify-android-manifest": "node build_scripts/modify_android_manifest.js",
     "test": "echo NO TESTS"
   },
   "author": "Christian Hugo",
   "license": "MIT",
-  "cordova": {
-    "platforms": [
-      "android"
-    ]
-  },
   "overrides": {
     "ansi-regex": "4.1.1"
   },
-  "dependencies": {},
-  "devDependencies": {}
+  "dependencies": {
+    "universal-router": "9.2.0",
+    "axios": "^1.7.7",
+    "jwt-decode": "4.0.0",
+    "i18next": "23.16.4",
+    "i18next-sprintf-postprocessor": "0.2.2"
+  },
+  "devDependencies": {
+    "xml2js": "0.6.0",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "babel-loader": "^9.2.1",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4"
+  }
 }

package/src/.eslintrc

@@ -0,0 +1,21 @@
+{
+  "extends": "eslint:recommended",
+
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+
+    // typescript-eslint specific options
+    "warnOnUnsupportedTypeScriptVersion": true
+  },
+  "env": {
+    "browser": true
+  },
+  "ignorePatterns": ["dist/**"],
+  "rules": {
+    "no-unused-vars": "warn",
+    "no-case-declarations": "off",
+    "no-empty": "warn",
+    "no-fallthrough": "warn"
+  }
+}

package/src/helpers/api.js

@@ -0,0 +1,43 @@
+/*global saltcorn, splashConfig*/
+
+import axios from "axios";
+
+export async function apiCall({
+  method,
+  path,
+  params,
+  body,
+  responseType,
+  timeout,
+  additionalHeaders,
+}) {
+  const config =
+    typeof saltcorn !== "undefined"
+      ? saltcorn.data.state.getState().mobileConfig
+      : splashConfig;
+  const serverPath = config.server_path;
+  const url = `${serverPath}${path}`;
+  const headers = {
+    "X-Requested-With": "XMLHttpRequest",
+    "X-Saltcorn-Client": "mobile-app",
+    ...(additionalHeaders || {}),
+  };
+  if (config.tenantAppName) headers["X-Saltcorn-App"] = config.tenantAppName;
+  const token = config.jwt;
+  if (token) headers.Authorization = `jwt ${token}`;
+  try {
+    const result = await axios({
+      url: url,
+      method,
+      params,
+      headers,
+      responseType: responseType ? responseType : "json",
+      data: body,
+      timeout: timeout ? timeout : 0,
+    });
+    return result;
+  } catch (error) {
+    error.message = `Unable to call ${method} ${url}:\n${error.message}`;
+    throw error;
+  }
+}

package/src/helpers/auth.js

@@ -0,0 +1,191 @@
+/*global saltcorn*/
+
+import { jwtDecode } from "jwt-decode";
+import i18next from "i18next";
+import { apiCall } from "./api";
+import { router } from "../routing/index";
+import { getLastOfflineSession, deleteOfflineData, sync } from "./offline_mode";
+import { addRoute, replaceIframe } from "../helpers/navigation";
+import { showAlerts } from "./common";
+
+async function loginRequest({ email, password, isSignup, isPublic }) {
+  const opts = isPublic
+    ? {
+        method: "GET",
+        path: "/auth/login-with/jwt",
+      }
+    : isSignup
+    ? {
+        method: "POST",
+        path: "/auth/signup",
+        body: {
+          email,
+          password,
+        },
+      }
+    : {
+        method: "GET",
+        path: "/auth/login-with/jwt",
+        params: {
+          email,
+          password,
+        },
+      };
+  const response = await apiCall(opts);
+  return response.data;
+}
+
+export async function login({ email, password, entryPoint, isSignup }) {
+  const loginResult = await loginRequest({
+    email,
+    password,
+    isSignup,
+  });
+  if (typeof loginResult === "string") {
+    // use it as a token
+    const decodedJwt = jwtDecode(loginResult);
+    const config = saltcorn.data.state.getState().mobileConfig;
+    config.user = decodedJwt.user;
+    config.isPublicUser = false;
+    config.isOfflineMode = false;
+    await insertUser(config.user);
+    await setJwt(loginResult);
+    config.jwt = loginResult;
+    i18next.changeLanguage(config.user.language);
+    const alerts = [];
+    if (config.allowOfflineMode) {
+      const { offlineUser, hasOfflineData } =
+        (await getLastOfflineSession()) || {};
+      if (!offlineUser || offlineUser === config.user.email) {
+        await sync();
+      } else {
+        if (hasOfflineData)
+          alerts.push({
+            type: "warning",
+            msg: `'${offlineUser}' has not yet uploaded offline data.`,
+          });
+        else {
+          await deleteOfflineData(true);
+          await sync();
+        }
+      }
+    }
+    alerts.push({
+      type: "success",
+      msg: i18next.t("Welcome, %s!", {
+        postProcess: "sprintf",
+        sprintf: [config.user.email],
+      }),
+    });
+    addRoute({ route: entryPoint, query: undefined });
+    const page = await router.resolve({
+      pathname: entryPoint,
+      fullWrap: true,
+      alerts,
+    });
+    if (page.content) await replaceIframe(page.content, page.isFile);
+  } else if (loginResult?.alerts) {
+    showAlerts(loginResult?.alerts);
+  } else {
+    throw new Error("The login failed.");
+  }
+}
+
+export async function publicLogin(entryPoint) {
+  try {
+    const loginResult = await loginRequest({ isPublic: true });
+    if (typeof loginResult === "string") {
+      const config = saltcorn.data.state.getState().mobileConfig;
+      config.user = {
+        role_id: 100,
+        email: "public",
+        language: "en",
+      };
+      config.isPublicUser = true;
+      await setJwt(loginResult);
+      config.jwt = loginResult;
+      i18next.changeLanguage(config.user.language);
+      addRoute({
+        route: entryPoint,
+        query: undefined,
+      });
+      const page = await router.resolve({
+        pathname: entryPoint,
+        fullWrap: true,
+        alerts: [
+          {
+            type: "success",
+            msg: i18next.t("Welcome to %s!", {
+              postProcess: "sprintf",
+              sprintf: [
+                saltcorn.data.state.getState().getConfig("site_name") ||
+                  "Saltcorn",
+              ],
+            }),
+          },
+        ],
+      });
+      if (page.content) await replaceIframe(page.content, page.isFile);
+    } else if (loginResult?.alerts) {
+      showAlerts(loginResult?.alerts);
+    } else {
+      throw new Error("The login failed.");
+    }
+  } catch (error) {
+    console.error(error);
+    showAlerts([
+      {
+        type: "error",
+        msg: error.message ? error.message : "An error occured.",
+      },
+    ]);
+    throw error;
+  }
+}
+
+export async function logout() {
+  try {
+    const config = saltcorn.data.state.getState().mobileConfig;
+    const page = await router.resolve({
+      pathname: "get/auth/logout",
+      entryView: config.entry_point,
+      versionTag: config.version_tag,
+    });
+    await replaceIframe(page.content);
+  } catch (error) {
+    showAlerts([
+      {
+        type: "error",
+        msg: error.message ? error.message : "An error occured.",
+      },
+    ]);
+  }
+}
+
+export async function insertUser({ id, email, role_id, language }) {
+  await saltcorn.data.db.insert(
+    "users",
+    { id, email, role_id, language },
+    { ignoreExisting: true }
+  );
+}
+
+export async function removeJwt() {
+  await saltcorn.data.db.deleteWhere("jwt_table");
+}
+
+export async function setJwt(jwt) {
+  await removeJwt();
+  await saltcorn.data.db.insert("jwt_table", { jwt: jwt });
+}
+
+export async function checkJWT(jwt) {
+  if (jwt && jwt !== "undefined") {
+    const response = await apiCall({
+      method: "GET",
+      path: "/auth/authenticated",
+      timeout: 10000,
+    });
+    return response.data.authenticated;
+  } else return false;
+}

package/src/helpers/common.js

@@ -0,0 +1,189 @@
+/*global saltcorn, $*/
+
+import { apiCall } from "./api";
+import { Camera, CameraResultType } from "@capacitor/camera";
+import { Geolocation } from "@capacitor/geolocation";
+import { ScreenOrientation } from "@capacitor/screen-orientation";
+
+const orientationChangeListeners = new Set();
+
+export function clearAlerts() {
+  const iframe = document.getElementById("content-iframe");
+  const alertsArea =
+    iframe.contentWindow.document.getElementById("toasts-area");
+  alertsArea.innerHTML = "";
+}
+
+export function showAlerts(alerts, toast = true) {
+  if (typeof saltcorn === "undefined") {
+    console.log("Not yet initalized.");
+    console.log(alerts);
+  } else {
+    const iframe = document.getElementById("content-iframe");
+    let area = iframe.contentWindow.document.getElementById(
+      toast ? "toasts-area" : "top-alert"
+    );
+    if (!area) {
+      const areaHtml = `<div class="container">
+  <div 
+    id="toasts-area" 
+    class="toast-container position-fixed bottom-0 start-50 p-0" 
+    style="z-index: 9999;" 
+    aria-live="polite" 
+    aria-atomic="true">
+  </div>
+</div>`;
+      iframe.contentWindow.document
+        .getElementById("page-inner-content")
+        .insertAdjacentHTML("beforeend", areaHtml);
+      area = iframe.contentWindow.document.getElementById(
+        toast ? "toasts-area" : "top-alert"
+      );
+    }
+    const successIds = [];
+    area.innerHTML = "";
+    for (const { type, msg } of alerts) {
+      if (toast) {
+        const rndid = `tab${Math.floor(Math.random() * 16777215).toString(16)}`;
+        area.innerHTML += saltcorn.markup.toast(type, msg, rndid);
+        if (type === "success") successIds.push(rndid);
+      } else area.innerHTML += saltcorn.markup.alert(type, msg);
+    }
+    if (successIds.length > 0) {
+      setTimeout(() => {
+        for (const id of successIds) {
+          const toastEl = iframe.contentWindow.document.getElementById(id);
+          if (toastEl) $(toastEl).removeClass("show");
+        }
+      }, 5000);
+    }
+  }
+  return true;
+}
+
+export function showLoadSpinner() {
+  const iframe = document.getElementById("content-iframe");
+  if (iframe) iframe.contentWindow.showLoadSpinner();
+}
+
+export function removeLoadSpinner() {
+  const iframe = document.getElementById("content-iframe");
+  if (iframe) iframe.contentWindow.removeLoadSpinner();
+}
+
+export function clearTopAlerts() {
+  const iframe = document.getElementById("content-iframe");
+  const area = iframe.contentWindow.document.getElementById("alerts-area");
+  if (area) area.innerHTML = "";
+  const topAlert = iframe.contentWindow.document.getElementById("top-alert");
+  if (topAlert) topAlert.innerHTML = "";
+}
+
+export function errorAlert(error) {
+  showAlerts([
+    {
+      type: "error",
+      msg: error.message ? error.message : "An error occured.",
+    },
+  ]);
+  console.error(error);
+}
+
+// TODO combine with loadEncodedFile
+export async function loadFileAsText(fileId) {
+  try {
+    const response = await apiCall({
+      method: "GET",
+      path: `/files/download/${fileId}`,
+      responseType: "blob",
+    });
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        return resolve(reader.result);
+      };
+      reader.onerror = (error) => {
+        return reject(error);
+      };
+      reader.readAsText(response.data);
+    });
+  } catch (error) {
+    if (
+      !showAlerts([
+        {
+          type: "error",
+          msg: error.message ? error.message : "An error occured.",
+        },
+      ])
+    );
+    throw error;
+  }
+}
+
+export async function loadEncodedFile(fileId) {
+  try {
+    const response = await apiCall({
+      method: "GET",
+      path: `/files/download/${fileId}`,
+      responseType: "blob",
+    });
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        return resolve(reader.result);
+      };
+      reader.onerror = (error) => {
+        return reject(error);
+      };
+      reader.readAsDataURL(response.data);
+    });
+  } catch (error) {
+    showAlerts([
+      {
+        type: "error",
+        msg: error.message ? error.message : "An error occured.",
+      },
+    ]);
+  }
+}
+
+export async function takePhoto() {
+  try {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: false,
+      resultType: CameraResultType.Uri,
+    });
+    return image.path;
+  } catch (error) {
+    showAlerts([
+      {
+        type: "error",
+        msg: error.message ? error.message : "An error occured.",
+      },
+    ]);
+    return null;
+  }
+}
+
+export async function getGeolocation(successCb, errorCb) {
+  try {
+    const coordinates = await Geolocation.getCurrentPosition();
+    if (successCb) successCb(coordinates);
+    return coordinates;
+  } catch (error) {
+    if (errorCb) errorCb(error);
+    return null;
+  }
+}
+
+export function registerScreenOrientationListener(name, listener) {
+  if (!orientationChangeListeners.has(name)) {
+    orientationChangeListeners.add(name, listener);
+    ScreenOrientation.addListener("screenOrientationChange", listener);
+  } else console.warn(`Listener with name ${name} already registered.`);
+}
+
+export async function getScreenOrientation() {
+  return await ScreenOrientation.orientation();
+}

package/{www/js/utils/table_utils.js → src/helpers/db_schema.js}

@@ -1,13 +1,16 @@
-/*global readJSON, cordova, fileExists, writeJSON, saltcorn*/
+/*global saltcorn */
 
 const historyFile = "update_history";
 const jwtTableName = "jwt_table";
 
+import { readFile, fileExists, writeJSON } from "./file_system";
+import { Directory } from "@capacitor/filesystem";
+
 /**
  * drop tables that are no longer in the 'tables.json' file
  * the server db uses a serial (with postgres), so checking ids should suffice
  */
-async function dropDeletedTables(incomingTables) {
+export async function dropDeletedTables(incomingTables) {
   const existingTables = await saltcorn.data.models.Table.find();
   for (const table of existingTables) {
     if (
@@ -27,7 +30,7 @@ async function dropDeletedTables(incomingTables) {
  * @param {*} rows
  * @returns
  */
-async function safeRows(table, rows) {
+export async function safeRows(table, rows) {
   const existingFields = (
     await saltcorn.data.db.query(
       `PRAGMA table_info('${saltcorn.data.db.sqlsanitize(table)}')`
@@ -45,7 +48,7 @@ async function safeRows(table, rows) {
   });
 }
 
-async function updateScTables(tablesJSON, skipScPlugins = true) {
+export async function updateScTables(tablesJSON, skipScPlugins = true) {
   await saltcorn.data.db.query("PRAGMA foreign_keys = OFF;");
   for (const { table, rows } of tablesJSON.sc_tables) {
     if (skipScPlugins && table === "_sc_plugins") continue;
@@ -56,7 +59,7 @@ async function updateScTables(tablesJSON, skipScPlugins = true) {
   await saltcorn.data.db.query("PRAGMA foreign_keys = ON;");
 }
 
-async function updateScPlugins(tablesJSON) {
+export async function updateScPlugins(tablesJSON) {
   const { table, rows } = tablesJSON.sc_tables.find(
     ({ table }) => table === "_sc_plugins"
   );
@@ -66,7 +69,7 @@ async function updateScPlugins(tablesJSON) {
   }
 }
 
-async function updateUserDefinedTables() {
+export async function updateUserDefinedTables() {
   const existingTables = await saltcorn.data.db.listUserDefinedTables();
   const tables = await saltcorn.data.models.Table.find();
   for (const table of tables) {
@@ -92,7 +95,7 @@ async function updateUserDefinedTables() {
   }
 }
 
-async function createSyncInfoTables(synchTbls) {
+export async function createSyncInfoTables(synchTbls) {
   const infoTbls = (await saltcorn.data.db.listTables()).filter(({ name }) => {
     name.endsWith("_sync_info");
   });
@@ -139,11 +142,8 @@ async function createSyncInfoTables(synchTbls) {
   }
 }
 
-async function tablesUptodate(createdAt, historyFile) {
-  const { updated_at } = await readJSON(
-    historyFile,
-    cordova.file.dataDirectory
-  );
+export async function tablesUptodate(createdAt, historyFile) {
+  const { updated_at } = await readFile(historyFile, Directory.Data);
   if (!updated_at) {
     console.log("No updated_at in history file");
     return false;
@@ -155,52 +155,30 @@ async function tablesUptodate(createdAt, historyFile) {
  * Do a table update when the history file doesn't exist or is older than createdAt
  * @param {number} createdAt UTC Date number when the tables.json file was created on the server
  */
-async function dbUpdateNeeded(createdAt) {
+export async function dbUpdateNeeded(createdAt) {
   return (
-    !(await fileExists(`${cordova.file.dataDirectory}${historyFile}`)) ||
+    !(await fileExists(historyFile, Directory.Data)) ||
     !(await tablesUptodate(createdAt, historyFile))
   );
 }
 
-async function updateDb(tablesJSON) {
+export async function updateDb(tablesJSON) {
   await updateScTables(tablesJSON);
   await saltcorn.data.state.getState().refresh_tables();
   await updateUserDefinedTables();
-  await writeJSON(historyFile, cordova.file.dataDirectory, {
+  await writeJSON(historyFile, Directory.Data, {
     updated_at: new Date().valueOf(),
   });
 }
 
-async function getTableIds(tableNames) {
+export async function getTableIds(tableNames) {
   return (await saltcorn.data.models.Table.find())
     .filter((table) => tableNames.indexOf(table.name) > -1)
     .map((table) => table.id);
 }
 
-async function createJwtTable() {
+export async function createJwtTable() {
   await saltcorn.data.db.query(`CREATE TABLE IF NOT EXISTS ${jwtTableName} (
     jwt VARCHAR(500)
   )`);
 }
-
-async function getJwt() {
-  const rows = await saltcorn.data.db.select(jwtTableName);
-  return rows?.length > 0 ? rows[0].jwt : null;
-}
-
-async function removeJwt() {
-  await saltcorn.data.db.deleteWhere(jwtTableName);
-}
-
-async function setJwt(jwt) {
-  await removeJwt();
-  await saltcorn.data.db.insert(jwtTableName, { jwt: jwt });
-}
-
-async function insertUser({ id, email, role_id, language }) {
-  await saltcorn.data.db.insert(
-    "users",
-    { id, email, role_id, language },
-    { ignoreExisting: true }
-  );
-}