From 6ced824e1c3da1d4e1d5c7008fce10242369016d Mon Sep 17 00:00:00 2001 From: ari melody Date: Tue, 3 Oct 2023 01:21:34 +0100 Subject: [PATCH 1/3] added proper server connection dialog --- public/index.html | 7 ++++ public/scripts/main.js | 44 +++++++++++++++++++++-- public/scripts/terminal.js | 12 +++++++ public/styles/main.css | 73 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 134 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 1dd6909..8e1595b 100644 --- a/public/index.html +++ b/public/index.html @@ -51,6 +51,13 @@
  • source
    • +
    +
    + +

    Enter the address of the server you would like to connect to:

    + + +
    diff --git a/public/scripts/main.js b/public/scripts/main.js index 8f38d14..cc8bacb 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -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(); + }); }); diff --git a/public/scripts/terminal.js b/public/scripts/terminal.js index 14ec853..da2f8a1 100644 --- a/public/scripts/terminal.js +++ b/public/scripts/terminal.js @@ -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(); } diff --git a/public/styles/main.css b/public/styles/main.css index 531d55f..85270bd 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -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; +} + From 3331925b3d8a9e8cfb0c075e77efdad03279d91d Mon Sep 17 00:00:00 2001 From: ari melody Date: Tue, 3 Oct 2023 20:39:47 +0100 Subject: [PATCH 2/3] =?UTF-8?q?dockerisation=20=F0=9F=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .dockerignore | 8 ++++++++ .gitignore | 2 ++ Dockerfile | 15 +++++++++++++++ docker-compose-example.yml | 14 ++++++++++++++ server/main.js | 2 +- 5 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100644 docker-compose-example.yml diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..206568c --- /dev/null +++ b/.dockerignore @@ -0,0 +1,8 @@ +node_modules/ +certs/ +.git/ +.DS_Store +.gitignore +README.md +nodemon.json +*.service diff --git a/.gitignore b/.gitignore index 332bbc0..3efccf1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ **/.DS_Store node_modules/ certs/ +docker-compose*.yml +!docker-compose-example.yml diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..8372847 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,15 @@ +FROM 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" ] + diff --git a/docker-compose-example.yml b/docker-compose-example.yml new file mode 100644 index 0000000..de3f038 --- /dev/null +++ b/docker-compose-example.yml @@ -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 diff --git a/server/main.js b/server/main.js index b3e16f0..aa63713 100644 --- a/server/main.js +++ b/server/main.js @@ -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 = []; From 14b0cf10913f476dbce218fe293699da0b488d4a Mon Sep 17 00:00:00 2001 From: ari melody Date: Tue, 3 Oct 2023 20:57:41 +0100 Subject: [PATCH 3/3] updated dockerfile to build explicitly for amd64 systems --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index 8372847..e3b1c45 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:20-alpine3.18 +FROM --platform=linux/amd64 node:20-alpine3.18 # set working directory WORKDIR /srv/openterminal