sliftutils 1.4.6 → 1.4.8

package/package.json

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

package/storage/FileFolderAPI.tsx

@@ -95,6 +95,16 @@ function loadRemoteConfig(): RemoteConfig | undefined {
 }
 function saveRemoteConfig(c: RemoteConfig) { localStorage.setItem(remoteConfigKey(), JSON.stringify(c)); }
 
+// The server is always HTTPS on the filehoster's default port, so the user only needs to type the host
+// (e.g. "65.109.93.113"). We strip any scheme/path they include and default the port if omitted.
+const DEFAULT_REMOTE_PORT = 8787; // matches remoteFileServer.js's default
+function normalizeServerUrl(raw: string): string {
+    let s = raw.trim().replace(/^\w+:\/\//, "").replace(/\/.*$/, "");
+    if (!s) return "";
+    if (!/:\d+$/.test(s)) s += ":" + DEFAULT_REMOTE_PORT;
+    return "https://" + s;
+}
+
 // One shared factory (and therefore one shared range cache) per remote config.
 let remoteFactory: { key: string; factory: ReturnType<typeof getRemoteFileStorage> } | undefined;
 function getRemoteFactory(remote: RemoteConfig) {
@@ -128,8 +138,8 @@ class DirectoryPrompter extends preact.Component {
 // reloads so getFileStorageNested2 picks up the remote storage.
 @observer
 class ServerConnectForm extends preact.Component {
-    private obs = observable({ expanded: false, url: "", password: "", error: "", connecting: false, needsCert: false });
-    private cleanUrl() { return this.obs.url.trim().replace(/\/+$/, ""); }
+    private obs = observable({ expanded: false, url: "", password: "", error: "", connecting: false, needsCert: false, showPassword: false });
+    private cleanUrl() { return normalizeServerUrl(this.obs.url); }
     private connect = async () => {
         const s = this.obs;
         s.error = "";
@@ -166,10 +176,15 @@ class ServerConnectForm extends preact.Component {
         }
         return (
             <div className={css.vbox(16).center}>
-                <input className={inputCss} placeholder="https://host:8787" value={s.url}
+                <input className={inputCss} placeholder="server address (e.g. 65.109.93.113, or host:port)" value={s.url}
                     onInput={e => s.url = (e.target as HTMLInputElement).value} />
-                <input className={inputCss} type="password" placeholder="password (six words)" value={s.password}
-                    onInput={e => s.password = (e.target as HTMLInputElement).value} />
+                <div className={css.hbox(10).center}>
+                    <input className={inputCss} type={s.showPassword ? "text" : "password"} placeholder="password (six words)" value={s.password}
+                        onInput={e => s.password = (e.target as HTMLInputElement).value} />
+                    <button className={css.fontSize(22).pad2(24, 12)} onClick={() => s.showPassword = !s.showPassword}>
+                        {s.showPassword ? "Hide" : "Show"}
+                    </button>
+                </div>
                 {s.error ? <div className={css.fontSize(22).color("red").maxWidth("80vw")}>{s.error}</div> : null}
                 {s.needsCert ? (
                     <div className={css.vbox(10).center.fontSize(20).maxWidth(620).maxWidth("80vw").textAlign("center").color("hsl(0, 0%, 25%)")}>