From 36cb6cc589d80d0a87fa8dbe605db71a9a2570f9 Mon Sep 17 00:00:00 2001 From: C4illin Date: Wed, 6 Nov 2024 08:49:53 +0100 Subject: [PATCH] feat: Allow to chose webroot issue #180 --- README.md | 21 ++++-- compose.yaml | 1 + public/results.js | 4 +- public/script.js | 10 +-- src/components/base.tsx | 13 ++-- src/components/header.tsx | 12 ++-- src/index.tsx | 139 ++++++++++++++++++++------------------ 7 files changed, 114 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index 8a7502d..7ab0699 100644 --- a/README.md +++ b/README.md @@ -45,12 +45,8 @@ services: restart: unless-stopped ports: - "3000:3000" - environment: # Defaults are listed below. All are optional. - - ACCOUNT_REGISTRATION=false # true or false, doesn't matter for the first account (e.g. keep this to false if you only want one account) - - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() by default - - HTTP_ALLOWED=false # setting this to true is unsafe, only set this to true locally - - ALLOW_UNAUTHENTICATED=false # allows anyone to use the service without logging in, only set this to true locally - - AUTO_DELETE_EVERY_N_HOURS=24 # checks every n hours for files older then n hours and deletes them, set to 0 to disable + environment: + - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() if unset volumes: - convertx:/app/data ``` @@ -65,6 +61,19 @@ Then visit `http://localhost:3000` in your browser and create your account. Don' If you get unable to open database file run `chown -R $USER:$USER path` on the path you choose. +### Environment variables + +All are optional, JWT_SECRET is recommended to be set. + +| Name | Default | Description | +|---------------------------|---------|-------------| +| JWT_SECRET | when unset it will use the value from randomUUID() | A long and secret string used to sign the JSON Web Token | +| ACCOUNT_REGISTRATION | false | Allow users to register accounts | +| HTTP_ALLOWED | false | Allow HTTP connections, only set this to true locally | +| ALLOW_UNAUTHENTICATED | false | Allow unauthenticated users to use the service, only set this to true locally | +| AUTO_DELETE_EVERY_N_HOURS | 24 | Checks every n hours for files older then n hours and deletes them, set to 0 to disable | +| WEBROOT | "" | The address to the root path setting this to "/convert" will serve the website on "example.com/convert/" | + ### Tutorial Tutorial in french: https://belginux.com/installer-convertx-avec-docker/ diff --git a/compose.yaml b/compose.yaml index 89322d5..0238bf6 100644 --- a/compose.yaml +++ b/compose.yaml @@ -11,5 +11,6 @@ services: - HTTP_ALLOWED=true # setting this to true is unsafe, only set this to true locally - ALLOW_UNAUTHENTICATED=true # allows anyone to use the service without logging in, only set this to true locally - AUTO_DELETE_EVERY_N_HOURS=1 # checks every n hours for files older then n hours and deletes them, set to 0 to disable + - WEBROOT=/convertx # the root path of the web interface, leave empty to disable ports: - 3000:3000 diff --git a/public/results.js b/public/results.js index 71bce55..7659edb 100644 --- a/public/results.js +++ b/public/results.js @@ -1,3 +1,5 @@ +const webroot = document.querySelector("meta[name='webroot']").content; + window.downloadAll = function () { // Get all download links const downloadLinks = document.querySelectorAll("a[download]"); @@ -18,7 +20,7 @@ let progressElem = document.querySelector("progress"); const refreshData = () => { // console.log("Refreshing data...", progressElem.value, progressElem.max); if (progressElem.value !== progressElem.max) { - fetch(`/progress/${jobId}`, { + fetch(`${webroot}/progress/${jobId}`, { method: "POST", }) .then((res) => res.text()) diff --git a/public/script.js b/public/script.js index 3ab8259..9a8dfb8 100644 --- a/public/script.js +++ b/public/script.js @@ -1,3 +1,5 @@ +const webroot = document.querySelector("meta[name='webroot']").content; + // Select the file input element const fileInput = document.querySelector('input[type="file"]'); const dropZone = document.getElementById("dropzone"); @@ -132,7 +134,7 @@ fileInput.addEventListener("change", (e) => { // } // } - fetch("/conversions", { + fetch(`${webroot}/conversions`, { method: "POST", body: JSON.stringify({ fileType: fileType }), headers: { @@ -180,7 +182,7 @@ const deleteRow = (target) => { setTitle(); } - fetch("/delete", { + fetch(`${webroot}/delete`, { method: "POST", body: JSON.stringify({ filename: filename }), headers: { @@ -201,7 +203,7 @@ const uploadFiles = (files) => { formData.append("file", file, file.name); } - fetch("/upload", { + fetch(`${webroot}/upload`, { method: "POST", body: formData, }) @@ -212,7 +214,7 @@ const uploadFiles = (files) => { .catch((err) => console.log(err)); }; -const formConvert = document.querySelector("form[action='/convert']"); +const formConvert = document.querySelector(`form[action='${webroot}/convert']`); formConvert.addEventListener("submit", () => { const hiddenInput = document.querySelector("input[name='file_names']"); diff --git a/src/components/base.tsx b/src/components/base.tsx index 9c29dc0..b5e6c00 100644 --- a/src/components/base.tsx +++ b/src/components/base.tsx @@ -3,34 +3,37 @@ import { Html } from "@elysiajs/html"; export const BaseHtml = ({ children, title = "ConvertX", + webroot = "", }: { children: JSX.Element; title?: string; + webroot?: string; }) => ( + {title} - + - + {children} diff --git a/src/components/header.tsx b/src/components/header.tsx index 6e96e58..b1db00e 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -3,9 +3,11 @@ import { Html } from "@kitajs/html"; export const Header = ({ loggedIn, accountRegistration, + webroot = "", }: { loggedIn?: boolean; accountRegistration?: boolean; + webroot?: string; }) => { let rightNav: JSX.Element; if (loggedIn) { @@ -17,7 +19,7 @@ export const Header = ({ text-accent-600 transition-all hover:text-accent-500 hover:underline `} - href="/history" + href={`${webroot}/history`} > History @@ -28,7 +30,7 @@ export const Header = ({ text-accent-600 transition-all hover:text-accent-500 hover:underline `} - href="/logoff" + href={`${webroot}/logoff`} > Logout @@ -44,7 +46,7 @@ export const Header = ({ text-accent-600 transition-all hover:text-accent-500 hover:underline `} - href="/login" + href={`${webroot}/login`} > Login @@ -56,7 +58,7 @@ export const Header = ({ text-accent-600 transition-all hover:text-accent-500 hover:underline `} - href="/register" + href={`${webroot}/register`} > Register @@ -72,7 +74,7 @@ export const Header = ({ diff --git a/src/index.tsx b/src/index.tsx index 8c6e936..3250f5f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -37,6 +37,8 @@ const AUTO_DELETE_EVERY_N_HOURS = process.env.AUTO_DELETE_EVERY_N_HOURS ? Number(process.env.AUTO_DELETE_EVERY_N_HOURS) : 24; +const WEBROOT = process.env.WEBROOT ?? "/convertx"; + // fileNames: fileNames, // filesToConvert: fileNames.length, // convertedFiles : 0, @@ -112,6 +114,7 @@ const app = new Elysia({ serve: { maxRequestBodySize: Number.MAX_SAFE_INTEGER, }, + prefix: WEBROOT, }) .use(cookie()) .use(html()) @@ -145,18 +148,18 @@ const app = new Elysia({ }) .get("/setup", ({ redirect }) => { if (!FIRST_RUN) { - return redirect("/login", 302); + return redirect(`${WEBROOT}/login`, 302); } return ( - +

Welcome to ConvertX!

Create your account
-
+