@saltcorn/mobile-app 0.7.4 → 0.8.0-beta.0

package/config.xml

@@ -11,4 +11,6 @@
   </platform>
   <content src="index.html"/>
   <access origin="*"/>
+  <allow-navigation href="*" />
+  <allow-navigation href="http://localhost/__cdvfile_files__/*" />
 </widget>

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@saltcorn/mobile-app",
   "displayName": "Saltcorn mobile app",
-  "version": "0.7.4",
+  "version": "0.8.0-beta.0",
   "description": "Apache Cordova application with @saltcorn/markup",
   "main": "index.js",
   "scripts": {
     "add-platform": "cordova platform add",
+    "add-plugin": "cordova plugin add",
     "build-app": "cordova build "
   },
   "author": "Christian Hugo",
@@ -13,12 +14,7 @@
   "cordova": {
     "platforms": [
       "android"
-    ],
-    "plugins": {
-      "cordova-sqlite-ext": {},
-      "cordova-plugin-file": {},
-      "cordova-plugin-inappbrowser": {}
-    }
+    ]
   },
   "overrides": {
     "ansi-regex": "4.1.1"
@@ -28,8 +24,6 @@
     "cordova-sqlite-ext": "^6.0.0"
   },
   "devDependencies": {
-    "cordova-android": "^10.1.2",
-    "cordova-plugin-file": "^6.0.2",
-    "cordova-plugin-inappbrowser": "^5.0.0"
+    "cordova-android": "^10.1.2"
   }
 }

package/www/index.html

@@ -143,14 +143,30 @@
         iframe.contentWindow._sc_version_tag = config.version_tag;
       };
 
+      const initJwt = async () => {
+        if (!(await saltcorn.data.db.tableExists("jwt_table"))) {
+          await createJwtTable();
+        }
+        else {
+          const jwt = await getJwt();
+          if(jwt) {
+            const state = saltcorn.data.state.getState();
+            state.mobileConfig.jwt = jwt;
+          }
+        }
+      };
+
       const checkJWT = async () => {
-        const jwt = localStorage.getItem("auth_jwt");
-        if (!jwt || jwt === "undefined") return false;
-        const response = await apiCall({
-          method: "GET",
-          path: "/auth/authenticated",
-        });
-        return response.data.authenticated;
+        const state = saltcorn.data.state.getState();
+        const jwt = state.mobileConfig.jwt;
+        if(jwt && jwt !== "undefined") {
+          const response = await apiCall({
+            method: "GET",
+            path: "/auth/authenticated",
+          });
+          return response.data.authenticated;
+        }
+        else return false;
       };
 
       const initI18Next = async () => {
@@ -199,6 +215,7 @@
         if (updateNeeded) {
           await updateDb(tablesJSON);
         }
+        await initJwt();
         await state.refresh_tables();
         await state.refresh_views();
         await state.refresh_pages();
@@ -212,8 +229,8 @@
         await initI18Next();
         try {
           if (await checkJWT()) {
-            const decodedJwt = jwt_decode(localStorage.getItem("auth_jwt"));
             const mobileConfig = state.mobileConfig;
+            const decodedJwt = jwt_decode(mobileConfig.jwt);
             mobileConfig.role_id = decodedJwt.user.role_id
               ? decodedJwt.user.role_id
               : 10;
@@ -226,7 +243,7 @@
               pathname: entryPoint,
               fullWrap: true,
             });
-            replaceIframe(page.content);
+            await replaceIframe(page.content);
           } else {
             const page = await router.resolve({
               pathname: "get/auth/login",
@@ -243,7 +260,7 @@
               },
             ],
           });
-          replaceIframe(page.content);
+          await replaceIframe(page.content);
           console.error(error);
         }
       };

package/www/js/mocks/request.js

@@ -1,4 +1,4 @@
-function MobileRequest(xhr = false, files = undefined) {
+function MobileRequest({ xhr = false, files = undefined, query = undefined }) {
   const roleId = saltcorn.data.state.getState().mobileConfig.role_id
     ? saltcorn.data.state.getState().mobileConfig.role_id
     : 10;
@@ -26,5 +26,6 @@ function MobileRequest(xhr = false, files = undefined) {
     csrfToken: () => "",
     xhr,
     files,
+    query,
   };
 }

package/www/js/routes/auth.js

@@ -87,7 +87,8 @@ const logoutAction = async () => {
   const config = saltcorn.data.state.getState().mobileConfig;
   const response = await apiCall({ method: "GET", path: "/auth/logout" });
   if (response.data.success) {
-    localStorage.removeItem("auth_jwt");
+    await removeJwt();
+    config.jwt = undefined;
     return {
       content: renderLoginView(config.entry_point, config.version_tag),
     };

package/www/js/routes/page.js

@@ -3,9 +3,9 @@ const postPageAction = async (context) => {
   const state = saltcorn.data.state.getState();
   const { page_name, rndid } = context.params;
   const page = await saltcorn.data.models.Page.findOne({ name: page_name });
-  const req = new MobileRequest(context.xhr);
+  const req = new MobileRequest({ xhr: context.xhr });
   if (state.mobileConfig.role_id > page.min_role) {
-    throw new Error(req.__("Not authorized")); 
+    throw new Error(req.__("Not authorized"));
   }
   let col;
   saltcorn.data.models.layout.traverseSync(page.layout, {
@@ -16,7 +16,7 @@ const postPageAction = async (context) => {
   const result = await saltcorn.data.plugin_helper.run_action_column({
     col,
     referrer: "",
-    req
+    req,
   });
   return result || {};
 };
@@ -26,9 +26,9 @@ const getPage = async (context) => {
   const state = saltcorn.data.state.getState();
   const { page_name } = context.params;
   const page = await saltcorn.data.models.Page.findOne({ name: page_name });
-  const req = new MobileRequest(context.xhr);
+  const req = new MobileRequest({ xhr: context.xhr });
   if (state.mobileConfig.role_id > page.min_role) {
-    throw new Error(req.__("Not authorized")); 
+    throw new Error(req.__("Not authorized"));
   }
   const query = parseQuery(context.query);
   const res = new MobileResponse();

package/www/js/routes/view.js

@@ -13,7 +13,7 @@ const postView = async (context) => {
   const view = await saltcorn.data.models.View.findOne({
     name: context.params.viewname,
   });
-  const req = new MobileRequest(context.xhr, context.files);
+  const req = new MobileRequest({ xhr: context.xhr, files: context.files });
   const res = new MobileResponse();
   const state = saltcorn.data.state.getState();
   if (
@@ -43,7 +43,7 @@ const postViewRoute = async (context) => {
   const view = await saltcorn.data.models.View.findOne({
     name: context.params.viewname,
   });
-  const req = new MobileRequest(context.xhr);
+  const req = new MobileRequest({ xhr: context.xhr });
   const res = new MobileResponse();
   const state = saltcorn.data.state.getState();
   if (state.mobileConfig.role_id > view.min_role) {
@@ -69,7 +69,7 @@ const getView = async (context) => {
   const query = parseQuery(context.query);
   const { viewname } = context.params;
   const view = saltcorn.data.models.View.findOne({ name: viewname });
-  const req = new MobileRequest(context.xhr);
+  const req = new MobileRequest({ xhr: context.xhr, query });
   if (
     state.mobileConfig.role_id > view.min_role &&
     !(await view.authorise_get({ query, req, ...view }))

package/www/js/utils/global_utils.js

@@ -1,9 +1,4 @@
-const iframeStyle =
-  "position: fixed; top: 0; left: 0; bottom: 0; right: 0; " +
-  "width: 100%; height: 100%; border: none; margin: 0; padding: 0; " +
-  "overflow: hidden; z-index: 999999; ";
-
-const routingHistory = [];
+let routingHistory = [];
 
 function currentLocation() {
   if (routingHistory.length == 0) return undefined;
@@ -28,7 +23,7 @@ async function apiCall({ method, path, params, body, responseType }) {
     "X-Saltcorn-Client": "mobile-app",
   };
   if (config.tenantAppName) headers["X-Saltcorn-App"] = config.tenantAppName;
-  const token = localStorage.getItem("auth_jwt");
+  const token = config.jwt;
   if (token) headers.Authorization = `jwt ${token}`;
   try {
     const result = await axios({
@@ -94,18 +89,11 @@ function splitPathQuery(url) {
   return { path, query };
 }
 
-function replaceIframe(content) {
+async function replaceIframe(content) {
+  await write("content.html", `${cordova.file.dataDirectory}`, content);
+  const url = await getDirEntry(`${cordova.file.dataDirectory}content.html`);
   const iframe = document.getElementById("content-iframe");
-  iframe.remove();
-  const newIframe = document.createElement("iframe");
-  document.body.appendChild(newIframe);
-  const config = saltcorn.data.state.getState().mobileConfig;
-  newIframe.contentWindow._sc_version_tag = config.version_tag;
-  newIframe.setAttribute("style", iframeStyle);
-  newIframe.id = "content-iframe";
-  newIframe.contentWindow.document.open();
-  newIframe.contentWindow.document.write(content);
-  newIframe.contentWindow.document.close();
+  iframe.src = url.toURL();
 }
 
 function addScriptToIframeHead(iframeDoc, script) {
@@ -190,6 +178,10 @@ async function goBack(steps = 1, exitOnFirstPage = false) {
     await handleRoute("/");
   } else {
     routingHistory = routingHistory.slice(0, routingHistory.length - steps);
+    // don't repeat a post
+    if (routingHistory[routingHistory.length - 1].route.startsWith("post/")) {
+      routingHistory.pop();
+    }
     const newCurrent = routingHistory.pop();
     await handleRoute(newCurrent.route, newCurrent.query);
   }

package/www/js/utils/iframe_view_utils.js

@@ -57,8 +57,13 @@ async function saveAndContinue(e, action, k) {
   // TODO ch error (request.responseText?)
 }
 
-async function loginRequest(email, password, isSignup) {
-  const opts = isSignup
+async function loginRequest({ email, password, isSignup, isPublic }) {
+  const opts = isPublic
+    ? {
+        method: "GET",
+        path: "/auth/login-with/jwt",
+      }
+    : isSignup
     ? {
         method: "POST",
         path: "/auth/signup",
@@ -81,20 +86,21 @@ async function loginRequest(email, password, isSignup) {
 
 async function login(e, entryPoint, isSignup) {
   const formData = new FormData(e);
-  const loginResult = await loginRequest(
-    formData.get("email"),
-    formData.get("password"),
-    isSignup
-  );
+  const loginResult = await loginRequest({
+    email: formData.get("email"),
+    password: formData.get("password"),
+    isSignup,
+  });
   if (typeof loginResult === "string") {
     // use it as a token
-    parent.localStorage.setItem("auth_jwt", loginResult);
     const decodedJwt = parent.jwt_decode(loginResult);
     const config = parent.saltcorn.data.state.getState().mobileConfig;
     config.role_id = decodedJwt.user.role_id ? decodedJwt.user.role_id : 10;
     config.user_name = decodedJwt.user.email;
     config.language = decodedJwt.user.language;
     config.isPublicUser = false;
+    await parent.setJwt(loginResult);
+    config.jwt = loginResult;
     await parent.i18next.changeLanguage(config.language);
     parent.addRoute({ route: entryPoint, query: undefined });
     const page = await parent.router.resolve({
@@ -110,7 +116,7 @@ async function login(e, entryPoint, isSignup) {
         },
       ],
     });
-    parent.replaceIframe(page.content);
+    await parent.replaceIframe(page.content);
   } else if (loginResult?.alerts) {
     parent.showAlerts(loginResult?.alerts);
   } else {
@@ -120,23 +126,32 @@ async function login(e, entryPoint, isSignup) {
 
 async function publicLogin(entryPoint) {
   try {
-    const config = parent.saltcorn.data.state.getState().mobileConfig;
-    config.role_id = 10;
-    config.user_name = "public";
-    config.language = "en";
-    config.isPublicUser = true;
-    parent.i18next.changeLanguage(config.language);
-    const page = await parent.router.resolve({
-      pathname: entryPoint,
-      fullWrap: true,
-      alerts: [
-        {
-          type: "success",
-          msg: parent.i18next.t("Welcome to Saltcorn!"),
-        },
-      ],
-    });
-    parent.replaceIframe(page.content);
+    const loginResult = await loginRequest({ isPublic: true });
+    if (typeof loginResult === "string") {
+      const config = parent.saltcorn.data.state.getState().mobileConfig;
+      config.role_id = 10;
+      config.user_name = "public";
+      config.language = "en";
+      config.isPublicUser = true;
+      await parent.setJwt(loginResult);
+      config.jwt = loginResult;
+      parent.i18next.changeLanguage(config.language);
+      const page = await parent.router.resolve({
+        pathname: entryPoint,
+        fullWrap: true,
+        alerts: [
+          {
+            type: "success",
+            msg: parent.i18next.t("Welcome to Saltcorn!"),
+          },
+        ],
+      });
+      await parent.replaceIframe(page.content);
+    } else if (loginResult?.alerts) {
+      parent.showAlerts(loginResult?.alerts);
+    } else {
+      throw new Error("The login failed.");
+    }
   } catch (error) {
     parent.showAlerts([
       {
@@ -155,7 +170,7 @@ async function logout() {
       entryView: config.entry_point,
       versionTag: config.version_tag,
     });
-    parent.replaceIframe(page.content);
+    await parent.replaceIframe(page.content);
   } catch (error) {
     parent.showAlerts([
       {
@@ -233,9 +248,22 @@ function updateQueryStringParameter(queryStr, key, value) {
   return params.join("&");
 }
 
+function invalidate_pagings(currentQuery) {
+  let newQuery = currentQuery;
+  const queryObj = Object.fromEntries(new URLSearchParams(newQuery).entries());
+  const toRemove = Object.keys(queryObj).filter((val) => is_paging_param(val));
+  for (const k of toRemove) {
+    newQuery = removeQueryStringParameter(newQuery, k);
+  }
+  return newQuery;
+}
+
 async function set_state_fields(kvs, href) {
   let queryParams = [];
   let currentQuery = parent.currentQuery();
+  if (Object.keys(kvs).some((k) => !is_paging_param(k))) {
+    currentQuery = invalidate_pagings(currentQuery);
+  }
   Object.entries(kvs).forEach((kv) => {
     if (kv[1].unset && kv[1].unset === true) {
       currentQuery = removeQueryStringParameter(currentQuery, kv[0]);
@@ -260,16 +288,23 @@ async function unset_state_field(key) {
   await parent.handleRoute(href, query);
 }
 
-async function sortby(k, desc, viewname) {
+async function sortby(k, desc, viewIdentifier) {
   await set_state_fields(
-    { _sortby: k, _sortdesc: desc ? "on" : { unset: true } },
-    `get/view/${viewname}`
+    {
+      [`_${viewIdentifier}_sortby`]: k,
+      [`_${viewIdentifier}_sortdesc`]: desc ? "on" : { unset: true },
+    },
+    parent.currentLocation()
   );
 }
 
-async function gopage(n, pagesize, extra) {
+async function gopage(n, pagesize, viewIdentifier, extra) {
   await set_state_fields(
-    { ...extra, _page: n, _pagesize: pagesize },
+    {
+      ...extra,
+      [`_${viewIdentifier}_page`]: n,
+      [`_${viewIdentifier}_pagesize`]: pagesize,
+    },
     parent.currentLocation()
   );
 }
@@ -388,7 +423,7 @@ async function make_unique_field(
 
 async function buildEncodedImage(fileId, elementId) {
   const base64Encoded = await parent.loadEncodedFile(fileId);
-  $(`#${elementId}`)[0].src = base64Encoded;
+  document.getElementById(elementId).src = base64Encoded;
 }
 
 async function buildEncodedBgImage(fileId, elementId) {
@@ -400,11 +435,13 @@ async function buildEncodedBgImage(fileId, elementId) {
 }
 
 function openFile(fileId) {
+  // TODO fileIds with whitespaces do not work
   const config = parent.saltcorn.data.state.getState().mobileConfig;
   const serverPath = config.server_path;
-  const token = localStorage.getItem("auth_jwt");
+  const token = config.jwt;
+  const url = `${serverPath}/files/serve/${fileId}?jwt=${token}`;
   parent.cordova.InAppBrowser.open(
-    `${serverPath}/files/serve/${fileId}?jwt=${token}`,
+    url,
     "_self",
     "clearcache=yes,clearsessioncache=yes,location=no"
   );

package/www/js/utils/table_utils.js

@@ -1,4 +1,5 @@
 const historyFile = "update_history";
+const jwtTableName = "jwt_table";
 
 /**
  * drop tables that are no longer in the 'tables.json' file
@@ -7,14 +8,17 @@ const historyFile = "update_history";
 async function dropDeletedTables(incomingTables) {
   const existingTables = await saltcorn.data.models.Table.find();
   for (const table of existingTables) {
-    if (table.name !== "users" && !incomingTables.find((row) => row.id === table.id)) {
-      saltcorn.data.db.query(`DROP TABLE ${table.name}`);
+    if (
+      table.name !== "users" &&
+      !incomingTables.find((row) => row.id === table.id)
+    ) {
+      await saltcorn.data.db.query(`DROP TABLE ${table.name}`);
     }
   }
 }
 
 async function updateScTables(tablesJSON, skipScPlugins = true) {
-  saltcorn.data.db.query("PRAGMA foreign_keys = OFF;");
+  await saltcorn.data.db.query("PRAGMA foreign_keys = OFF;");
   for (const { table, rows } of tablesJSON.sc_tables) {
     if (skipScPlugins && table === "_sc_plugins") continue;
     if (table === "_sc_tables") await dropDeletedTables(rows);
@@ -23,7 +27,7 @@ async function updateScTables(tablesJSON, skipScPlugins = true) {
       await saltcorn.data.db.insert(table, row);
     }
   }
-  saltcorn.data.db.query("PRAGMA foreign_keys = ON;");
+  await saltcorn.data.db.query("PRAGMA foreign_keys = ON;");
 }
 
 async function updateScPlugins(tablesJSON) {
@@ -85,3 +89,23 @@ async function getTableIds(tableNames) {
     .filter((table) => tableNames.indexOf(table.name) > -1)
     .map((table) => table.id);
 }
+
+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 });
+}