update working ssh shell

This commit is contained in:
Khairul Hidayat 2024-11-06 06:24:14 +00:00
parent acd843d31c
commit 86eb5eb4e6
12 changed files with 1790 additions and 2184 deletions

View File

@ -7,6 +7,7 @@
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",

View File

@ -1,42 +0,0 @@
import { ScrollViewStyleReset } from "expo-router/html";
import { type PropsWithChildren } from "react";
/**
* This file is web-only and used to configure the root HTML for every web page during static rendering.
* The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
*/
export default function Root({ children }: PropsWithChildren) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{/*
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
*/}
<ScrollViewStyleReset />
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
{/* Add any additional <head> elements that you want globally available on web... */}
</head>
<body>{children}</body>
</html>
);
}
const responsiveBackground = `
body {
background-color: #fff;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
}
}`;

View File

@ -6,6 +6,7 @@ import {
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";
@ -13,7 +14,7 @@ import "react-native-reanimated";
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const colorScheme = "dark";
const colorScheme: string = "light";
const [loaded] = useFonts({
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
});
@ -33,6 +34,7 @@ export default function RootLayout() {
<Stack>
<Stack.Screen name="+not-found" />
</Stack>
<StatusBar style="auto" />
</ThemeProvider>
);
}

View File

@ -1,12 +1,14 @@
import { View, Text } from "react-native";
import React from "react";
import { Stack } from "expo-router";
import Terminal from "@/components/containers/terminal";
const HomePage = () => {
return (
<View>
<View style={{ flex: 1 }}>
<Stack.Screen options={{ title: "Home" }} />
<Text>HomePage</Text>
<Terminal wsUrl="ws://10.0.0.100:3000/ws" />
</View>
);
};

View File

@ -1,6 +0,0 @@
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};

View File

@ -0,0 +1,139 @@
import React, { ComponentPropsWithoutRef } from "react";
import XTermJs, { XTermRef } from "./xtermjs";
import Ionicons from "@expo/vector-icons/Ionicons";
import {
Pressable,
ScrollView,
StyleProp,
StyleSheet,
Text,
TextStyle,
View,
} from "react-native";
const Keys = {
ArrowLeft: "\x1b[D",
ArrowRight: "\x1b[C",
ArrowUp: "\x1b[A",
ArrowDown: "\x1b[B",
Enter: "\x0D",
Escape: "\x1b",
Home: "\x1b[H",
End: "\x1b[F",
PageUp: "\x1b[5~",
PageDown: "\x1b[6~",
Alt: "\x1b",
Tab: "\x09",
};
type TerminalProps = ComponentPropsWithoutRef<typeof View> & {
wsUrl: string;
};
const Terminal = ({ wsUrl, style, ...props }: TerminalProps) => {
const ref = React.useRef<XTermRef>(null);
const send = (data: string) => {
ref.current?.send(data);
};
return (
<View style={[styles.container, style]} {...props}>
<XTermJs ref={ref} dom={{ scrollEnabled: false }} wsUrl={wsUrl} />
<ScrollView
horizontal
style={{ flexGrow: 0 }}
contentContainerStyle={styles.buttons}
>
<TerminalButton
title={<Ionicons name="swap-horizontal" color="white" size={16} />}
onPress={() => send(Keys.Tab)}
/>
<TerminalButton title="ESC" onPress={() => send(Keys.Escape)} />
<TerminalButton
title={<Ionicons name="home" color="white" size={16} />}
onPress={() => send(Keys.Home)}
/>
<TerminalButton
title={<Ionicons name="arrow-back" color="white" size={18} />}
onPress={() => send(Keys.ArrowLeft)}
/>
<TerminalButton
title={<Ionicons name="arrow-up" color="white" size={18} />}
onPress={() => send(Keys.ArrowUp)}
/>
<TerminalButton
title={<Ionicons name="arrow-down" color="white" size={18} />}
onPress={() => send(Keys.ArrowDown)}
/>
<TerminalButton
title={<Ionicons name="arrow-forward" color="white" size={18} />}
onPress={() => send(Keys.ArrowRight)}
/>
<TerminalButton title="Enter" onPress={() => send(Keys.Enter)} />
<TerminalButton title="End" onPress={() => send(Keys.End)} />
<TerminalButton title="PgUp" onPress={() => send(Keys.PageUp)} />
<TerminalButton title="PgDn" onPress={() => send(Keys.PageDown)} />
{/* <TerminalButton title="Alt" onPress={() => send(Keys.Alt)} /> */}
<TerminalButton title="^C" onPress={() => send("\x03")} />
<TerminalButton title="^D" onPress={() => send("\x04")} />
<TerminalButton title="^Q" onPress={() => send("\x11")} />
<TerminalButton title="^V" onPress={() => send("\x11")} />
<TerminalButton title="^S" onPress={() => send("\x13")} />
<TerminalButton title="^W" onPress={() => send("\x18")} />
<TerminalButton title="^X" onPress={() => send("\x18")} />
<TerminalButton title="^Z" onPress={() => send("\x1a")} />
</ScrollView>
</View>
);
};
const TerminalButton = ({
title,
textStyle,
...props
}: ComponentPropsWithoutRef<typeof Pressable> & {
title: string | React.ReactNode;
textStyle?: StyleProp<TextStyle>;
}) => (
<Pressable
style={({ pressed }) => [styles.btn, pressed && styles.btnPressed]}
{...props}
>
{typeof title === "string" ? (
<Text style={[styles.btnText, textStyle]}>{title}</Text>
) : (
title
)}
</Pressable>
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#232323",
},
buttons: {
display: "flex",
flexDirection: "row",
alignItems: "stretch",
backgroundColor: "#232323",
},
btn: {
display: "flex",
justifyContent: "center",
alignItems: "center",
paddingHorizontal: 14,
paddingVertical: 10,
},
btnPressed: {
backgroundColor: "#3a3a3a",
},
btnText: {
color: "white",
fontSize: 16,
},
});
export default Terminal;

View File

@ -0,0 +1,130 @@
"use dom";
import React, { CSSProperties, FC, forwardRef, useEffect, useRef } from "react";
import {
DOMImperativeFactory,
DOMProps,
useDOMImperativeHandle,
} from "expo/dom";
import { Terminal as XTerm } from "@xterm/xterm";
import "@xterm/xterm/css/xterm.css";
import { FitAddon } from "@xterm/addon-fit/src/FitAddon";
import { AttachAddon } from "@xterm/addon-attach/src/AttachAddon";
import { JSONValue } from "expo/build/dom/dom.types";
type XTermJsProps = {
onLoad?: () => void;
dom?: DOMProps;
style?: CSSProperties;
wsUrl: string;
};
// @ts-ignore
const IS_DOM = typeof ReactNativeWebView !== "undefined";
export interface XTermRef extends DOMImperativeFactory {
send: (...args: JSONValue[]) => void;
}
const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
const containerRef = useRef<HTMLDivElement | null>(null);
const wsRef = useRef<WebSocket | null>(null);
const { wsUrl, onLoad, style = {} } = props;
useEffect(() => {
const container = containerRef.current;
if (!container) {
return;
}
const xterm = new XTerm();
xterm.open(container);
const fitAddon = new FitAddon();
xterm.loadAddon(fitAddon);
fitAddon.fit();
const ws = new WebSocket(wsUrl);
wsRef.current = ws;
const attachAddon = new AttachAddon(ws);
xterm.loadAddon(attachAddon);
if (xterm.element) {
xterm.element.style.height = "100%";
}
if (IS_DOM) {
xterm.focus();
}
function resizeTerminal() {
const { cols, rows } = xterm;
ws.send(`\x01${cols},${rows}`);
}
function onResize() {
fitAddon.fit();
resizeTerminal();
}
function onOpen() {
resizeTerminal();
}
function onClose(e: CloseEvent) {
// Check if the close event was abnormal
if (!e.wasClean) {
const reason = e.reason || `Code: ${e.code}`;
xterm.write(`\r\nConnection closed unexpectedly: ${reason}\r\n`);
} else {
xterm.write("\r\nConnection closed.\r\n");
}
}
ws.addEventListener("open", onOpen);
ws.addEventListener("close", onClose);
xterm.onResize(resizeTerminal);
window.addEventListener("resize", onResize);
onLoad?.();
return () => {
xterm.dispose();
wsRef.current = null;
containerRef.current = null;
ws.close();
ws.removeEventListener("open", onOpen);
ws.removeEventListener("close", onClose);
window.removeEventListener("resize", onResize);
};
}, [wsUrl]);
useDOMImperativeHandle(
ref,
() => ({
send: (...args) => {
const ws = wsRef.current;
if (ws?.readyState === ws?.OPEN && args[0]) {
ws?.send(String(args[0]));
}
},
}),
[]
);
return (
<div
ref={containerRef}
style={{
flex: !IS_DOM ? 1 : undefined,
width: "100%",
height: IS_DOM ? "100vh" : undefined,
overflow: "hidden",
...style,
}}
/>
);
});
export default XTermJs;

View File

@ -1,5 +1,6 @@
{
"name": "frontend",
"license": "0BSD",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
@ -16,35 +17,42 @@
},
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.0.2",
"@react-navigation/bottom-tabs": "7.0.0-rc.36",
"@react-navigation/native": "7.0.0-rc.21",
"@xterm/addon-attach": "^0.11.0",
"@xterm/addon-fit": "^0.10.0",
"@xterm/xterm": "^5.5.0",
"expo": "~51.0.28",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"expo-web-browser": "~13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.5",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10"
"expo": "~52.0.0-preview.19",
"expo-blur": "~14.0.1",
"expo-constants": "~17.0.2",
"expo-font": "~13.0.0",
"expo-haptics": "~14.0.0",
"expo-linking": "~7.0.2",
"expo-router": "~4.0.0-preview.12",
"expo-splash-screen": "~0.29.1",
"expo-status-bar": "~2.0.0",
"expo-symbols": "~0.2.0",
"expo-system-ui": "~4.0.2",
"expo-web-browser": "~14.0.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.1",
"react-native-gesture-handler": "~2.20.2",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "4.0.0-beta.16",
"react-native-web": "~0.19.13",
"react-native-webview": "^13.12.2"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/core": "^7.25.2",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.7",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.3.0",
"jest": "^29.2.1",
"jest-expo": "~51.0.3",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
"jest-expo": "~52.0.0-preview.3",
"react-test-renderer": "18.3.1",
"typescript": "^5.3.3"
},
"private": true
}

3418
frontend/pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -1,3 +1,10 @@
module rul.sh/vaulterm
go 1.21.1
require golang.org/x/crypto v0.28.0
require (
github.com/coder/websocket v1.8.12
golang.org/x/sys v0.26.0 // indirect
)

8
server/go.sum Normal file
View File

@ -0,0 +1,8 @@
github.com/coder/websocket v1.8.12 h1:5bUXkEPPIbewrnkU8LTCLVaxi4N4J8ahufH2vlo4NAo=
github.com/coder/websocket v1.8.12/go.mod h1:LNVeNrXQZfe5qhS9ALED3uA+l5pPqvwXg3CKoDBB2gs=
golang.org/x/crypto v0.28.0 h1:GBDwsMXVQi34v5CCYUm2jkJvu4cbtru2U4TN2PSyQnw=
golang.org/x/crypto v0.28.0/go.mod h1:rmgy+3RHxRZMyY0jjAJShp2zgEdOqj2AO7U0pYmeQ7U=
golang.org/x/sys v0.26.0 h1:KHjCJyddX0LoSTb3J+vWpupP9p0oznkqVk/IfjymZbo=
golang.org/x/sys v0.26.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
golang.org/x/term v0.25.0 h1:WtHI/ltw4NvSUig5KARz9h521QvRC8RmF/cuYqifU24=
golang.org/x/term v0.25.0/go.mod h1:RPyXicDX+6vLxogjjRxjgD2TKtmAO6NZBsBRfrOLu7M=

View File

@ -1,4 +1,159 @@
package main
func main() {
import (
"context"
"io"
"log"
"net/http"
"strconv"
"strings"
"github.com/coder/websocket"
"golang.org/x/crypto/ssh"
)
// Replace with actual SSH server credentials
var sshHost = "10.0.0.102"
var sshUser = "root"
var sshPassword = "ausya2"
func sshWebSocketHandler(w http.ResponseWriter, r *http.Request) {
wsConn, err := websocket.Accept(w, r, &websocket.AcceptOptions{
OriginPatterns: []string{"*"}, // Adjust origin policy as needed
})
if err != nil {
log.Printf("failed to accept websocket: %v", err)
return
}
// Set up SSH client configuration
sshConfig := &ssh.ClientConfig{
User: sshUser,
Auth: []ssh.AuthMethod{
ssh.Password(sshPassword),
},
HostKeyCallback: ssh.InsecureIgnoreHostKey(),
}
// Connect to SSH server
sshConn, err := ssh.Dial("tcp", sshHost+":22", sshConfig)
if err != nil {
wsConn.Write(context.Background(), websocket.MessageText, []byte(err.Error()))
wsConn.Close(websocket.StatusInternalError, "failed to connect to SSH")
return
}
defer sshConn.Close()
// Start an SSH shell session
session, err := sshConn.NewSession()
if err != nil {
wsConn.Write(context.Background(), websocket.MessageText, []byte(err.Error()))
wsConn.Close(websocket.StatusInternalError, "failed to start SSH session")
return
}
defer session.Close()
stdoutPipe, err := session.StdoutPipe()
if err != nil {
wsConn.Close(websocket.StatusInternalError, "failed to get stdout pipe")
return
}
stderrPipe, err := session.StderrPipe()
if err != nil {
wsConn.Close(websocket.StatusInternalError, "failed to get stderr pipe")
return
}
stdinPipe, err := session.StdinPipe()
if err != nil {
wsConn.Close(websocket.StatusInternalError, "failed to get stdin pipe")
return
}
err = session.RequestPty("xterm-256color", 80, 24, ssh.TerminalModes{})
if err != nil {
wsConn.Close(websocket.StatusInternalError, "failed to request pty")
return
}
if err := session.Shell(); err != nil {
wsConn.Close(websocket.StatusInternalError, "failed to start shell")
return
}
// Goroutine to send SSH stdout to WebSocket
go func() {
buf := make([]byte, 1024)
for {
n, err := stdoutPipe.Read(buf)
if err != nil {
if err != io.EOF {
log.Printf("error reading from SSH stdout: %v", err)
}
break
}
if writeErr := wsConn.Write(context.Background(), websocket.MessageBinary, buf[:n]); writeErr != nil {
log.Printf("error writing to websocket: %v", writeErr)
break
}
}
}()
// Goroutine to handle SSH stderr
go func() {
buf := make([]byte, 1024)
for {
n, err := stderrPipe.Read(buf)
if err != nil {
if err != io.EOF {
log.Printf("error reading from SSH stderr: %v", err)
}
break
}
if writeErr := wsConn.Write(context.Background(), websocket.MessageBinary, buf[:n]); writeErr != nil {
log.Printf("error writing to websocket: %v", writeErr)
break
}
}
}()
// Handle WebSocket to SSH data streaming
go func() {
for {
_, msg, err := wsConn.Read(context.Background())
if err != nil {
return
}
if strings.HasPrefix(string(msg), "\x01") {
parts := strings.Split(string(msg[1:]), ",")
if len(parts) == 2 {
width, _ := strconv.Atoi(parts[0])
height, _ := strconv.Atoi(parts[1])
session.WindowChange(height, width)
}
} else {
stdinPipe.Write(msg)
}
}
}()
// Wait for the SSH session to close
if err := session.Wait(); err != nil {
log.Printf("SSH session ended with error: %v", err)
wsConn.Write(context.Background(), websocket.MessageText, []byte(err.Error()))
} else {
log.Println("SSH session ended normally")
}
// Ensure WebSocket is closed after SSH logout
wsConn.Close(websocket.StatusNormalClosure, "SSH session closed")
}
func main() {
http.HandleFunc("/ws", sshWebSocketHandler)
log.Println("Server started on :3000")
log.Fatal(http.ListenAndServe(":3000", nil))
}