sliftutils 0.13.0 → 0.15.0

package/.cursorrules

@@ -79,6 +79,10 @@ Coding Styles
 
     Never use environment variables. All configuration should be on the disk, or, if specific to a current run, passed as command line parameters. 
 
+    Never use inline styles, always use the CSS helper. 
+
+    Don't use as any.
+
 
 General Styling
     Never use em or rem. Only use px or vw/vh/%.

package/index.d.ts

@@ -19,6 +19,7 @@ declare module "sliftutils/misc/fs" {
 }
 
 declare module "sliftutils/misc/getSecret" {
+    export declare function resetSecret(key: string): void;
     export declare const getSecret: {
         (key: string): Promise<string>;
         clear(key: string): void;
@@ -135,7 +136,6 @@ declare module "sliftutils/render-utils/Input" {
 declare module "sliftutils/render-utils/InputLabel" {
     import preact from "preact";
     import { InputProps } from "./Input";
-    import { URLParamStr } from "./URLParam";
     export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
         label?: preact.ComponentChild;
         number?: boolean;
@@ -164,7 +164,9 @@ declare module "sliftutils/render-utils/InputLabel" {
         render(): preact.JSX.Element;
     }
     export declare class InputLabelURL extends preact.Component<InputLabelProps & {
-        persisted: URLParamStr;
+        persisted: {
+            value: unknown;
+        };
     }> {
         render(): preact.JSX.Element;
     }

package/misc/getSecret.d.ts

@@ -1,3 +1,4 @@
+export declare function resetSecret(key: string): void;
 export declare const getSecret: {
     (key: string): Promise<string>;
     clear(key: string): void;

package/misc/getSecret.ts

@@ -1,28 +1,99 @@
 
 import { cache } from "socket-function/src/caching";
-import os from "os";
-import fs from "fs";
+import { isNode } from "typesafecss";
 
-export const getSecret = cache(async function getSecret(key: string): Promise<string> {
-    const jsonIndex = key.indexOf(".json");
-    if (jsonIndex === -1) {
-        const filePath = os.homedir() + "/" + key;
-        return fs.readFileSync(filePath, "utf-8").trim();
+const secretStoragePrefix = "secret_";
+
+function getStorageKey(key: string) {
+    return secretStoragePrefix + key.replace(/[\/\\\.]/g, "_");
+}
+
+export function resetSecret(key: string) {
+    if (isNode()) {
+        throw new Error("resetSecret is only supported in the browser");
     }
+    localStorage.removeItem(getStorageKey(key));
+}
+
+export const getSecret = cache(async function getSecret(key: string): Promise<string> {
+    if (isNode()) {
+        const os = await import("os");
+        const fs = await import("fs");
+        const jsonIndex = key.indexOf(".json");
+        if (jsonIndex === -1) {
+            const filePath = os.homedir() + "/" + key;
+            return fs.readFileSync(filePath, "utf-8").trim();
+        }
 
-    const pathPart = key.slice(0, jsonIndex + ".json".length);
-    const filePath = os.homedir() + "/" + pathPart;
-    const contents = fs.readFileSync(filePath, "utf-8");
-    const json = JSON.parse(contents);
+        const pathPart = key.slice(0, jsonIndex + ".json".length);
+        const filePath = os.homedir() + "/" + pathPart;
+        const contents = fs.readFileSync(filePath, "utf-8");
+        const json = JSON.parse(contents);
 
-    const keyPart = key.slice(jsonIndex + ".json.".length);
-    if (!keyPart) {
-        return JSON.stringify(json);
+        const keyPart = key.slice(jsonIndex + ".json.".length);
+        if (!keyPart) {
+            return JSON.stringify(json);
+        }
+
+        const value = json[keyPart];
+        if (value === undefined) {
+            throw new Error(`Expected key "${keyPart}" in ${filePath}, was undefined`);
+        }
+        return String(value);
     }
 
-    const value = json[keyPart];
-    if (value === undefined) {
-        throw new Error(`Expected key "${keyPart}" in ${filePath}, was undefined`);
+    // Browser implementation
+    const storageKey = getStorageKey(key);
+    const cached = localStorage.getItem(storageKey);
+    if (cached) {
+        return cached;
     }
-    return String(value);
-});
+
+    // Show modal to prompt user for secret
+    const { showFullscreenModal, FullscreenModal } = await import("../render-utils/FullscreenModal");
+    const { showModal } = await import("../render-utils/modal");
+    const { observable } = await import("mobx");
+    const preact = await import("preact");
+
+    return new Promise<string>((resolve) => {
+        const state = observable({
+            value: "",
+        });
+
+        const { close } = showModal({
+            contents: preact.createElement(FullscreenModal, {
+                onCancel: () => {
+                    // Don't allow cancel without a value
+                },
+            },
+                preact.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 10 } },
+                    preact.createElement("div", { style: { fontWeight: "bold" } }, `Enter secret for: ${key}`),
+                    preact.createElement("input", {
+                        type: "password",
+                        style: { padding: 10, fontSize: 16 },
+                        onInput: (e: Event) => {
+                            state.value = (e.target as HTMLInputElement).value;
+                        },
+                        onKeyDown: (e: KeyboardEvent) => {
+                            if (e.code === "Enter" && state.value) {
+                                localStorage.setItem(storageKey, state.value);
+                                close();
+                                resolve(state.value);
+                            }
+                        },
+                    }),
+                    preact.createElement("button", {
+                        style: { padding: 10, fontSize: 16, cursor: "pointer" },
+                        onClick: () => {
+                            if (state.value) {
+                                localStorage.setItem(storageKey, state.value);
+                                close();
+                                resolve(state.value);
+                            }
+                        },
+                    }, "Save"),
+                ),
+            ),
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.13.0",
+    "version": "0.15.0",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/render-utils/InputLabel.d.ts

@@ -1,6 +1,5 @@
 import preact from "preact";
 import { InputProps } from "./Input";
-import { URLParamStr } from "./URLParam";
 export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
     label?: preact.ComponentChild;
     number?: boolean;
@@ -29,7 +28,9 @@ export declare class InputLabel extends preact.Component<InputLabelProps> {
     render(): preact.JSX.Element;
 }
 export declare class InputLabelURL extends preact.Component<InputLabelProps & {
-    persisted: URLParamStr;
+    persisted: {
+        value: unknown;
+    };
 }> {
     render(): preact.JSX.Element;
 }

package/render-utils/InputLabel.tsx

@@ -1,7 +1,6 @@
 import preact from "preact";
 import { Input, InputProps } from "./Input";
 import { css } from "typesafecss";
-import { URLParamStr } from "./URLParam";
 import { lazy } from "socket-function/src/caching";
 import { observer } from "./observer";
 import { observable } from "mobx";
@@ -83,29 +82,21 @@ export class InputLabel extends preact.Component<InputLabelProps> {
 
         if ((!props.type || props.type === "number") && props.useDateUI) {
             let value = String(props.value);
-            if (
-                value === "date-1be2200d-9742-4e90-a6c2-e8a790277414"
-                || isJSNumber(value) && startGuessDateRange < +value && +value < endGuessDateRange
-                // NOTE: Showing the date selector is a problem, as there is not an easy way to undo this. So if the
-                //      user typed in "2020", it would return the input into a selector and not let them keeping type.
-                // || startGuessDateRange < +new Date(String(value)) && +new Date(String(value)) < endGuessDateRange
-            ) {
-                props.type = "datetime-local";
-                props.edit = false;
-                props.textarea = false;
-                props.number = false;
-                props.forceInputValueUpdatesWhenFocused = true;
-                // NOTE: When using forceInputValueUpdatesWhenFocused we need hot, otherwise the user's updates
-                //  won't be visible.
-                props.hot = true;
-                if (isJSNumber(value)) {
-                    value = formatDateTimeForInput(+value);
-                } else {
-                    value = "";
-                }
-                props.value = value;
-                addValueMapping(value => (+new Date(value).getTime() || "") + "");
+            props.type = "datetime-local";
+            props.edit = false;
+            props.textarea = false;
+            props.number = false;
+            props.forceInputValueUpdatesWhenFocused = true;
+            // NOTE: When using forceInputValueUpdatesWhenFocused we need hot, otherwise the user's updates
+            //  won't be visible.
+            props.hot = true;
+            if (isJSNumber(value)) {
+                value = formatDateTimeForInput(+value);
+            } else {
+                value = "";
             }
+            props.value = value;
+            addValueMapping(value => (+new Date(value).getTime() || "") + "");
         }
         if (props.fontSize !== undefined) {
             props.style = { ...props.style as any, fontSize: props.fontSize };
@@ -260,7 +251,7 @@ const pencilSVG = lazy(() => {
 
 @observer
 export class InputLabelURL extends preact.Component<InputLabelProps & {
-    persisted: URLParamStr;
+    persisted: { value: unknown };
 }> {
     render() {
         this.props.persisted.value;