@olenbetong/appframe-core 2.0.3 → 2.1.0

package/src/SessionHandler.ts

@@ -1,168 +1,50 @@
 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();
-          }
-        });
+  authenticated() {
+    this.eventHandler.emit("onAuthenticated");
+  }
 
-        passwordElem.focus();
+  async expired(callback?: (() => void), type?: "RequireTwoFactor"): Promise<void> {
+      let authPromise = new Promise<void>((resolve) => {
+        let eventHandler = () => {
+          this.eventHandler.off("onAuthenticated", eventHandler);
+          callback?.();
+          resolve();
+        }
+  
+        this.eventHandler.on("onAuthenticated", eventHandler);
+      });
+
+      let dialog: HTMLDialogElement | null = document.querySelector("dialog.session-expired-dialog");
+      if (!dialog) {
+        dialog = document.createElement("dialog");
+        dialog.className = "session-expired-dialog";
+        dialog.style.display = "flex";
+        dialog.style.padding = "0";
+        dialog.style.left = "50%";
+        dialog.style.transform = "translateX(-50%)";
+        
+        let link = "/login?ReturnUrl=%2fapi/sessionexpired/remove";
+        if (type !== "RequireTwoFactor") {
+          await fetch("/logout", { method: "POST" });
+        } else {
+          link = "/login?RequireTwoFactor=1&ReturnUrl=%2fapi/sessionexpired/remove";
+        }
+
+        dialog.innerHTML = `<iframe sandbox="allow-same-origin allow-scripts allow-modals allow-top-navigation-by-user-activation allow-forms" src="${link}" style="border:0;width:min(500px,100vw);height:min(700px, 100vh);"></iframe>`;
+        document.body.append(dialog);
+        dialog.showModal();
+        await authPromise;
+        dialog.remove();
+      } else {
+        await authPromise;
       }
-    }
+
   }
 
   attachEvent(eventName: SessionHandlerEvent, handler: Handler) {

package/src/UserSession.ts

@@ -1,6 +1,6 @@
 import SessionHandler from "./SessionHandler.js";
 
-export default class UserSession extends SessionHandler {
+export class UserSession extends SessionHandler {
   amDesignator: string = "a.m.";
   dayNames: string[] = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
   dayNamesShort: string[] = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
@@ -20,7 +20,6 @@ export default class UserSession extends SessionHandler {
   shortDateFormat: string = "dd.MM.yyyy";
   culture: string = "en-GB";
   uiculture: string = "en-GB";
-  expired: (callback: () => void) => void = () => null;
 
   constructor(userData: any) {
     super();

package/src/downloadRequest.ts

@@ -60,10 +60,7 @@ export async function downloadRequest(request: Request, { fileName, signal, onPr
       });
 
       response = new Response(stream);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn("Failed to replace response stream to log download progress.");
-    }
+    } catch (error) {}
 
     const blob = await response.blob();
 

package/src/expose.ts

@@ -1,14 +1,13 @@
 import { has } from "./has.js";
-import parseFunc from "./parseFunc.js";
-import requireNamespace from "./requireNamespace.js";
-import warn from "./warn.js";
+import { parseFunc } from "./parseFunc.js";
+import { requireNamespace } from "./requireNamespace.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 {
+export 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!");
   }
@@ -50,7 +49,7 @@ export default function expose(name: object | string, value: object | Function |
 
     if (has(namespace, keyName)) {
       // If class is already defined, warn or show an alert
-      warn([name, keyName].join(".") + " is already defined!");
+      console.warn([name, keyName].join(".") + " is already defined!");
     } else {
       namespace[keyName] = value;
     }

package/src/getLocalizedString.ts

@@ -1,6 +1,6 @@
 import { has } from "./has";
 
-async function getLocalizedStringAsync(text: string) {
+async function fetchLocalizedString(text: string) {
   try {
     let response = await fetch(`/api/user/localize/new/${af.article.id}`, {
       body: JSON.stringify({ text }),
@@ -19,23 +19,36 @@ async function getLocalizedStringAsync(text: string) {
 
   return text;
 }
+export function getLocalizedStringAsync(string: undefined | null): undefined | null;
+export function getLocalizedStringAsync(string: string): Promise<string>;
+export function getLocalizedStringAsync(string: string | undefined | null) {
+  if (!string) return string;
 
-function afGetLocalizedString(string: undefined | null): undefined | null;
-function afGetLocalizedString(string: string): string;
-function afGetLocalizedString(string: string, wait: false): string;
-function afGetLocalizedString(string: string, wait: true): Promise<string>;
-function afGetLocalizedString(string: string | undefined | null, wait?: boolean): string | undefined | null | Promise<string> {
-  if(typeof string === "string" && string.trim().length === 0) {
+  return getLocalizedString(string, true);
+}
+
+export function getLocalizedString(string: undefined | null): undefined | null;
+export function getLocalizedString(string: string): string;
+export function getLocalizedString(string: string, wait: false): string;
+export function getLocalizedString(string: string, wait: true): Promise<string>;
+export function getLocalizedString(string: undefined | null, wait: true): undefined | null;
+export function getLocalizedString(
+  string: string | undefined | null,
+  wait?: boolean
+): string | undefined | null | Promise<string> {
+  if (typeof string === "string" && string.trim().length === 0) {
     return string;
   }
 
-  if (string === undefined || string === '' || string === null) { return; }
+  if (string === undefined || string === "" || string === null) {
+    return;
+  }
 
   if (af?.article?.i18n !== undefined) {
     if (!has(af.article.i18n, string)) {
       af.article.i18n[string] = string;
 
-      let promise = getLocalizedStringAsync(string).then((text) => {
+      let promise = fetchLocalizedString(string).then((text) => {
         af.article.i18n[string] = text;
         return text;
       });
@@ -50,104 +63,3 @@ function afGetLocalizedString(string: string | undefined | null, wait?: boolean)
     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/index.ts

@@ -1,12 +1,13 @@
 import "./errorHandler.js";
 
-import UserSession from "./UserSession.js";
+import { UserSession } from "./UserSession.js";
 
 export { default as mitt } from "mitt";
 export { downloadBlob } from "./downloadBlob.js";
 export * from "./downloadRequest.js";
-export { default as expose } from "./expose.js";
+export { expose } from "./expose.js";
 export { getLocalizedString } from "./getLocalizedString.js";
+export { localize } from "./localize.js";
 export * from "./has.js";
 export { default as localStorage } from "./localStorage.js";
 export { default as SessionHandler } from "./SessionHandler.js";

package/src/localize.ts

@@ -0,0 +1,29 @@
+import { getLocalizedString } from "./getLocalizedString.js";
+
+/**
+ * Localization function for tagged templates. Replaces the arguments
+ * with $n, where n is the index, before asking Appframe to translate
+ * the string.
+ * 
+ * For example, if you call localize`Page ${2} or ${5}`, the string
+ * "Page $0 of $1" will be sent to Appframe, and for norwegian,
+ * "Side 2 av 5" will be returned.
+ * 
+ * @param stringParts 
+ * @param args 
+ * @returns Translated string
+ */
+export function localize(stringParts: TemplateStringsArray, ...args: any[]): string {
+  if (!Array.isArray(stringParts) || stringParts?.length || stringParts.length !== args.length + 1) {
+    throw TypeError("Method 'localize' must be used as a tag function");
+  }
+
+  let stringToLocalize = stringParts.map((s, i) => (i === stringParts.length - 1 ? s : `${s}\$${i}`)).join("");
+  let localized = getLocalizedString(stringToLocalize);
+
+  args.forEach((arg, index) => {
+    localized = localized.replace("$" + index, arg);
+  })
+
+  return localized;
+}

package/src/parseFunc.ts

@@ -1,6 +1,6 @@
 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) {
+export function parseFunc(func: Function) {
   var match = func.toString().match(funcRegex);
   if (match === null) {
     throw new TypeError("Unable to parse function!");

package/src/requireNamespace.ts

@@ -1,6 +1,6 @@
 import Namespace from "./Namespace.js";
 
-export default function requireNamespace(
+export function requireNamespace(
   root: any,
   namespace: string | Array<string>
 ): any {
@@ -17,10 +17,6 @@ export default function requireNamespace(
       }
 
       return current;
-    } else {
-      throw new TypeError("Invalid type of parameter 'namespace'");
     }
-  } else {
-    throw new TypeError("Invalid type of parameter 'root'");
   }
 }

package/es/warn.d.ts

@@ -1 +0,0 @@
-export default function warn(message: string, fallbackToAlert?: boolean): void;

package/es/warn.js

@@ -1,4 +0,0 @@
-/* eslint-disable no-console */
-export default function warn(message, fallbackToAlert) {
-    console.warn(message);
-}

package/src/warn.ts

@@ -1,4 +0,0 @@
-/* eslint-disable no-console */
-export default function warn(message: string, fallbackToAlert?: boolean) {
-  console.warn(message);
-}