khairul169/vaulterm
1
0
Fork 0
mirror of https://github.com/khairul169/vaulterm.git synced 2025-04-28 16:49:39 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

update working ssh shell

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app.json
View File

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

42
frontend/app/+html.tsx
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;
}
}`;

4
frontend/app/_layout.tsx
View File

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

6
frontend/app/index.tsx
View File

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

6
frontend/babel.config.js
View File

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

139
frontend/components/containers/terminal.tsx Normal file
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;

130
frontend/components/containers/xtermjs.tsx Normal file
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;

56
frontend/package.json
View File

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

3418
frontend/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

7
server/go.mod
View File

@ -1,3 +1,10 @@
module rul.sh/vaulterm module rul.sh/vaulterm
go 1.21.1 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=

157
server/main.go
View File

@ -1,4 +1,159 @@
package main 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))
} }