Updated README, fixed a few bugs with user creation, and added docker support to run MongoDB (needs testing)

README.md

@@ -8,8 +8,11 @@
 [![Javascript Badge](https://img.shields.io/badge/-Javascript-F0DB4F?style=flat-square&labelColor=black&logo=javascript&logoColor=F0DB4F)](#)
 [![Nodejs Badge](https://img.shields.io/badge/-Nodejs-3C873A?style=flat-square&labelColor=black&logo=node.js&logoColor=3C873A)](#)
 [![HTML Badge](https://img.shields.io/badge/-HTML-E34F26?style=flat-square&labelColor=black&logo=html5&logoColor=E34F26)](#)
-[![CSS Badge](https://img.shields.io/badge/-CSS-1572B6?style=flat-square&labelColor=black&logo=css3&logoColor=1572B6)](#)
+[![Tailwind CSS Badge](https://img.shields.io/badge/-TailwindCSS-38B2AC?style=flat-square&labelColor=black&logo=tailwindcss&logoColor=38B2AC)](#)
 [![Docker Badge](https://img.shields.io/badge/-Docker-2496ED?style=flat-square&labelColor=black&logo=docker&logoColor=2496ED)](#)
+[![MongoDB Badge](https://img.shields.io/badge/-MongoDB-47A248?style=flat-square&labelColor=black&logo=mongodb&logoColor=47A248)](#)
+[![MUI Joy Badge](https://img.shields.io/badge/-MUI%20Joy-007FFF?style=flat-square&labelColor=black&logo=mui&logoColor=007FFF)](#)
+
 
 <br />
 <p align="center">

docker/Dockerfile

@@ -15,7 +15,9 @@ COPY src/backend/ ./src/backend/
 
 # Stage 3: Final production image
 FROM node:18-alpine
-RUN apk add --no-cache nginx
+
+# Install nginx and MongoDB
+RUN apk add --no-cache nginx mongodb
 
 # Configure nginx
 COPY docker/nginx.conf /etc/nginx/nginx.conf
@@ -25,15 +27,20 @@ COPY --from=frontend-builder /app/dist /usr/share/nginx/html
 COPY --from=backend-builder /app/node_modules ./node_modules
 COPY --from=backend-builder /app/src/backend ./src/backend
 
-# Create separate directories for nginx and node
+# Create necessary directories
 RUN mkdir -p /var/log/nginx && \
     mkdir -p /var/lib/nginx && \
     chown -R nginx:nginx /var/log/nginx /var/lib/nginx
 
-# Expose ports
+# MongoDB setup
-EXPOSE 8080 8081
+ENV MONGO_DATA_DIR=/data/db
+RUN mkdir -p $MONGO_DATA_DIR && \
+    chown -R mongodb:mongodb $MONGO_DATA_DIR
 
-# Use a entrypoint script to run all services
+# Expose necessary ports
+EXPOSE 8080 8081 8082 27017
+
+# Use an entrypoint script to run services (nginx, MongoDB, and Node backend)
 COPY docker/entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 CMD ["/entrypoint.sh"]

docker/entrypoint.sh

@@ -1,10 +1,16 @@
 #!/bin/sh
+# Start MongoDB in the background before the delay
+mongod --fork --logpath /var/log/mongodb.log --bind_ip 0.0.0.0
 
-# Start NGINX in background
+# Delay for 5 seconds to ensure MongoDB has started
+sleep 5
+
+# Start NGINX in the background
 nginx -g "daemon off;" &
 
 # Start Node.js backend
-node src/backend/server.cjs
+node src/backend/ssh.cjs &
+node src/backend/database.cjs &
 
-# Keep container running
+# Wait for processes to keep the container running
 wait

docker/nginx.conf

@@ -19,8 +19,8 @@ http {
             index  index.html index.htm;
         }
 
-        # Proxy IO requests
+        # Proxy SSH socket requests
-        location /socket.io/ {
+        location /ssh-socket.io/ {
             proxy_pass http://127.0.0.1:8081;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
@@ -33,6 +33,20 @@ http {
             proxy_send_timeout 86400s;
         }
 
+        # Proxy database requests
+        location /database/ {
+            proxy_pass http://127.0.0.1:8082;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_set_header Host $host;
+            proxy_cache_bypass $http_upgrade;
+
+            # Timeout settings
+            proxy_read_timeout 86400s;
+            proxy_send_timeout 86400s;
+        }
+
         # Error pages
         error_page   500 502 503 504  /50x.html;
         location = /50x.html {

src/App.jsx

@@ -192,6 +192,12 @@ function App() {
         }
     };
 
+    const getUser = () => {
+        if (userRef.current) {
+            return userRef.current.getUser();
+        }
+    }
+
     const closeTab = (id) => {
         const newTerminals = terminals.filter((t) => t.id !== id);
         setTerminals(newTerminals);
@@ -361,6 +367,7 @@ function App() {
                 />
                 <ProfileModal
                     isHidden={isProfileHidden}
+                    getUser={getUser}
                     handleDeleteUser={handleDeleteUser}
                     handleLogoutUser={handleLogoutUser}
                     setIsProfileHidden={setIsProfileHidden}

src/ProfileModal.jsx

@@ -3,7 +3,7 @@ import { CssVarsProvider } from '@mui/joy/styles';
 import {Modal, Button, DialogTitle, DialogContent, ModalDialog, Stack } from '@mui/joy';
 import theme from './theme';
 
-const ProfileModal = ({ isHidden, handleDeleteUser, handleLogoutUser, setIsProfileHidden }) => {
+const ProfileModal = ({ isHidden, getUser, handleDeleteUser, handleLogoutUser, setIsProfileHidden }) => {
     const handleDelete = () => {
         handleDeleteUser({
             onSuccess: () => {
@@ -20,6 +20,11 @@ const ProfileModal = ({ isHidden, handleDeleteUser, handleLogoutUser, setIsProfi
         });
     }
 
+    const getUserName = () => {
+        const user = getUser();
+        return user ? user.username : '';
+    }
+
     return (
         <CssVarsProvider theme={theme}>
             <Modal open={!isHidden} onClose={() => setIsProfileHidden(true)}>
@@ -42,7 +47,9 @@ const ProfileModal = ({ isHidden, handleDeleteUser, handleLogoutUser, setIsProfi
                         gap: 1,
                     }}
                 >
-                    <DialogTitle sx={{ marginBottom: 1.5 }}>Profile</DialogTitle>
+                    <DialogTitle sx={{ marginBottom: 1.5 }}>
+                        {getUserName()}
+                    </DialogTitle>
                     <DialogContent>
                         <Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden", mt: 1.5 }}>
                             <Button
@@ -77,6 +84,7 @@ const ProfileModal = ({ isHidden, handleDeleteUser, handleLogoutUser, setIsProfi
 
 ProfileModal.propTypes = {
     isHidden: PropTypes.bool.isRequired,
+    getUser: PropTypes.func.isRequired,
     handleDeleteUser: PropTypes.func.isRequired,
     handleLogoutUser: PropTypes.func.isRequired,
     setIsProfileHidden: PropTypes.func.isRequired,

src/User.jsx

@@ -2,9 +2,9 @@ import { useRef, forwardRef, useImperativeHandle } from "react";
 import io from "socket.io-client";
 import PropTypes from "prop-types";
 
-let socket;
+let socket = null;
 
-if (!socket) {
+if (socket === null) {
     socket = io(
         window.location.hostname === "localhost"
             ? "http://localhost:8082"
@@ -28,7 +28,6 @@ export const User = forwardRef(({ onLoginSuccess, onCreateSuccess, onDeleteSucce
             });
 
             socketRef.current.once("userCreated", (data) => {
-                console.log("User created", data);
                 currentUser.current = {
                     id: data.user._id,
                     username: data.user.username,
@@ -58,7 +57,6 @@ export const User = forwardRef(({ onLoginSuccess, onCreateSuccess, onDeleteSucce
                 });
 
                 socketRef.current.once("userFound", (data) => {
-                    console.log("User found", data);
                     currentUser.current = {
                         id: data._id,
                         username: data.username,
@@ -91,7 +89,6 @@ export const User = forwardRef(({ onLoginSuccess, onCreateSuccess, onDeleteSucce
             });
 
             socketRef.current.once("userDeleted", (data) => {
-                console.log("User deleted", data);
                 onDeleteSuccess(data);
                 currentUser.current = null;
                 localStorage.removeItem('sessionToken');
@@ -109,11 +106,16 @@ export const User = forwardRef(({ onLoginSuccess, onCreateSuccess, onDeleteSucce
         }
     };
 
+    const getUser = () => {
+        return currentUser.current;
+    }
+
     useImperativeHandle(ref, () => ({
         createUser,
         loginUser,
         logoutUser,
         deleteUser,
+        getUser,
     }));
 
     return <div></div>;

src/main.jsx

@@ -1,10 +1,7 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
     <App />
-  </StrictMode>,
 )