@olenbetong/appframe-core 2.0.4 → 2.1.0

package/es/SessionHandler.js

@@ -1,140 +1,43 @@
 import mitt from "mitt";
-import { getLocalizedString } from "./getLocalizedString.js";
 export default class SessionHandler {
     constructor() {
         this.eventHandler = mitt();
-        this.showingDialog = false;
-        this.dialog = null;
     }
-    expired(callback) {
-        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");
-            const statusElem = contentContainer.querySelector(".alert-warning");
-            const userElem = contentContainer.querySelector("input[type=text]");
-            const signInElem = contentContainer.querySelector(".sign-in");
-            const passwordElem = contentContainer.querySelector("input[type=password]");
-            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.style.display = "none";
-                            }
-                        }
-                        else {
-                            throw new Error(json.error);
-                        }
-                    }
-                    catch (err) {
-                        if (err && typeof err === "object") {
-                            let error = err;
-                            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.style.display = "initial";
-                            }
-                        }
-                    }
-                };
-                signInElem.addEventListener("click", doLogin);
-                passwordElem.addEventListener("keyup", evt => {
-                    if (evt.key === "Enter") {
-                        doLogin();
-                    }
-                });
-                passwordElem.addEventListener("change", evt => {
-                    if (evt.key === "Enter") {
-                        doLogin();
-                    }
-                });
-                userElem.addEventListener("keyup", evt => {
-                    if (evt.key === "Enter") {
-                        doLogin();
-                    }
-                });
-                userElem.addEventListener("change", evt => {
-                    if (evt.key === "Enter") {
-                        doLogin();
-                    }
-                });
-                passwordElem.focus();
+    authenticated() {
+        this.eventHandler.emit("onAuthenticated");
+    }
+    async expired(callback, type) {
+        let authPromise = new Promise((resolve) => {
+            let eventHandler = () => {
+                this.eventHandler.off("onAuthenticated", eventHandler);
+                callback?.();
+                resolve();
+            };
+            this.eventHandler.on("onAuthenticated", eventHandler);
+        });
+        let dialog = 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, handler) {
@@ -144,7 +47,3 @@ export default class SessionHandler {
         return this.eventHandler.off(eventName, handler);
     }
 }
-SessionHandler.messages = {
-    login: "Log in",
-    relog: "Session expired - log in"
-};

package/es/UserSession.d.ts

@@ -1,5 +1,5 @@
 import SessionHandler from "./SessionHandler.js";
-export default class UserSession extends SessionHandler {
+export declare class UserSession extends SessionHandler {
     amDesignator: string;
     dayNames: string[];
     dayNamesShort: string[];
@@ -19,6 +19,5 @@ export default class UserSession extends SessionHandler {
     shortDateFormat: string;
     culture: string;
     uiculture: string;
-    expired: (callback: () => void) => void;
     constructor(userData: any);
 }

package/es/UserSession.js

@@ -1,5 +1,5 @@
 import SessionHandler from "./SessionHandler.js";
-export default class UserSession extends SessionHandler {
+export class UserSession extends SessionHandler {
     constructor(userData) {
         super();
         this.amDesignator = "a.m.";
@@ -17,7 +17,6 @@ export default class UserSession extends SessionHandler {
         this.shortDateFormat = "dd.MM.yyyy";
         this.culture = "en-GB";
         this.uiculture = "en-GB";
-        this.expired = () => null;
         this.formats = {};
         Object.assign(this, userData);
     }

package/es/downloadRequest.js

@@ -39,10 +39,7 @@ export async function downloadRequest(request, { fileName, signal, onProgress })
             });
             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();
         reportProgress({ bytesReceived, status: "downloaded" });
         await downloadBlob(blob, fileName);

package/es/expose.d.ts

@@ -3,4 +3,4 @@
  * @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 declare function expose(name: object | string, value: object | Function | Function[]): void;

package/es/expose.js

@@ -1,13 +1,12 @@
 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, value) {
+export function expose(name, value) {
     if (arguments.length !== 2) {
         throw new Error("Incorrect number of arguments passed to the expose function!");
     }
@@ -44,7 +43,7 @@ export default function expose(name, value) {
         }
         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/es/index.d.ts

@@ -1,10 +1,11 @@
 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/es/index.js

@@ -1,13 +1,14 @@
 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";
 export { UserSession };
 export * from "./settings.js";
-export const version = "2.0.4";
+export const version = "2.1.0";

package/es/localize.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 declare function localize(stringParts: TemplateStringsArray, ...args: any[]): string;

package/es/localize.js

@@ -0,0 +1,25 @@
+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, ...args) {
+    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/es/parseFunc.d.ts

@@ -1,4 +1,4 @@
-export default function parseFunc(func: Function): {
+export declare function parseFunc(func: Function): {
     name: string;
     args: string[];
     body: string;

package/es/parseFunc.js

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

package/es/requireNamespace.d.ts

@@ -1 +1 @@
-export default function requireNamespace(root: any, namespace: string | Array<string>): any;
+export declare function requireNamespace(root: any, namespace: string | Array<string>): any;

package/es/requireNamespace.js

@@ -1,5 +1,5 @@
 import Namespace from "./Namespace.js";
-export default function requireNamespace(root, namespace) {
+export function requireNamespace(root, namespace) {
     if (typeof root === "object") {
         if (typeof namespace === "string") {
             let path = namespace.split(".");
@@ -13,11 +13,5 @@ export default function requireNamespace(root, namespace) {
             }
             return current;
         }
-        else {
-            throw new TypeError("Invalid type of parameter 'namespace'");
-        }
-    }
-    else {
-        throw new TypeError("Invalid type of parameter 'root'");
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-core",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "Javascript libraries to utilize the Appframe framework",
   "type": "module",
   "sideEffects": [
@@ -48,5 +48,5 @@
   "devDependencies": {
     "chalk": "^5.0.1"
   },
-  "gitHead": "ad1c3f7787d9a631f76fd811d9383d9ac3dfa07b"
+  "gitHead": "1074886c6a0834bdaa3ca684590c4aadc81581c5"
 }

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;
     }