phirepass-widgets 0.0.41 → 0.0.43

package/dist/collection/collection-manifest.json

@@ -6,7 +6,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.3",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/common/protocol.js

@@ -1,2 +1,22 @@
 import { ErrorType } from "phirepass-channel";
+export var ProtocolMessageType;
+(function (ProtocolMessageType) {
+    ProtocolMessageType["Error"] = "Error";
+    ProtocolMessageType["AuthSuccess"] = "AuthSuccess";
+    ProtocolMessageType["TunnelOpened"] = "TunnelOpened";
+    ProtocolMessageType["TunnelClosed"] = "TunnelClosed";
+    ProtocolMessageType["TunnelData"] = "TunnelData";
+})(ProtocolMessageType || (ProtocolMessageType = {}));
+export var InputMode;
+(function (InputMode) {
+    InputMode[InputMode["Username"] = 0] = "Username";
+    InputMode[InputMode["Password"] = 1] = "Password";
+    InputMode[InputMode["Default"] = 2] = "Default";
+})(InputMode || (InputMode = {}));
+export var ConnectionState;
+(function (ConnectionState) {
+    ConnectionState["Disconnected"] = "disconnected";
+    ConnectionState["Connected"] = "connected";
+    ConnectionState["Error"] = "error";
+})(ConnectionState || (ConnectionState = {}));
 export { ErrorType as ProtocolMessageError };

package/dist/collection/components/phirepass-sftp-client/phirepass-sftp-client.css

@@ -1,3 +1,144 @@
 :host {
-    display: block;
+  --radius: 0.375rem;
+  --card: 220 18% 10%;
+  --border: 220 15% 18%;
+  --primary: 160 60% 45%;
+  --muted-foreground: 220 10% 50%;
+
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+
+  height: 100%;
+  width: 100%;
+
+  border: 1px solid hsl(var(--border));
+  background-color: hsl(var(--card));
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .listing {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    header {
+      height: 30px;
+      background: rgba(28, 31, 38, 0.6);
+      border-bottom: 1px solid hsl(var(--border));
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .actions {
+        display: flex;
+        align-items: center;
+
+        .action {
+          cursor: pointer;
+          padding: 4px;
+          display: flex;
+          align-items: center;
+          z-index: 1;
+
+          img {
+            height: 14px;
+            padding: 4px;
+            border-radius: 4px;
+          }
+
+          &:hover {
+            background-color: hsl(var(--border) / 0.6);
+          }
+        }
+      }
+
+      .title {
+        color: hsl(var(--primary));
+        height: 14px;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        font-size: 0.75rem;
+        line-height: 1rem;
+
+        img {
+          height: 14px;
+          margin-right: 5px;
+        }
+
+        .text {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          margin-top: 2px;
+
+          .name {
+            margin-right: 10px;
+          }
+
+          .description {
+            color: hsl(var(--muted-foreground));
+          }
+        }
+      }
+    }
+
+    footer {
+      height: 25px;
+      background: rgba(28, 31, 38, 0.6);
+      border-top: 1px solid hsl(var(--border));
+    }
+  }
+
+  .creds {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.blurred {
+      background: rgba(28, 31, 38, 0);
+      backdrop-filter: blur(4px);
+    }
+
+    .form {
+      display: flex;
+      flex-direction: column;
+      background: hsl(var(--card));
+      width: 200px;
+      position: relative;
+      background-color: rgba(21, 24, 30, 0.95);
+      border: 1px solid hsl(var(--border));
+      padding: 20px;
+      box-shadow:
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+        rgba(0, 0, 0, 0.5) 0px 25px 50px -12px;
+    }
+  }
+}
+
+:host(.max) {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
 }

package/dist/collection/components/phirepass-sftp-client/phirepass-sftp-client.js

@@ -1,7 +1,219 @@
 import { Host, h } from "@stencil/core";
+import init, { Channel as PhirepassChannel } from "phirepass-channel";
+import svg from "./phirepass-sftp-client.logo.svg";
+import max from "./phirepass-sftp-client.max.svg";
+import { ConnectionState, ProtocolMessageType } from "../../common/protocol";
+// https://sweet-sftp-view.lovable.app/
 export class PhirepassSftpClient {
+    channel;
+    domReady = false;
+    runtimeReady = false;
+    connected = false;
+    // private inputMode: InputMode = InputMode.Default;
+    // private session_id?: number;
+    // private usernameBuffer = "";
+    // private passwordBuffer = "";
+    name = 'SFTP';
+    description = 'Client';
+    hideHeader = false;
+    serverHost = "phirepass.com";
+    serverPort = 443;
+    allowInsecure = false;
+    heartbeatInterval = 30_000;
+    nodeId;
+    token;
+    onNodeIdChange(newValue, _oldValue) {
+        // Handle the change in node_id here
+        // console.log(`node_id changed from ${oldValue} to ${newValue}`);
+        // Always clear local session state and reset terminal view
+        this.reset_session_state();
+        // this.terminal.reset();
+        // Close existing comms if connected
+        if (this.channel && this.channel.is_connected()) {
+            this.close_comms();
+        }
+        // Open new comms for the updated node
+        if (newValue) {
+            this.open_comms();
+            this.channel.connect();
+        }
+    }
+    serverId;
+    onServerIdChange(_newValue, _oldValue) {
+        this.onNodeIdChange(this.nodeId, this.nodeId);
+    }
+    maximizeEvent;
+    async maximize() {
+        this.max = !this.max;
+    }
+    async minimize() {
+        this.max = false;
+    }
+    connectionStateChanged;
+    max = false;
+    show_login_screen = false;
+    show_login_screen_username = false;
+    show_login_screen_password = false;
+    toggle_max() {
+        this.maximizeEvent?.emit(!this.max);
+    }
+    async connectedCallback() {
+        await init();
+        // this.setup_terminal();
+        this.open_comms();
+        this.runtimeReady = true;
+        if (!this.nodeId) {
+            console.warn('Prop node_id is not set. Cannot connect to terminal.');
+            return;
+        }
+        this.try_connect();
+    }
+    componentDidLoad() {
+        this.domReady = true;
+        this.try_connect();
+    }
+    async disconnectedCallback() {
+        // if (this.resizeDebounceHandle) {
+        //     clearTimeout(this.resizeDebounceHandle);
+        //     this.resizeDebounceHandle = undefined;
+        // }
+        //
+        // if (this.resizeObserver) {
+        //     this.resizeObserver.disconnect();
+        // }
+        this.connected = false;
+        this.domReady = false;
+        this.runtimeReady = false;
+        this.close_comms();
+        // this.destroy_terminal();
+    }
+    connect() {
+        this.connected = true;
+        this.channel.connect();
+        // const container = this.containerEl;
+        // console.log('Attempting to connect terminal to container:', container);
+        // if (container) {
+        //     this.terminal.open(container);
+        //     console.log('Terminal opened in container');
+        //     this.connected = true;
+        //     this.fit_terminal_safely();
+        //     this.terminal.focus();
+        //     this.terminal.onData(this.handle_terminal_data.bind(this));
+        //     this.channel.connect();
+        //     this.setup_resize_observer();
+        //     console.log('Terminal connected and ready');
+        // }
+    }
+    try_connect() {
+        if (this.connected || !this.domReady || !this.runtimeReady) {
+            return;
+        }
+        if (!this.channel) {
+            return;
+        }
+        this.connect();
+    }
+    create_web_socket_endpoint() {
+        const protocol = this.allowInsecure ? 'ws' : 'wss';
+        if (!this.allowInsecure && this.serverPort === 443) {
+            return `${protocol}://${this.serverHost}`;
+        }
+        if (this.allowInsecure && this.serverPort === 80) {
+            return `${protocol}://${this.serverHost}`;
+        }
+        return `${protocol}://${this.serverHost}:${this.serverPort}`;
+    }
+    handle_error(_error_) {
+        //
+    }
+    handle_auth_success(_auth_) {
+        this.clear_creds_buffer();
+        this.channel.start_heartbeat(this.heartbeatInterval <= 15_000 ? 30_000 : this.heartbeatInterval);
+        this.channel.open_sftp_tunnel(this.nodeId);
+    }
+    handle_tunnel_opened(_web_) {
+        // this.session_id = web.sid;
+        // this.terminal.reset();
+        // this.fit_terminal_safely();
+        // this.send_ssh_terminal_resize();
+    }
+    handle_tunnel_data(_web_) {
+        // TODO
+    }
+    handle_tunnel_closed(_web_) {
+        // this.session_id = undefined;
+        // this.inputMode = InputMode.Default;
+        this.clear_creds_buffer();
+        // this.terminal.reset();
+        // this.terminal.writeln("Connection closed.");
+        this.close_comms();
+    }
+    open_comms() {
+        if (this.serverId) {
+            this.channel = new PhirepassChannel(`${this.create_web_socket_endpoint()}/api/web/ws`, this.nodeId, this.serverId);
+        }
+        else {
+            this.channel = new PhirepassChannel(`${this.create_web_socket_endpoint()}/api/web/ws`, this.nodeId);
+        }
+        this.channel.on_connection_open(() => {
+            this.connectionStateChanged.emit([ConnectionState.Connected]);
+            this.channel.authenticate(this.token, this.nodeId);
+        });
+        this.channel.on_connection_close(() => {
+            this.connectionStateChanged.emit([ConnectionState.Disconnected]);
+            // this.terminal.reset();
+        });
+        this.channel.on_connection_error((err) => {
+            this.connectionStateChanged.emit([ConnectionState.Error, err]);
+        });
+        this.channel.on_connection_message((_raw_) => {
+            // console.log('>> raw message received', raw);
+        });
+        this.channel.on_protocol_message((msg) => {
+            const { web } = msg.data;
+            switch (web.type) {
+                case ProtocolMessageType.Error:
+                    this.handle_error(web);
+                    break;
+                case ProtocolMessageType.AuthSuccess:
+                    this.handle_auth_success(web);
+                    break;
+                case ProtocolMessageType.TunnelOpened:
+                    this.handle_tunnel_opened(web);
+                    break;
+                case ProtocolMessageType.TunnelClosed:
+                    this.handle_tunnel_closed(web);
+                    break;
+                case ProtocolMessageType.TunnelData:
+                    this.handle_tunnel_data(web);
+                    break;
+                default:
+                    console.warn('Unknown protocol message type:', web);
+            }
+        });
+    }
+    close_comms() {
+        this.channel.stop_heartbeat();
+        this.channel.disconnect();
+    }
+    clear_creds_buffer() {
+        // this.usernameBuffer = "";
+        // this.passwordBuffer = "";
+    }
+    reset_session_state() {
+        // this.session_id = undefined;
+        // this.inputMode = InputMode.Default;
+        this.clear_creds_buffer();
+    }
     render() {
-        return (h(Host, { key: 'd03ff09e3636f79d699c7462e121abe7d08c6683' }, h("slot", { key: 'bd7285e70384558e4cbf0600b89a57fa4ec3406d' })));
+        return (h(Host, { key: 'ac63e2c701cd09a605d0aaa7396eaec16ff9c3bc', class: {
+                'default': !this.max,
+                'max': this.max,
+            } }, h("section", { key: '253dfc510c62ee57a96d574af993e8017475a0c2', class: "listing" }, !this.hideHeader &&
+            h("header", { key: '215ddf76ba55641892fc9a758077ba8d1f3a6671' }, h("section", { key: '49541a8d31d8c61e2df84c60348f7426fddec67c', class: "title" }, h("img", { key: '1a86ba6b3de92b35cbd5b1bacfdfee2da6fa6766', src: svg, alt: "SFTP Client" }), h("div", { key: '38d90384978acc8b323ca4c396db7bda54320059', class: "text" }, h("div", { key: 'a94b3fd21025000b620b2bb85aec87198e575bfa', class: "name" }, this.name), h("div", { key: '072c41dc8d05faf77929f8c128bb97b64d8835bf', class: "description" }, this.description))), h("section", { key: '46e575f4ce5f2da0913d2f3aebe025540f1f3688', class: "actions" }, h("div", { key: 'f92d66ab7ab5e9c25a29037c60709c54623194be', class: "action", onClick: () => this.toggle_max() }, h("img", { key: 'e115204a83336fc4b49a30551208b727c3f33be9', src: max, alt: "Maximize" })))), h("main", { key: 'c6bf5ab4e5aa46dcba8e50ec1a9c2feb1f55ea02' }), h("footer", { key: 'ac67a3e0966e3f04bee019162f8174aae58cbf1a' })), h("section", { key: '07e83117470f7f226328703b18f836bd4358cfe9', class: {
+                'creds': true,
+                'blurred': this.show_login_screen,
+            } }, this.show_login_screen && h("form", { key: '808209eaba50f10a8ef96163972ad36ea9e3d3e2', class: "form" }, h("div", { key: '9e26efeac2f17d6b4168e1a77da6ef61d325f6e3' }, "SFTP Connection"), h("div", { key: 'f9badb92d4434a16916429a2bedb6e38d2ae647c' }, h("div", { key: '9fb267ba7828cd950b327a17e0ee803dc399c80b' }, "Username"), h("input", { key: '65b34c14292b0bde408861e791f3baa99c4c9a02', type: "text", placeholder: "" })), h("div", { key: 'f1f9def8290dfcde9beff0f61092f6020580b72c' }, h("div", { key: '1c89b71c4126299b7e8e421b05761d2b0424d4ed' }, "Password"), h("input", { key: '17364976158ddaacbb55ed17ee09ec242bcbdce7', type: "password", placeholder: "" })), h("div", { key: '9362acdf153ceeba3c8e8cee0518cf2baeec27e0' }, h("button", { key: 'ebf6c205276a7c3ff34c13e148978be61044ff7a' }, "Connect"))))));
     }
     static get is() { return "phirepass-sftp-client"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +227,300 @@ export class PhirepassSftpClient {
             "$": ["phirepass-sftp-client.css"]
         };
     }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'SFTP'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "'Client'"
+            },
+            "hideHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-header",
+                "defaultValue": "false"
+            },
+            "serverHost": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "server-host",
+                "defaultValue": "\"phirepass.com\""
+            },
+            "serverPort": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "server-port",
+                "defaultValue": "443"
+            },
+            "allowInsecure": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-insecure",
+                "defaultValue": "false"
+            },
+            "heartbeatInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heartbeat-interval",
+                "defaultValue": "30_000"
+            },
+            "nodeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "node-id"
+            },
+            "token": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "token"
+            },
+            "serverId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "server-id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "max": {},
+            "show_login_screen": {},
+            "show_login_screen_username": {},
+            "show_login_screen_password": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "maximizeEvent",
+                "name": "maximize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "connectionStateChanged",
+                "name": "connectionStateChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "[ConnectionState, unknown?]",
+                    "resolved": "[ConnectionState, unknown?]",
+                    "references": {
+                        "ConnectionState": {
+                            "location": "import",
+                            "path": "../../common/protocol",
+                            "id": "src/common/protocol.ts::ConnectionState",
+                            "referenceLocation": "ConnectionState"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "maximize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "minimize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "nodeId",
+                "methodName": "onNodeIdChange"
+            }, {
+                "propName": "serverId",
+                "methodName": "onServerIdChange"
+            }];
+    }
 }