@saltcorn/mobile-app 0.9.5-beta.8 → 0.9.5

package/config.xml

@@ -12,6 +12,11 @@
     </config-file>
     <preference name="Scheme" value="http"/>
     <preference name="MixedContentMode" value="2"/>
+    <preference name="minSdkVersion" value="33"/>
+    <preference name="targetSdkVersion" value="33"/>
+  </platform>
+  <platform name="ios">
+    <preference name="deployment-target" value="12.0"/>
   </platform>
   <content src="index.html"/>
   <access origin="*"/>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saltcorn/mobile-app",
   "displayName": "Saltcorn mobile app",
-  "version": "0.9.5-beta.8",
+  "version": "0.9.5",
   "description": "Apache Cordova application with @saltcorn/markup",
   "main": "index.js",
   "scripts": {
@@ -20,10 +20,10 @@
     "ansi-regex": "4.1.1"
   },
   "dependencies": {
-    "cordova": "^11.0.0",
+    "cordova": "^12.0.0",
     "cordova-sqlite-ext": "^6.0.0"
   },
   "devDependencies": {
-    "cordova-android": "^10.1.2"
+    "cordova-android": "^12.0.1"
   }
 }

package/www/index.html

@@ -141,12 +141,6 @@
         }
       };
 
-      const setVersionTtag = () => {
-        const config = saltcorn.data.state.getState().mobileConfig;
-        let iframe = document.getElementById("content-iframe");
-        iframe.contentWindow._sc_version_tag = config.version_tag;
-      };
-
       const initJwt = async () => {
         if (!(await saltcorn.data.db.tableExists("jwt_table"))) {
           await createJwtTable();
@@ -228,12 +222,15 @@
               if (mobileConfig.user_id) await gotoEntryView();
               else {
                 const decodedJwt = jwt_decode(mobileConfig.jwt);
+                mobileConfig.user = decodedJwt.user;
+                // TODO remove these, use 'user' everywhere
                 mobileConfig.role_id = decodedJwt.user.role_id
                   ? decodedJwt.user.role_id
                   : 100;
                 mobileConfig.user_id = decodedJwt.user.id;
                 mobileConfig.user_name = decodedJwt.user.email;
                 mobileConfig.language = decodedJwt.user.language;
+
                 mobileConfig.isPublicUser = false;
               }
               addRoute({ route: entryPoint, query: undefined });
@@ -342,7 +339,6 @@
         );
         await state.setConfig("base_url", config.server_path);
         await initRoutes();
-        setVersionTtag();
         const entryPoint = config.entry_point;
         await initI18Next();
         await readSiteLogo(state);
@@ -364,12 +360,15 @@
           if ((networkDisabled && jwt) || (await checkJWT(jwt))) {
             const mobileConfig = state.mobileConfig;
             const decodedJwt = jwt_decode(mobileConfig.jwt);
+            mobileConfig.user = decodedJwt.user;
+            // TODO remove these, use 'user' everywhere
             mobileConfig.role_id = decodedJwt.user.role_id
               ? decodedJwt.user.role_id
               : 100;
             mobileConfig.user_id = decodedJwt.user.id;
             mobileConfig.user_name = decodedJwt.user.email;
             mobileConfig.language = decodedJwt.user.language;
+
             mobileConfig.isPublicUser = false;
             await i18next.changeLanguage(mobileConfig.language);
             if (mobileConfig.allowOfflineMode) {
@@ -419,9 +418,12 @@
             if (page.content) await replaceIframe(page.content, page.isFile);
           } else if (isPublicJwt(jwt)) {
             const config = state.mobileConfig;
+            config.user = { role_id: 100, user_name: "public", language: "en" };
+            // TODO remove these, use 'user' everywhere
             config.role_id = 100;
             config.user_name = "public";
             config.language = "en";
+
             config.isPublicUser = true;
             i18next.changeLanguage(config.language);
             addRoute({ route: entryPoint, query: undefined });

package/www/js/mocks/request.js

@@ -35,10 +35,7 @@ function MobileRequest({
       const mobileCfg = saltcorn.data.state.getState().mobileConfig;
       return mobileCfg?.language ? mobileCfg.language : "en";
     },
-    user: {
-      id: userId,
-      role_id: roleId,
-    },
+    user: cfg.user,
     flash: (type, msg) => {
       flashMessages.push({ type, msg });
     },

package/www/js/routes/auth.js

@@ -1,4 +1,4 @@
-/*global sbAdmin2Layout, apiCall, removeJwt, saltcorn, clearHistory*/
+/*global sbAdmin2Layout, apiCall, removeJwt, saltcorn, clearHistory, MobileRequest, MobileResponse, getHeaders*/
 
 const prepareAuthForm = () => {
   return new saltcorn.data.models.Form({
@@ -35,11 +35,40 @@ const getAuthLinks = (current, entryPoint) => {
   return links;
 };
 
-const renderLoginView = (entryPoint, versionTag, alerts = []) => {
+const renderLoginView = async (entryPoint, versionTag, alerts = []) => {
+  const state = saltcorn.data.state.getState();
   const form = prepareAuthForm(entryPoint);
   form.onSubmit = `javascript:loginFormSubmit(this, '${entryPoint}')`;
   form.submitLabel = "Login";
-  return sbAdmin2Layout().authWrap({
+  const layout = sbAdmin2Layout();
+  const login_form_name = state.getConfig("login_form", "");
+  if (login_form_name) {
+    const login_form = saltcorn.data.models.View.findOne({
+      name: login_form_name,
+    });
+    if (login_form) {
+      const req = new MobileRequest();
+      const res = new MobileResponse();
+      const resp = await login_form.run_possibly_on_page({}, req, res);
+      if (login_form.default_render_page) {
+        return layout.wrap({
+          title: "Login",
+          no_menu: true,
+          body: resp,
+          alerts: [],
+          role: req.user ? req.user.role_id : 100,
+          req,
+          headers: getHeaders(),
+          brand: {
+            name: state.getConfig("site_name") || "Saltcorn",
+            logo: state.mobileConfig.encodedSiteLogo,
+          },
+        });
+      }
+    }
+  }
+
+  return layout.authWrap({
     title: "login",
     form: form,
     authLinks: getAuthLinks("login", entryPoint),
@@ -72,7 +101,7 @@ const renderSignupView = (entryPoint, versionTag) => {
 const getLoginView = async (context) => {
   const mobileConfig = saltcorn.data.state.getState().mobileConfig;
   return {
-    content: renderLoginView(
+    content: await renderLoginView(
       mobileConfig.entry_point,
       mobileConfig.version_tag,
       context.alerts ? context.alerts : []
@@ -97,7 +126,7 @@ const logoutAction = async () => {
     clearHistory();
     config.jwt = undefined;
     return {
-      content: renderLoginView(config.entry_point, config.version_tag),
+      content: await renderLoginView(config.entry_point, config.version_tag),
     };
   } else {
     console.log("unable to logout");

package/www/js/routes/common.js

@@ -1,7 +1,8 @@
 /*global saltcorn, offlineHelper*/
 
 const getHeaders = () => {
-  const config = saltcorn.data.state.getState().mobileConfig;
+  const state = saltcorn.data.state.getState();
+  const config = state.mobileConfig;
   const versionTag = config.version_tag;
   const stdHeaders = [
     { css: `static_assets/${versionTag}/saltcorn.css` },
@@ -9,7 +10,13 @@ const getHeaders = () => {
     { script: `static_assets/${versionTag}/dayjs.min.js` },
     { script: "js/utils/iframe_view_utils.js" },
   ];
-  return [...stdHeaders, ...config.pluginHeaders];
+
+  let from_cfg = [];
+  if (state.getConfig("page_custom_css", ""))
+    from_cfg.push({ style: state.getConfig("page_custom_css", "") });
+  if (state.getConfig("page_custom_html", ""))
+    from_cfg.push({ headerTag: state.getConfig("page_custom_html", "") });
+  return [...stdHeaders, ...config.pluginHeaders, ...from_cfg];
 };
 
 const parseQuery = (queryStr) => {

package/www/js/routes/page.js

@@ -81,15 +81,21 @@ const runPageGroup = async (pageGroup, state, context, { req, res }) => {
 // get/page/pagename
 const getPage = async (context) => {
   const state = saltcorn.data.state.getState();
-  const req = new MobileRequest({ xhr: context.xhr });
+  const query = context.query ? parseQuery(context.query) : {};
+  const req = new MobileRequest({ xhr: context.xhr, query: query });
   const res = new MobileResponse();
   const { page_name } = context.params;
   const { page, pageGroup } = findPageOrGroup(page_name);
   let contents = null;
-  if (page) contents = await runPage(page, state, context, { req, res });
-  else if (pageGroup)
-    contents = await runPageGroup(pageGroup, state, context, { req, res });
-  else throw new Error(req.__("Page %s not found", page_name));
+  state.queriesCache = {};
+  try {
+    if (page) contents = await runPage(page, state, context, { req, res });
+    else if (pageGroup)
+      contents = await runPageGroup(pageGroup, state, context, { req, res });
+    else throw new Error(req.__("Page %s not found", page_name));
+  } finally {
+    state.queriesCache = null;
+  }
   if (contents.html_file) {
     if (state.mobileConfig?.isOfflineMode)
       throw new Error(req.__("Offline mode: cannot load file"));

package/www/js/routes/view.js

@@ -137,12 +137,18 @@ const getView = async (context) => {
       req.__("Not authorized") + additionalInfos
     );
   }
-  const contents = await view.run_possibly_on_page(
-    query,
-    req,
-    res,
-    view.isRemoteTable()
-  );
+  state.queriesCache = {};
+  let contents = null;
+  try {
+    contents = await view.run_possibly_on_page(
+      query,
+      req,
+      res,
+      view.isRemoteTable()
+    );
+  } finally {
+    state.queriesCache = null;
+  }
   const wrapped = res.getWrapHtml();
   if (wrapped)
     return wrapContents(

package/www/js/utils/global_utils.js

@@ -11,9 +11,25 @@ function currentLocation() {
   return routingHistory[index].route;
 }
 
-function currentQuery() {
+function currentQuery(skipPosts = false) {
   if (routingHistory.length == 0) return undefined;
-  return routingHistory[routingHistory.length - 1].query;
+  let index = routingHistory.length - 1;
+  if (skipPosts)
+    while (index > 0 && routingHistory[index].route.startsWith("post/")) {
+      index--;
+    }
+  return routingHistory[index].query;
+}
+
+function addQueryParam(key, value) {
+  let query = currentQuery();
+  if (!query) {
+    routingHistory[routingHistory.length - 1].query = `${key}=${value}`;
+  } else {
+    const parsed = new URLSearchParams(query);
+    parsed.set(key, value);
+    routingHistory[routingHistory.length - 1].query = parsed.toString();
+  }
 }
 
 function addRoute(routeEntry) {
@@ -176,9 +192,7 @@ function splitPathQuery(url) {
 
 async function replaceIframe(content, isFile = false) {
   const iframe = document.getElementById("content-iframe");
-  await write("content.html", `${cordova.file.dataDirectory}`, content);
-  const url = await getDirEntry(`${cordova.file.dataDirectory}content.html`);
-  iframe.src = url.toURL();
+  iframe.srcdoc = content;
   if (isFile) {
     iframe.setAttribute("is-html-file", true);
     await new Promise((resolve, reject) => {
@@ -242,6 +256,7 @@ async function replaceIframeInnerContent(content) {
   if (scmodal) {
     scmodal.modal("hide");
   }
+  iframe.contentWindow.scrollTo(0, 0);
   iframe.contentWindow.initialize_page();
 }
 
@@ -366,7 +381,7 @@ async function handleRoute(route, query, files, data) {
 async function reload() {
   const currentRoute = currentLocation();
   if (!currentRoute) await gotoEntryView();
-  await handleRoute(currentRoute, currentQuery());
+  await handleRoute(currentRoute, currentQuery(true));
 }
 
 async function goBack(steps = 1, exitOnFirstPage = false) {

package/www/js/utils/iframe_view_utils.js

@@ -1,5 +1,5 @@
 /*eslint-env browser*/
-/*global $, submitWithEmptyAction, is_paging_param, bootstrap, common_done, unique_field_from_rows, inline_submit_success*/
+/*global $, KTDrawer, submitWithEmptyAction, is_paging_param, bootstrap, common_done, unique_field_from_rows, inline_submit_success*/
 
 function combineFormAndQuery(form, query) {
   let paramsList = [];
@@ -27,15 +27,34 @@ async function execLink(url, linkSrc) {
   } else
     try {
       showLoadSpinner();
-      const { path, query } = parent.splitPathQuery(url);
-      await parent.handleRoute(`get${path}`, query);
+      if (url.startsWith("javascript:")) eval(url.substring(11));
+      else {
+        const { path, query } = parent.splitPathQuery(url);
+        await parent.handleRoute(`get${path}`, query);
+      }
     } finally {
       removeLoadSpinner();
     }
 }
 
+async function runUrl(url, method = "get") {
+  const { path, query } = parent.splitPathQuery(url);
+  const page = await parent.router.resolve({
+    pathname: `${method}${path}`,
+    query: query,
+  });
+  return page.content;
+}
+
 async function execNavbarLink(url) {
   $(".navbar-toggler").click();
+  if (typeof KTDrawer === "function") {
+    const aside = $("#kt_aside")[0];
+    if (aside) {
+      const kAside = KTDrawer.getInstance(aside);
+      kAside.hide();
+    }
+  }
   execLink(url);
 }
 
@@ -186,14 +205,10 @@ async function login(e, entryPoint, isSignup) {
       config.user_name = decodedJwt.user.email;
       config.user_id = decodedJwt.user.id;
       config.language = decodedJwt.user.language;
+      config.user = decodedJwt.user;
       config.isPublicUser = false;
       config.isOfflineMode = false;
-      await parent.insertUser({
-        id: config.user_id,
-        email: config.user_name,
-        role_id: config.role_id,
-        language: config.language,
-      });
+      await parent.insertUser(config.user);
       await parent.setJwt(loginResult);
       config.jwt = loginResult;
       await parent.i18next.changeLanguage(config.language);
@@ -245,9 +260,16 @@ async function publicLogin(entryPoint) {
     const loginResult = await loginRequest({ isPublic: true });
     if (typeof loginResult === "string") {
       const config = parent.saltcorn.data.state.getState().mobileConfig;
+      config.user = {
+        role_id: 100,
+        user_name: "public",
+        language: "en",
+      };
+      // TODO remove these, use 'user' everywhere
       config.role_id = 100;
       config.user_name = "public";
       config.language = "en";
+
       config.isPublicUser = true;
       await parent.setJwt(loginResult);
       config.jwt = loginResult;
@@ -321,7 +343,13 @@ async function signupFormSubmit(e, entryView) {
 
 async function loginFormSubmit(e, entryView) {
   try {
-    await login(e, entryView, false);
+    let safeEntryView = entryView;
+    if (!safeEntryView) {
+      const config = parent.saltcorn.data.state.getState().mobileConfig;
+      if (!config.entry_point) throw new Error("Unable to find an entry-point");
+      safeEntryView = config.entry_point;
+    }
+    await login(e, safeEntryView, false);
   } catch (error) {
     parent.errorAlert(error);
   }
@@ -464,6 +492,10 @@ async function gopage(n, pagesize, viewIdentifier, extra) {
   );
 }
 
+function ajax_modal(url, opts = {}) {
+  mobile_modal(url, opts);
+}
+
 async function mobile_modal(url, opts = {}) {
   if ($("#scmodal").length === 0) {
     $("body").append(`<div id="scmodal" class="modal">
@@ -473,6 +505,13 @@ async function mobile_modal(url, opts = {}) {
           <h5 class="modal-title">Modal title</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">            
           </button>
+          <div
+            id="modal-toasts-area"
+            class="toast-container position-fixed top-0 start-50 p-0"
+            style: "z-index: 7000;"
+            aria-live="polite"
+            aria-atomic="true">
+          </div>
         </div>
         <div class="modal-body">
           <p>Modal body text goes here.</p>
@@ -857,10 +896,10 @@ function showLoadSpinner() {
     $("body").append(`
     <div 
       id="scspinner" 
-      style="position: absolute;
-        top: 0px;
-        width: 100%;
-        height: 100%;
+      style="position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
         z-index: 9999;"
     >
       <div