make progress visable and only show registration if enabled

Dockerfile

@@ -47,8 +47,5 @@ COPY --from=install /temp/prod/node_modules node_modules
 # COPY --from=prerelease /app/package.json .
 COPY . .
 
-# create folder data
-RUN mkdir -p /app/data && chmod 755 /app/data
-
 EXPOSE 3000/tcp
 ENTRYPOINT [ "bun", "run", "./src/index.tsx" ]

README.md

@@ -31,9 +31,9 @@ services:
     image: ghcr.io/c4illin/convertx:main
     ports:
       - "3000:3000"
-    environment: # Defaults are listed below
+    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
+      - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234 # will use randomUUID() by default
       - HTTP_ALLOWED=false # setting this to true is unsafe, only set this to true locally
     volumes:
       - convertx:/app/data

compose.yaml

@@ -5,6 +5,7 @@ services:
     volumes:
       - ./data:/app/data
     environment:
-      NODE_ENV: production
+      - ACCOUNT_REGISTRATION=true
+      - JWT_SECRET=aLongAndSecretStringUsedToSignTheJSONWebToken1234
     ports:
       - 3000:3000

src/components/header.tsx

@@ -1,4 +1,7 @@
-export const Header = ({ loggedIn }: { loggedIn?: boolean }) => {
+export const Header = ({
+  loggedIn,
+  accountRegistration,
+}: { loggedIn?: boolean; accountRegistration?: boolean }) => {
   let rightNav: JSX.Element;
   if (loggedIn) {
     rightNav = (
@@ -17,15 +20,17 @@ export const Header = ({ loggedIn }: { loggedIn?: boolean }) => {
         <li>
           <a href="/login">Login</a>
         </li>
-        <li>
-          <a href="/register">Register</a>
-        </li>
+        {accountRegistration && (
+          <li>
+            <a href="/register">Register</a>
+          </li>
+        )}
       </ul>
     );
   }
 
   return (
-    <header class="container">
+    <header className="container">
       <nav>
         <ul>
           <li>
@@ -45,4 +50,4 @@ export const Header = ({ loggedIn }: { loggedIn?: boolean }) => {
       </nav>
     </header>
   );
-};
+};

src/converters/vips.ts

@@ -115,7 +115,7 @@ export function convert(
   // }
 
   return new Promise((resolve, reject) => {
-    exec(`vips copy ${filePath} ${targetPath}`, (error, stdout, stderr) => {
+    exec(`vips copy "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
       if (error) {
         reject(`error: ${error}`);
       }

src/helpers/normalizeFiletype.ts

@@ -8,6 +8,8 @@ export const normalizeFiletype = (filetype: string): string => {
       return "html";
     case "tex":
       return "latex";
+    case "md":
+      return "markdown";
     default:
       return lowercaseFiletype;
   }
@@ -21,6 +23,8 @@ export const normalizeOutputFiletype = (filetype: string): string => {
       return "jpg";
     case "latex":
       return "tex";
+    case "markdown":
+      return "md";
     default:
       return lowercaseFiletype;
   }

src/index.tsx

@@ -169,7 +169,7 @@ const app = new Elysia()
 
     return (
       <BaseHtml title="ConvertX | Register">
-        <Header />
+        <Header accountRegistration={ACCOUNT_REGISTRATION} />
         <main class="container">
           <article>
             <form method="post">
@@ -180,6 +180,7 @@ const app = new Elysia()
                     type="email"
                     name="email"
                     placeholder="Email"
+                    autocomplete="email"
                     required
                   />
                 </label>
@@ -189,6 +190,7 @@ const app = new Elysia()
                     type="password"
                     name="password"
                     placeholder="Password"
+                    autocomplete="new-password"
                     required
                   />
                 </label>
@@ -273,7 +275,7 @@ const app = new Elysia()
 
     return (
       <BaseHtml title="ConvertX | Login">
-        <Header />
+        <Header accountRegistration={ACCOUNT_REGISTRATION} />
         <main class="container">
           <article>
             <form method="post">
@@ -284,6 +286,7 @@ const app = new Elysia()
                     type="email"
                     name="email"
                     placeholder="Email"
+                    autocomplete="email"
                     required
                   />
                 </label>
@@ -293,6 +296,7 @@ const app = new Elysia()
                     type="password"
                     name="password"
                     placeholder="Password"
+                    autocomplete="current-password"
                     required
                   />
                 </label>
@@ -789,8 +793,12 @@ const app = new Elysia()
                     type="button"
                     style={{ width: "10rem", float: "right" }}
                     onclick="downloadAll()"
-                    {...(files.length !== job.num_files && { disabled: true })}>
-                    Download All
+                    {...(files.length !== job.num_files
+                      ? { disabled: true, "aria-busy": "true" }
+                      : "")}>
+                    {files.length === job.num_files
+                      ? "Download All"
+                      : "Converting..."}
                   </button>
                 </div>
               </div>
@@ -877,8 +885,12 @@ const app = new Elysia()
                 type="button"
                 style={{ width: "10rem", float: "right" }}
                 onclick="downloadAll()"
-                {...(files.length !== job.num_files && { disabled: true })}>
-                Download All
+                {...(files.length !== job.num_files
+                  ? { disabled: true, "aria-busy": "true" }
+                  : "")}>
+                {files.length === job.num_files
+                  ? "Download All"
+                  : "Converting..."}
               </button>
             </div>
           </div>

src/public/results.js

@@ -13,9 +13,10 @@ window.downloadAll = function () {
 };
 const jobId = window.location.pathname.split("/").pop();
 const main = document.querySelector("main");
-const progressElem = document.querySelector("progress");
+let progressElem = document.querySelector("progress");
 
 const refreshData = () => {
+  // console.log("Refreshing data...", progressElem.value, progressElem.max);
   if (progressElem.value !== progressElem.max) {
     fetch(`/progress/${jobId}`, {
       method: "POST",
@@ -28,6 +29,8 @@ const refreshData = () => {
 
     setTimeout(refreshData, 1000);
   }
+
+  progressElem = document.querySelector("progress");
 };
 
 refreshData();