Merge pull request #172 from bugwheels94/beta

Beta
bugwheels94 · Aug 16, 2024 · 87cebef · 87cebef
2 parents d52ed30 + 0f6ba39
commit 87cebef
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,8 @@
 		"babel": "^6.23.0",
 		"babel-plugin-const-enum": "^1.2.0",
 		"babel-plugin-transform-typescript-metadata": "^0.3.2",
+		"body-parser": "^1.20.2",
+		"cookie-parser": "^1.4.6",
 		"define-lazy-prop": "^3.0.0",
 		"electron": "^30.0.0",
 		"fast-glob": "^3.2.12",

diff --git a/src/config.json b/src/config.json
@@ -3,5 +3,6 @@
 	"CERT": "",
 	"KEY": "",
 	"UI": "",
-	"HOST": "127.0.0.1"
+	"HOST": "127.0.0.1",
+	"AUTH_PASSWORD": "password"
 }
diff --git a/src/index.ts b/src/index.ts
@@ -11,14 +11,26 @@ import { addProjectRoutes } from './routes/project';
 import { addProjectSchellScriptRoutes } from './routes/projectShellScript';
 import { addTerminalRoutes } from './routes/terminal';
 import { initShellHistory, shellHistory } from './utils/shellHistory';
+import cookieParser from 'cookie-parser';
+import bodyParser from 'body-parser';
 import { getConfig } from './utils/config';
 import WebSocket from 'ws';
 export function main(port: number, host: string) {
 	const app = express();
+	app.use(cookieParser());
+	app.use(bodyParser.urlencoded({ extended: false }));
 	const { finalConfig } = getConfig();
 	const isProduction = process.env.NODE_ENV === 'production';
 	if (isProduction || 1) {
-		app.use(express.static(path.join(__dirname, '..', 'ui', 'dist')));
+		app.post('/password', (req, res) => {
+			res.cookie('password', req.body.password);
+			res.send();
+		});
+		app.use((req, res, next) => {
+			if (req.cookies.password === finalConfig.AUTH_PASSWORD) {
+				next();
+			} else res.sendFile(path.join(__dirname, '..', 'ui', 'dist', '401.html'));
+		}, express.static(path.join(__dirname, '..', 'ui', 'dist')));
 	}
 	let httpServer: Server;
 	if (finalConfig.KEY && finalConfig.CERT && !process.env.DEVELOPMENT) {

diff --git a/ui/public/401.html b/ui/public/401.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Password Form</title>
+		<style>
+			body {
+				font-family: Arial, sans-serif;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 100vh;
+				margin: 0;
+				background-color: #f4f4f4;
+			}
+			.container {
+				background: #fff;
+				border-radius: 8px;
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+				padding: 20px;
+				width: 300px;
+				text-align: center;
+			}
+			.container h1 {
+				margin-bottom: 20px;
+			}
+			.container input[type='password'] {
+				width: calc(100% - 20px);
+				padding: 10px;
+				border: 1px solid #ddd;
+				border-radius: 4px;
+				margin-bottom: 20px;
+			}
+			.container button {
+				background-color: #007bff;
+				border: none;
+				color: #fff;
+				padding: 10px 15px;
+				border-radius: 4px;
+				cursor: pointer;
+				font-size: 16px;
+			}
+			.container button:hover {
+				background-color: #0056b3;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="container">
+			<h1>Enter Password</h1>
+			<form id="passwordForm" action="/password" method="post">
+				<input type="password" name="password" required />
+				<br />
+				<button type="submit">Submit</button>
+			</form>
+		</div>
+
+		<script>
+			document.getElementById('passwordForm').onsubmit = function (event) {
+				event.preventDefault(); // Prevent the form from submitting the traditional way
+
+				fetch(this.action, {
+					method: 'POST',
+					body: new URLSearchParams(new FormData(this)),
+				})
+					.then((response) => {
+						if (response.ok) {
+							window.location.reload(); // Reload the page on success
+						} else {
+							alert('Failed to submit password');
+						}
+					})
+					.catch((error) => {
+						console.error('Error:', error);
+						alert('An error occurred');
+					});
+
+				return false; // Prevent the default form submission
+			};
+		</script>
+	</body>
+</html>
diff --git a/ui/src/pages/Project/Project.tsx b/ui/src/pages/Project/Project.tsx
@@ -2,7 +2,7 @@ import { lazy, ReactNode, Suspense, useEffect, useMemo, useReducer, useRef, useS
 import 'winbox/dist/css/winbox.min.css';
 import 'xterm/css/xterm.css';
 import { createContext } from 'react';
-
+import WebSocket from 'isomorphic-ws';
 import { getTerminalQueryKey, Terminal, useGetTerminals } from '../../services/terminals';
 import {
 	usePutProject,
@@ -171,10 +171,10 @@ function ProjectPage({ project, projectId }: { project: Project; projectId: numb
 	}, [project.slug]);
 
 	useEffect(() => {
-		function listener({ detail }: { detail: any }) {
+		function listener({ detail }: CustomEvent<WebSocket.Data>) {
 			let message: any = {};
 			try {
-				message = JSON.parse(detail);
+				message = JSON.parse(detail as string);
 			} catch (e) {}
 			if (!message.name || !message.name.startsWith('response|')) return;