@olenbetong/appframe-core 1.0.0

package/src/SessionHandler.ts

@@ -0,0 +1,175 @@
+import mitt, { Emitter, Handler } from "mitt";
+import { getLocalizedString } from "./getLocalizedString.js";
+
+type SessionHandlerEvent = "onExpired" | "onAuthenticated";
+
+export default class SessionHandler {
+  static messages = {
+    login: "Log in",
+    relog: "Session expired - log in"
+  };
+
+  private eventHandler: Emitter<{ onAuthenticated: void; onExpired: void }> = mitt();
+  private showingDialog = false;
+  private dialog = null;
+
+  expired(callback: Function) {
+    af.userSession = af.userSession || {
+      login: null
+    };
+
+    if (typeof callback !== "function") {
+      throw new TypeError("Parameter pCallback passed to the expired function must be a function!");
+    }
+
+    const once = () => {
+      this.detachEvent("onAuthenticated", once);
+      callback();
+    };
+
+    this.attachEvent("onAuthenticated", once);
+
+    if (this.showingDialog !== true) {
+      this.showingDialog = true;
+      const contentContainer = document.createElement("div");
+      contentContainer.className = "session-expired-container";
+      contentContainer.innerHTML = `
+<div class="session-expired-log-in" style="margin-top: 20px;">
+  <div class="row">
+    <div class="sessionExpired">
+      <h4 class="message">Frakoblet - tidsavbrudd</h4>
+      <div class="form-group">
+        <label for="username">${getLocalizedString("Username")}</label>
+        <input type="text" class="form-control" id="username" autofocus>
+      </div>
+      <div class="form-group">
+        <label for="password">${getLocalizedString("Password")}</label>
+        <input type="password" autocomplete="password" class="form-control" id="password" >
+      </div>
+      <div class="form-group">
+        <div>
+          <button type="submit" class="btn btn-default sign-in">
+            ${getLocalizedString("Log in")}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="" style="display:none; margin: 0px 30px;">
+      <div class="alert alert-warning" role="alert" style="margin-top:10px;"></div> 
+    </div>
+  </div>
+</div>
+`;
+      const message = af.userSession.login ? SessionHandler.messages.relog : SessionHandler.messages.login;
+
+      const messageElem = contentContainer.querySelector(".message") as HTMLHeadingElement;
+      const statusElem = contentContainer.querySelector(".alert-warning") as HTMLDivElement;
+      const userElem = contentContainer.querySelector("input[type=text]") as HTMLInputElement;
+      const signInElem = contentContainer.querySelector(".sign-in") as HTMLButtonElement;
+      const passwordElem = contentContainer.querySelector("input[type=password]") as HTMLInputElement;
+
+      if (
+        messageElem !== null &&
+        userElem !== null &&
+        statusElem !== null &&
+        userElem !== null &&
+        signInElem !== null &&
+        passwordElem !== null
+      ) {
+        messageElem.innerText = getLocalizedString(message);
+
+        userElem.value = af.userSession.login || "";
+        userElem.disabled = !!af.userSession.login;
+        userElem.readOnly = !!af.userSession.login;
+
+        document.body.appendChild(contentContainer);
+
+        const doLogin = async () => {
+          passwordElem.disabled = true;
+
+          const request = new Request("/login", {
+            body: JSON.stringify({
+              username: userElem.value,
+              password: passwordElem.value,
+              remember: false
+            }),
+            headers: {
+              Accept: "application/json",
+              "Content-Type": "application/json; charset=utf-8",
+              "X-Requested-With": "XMLHttpRequest"
+            },
+            method: "POST"
+          });
+
+          try {
+            const response = await fetch(request);
+            const json = await response.json();
+
+            if (json.success) {
+              document.body.removeChild(contentContainer);
+              this.showingDialog = false;
+              this.eventHandler.emit("onAuthenticated");
+
+              if (statusElem.parentNode) {
+                (statusElem.parentNode as HTMLElement).style.display = "none";
+              }
+            } else {
+              throw new Error(json.error);
+            }
+          } catch (err) {
+            if (err && typeof err === "object") {
+              let error = err as Error;
+              passwordElem.disabled = false;
+              passwordElem.classList.toggle("invalid", true);
+              passwordElem.value = "";
+              passwordElem.focus();
+              statusElem.innerText = error.message ? error.message : String(error);
+
+              if (statusElem.parentNode) {
+                (statusElem.parentNode as HTMLElement).style.display = "initial";
+              }
+            }
+          }
+        };
+
+        signInElem.addEventListener("click", doLogin);
+
+        passwordElem.addEventListener("keyup", evt => {
+          if (evt.key === "Enter") {
+            doLogin();
+          }
+        });
+
+        passwordElem.addEventListener("change", evt => {
+          if ((evt as KeyboardEvent).key === "Enter") {
+            doLogin();
+          }
+        });
+
+        userElem.addEventListener("keyup", evt => {
+          if (evt.key === "Enter") {
+            doLogin();
+          }
+        });
+
+        userElem.addEventListener("change", evt => {
+          if ((evt as KeyboardEvent).key === "Enter") {
+            doLogin();
+          }
+        });
+
+        passwordElem.focus();
+      }
+    }
+  }
+
+  attachEvent(eventName: SessionHandlerEvent, handler: Handler) {
+    return this.eventHandler.on(eventName, handler);
+  }
+
+  detachEvent(eventName: SessionHandlerEvent, handler: Handler) {
+    return this.eventHandler.off(eventName, handler);
+  }
+}

package/src/UserSession.ts

@@ -0,0 +1,16 @@
+import SessionHandler from "./SessionHandler.js";
+
+export default class UserSession extends SessionHandler {
+  decimalSeparator: string = ".";
+  formats: any;
+  groupSeparator: string | null = null;
+  shortDateFormat: string = "dd.MM.yyyy";
+  login: string | null = null;
+  isDeveloper: boolean = false;
+
+  constructor(userData: any) {
+    super();
+    this.formats = {};
+    Object.assign(this, userData);
+  }
+}

package/src/expose.ts

@@ -0,0 +1,68 @@
+import has from "./has.js";
+import parseFunc from "./parseFunc.js";
+import requireNamespace from "./requireNamespace.js";
+import warn from "./warn.js";
+
+/**
+ * Expose a value to a potentially deeply nested global variable
+ * @param name {string | object} Either a dot-separated path to the global variable, or an object to expose the value on
+ * @param value {object | Function | Function[]} The value(s) to expose
+ */
+export default function expose(
+  name: object | string,
+  value: object | Function | Function[]
+): void {
+  if (arguments.length !== 2) {
+    throw new Error(
+      "Incorrect number of arguments passed to the expose function!"
+    );
+  }
+
+  if (Array.isArray(value)) {
+    for (let func of value) {
+      const { name: funcName } = parseFunc(func);
+
+      if (funcName) {
+        expose(name, func); // Expose func on namespace found in pName
+      } else {
+        throw new Error(
+          "Unable to detect name of function! Name it, or only supply one function and include name in first parameter."
+        );
+      }
+    }
+  } else {
+    let keyName: string | undefined;
+    let namespace;
+
+    if (typeof value === "function") {
+      keyName = parseFunc(value).name;
+    }
+
+    if (typeof name === "string") {
+      let pathParts = name.split(".");
+
+      if (!keyName) {
+        keyName = pathParts[pathParts.length - 1];
+        pathParts = pathParts.slice(0, pathParts.length - 1);
+      }
+
+      namespace = requireNamespace(window, pathParts);
+    } else if (
+      keyName &&
+      (typeof name === "object" || typeof name === "function")
+    ) {
+      namespace = name;
+    } else {
+      throw new TypeError(
+        "Invalid typeof parameter 'name', or unable to parse pValue!"
+      );
+    }
+
+    if (has(namespace, keyName)) {
+      // If class is already defined, warn or show an alert
+      warn([name, keyName].join(".") + " is already defined!");
+    } else {
+      namespace[keyName] = value;
+    }
+  }
+}

package/src/getLocalizedString.ts

@@ -0,0 +1,153 @@
+async function getLocalizedStringAsync(string: string) {
+  try {
+    let response = await fetch("/api/user/localize", {
+      body: JSON.stringify({ string }),
+      headers: {
+        Accept: "application/json; */*",
+        "Content-Type": "application/json",
+        "X-Requested-With": "XMLHttpRequest",
+      },
+      method: "POST",
+    });
+
+    if (response.ok) {
+      return (await response.json()) as string;
+    }
+  } catch (error) {}
+
+  return string;
+}
+
+function afGetLocalizedString(string: string): string;
+function afGetLocalizedString(string: string, wait: false): string;
+function afGetLocalizedString(string: string, wait: true): Promise<string>;
+function afGetLocalizedString(
+  string: string,
+  wait?: boolean
+): string | Promise<string> {
+  if (af?.article?.i18n !== undefined) {
+    if (!Object.prototype.hasOwnProperty.call(af.article.i18n, string)) {
+      af.article.i18n[string] = string;
+
+      let promise = getLocalizedStringAsync(string).then((text) => {
+        af.article.i18n[string] = text;
+        return text;
+      });
+
+      if (wait) {
+        return promise;
+      }
+    }
+
+    return af.article.i18n[string];
+  } else {
+    return string;
+  }
+}
+
+declare global {
+  interface Window {
+    __UNLOCALIZED_STRINGS__: Set<string>;
+    __doNothingWithStrings?: () => Record<string, string>;
+    __getUnlocalizedStrings?: (forCustomRoute?: boolean) => string;
+  }
+}
+
+const key = "__UNLOCALIZED_STRINGS__";
+const localizeSet = window[key] || new Set();
+
+if (!window[key]) {
+  window[key] = localizeSet;
+}
+
+function handleReadyStateChange() {
+  if (document.readyState !== "loading") {
+    addDeveloperUtils();
+    document.removeEventListener("readystatechange", handleReadyStateChange);
+  }
+}
+
+if (document.readyState !== "loading") {
+  addDeveloperUtils();
+} else {
+  document.addEventListener("readystatechange", handleReadyStateChange);
+}
+
+function isDeveloper() {
+  const { af } = window;
+
+  return af && af.userSession && af.userSession.isDeveloper;
+}
+
+function addDeveloperUtils() {
+  if (isDeveloper()) {
+    if (typeof window.__doNothingWithStrings === "function") {
+      const addedStrings = window.__doNothingWithStrings();
+
+      for (let string of Object.keys(addedStrings)) {
+        localizeSet.add(string);
+      }
+    }
+
+    if (!window[key]) {
+      window[key] = localizeSet;
+    }
+
+    if (!window.__getUnlocalizedStrings) {
+      window.__getUnlocalizedStrings = function (forCustomRoute) {
+        const strings = [];
+
+        for (let string of localizeSet) {
+          if (string) {
+            const escaped = string.replace(/'/g, "\\'");
+            if (forCustomRoute) {
+              const localized = afGetLocalizedString(string).replaceAll(
+                /'/g,
+                "\\'"
+              );
+              strings.push(`'${escaped}': '${localized}',`);
+            } else {
+              strings.push(
+                `s['${escaped}'] = @Html(@context.AddLocalizableString("${string.replaceAll(
+                  '"',
+                  '\\"'
+                )}"));`
+              );
+            }
+          }
+        }
+
+        if (forCustomRoute) {
+          return `// Localization hack, since it AddLocalizableString doesn't work properly when custom routes is used
+if (af.userSession.uiculture === 'nb-NO') {
+	const strings = {
+		${strings.join("\n\t\t")}
+	};
+	af.article.i18n = af.article.i18n || {};
+	Object.assign(af.article.i18n, strings);
+}`;
+        }
+
+        return `<script type="text/javascript">
+function __doNothingWithStrings() {
+@{
+	var context = @Appframe.Web.Context.RequestContext.Current;
+}
+let s = {};
+${strings.join("\n")}
+return s;
+}
+</script>`;
+      };
+    }
+  }
+}
+
+export function getLocalizedString(string: string) {
+  const localized = afGetLocalizedString(string);
+  if (localized === string && !localizeSet.has(string)) {
+    localizeSet.add(string);
+  }
+
+  return localized;
+}

package/src/global.d.ts

@@ -0,0 +1,56 @@
+import {
+  AfDataObject,
+  DataHandler,
+  DataObject,
+  Procedure,
+  ProcedureAPI,
+} from "@olenbetong/data-object";
+import UserSession from "./UserSession.js";
+
+export type Appframe = {
+  article: {
+    dataObjects?: Record<string, DataObject<any>>;
+    i18n: Record<string, string>;
+    id: string;
+    hostName: string;
+  };
+  common?: {
+    getLocalizedString?: (string: string) => string;
+  };
+  controls?: {
+    alert?: (message: string, callback?: () => void) => void;
+    confirm?: (options: {
+      title: string;
+      message: string;
+      buttons: string[];
+      callback: (button: number) => void;
+    }) => void;
+  };
+  data?: {
+    [index: string]: { new (options?: any): DataHandler<any> };
+  } & { version?: string };
+  DataObject?: {
+    new <T>(options: any): DataObject<T>;
+    getByID?: (name: string) => AfDataObject<unknown> | null;
+  };
+  Procedure?: { new <T, V>(options: any): Procedure<T, V> };
+  ProcedureAPI?: { new <T, V>(options: any): ProcedureAPI<T, V> };
+  userSession: UserSession;
+  template: {
+    loop: (template: string, data: any, custom?: any) => string;
+    run: (template: string, row: any, custom?: any) => string;
+    run2: (
+      template: string,
+      currentRow: any,
+      previousRow?: any,
+      state?: any,
+      custom?: any
+    ) => string;
+  };
+};
+
+declare global {
+  var __VERSION__: string;
+  var __DEV__: number;
+  var af: Appframe;
+}

package/src/has.ts

@@ -0,0 +1,6 @@
+export default function has(
+  obj: any,
+  key: string | number | symbol
+): boolean {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { default as mitt } from "mitt";
+export { default as expose } from "./expose.js";
+export { getLocalizedString } from "./getLocalizedString.js";
+export { default as localStorage } from "./localStorage.js";
+export { default as SessionHandler } from "./SessionHandler.js";
+export { default as UserSession } from "./UserSession.js";
+export const version = __VERSION__;

package/src/localStorage.ts

@@ -0,0 +1,49 @@
+function getLocalKey(key: string): string {
+  return [af?.article?.id || "", "common", key].join(".");
+}
+
+class LocalStorage {
+  isPersisted() {
+    return true;
+  }
+
+  getLocalStorageKey(key: string, global?: boolean) {
+    return global ? ["common", key].join(".") : getLocalKey(key);
+  }
+
+  get(key: string, defaultValue: unknown, global?: boolean) {
+    const lsKey = this.getLocalStorageKey(key, global);
+    const value = localStorage.getItem(lsKey);
+
+    return value !== null ? JSON.parse(value) : defaultValue;
+  }
+
+  set(key: string, value: unknown, global?: boolean) {
+    localStorage.setItem(
+      this.getLocalStorageKey(key, global),
+      JSON.stringify(value)
+    );
+  }
+
+  remove(key: string, global?: boolean) {
+    const lsKey = this.getLocalStorageKey(key, global);
+    if (localStorage.getItem(lsKey) !== null) {
+      localStorage.removeItem(lsKey);
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  clear() {
+    const baseKey = getLocalKey("");
+
+    for (let key in localStorage) {
+      if (key.slice(0, baseKey.length) === baseKey) {
+        localStorage.removeItem(key);
+      }
+    }
+  }
+}
+
+export default new LocalStorage();

package/src/parseFunc.ts

@@ -0,0 +1,9 @@
+const funcRegex = /^function(?:\s+([a-zA-Z$_][a-zA-Z0-9$_]*))?\s*\(((?:(?:\s*[a-zA-Z$_][a-zA-Z0-9$_]*)(?:\s*,\s*[a-zA-Z$_][a-zA-Z0-9$_]*)*)?)\s*\)\s*\{((?:.|\n|\r)*)\}$/;
+
+export default function parseFunc(func: Function) {
+  var match = func.toString().match(funcRegex);
+  if (match === null) {
+    throw new TypeError("Unable to parse function!");
+  }
+  return { name: match[1], args: match[2].split(","), body: match[3] };
+}

package/src/requireNamespace.ts

@@ -0,0 +1,26 @@
+import Namespace from "./Namespace.js";
+
+export default function requireNamespace(
+  root: any,
+  namespace: string | Array<string>
+): any {
+  if (typeof root === "object") {
+    if (typeof namespace === "string") {
+      let path = namespace.split(".");
+
+      return requireNamespace(root, path);
+    } else if (Array.isArray(namespace)) {
+      let current: any = root;
+      for (let i = 0; i < namespace.length; i++) {
+        current = current[namespace[i]] =
+          current[namespace[i]] || new (Namespace as any)();
+      }
+
+      return current;
+    } else {
+      throw new TypeError("Invalid type of parameter 'namespace'");
+    }
+  } else {
+    throw new TypeError("Invalid type of parameter 'root'");
+  }
+}

package/src/settings.ts

@@ -0,0 +1,36 @@
+function getKey(article?: string) {
+  const articleKey = article || af.article.id;
+  return `${articleKey}.${af.userSession.login}`;
+}
+
+export function getSettings<T>(setting: string, article?: string): T | null {
+  if (!af?.userSession) return null;
+
+  const key = getKey(article);
+  const settings = JSON.parse(localStorage.getItem(key) || "{}");
+
+  if (setting) {
+    return settings[setting] || null;
+  }
+
+  return settings;
+}
+
+export function saveSettings<T>(
+  setting: string,
+  value: T | null,
+  article?: string
+): void {
+  if (!af?.userSession) return;
+
+  const key = getKey(article);
+  let userSettings = JSON.parse(localStorage.getItem(key) || "{}");
+
+  if (typeof value !== "undefined") {
+    userSettings[setting] = value;
+  } else {
+    userSettings = setting;
+  }
+
+  localStorage.setItem(key, JSON.stringify(userSettings));
+}

package/src/warn.ts

@@ -0,0 +1,10 @@
+/* eslint-disable no-console */
+export default function warn(message: string, fallbackToAlert?: boolean) {
+  if (console && typeof console.warn === "function") {
+    console.warn(message);
+  } else if (console && typeof console.log === "function") {
+    console.log(message);
+  } else if (fallbackToAlert) {
+    alert(message);
+  }
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "esnext",
+    "rootDir": "./src",
+    "strict": true,
+    "strictNullChecks": true,
+    "baseUrl": "./",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "declaration": true,
+    "outDir": "./es",
+    "skipLibCheck": true
+  },
+  "exclude": [
+    "test",
+    "dist",
+    "es",
+    "node_modules",
+    "**/*.test.ts",
+    "__tests__/*",
+    "scripts/*"
+  ],
+  "include": ["./src/*"]
+}