Merge pull request #3 from mellodoot/dev

dockerisation and new server connection dialog
This commit is contained in:
ari melody 2023-10-03 21:00:10 +01:00 committed by GitHub
commit 4e3d75b8a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 174 additions and 3 deletions

8
.dockerignore Normal file
View file

@ -0,0 +1,8 @@
node_modules/
certs/
.git/
.DS_Store
.gitignore
README.md
nodemon.json
*.service

2
.gitignore vendored
View file

@ -1,3 +1,5 @@
**/.DS_Store
node_modules/
certs/
docker-compose*.yml
!docker-compose-example.yml

15
Dockerfile Normal file
View file

@ -0,0 +1,15 @@
FROM --platform=linux/amd64 node:20-alpine3.18
# set working directory
WORKDIR /srv/openterminal
# install dependencies
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 8080
CMD [ "node", "./server/main.js" ]

View file

@ -0,0 +1,14 @@
version: "3.9"
services:
web:
build: .
image: openterminal
container_name: openterminal
ports:
- 443:443
volumes:
- ./certs/cert.crt:/srv/openterminal/certs/cert.crt
- ./certs/cert.key:/srv/openterminal/certs/cert.key
environment:
PORT: 443
restart: unless-stopped

View file

@ -51,6 +51,13 @@
<li><a href="https://github.com/mellodoot/openterminal" target="_blank">source</a></li>
</ul>
</footer>
<div id="dialog-backdrop"></div>
<div id="connect-dialog">
<button id="connect-close">X</button>
<p>Enter the address of the server you would like to connect to:</p>
<input id="connect-url" name="server" type="text" spellcheck="false">
<button id="connect-submit">Connect</button>
</div>
<div id="overlay"></div>
</body>
</html>

View file

@ -5,10 +5,50 @@ document.addEventListener("DOMContentLoaded", () => {
Visual.bind();
Terminal.start();
document.getElementById("connect").addEventListener("click", () => {
var new_server = prompt("Enter the address of the server you would like to connect to:");
const dialog_backdrop = document.getElementById("dialog-backdrop");
const connect_button = document.getElementById("connect");
const connect_dialog = document.getElementById("connect-dialog");
const connect_url = document.getElementById("connect-url");
const connect_submit = document.getElementById("connect-submit");
const connect_close = document.getElementById("connect-close");
connect_url.placeholder = window.location.host;
connect_button.addEventListener("click", () => {
connect_url.value = "";
connect_dialog.classList.add("show");
dialog_backdrop.classList.add("show");
connect_url.focus();
Terminal.set_enable_input(false);
});
connect_submit.addEventListener("click", () => {
connect_close.click();
const new_server = connect_url.value;
if (!new_server) return;
Terminal.connect(new_server);
});
connect_dialog.addEventListener("keydown", event => {
switch (event.key) {
case "Enter":
connect_submit.click();
break;
case "Escape":
connect_close.click();
break;
}
return;
});
connect_close.addEventListener("click", () => {
connect_dialog.classList.remove("show");
dialog_backdrop.classList.remove("show");
Terminal.set_enable_input(true);
});
dialog_backdrop.addEventListener("click", () => {
connect_close.click();
});
});

View file

@ -10,6 +10,7 @@ var client;
var my_colour = false;
var pre_buffer_chars = 0;
var server_url = "";
var enable_input = true;
const DATA_TYPES = {
ping: 0,
@ -223,11 +224,22 @@ function new_caret() {
content.appendChild(new_caret);
}
/**
* sets whether or not the terminal should accept user input
* (handy for not interfering with dialogs)
* @param {value} boolean
*/
export function set_enable_input(value) {
enable_input = value;
}
/**
* the input handler for the document.
* automatically scrolls to the bottom of the page on valid key presses.
*/
function handle_input(event) {
if (!enable_input) return;
if (event.key == "'") {
event.preventDefault();
}

View file

@ -135,6 +135,7 @@ div#overlay {
pointer-events: none;
animation: linear .05s infinite alternate overlay-flicker;
mix-blend-mode: overlay;
z-index: 100;
}
body.lcd div#overlay {
@ -173,3 +174,75 @@ body.lcd pre#content {
pointer-events: none;
}
#dialog-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
background: black;
opacity: .25;
z-index: 99;
}
#connect-dialog {
position: fixed;
top: 50%;
left: 50%;
max-width: calc(100vw - 4rem);
width: 16rem;
margin: auto auto;
padding: 1rem;
display: none;
transform: translate(-50%, -50%);
border: 1px solid var(--colour);
color: var(--colour);
background: var(--bgcolour);
text-shadow: 0 0 2em;
z-index: 99;
}
#dialog-backdrop.show,
#connect-dialog.show {
display: block;
}
#connect-dialog p {
margin: 0 0 1em 0;
}
#connect-dialog input {
font-family: inherit;
color: var(--colour);
border: 1px solid var(--colour);
background: transparent;
}
#connect-dialog input::placeholder {
font-family: inherit;
color: var(--colour);
opacity: .25;
}
#connect-dialog button {
font-family: inherit;
border: 1px solid var(--colour);
color: var(--colour);
background: transparent;
cursor: pointer;
}
#connect-dialog #connect-close {
position: absolute;
top: -0.7em;
right: 1rem;
border: none;
background: var(--bgcolour);
}
*:focus {
outline: none;
box-shadow: 0 0 4px;
}

View file

@ -65,7 +65,7 @@ This connection will now terminate.
`;
const PORT = process.env.PORT || 8080;
const PORT = process.env.PORT || 8443;
const PING_INTERVAL = 10000;
let sockets = [];