handle remote input (can enter passwords now)

src/main.tsx

@@ -16,7 +16,7 @@ dayjs.extend(localizedFormat)
 
 const CellHeightPx = 16;
 const CellWidthPx = 8;
-const RemotePtyRows = 10;
+const RemotePtyRows = 8;
 const RemotePtyCols = 80;
 
 type InterObsValue = {
@@ -700,7 +700,16 @@ class InfoMsg extends React.Component<{}, {}> {
     disconnectRemote(remoteId : string) {
         GlobalCommandRunner.disconnectRemote(remoteId);
     }
-    
+
+    renderConnectButton(remote : RemoteType) : any {
+        if (remote.status == "connected") {
+            return <div onClick={() => this.disconnectRemote(remote.remoteid)} className="text-button disconnect-button">[disconnect remote]</div>
+        }
+        else {
+            return <div onClick={() => this.connectRemote(remote.remoteid)} className="text-button connect-button">[connect remote]</div>
+        }
+    }
+
     render() {
         let model = GlobalModel;
         let inputModel = model.inputModel;
@@ -735,12 +744,36 @@ class InfoMsg extends React.Component<{}, {}> {
                     </div>
                 </If>
                 <If condition={ptyRemoteId != null && remote != null}>
-                    <div>
-                        <If condition={remote.status != "connected"}>
-                            <div onClick={() => this.connectRemote(ptyRemoteId)} className="button is-small is-success">Connect</div>
-                        </If>
-                        <If condition={remote.status == "connected"}>
-                            <div onClick={() => this.disconnectRemote(ptyRemoteId)} className="button is-small is-danger">Disconnect</div>
+                    <div className="info-remote">
+                        <div className="remote-field">
+                            <div className="remote-field-def"> remoteid</div>
+                            <div className="remote-field-val">{remote.remoteid}</div>
+                        </div>
+                        <div className="remote-field">
+                            <div className="remote-field-def"> type</div>
+                            <div className="remote-field-val">{remote.remotetype}</div>
+                        </div>
+                        <div className="remote-field">
+                            <div className="remote-field-def"> alias</div>
+                            <div className="remote-field-val">{isBlank(remote.alias) ? "-" : remote.alias}</div>
+                        </div>
+                        <div className="remote-field">
+                            <div className="remote-field-def"> canonicalname</div>
+                            <div className="remote-field-val">{remote.remotecanonicalname}</div>
+                        </div>
+                        <div className="remote-field">
+                            <div className="remote-field-def"> connectmode</div>
+                            <div className="remote-field-val">{remote.connectmode}</div>
+                        </div>
+                        <div className="remote-field">
+                            <div className="remote-field-def"> status</div>
+                            <div className="remote-field-val">{remote.status} | {this.renderConnectButton(remote)}</div>
+                        </div>
+                        <If condition={!isBlank(remote.errorstr)}>
+                            <div className="remote-field">
+                                <div className="remote-field-def"> error</div>
+                                <div className="remote-field-val">{remote.errorstr}</div>
+                            </div>
                         </If>
                     </div>
                 </If>

src/model.ts

@@ -11,7 +11,7 @@ import {WSControl} from "./ws";
 var GlobalUser = "sawka";
 const DefaultCellWidth = 8;
 const DefaultCellHeight = 16;
-const RemotePtyRows = 10; // also in main.tsx
+const RemotePtyRows = 8; // also in main.tsx
 const RemotePtyCols = 80;
 
 function widthToCols(width : number) : number {
@@ -154,7 +154,6 @@ class Cmd {
         if (!this.isRunning()) {
             return;
         }
-        let data = this.data.get();
         let inputPacket : FeInputPacketType = {
             type: "feinput",
             ck: this.sessionId + "/" + this.cmdId,
@@ -1108,8 +1107,13 @@ class InputModel {
         })();
     }
 
-    termKeyHandler(e : any) : void {
-        console.log("term-remote key", e);
+    termKeyHandler(remoteId : string, event : any) : void {
+        let inputPacket : RemoteInputPacketType = {
+            type: "remoteinput",
+            remoteid: remoteId,
+            inputdata64: btoa(event.key),
+        };
+        GlobalModel.sendInputPacket(inputPacket);
     }
 
     syncTermWrap() : void {
@@ -1131,7 +1135,7 @@ class InputModel {
             }
             else {
                 let termOpts = {rows: RemotePtyRows, cols: RemotePtyCols, flexrows: false, maxptysize: 64*1024};
-                this.remoteTermWrap = new TermWrap(elem, {remoteId: remoteId}, RemotePtyRows, termOpts, null, this.termKeyHandler.bind(this));
+                this.remoteTermWrap = new TermWrap(elem, {remoteId: remoteId}, RemotePtyRows, termOpts, null, (e) => { this.termKeyHandler(remoteId, e)});
                 console.log("make termwrap", this.remoteTermWrap);
             }
         }

src/sh2.less

@@ -813,6 +813,44 @@ body .xterm .xterm-viewport {
             color: #cc0000;
             padding-bottom: 2px;
         }
+
+        .info-remote {
+            color: #d3d7cf;
+            font-size: 12px;
+            font-family: 'JetBrains Mono', monospace;
+
+            .remote-field {
+                display: flex;
+                flex-direction: row;
+
+                .remote-field-def {
+                    white-space: pre;
+                    width: 120px;
+                }
+                
+                .remote-field-val {
+                    white-space: pre;
+                    display: flex;
+                    flex-direction: row;
+                }
+            }
+        }
+
+        .text-button {
+            font-family: 'JetBrains Mono', monospace;
+            font-weight: 600;
+            font-size: 12px;
+            color: @term-white;
+            cursor: pointer;
+
+            &.connect-button {
+                color: @term-green;
+            }
+
+            &.disconnect-button {
+                color: @term-red;
+            }
+        }
     }
 }
 

src/types.ts

@@ -77,6 +77,7 @@ type RemoteType = {
     remotecanonicalname : string,
     remotevars : Record<string, string>,
     status : string,
+    errorstr : string,
     defaultstate : RemoteStateType,
     connectmode : string,
     remoteidx : number,
@@ -175,6 +176,12 @@ type FeInputPacketType = {
     winsize? : TermWinSize,
 };
 
+type RemoteInputPacketType = {
+    type : string,
+    remoteid : string,
+    inputdata64 : string,
+};
+
 type WatchScreenPacketType = {
     type : string,
     sessionid : string,