start on pandoc

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode
+Makefile
+helm-charts
+.env
+.editorconfig
+.idea
+coverage*

.eslintrc.cjs

@@ -1,55 +1,55 @@
 /** @type {import("eslint").Linter.Config} */
 const config = {
-	root: true,
-	parser: "@typescript-eslint/parser",
-	plugins: ["isaacscript", "import"],
-	extends: [
-		"plugin:@typescript-eslint/recommended-type-checked",
-		"plugin:@typescript-eslint/stylistic-type-checked",
-		"plugin:prettier/recommended",
-	],
-	parserOptions: {
-		ecmaVersion: "latest",
-		sourceType: "module",
-		tsconfigRootDir: __dirname,
-		project: [
-			"./tsconfig.json",
-			"./cli/tsconfig.eslint.json", // separate eslint config for the CLI since we want to lint and typecheck differently due to template files
-			"./upgrade/tsconfig.json",
-			"./www/tsconfig.json",
-		],
-	},
-	overrides: [
-		// Template files don't have reliable type information
-		{
-			files: ["./cli/template/**/*.{ts,tsx}"],
-			extends: ["plugin:@typescript-eslint/disable-type-checked"],
-		},
-	],
-	rules: {
-		// These off/not-configured-the-way-we-want lint rules we like & opt into
-		"@typescript-eslint/no-explicit-any": "error",
-		"@typescript-eslint/no-unused-vars": [
-			"error",
-			{ argsIgnorePattern: "^_", destructuredArrayIgnorePattern: "^_" },
-		],
-		"@typescript-eslint/consistent-type-imports": [
-			"error",
-			{ prefer: "type-imports", fixStyle: "inline-type-imports" },
-		],
-		"import/consistent-type-specifier-style": ["error", "prefer-inline"],
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["isaacscript", "import"],
+  extends: [
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    tsconfigRootDir: __dirname,
+    project: [
+      "./tsconfig.json",
+      "./cli/tsconfig.eslint.json", // separate eslint config for the CLI since we want to lint and typecheck differently due to template files
+      "./upgrade/tsconfig.json",
+      "./www/tsconfig.json",
+    ],
+  },
+  overrides: [
+    // Template files don't have reliable type information
+    {
+      files: ["./cli/template/**/*.{ts,tsx}"],
+      extends: ["plugin:@typescript-eslint/disable-type-checked"],
+    },
+  ],
+  rules: {
+    // These off/not-configured-the-way-we-want lint rules we like & opt into
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { argsIgnorePattern: "^_", destructuredArrayIgnorePattern: "^_" },
+    ],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { prefer: "type-imports", fixStyle: "inline-type-imports" },
+    ],
+    "import/consistent-type-specifier-style": ["error", "prefer-inline"],
 
-		// For educational purposes we format our comments/jsdoc nicely
-		"isaacscript/complete-sentences-jsdoc": "warn",
-		"isaacscript/format-jsdoc-comments": "warn",
+    // For educational purposes we format our comments/jsdoc nicely
+    "isaacscript/complete-sentences-jsdoc": "warn",
+    "isaacscript/format-jsdoc-comments": "warn",
 
-		// These lint rules don't make sense for us but are enabled in the preset configs
-		"@typescript-eslint/no-confusing-void-expression": "off",
-		"@typescript-eslint/restrict-template-expressions": "off",
+    // These lint rules don't make sense for us but are enabled in the preset configs
+    "@typescript-eslint/no-confusing-void-expression": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
 
-		// This rule doesn't seem to be working properly
-		"@typescript-eslint/prefer-nullish-coalescing": "off",
-	},
+    // This rule doesn't seem to be working properly
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+  },
 };
 
-module.exports = config;
+module.exports = config;

.gitignore

@@ -45,4 +45,5 @@ package-lock.json
 /mydb.sqlite
 /output
 /db
-/data
+/data
+/Bruno

Dockerfile

@@ -0,0 +1,45 @@
+# use the official Bun image
+# see all versions at https://hub.docker.com/r/oven/bun/tags
+FROM oven/bun:1-debian as base
+WORKDIR /app
+
+# install dependencies into temp directory
+# this will cache them and speed up future builds
+FROM base AS install
+RUN mkdir -p /temp/dev
+COPY package.json bun.lockb /temp/dev/
+RUN cd /temp/dev && bun install --frozen-lockfile
+
+# install with --production (exclude devDependencies)
+RUN mkdir -p /temp/prod
+COPY package.json bun.lockb /temp/prod/
+RUN cd /temp/prod && bun install --frozen-lockfile --production
+
+# install pandoc
+RUN apt-get update && apt-get install -y pandoc
+
+# copy node_modules from temp directory
+# then copy all (non-ignored) project files into the image
+FROM base AS prerelease
+COPY --from=install /temp/dev/node_modules node_modules
+COPY . .
+
+# [optional] tests & build
+ENV NODE_ENV=production
+# RUN bun test
+# RUN bun run build
+
+# copy production dependencies and source code into final image
+FROM base AS release
+COPY --from=install /temp/prod/node_modules node_modules
+COPY --from=prerelease /app/src/index.tsx /app/src/
+COPY --from=prerelease /app/package.json .
+COPY . .
+
+# copy pandoc
+COPY --from=install /usr/bin/pandoc /usr/bin/pandoc
+
+# run the app
+USER bun
+EXPOSE 3000/tcp
+ENTRYPOINT [ "bun", "run", "./src/index.tsx" ]

README.Docker.md

@@ -0,0 +1,22 @@
+### Building and running your application
+
+When you're ready, start your application by running:
+`docker compose up --build`.
+
+Your application will be available at http://localhost:3000.
+
+### Deploying your application to the cloud
+
+First, build your image, e.g.: `docker build -t myapp .`.
+If your cloud uses a different CPU architecture than your development
+machine (e.g., you are on a Mac M1 and your cloud provider is amd64),
+you'll want to build the image for that platform, e.g.:
+`docker build --platform=linux/amd64 -t myapp .`.
+
+Then, push it to your registry, e.g. `docker push myregistry.com/myapp`.
+
+Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/)
+docs for more detail on building and pushing.
+
+### References
+* [Docker's Node.js guide](https://docs.docker.com/language/nodejs/)

biome.json

@@ -1,62 +1,60 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
-	"formatter": {
-		"enabled": true,
-		"formatWithErrors": true,
-		"indentStyle": "space",
-		"indentWidth": 2,
-		"lineEnding": "lf",
-		"lineWidth": 80,
-		"attributePosition": "auto"
-	},
-	"organizeImports": { "enabled": true },
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": false,
-			"complexity": {
-				"noBannedTypes": "error",
-				"noUselessThisAlias": "error",
-				"noUselessTypeConstraint": "error",
-				"useArrowFunction": "off",
-				"useLiteralKeys": "error",
-				"useOptionalChain": "error"
-			},
-			"correctness": { "noPrecisionLoss": "error", "noUnusedVariables": "off" },
-			"style": {
-				"noInferrableTypes": "error",
-				"noNamespace": "error",
-				"useAsConstAssertion": "error",
-				"useBlockStatements": "off",
-				"useConsistentArrayType": "error",
-				"useForOf": "error",
-				"useImportType": "error",
-				"useShorthandFunctionType": "error"
-			},
-			"suspicious": {
-				"noEmptyBlockStatements": "error",
-				"noEmptyInterface": "error",
-				"noExplicitAny": "error",
-				"noExtraNonNullAssertion": "error",
-				"noMisleadingInstantiator": "error",
-				"noUnsafeDeclarationMerging": "error",
-				"useAwait": "error",
-				"useNamespaceKeyword": "error"
-			}
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"jsxQuoteStyle": "double",
-			"quoteProperties": "asNeeded",
-			"trailingComma": "all",
-			"semicolons": "always",
-			"arrowParentheses": "always",
-			"bracketSpacing": true,
-			"bracketSameLine": false,
-			"quoteStyle": "double",
-			"attributePosition": "auto"
-		}
-	},
-	"overrides": [{ "include": ["./cli/template/**/*.{ts,tsx}"] }]
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80,
+    "attributePosition": "auto"
+  },
+  "organizeImports": { "enabled": true },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "noBannedTypes": "error",
+        "noUselessThisAlias": "error",
+        "noUselessTypeConstraint": "error",
+        "useArrowFunction": "off",
+        "useLiteralKeys": "error",
+        "useOptionalChain": "error"
+      },
+      "correctness": { "noPrecisionLoss": "error", "noUnusedVariables": "off" },
+      "style": {
+        "noInferrableTypes": "error",
+        "noNamespace": "error",
+        "useAsConstAssertion": "error",
+        "useBlockStatements": "off",
+        "useConsistentArrayType": "error",
+        "useForOf": "error",
+        "useImportType": "error",
+        "useShorthandFunctionType": "error"
+      },
+      "suspicious": {
+        "noEmptyBlockStatements": "error",
+        "noEmptyInterface": "error",
+        "noExplicitAny": "error",
+        "noExtraNonNullAssertion": "error",
+        "noMisleadingInstantiator": "error",
+        "noUnsafeDeclarationMerging": "error",
+        "useAwait": "error",
+        "useNamespaceKeyword": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false,
+      "quoteStyle": "double",
+      "attributePosition": "auto"
+    }
+  }
 }

compose.yaml

@@ -0,0 +1,10 @@
+services:
+  convertx:
+    build:
+      context: .
+    volumes:
+      - ./data:/app/data
+    environment:
+      NODE_ENV: production
+    ports:
+      - 3000:3000

package.json

@@ -28,7 +28,6 @@
     "@types/ws": "^8.5.10",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
-    "bun-types": "^1.1.8",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "^3.2.5",

prettier.config.cjs

@@ -6,7 +6,6 @@ const config = {
   printWidth: 80,
   singleQuote: false,
   semi: true,
-  trailingComma: "all",
   tabWidth: 2,
   plugins: ["@ianvs/prettier-plugin-sort-imports"],
 };

src/components/base.tsx

@@ -6,7 +6,7 @@ export const BaseHtml = ({ children, title = "ConvertX" }) => (
       <title>{title}</title>
       <link rel="stylesheet" href="/pico.lime.min.css" />
       <link rel="stylesheet" href="/style.css" />
-      <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+      <script src="https://unpkg.com/htmx.org@1.9.12" />
     </head>
     <body>{children}</body>
   </html>

src/components/header.tsx

@@ -25,7 +25,7 @@ export const Header = ({ loggedIn }: { loggedIn?: boolean }) => {
   }
 
   return (
-    <header class="container-fluid">
+    <header class="container">
       <nav>
         <ul>
           <li>

src/converters/main.ts

@@ -1,39 +1,88 @@
-import { properties, convert } from "./sharp";
+import {
+  properties as propertiesImage,
+  convert as convertImage,
+} from "./sharp";
+
+import {
+  properties as propertiesPandoc,
+  convert as convertPandoc,
+} from "./pandoc";
+
+import { normalizeFiletype } from "../helpers/normalizeFiletype";
 
 export async function mainConverter(
-	inputFilePath: string,
-	fileType: string,
-	convertTo: string,
-	targetPath: string,
-	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-	options?: any,
+  inputFilePath: string,
+  fileType: string,
+  convertTo: string,
+  targetPath: string,
+  options?: any,
 ) {
-	// Check if the fileType and convertTo are supported by the sharp converter
-	if (properties.from.includes(fileType) && properties.to.includes(convertTo)) {
-		// Use the sharp converter
-		try {
-			await convert(inputFilePath, fileType, convertTo, targetPath, options);
-			console.log(
-				`Converted ${inputFilePath} from ${fileType} to ${convertTo} successfully.`,
-			);
-		} catch (error) {
-			console.error(
-				`Failed to convert ${inputFilePath} from ${fileType} to ${convertTo}.`,
-				error,
-			);
-		}
-	} else {
-		console.log(
-			`The sharp converter does not support converting from ${fileType} to ${convertTo}.`,
-		);
-	}
+  // Check if the fileType and convertTo are supported by the sharp converter
+  if (
+    propertiesImage.from.includes(fileType) &&
+    propertiesImage.to.includes(convertTo)
+  ) {
+    // Use the sharp converter
+    try {
+      await convertImage(
+        inputFilePath,
+        fileType,
+        convertTo,
+        targetPath,
+        options,
+      );
+      console.log(
+        `Converted ${inputFilePath} from ${fileType} to ${convertTo} successfully.`,
+      );
+    } catch (error) {
+      console.error(
+        `Failed to convert ${inputFilePath} from ${fileType} to ${convertTo}.`,
+        error,
+      );
+    }
+  }
+  // Check if the fileType and convertTo are supported by the pandoc converter
+  else if (
+    propertiesPandoc.from.includes(fileType) &&
+    propertiesPandoc.to.includes(convertTo)
+  ) {
+    // Use the pandoc converter
+    try {
+      await convertPandoc(
+        inputFilePath,
+        fileType,
+        convertTo,
+        targetPath,
+        options,
+      );
+      console.log(
+        `Converted ${inputFilePath} from ${fileType} to ${convertTo} successfully.`,
+      );
+    } catch (error) {
+      console.error(
+        `Failed to convert ${inputFilePath} from ${fileType} to ${convertTo}.`,
+        error,
+      );
+    }
+  } else {
+    console.log(
+      `Neither the sharp nor pandoc converter support converting from ${fileType} to ${convertTo}.`,
+    );
+  }
 }
 
-export function possibleConversions(fileType: string) {
-	// Check if the fileType is supported by the sharp converter
-	if (properties.from.includes(fileType)) {
-		return properties.to;
-	}
+const possibleConversions: { [key: string]: string[] } = {};
 
-	return [];
+for (const from of [...propertiesImage.from, ...propertiesPandoc.from]) {
+  possibleConversions[from] = [...propertiesImage.to, ...propertiesPandoc.to];
 }
+
+export const getPossibleConversions = (from: string): string[] => {
+  const fromClean = normalizeFiletype(from);
+
+  return possibleConversions[fromClean] || ([] as string[]);
+};
+
+export const getAllTargets = () => {
+  return [...propertiesImage.to, ...propertiesPandoc.to];
+};

src/converters/pandoc.ts

@@ -0,0 +1,17 @@
+import { exec } from "node:child_process";
+
+export const properties = {
+  from: [
+    "md", "html", "docx", "pdf", "tex", "txt", "bibtex", "biblatex", "commonmark", "commonmark_x", "creole", "csljson", "csv", "tsv", "docbook", "dokuwiki", "endnotexml", "epub", "fb2", "gfm", "haddock", "ipynb", "jats", "jira", "json", "latex", "markdown", "markdown_mmd", "markdown_phpextra", "markdown_strict", "mediawiki", "man", "muse", "native", "odt", "opml", "org", "ris", "rtf", "rst", "t2t", "textile", "tikiwiki", "twiki", "vimwiki"
+  ],
+  to: [
+    "asciidoc", "asciidoctor", "beamer", "bibtex", "biblatex", "commonmark", "commonmark_x", "context", "csljson", "docbook", "docbook4", "docbook5", "docx", "dokuwiki", "epub", "epub3", "epub2", "fb2", "gfm", "haddock", "html", "html5", "html4", "icml", "ipynb", "jats_archiving", "jats_articleauthoring", "jats_publishing", "jats", "jira", "json", "latex", "man", "markdown", "markdown_mmd", "markdown_phpextra", "markdown_strict", "markua", "mediawiki", "ms", "muse", "native", "odt", "opml", "opendocument", "org", "pdf", "plain", "pptx", "rst", "rtf", "texinfo", "textile", "slideous", "slidy", "dzslides", "revealjs", "s5", "tei", "xwiki", "zimwiki"
+  ]
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export function convert(filePath: string, fileType: string, convertTo: string, targetPath: string, options?: any) {
+  return exec(
+    `pandoc ${filePath} -f ${fileType} -t ${convertTo} -o ${targetPath}`,
+  );
+}

src/index.tsx

@@ -8,14 +8,19 @@ import { Database } from "bun:sqlite";
 import { Elysia, t } from "elysia";
 import { BaseHtml } from "./components/base";
 import { Header } from "./components/header";
-import { mainConverter, possibleConversions } from "./converters/main";
+import {
+  mainConverter,
+  getPossibleConversions,
+  getAllTargets,
+} from "./converters/main";
 import { normalizeFiletype } from "./helpers/normalizeFiletype";
 
 const db = new Database("./data/mydb.sqlite", { create: true });
 const uploadsDir = "./data/uploads/";
 const outputDir = "./data/output/";
 
-const jobs = {};
+const accountRegistration =
+  process.env.ACCOUNT_REGISTRATION === "true" || false;
 
 // fileNames: fileNames,
 // filesToConvert: fileNames.length,
@@ -31,19 +36,42 @@ CREATE TABLE IF NOT EXISTS users (
 );
 CREATE TABLE IF NOT EXISTS file_names (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
-  job_id TEXT NOT NULL,
+  job_id INTEGER NOT NULL,
   file_name TEXT NOT NULL,
-  output_file_name TEXT NOT NULL
+  output_file_name TEXT NOT NULL,
+  FOREIGN KEY (job_id) REFERENCES jobs(id)
 );
 CREATE TABLE IF NOT EXISTS jobs (
 	id INTEGER PRIMARY KEY AUTOINCREMENT,
 	user_id INTEGER NOT NULL,
-	job_id TEXT NOT NULL,
 	date_created TEXT NOT NULL,
-  status TEXT DEFAULT 'pending',
-  converted_files INTEGER DEFAULT 0
+  status TEXT DEFAULT 'not started',
+  num_files INTEGER DEFAULT 0,
+  FOREIGN KEY (user_id) REFERENCES users(id)
 );`);
 
+interface IUser {
+  id: number;
+  email: string;
+  password: string;
+}
+
+interface IFileNames {
+  id: number;
+  job_id: number;
+  file_name: string;
+  output_file_name: string;
+}
+
+interface IJobs {
+  finished_files: number;
+  id: number;
+  user_id: number;
+  date_created: string;
+  status: string;
+  num_files: number;
+}
+
 // enable WAL mode
 db.exec("PRAGMA journal_mode = WAL;");
 
@@ -70,17 +98,32 @@ const app = new Elysia()
     return (
       <BaseHtml title="ConvertX | Register">
         <Header />
-        <main class="container-fluid">
-          <form method="post">
-            <input type="email" name="email" placeholder="Email" required />
-            <input
-              type="password"
-              name="password"
-              placeholder="Password"
-              required
-            />
-            <input type="submit" value="Register" />
-          </form>
+        <main class="container">
+          <article>
+            <form method="post">
+              <fieldset>
+                <label>
+                  Email
+                  <input
+                    type="email"
+                    name="email"
+                    placeholder="Email"
+                    required
+                  />
+                </label>
+                <label>
+                  Password
+                  <input
+                    type="password"
+                    name="password"
+                    placeholder="Password"
+                    required
+                  />
+                </label>
+              </fieldset>
+              <input type="submit" value="Register" />
+            </form>
+          </article>
         </main>
       </BaseHtml>
     );
@@ -99,20 +142,26 @@ const app = new Elysia()
       }
       const savedPassword = await Bun.password.hash(body.password);
 
-      db.run(
-        "INSERT INTO users (email, password) VALUES (?, ?)",
+      db.query("INSERT INTO users (email, password) VALUES (?, ?)").run(
         body.email,
         savedPassword,
       );
 
-      const user = await db
+      const user = (await db
         .query("SELECT * FROM users WHERE email = ?")
-        .get(body.email);
+        .get(body.email)) as IUser;
 
       const accessToken = await jwt.sign({
         id: String(user.id),
       });
 
+      if (!auth) {
+        set.status = 500;
+        return {
+          message: "No auth cookie, perhaps your browser is blocking cookies.",
+        };
+      }
+
       // set cookie
       auth.set({
         value: accessToken,
@@ -133,70 +182,103 @@ const app = new Elysia()
     return (
       <BaseHtml title="ConvertX | Login">
         <Header />
-        <main class="container-fluid">
-          <form method="post">
-            <input type="email" name="email" placeholder="Email" required />
-            <input
-              type="password"
-              name="password"
-              placeholder="Password"
-              required
-            />
-            <div role="group">
-              <a href="/register" role="button" class="secondary">
-                Register an account
-              </a>
-              <input type="submit" value="Login" />
-            </div>
-          </form>
+        <main class="container">
+          <article>
+            <form method="post">
+              <fieldset>
+                <label>
+                  Email
+                  <input
+                    type="email"
+                    name="email"
+                    placeholder="Email"
+                    required
+                  />
+                </label>
+                <label>
+                  Password
+                  <input
+                    type="password"
+                    name="password"
+                    placeholder="Password"
+                    required
+                  />
+                </label>
+              </fieldset>
+              <div role="group">
+                <a href="/register" role="button" class="secondary">
+                  Register an account
+                </a>
+                <input type="submit" value="Login" />
+              </div>
+            </form>
+          </article>
         </main>
       </BaseHtml>
     );
   })
-  .post("/login", async function handler({ body, set, jwt, cookie: { auth } }) {
-    const existingUser = await db
-      .query("SELECT * FROM users WHERE email = ?")
-      .get(body.email);
+  .post(
+    "/login",
+    async function handler({ body, set, redirect, jwt, cookie: { auth } }) {
+      // if already logged in, redirect to home
+      if (auth?.value) {
+        const user = await jwt.verify(auth.value);
+        if (user) {
+          return redirect("/");
+        }
+        auth.remove();
+      }
 
-    if (!existingUser) {
-      set.status = 403;
-      return {
-        message: "Invalid credentials.",
+      const existingUser = (await db
+        .query("SELECT * FROM users WHERE email = ?")
+        .get(body.email)) as IUser;
+
+      if (!existingUser) {
+        set.status = 403;
+        return {
+          message: "Invalid credentials.",
+        };
+      }
+
+      const validPassword = await Bun.password.verify(
+        body.password,
+        existingUser.password,
+      );
+
+      if (!validPassword) {
+        set.status = 403;
+        return {
+          message: "Invalid credentials.",
+        };
+      }
+
+      const accessToken = await jwt.sign({
+        id: String(existingUser.id),
+      });
+
+      if (!auth) {
+        set.status = 500;
+        return {
+          message: "No auth cookie, perhaps your browser is blocking cookies.",
+        };
+      }
+
+      // set cookie
+      auth.set({
+        value: accessToken,
+        httpOnly: true,
+        secure: true,
+        maxAge: 60 * 60 * 24 * 7,
+        sameSite: "strict",
+      });
+
+      // redirect to home
+      set.status = 302;
+      set.headers = {
+        Location: "/",
       };
-    }
-
-    const validPassword = await Bun.password.verify(
-      body.password,
-      existingUser.password,
-    );
-
-    if (!validPassword) {
-      set.status = 403;
-      return {
-        message: "Invalid credentials.",
-      };
-    }
-
-    const accessToken = await jwt.sign({
-      id: String(existingUser.id),
-    });
-
-    // set cookie
-    // set cookie
-    auth.set({
-      value: accessToken,
-      httpOnly: true,
-      secure: true,
-      maxAge: 60 * 60 * 24 * 7,
-      sameSite: "strict",
-    });
-
-    // redirect to home
-    set.status = 302;
-    set.headers = {
-      Location: "/",
-    };
-  })
+    },
+  )
   .get("/logout", ({ redirect, cookie: { auth } }) => {
     if (auth?.value) {
       auth.remove();
@@ -211,6 +293,9 @@ const app = new Elysia()
     return redirect("/login");
   })
   .get("/", async ({ jwt, redirect, cookie: { auth, jobId } }) => {
+    if (!auth?.value) {
+      return redirect("/login");
+    }
     // validate jwt
     const user = await jwt.verify(auth.value);
     if (!user) {
@@ -218,9 +303,9 @@ const app = new Elysia()
     }
 
     // make sure user exists in db
-    const existingUser = await db
+    const existingUser = (await db
       .query("SELECT * FROM users WHERE id = ?")
-      .get(user.id);
+      .get(user.id)) as IUser;
 
     if (!existingUser) {
       if (auth?.value) {
@@ -229,28 +314,36 @@ const app = new Elysia()
       return redirect("/login");
     }
 
-    // create a unique job id
+    // create a new job
+    db.query("INSERT INTO jobs (user_id, date_created) VALUES (?, ?)").run(
+      user.id,
+      new Date().toISOString(),
+    );
+
+    const id = (
+      db
+        .query("SELECT id FROM jobs WHERE user_id = ? ORDER BY id DESC")
+        .get(user.id) as { id: number }
+    ).id;
+
+    if (!jobId) {
+      return { message: "Cookies should be enabled to use this app." };
+    }
+
     jobId.set({
-      value: randomUUID(),
+      value: id,
       httpOnly: true,
       secure: true,
       maxAge: 24 * 60 * 60,
       sameSite: "strict",
     });
 
-    // insert job id into db
-    db.run(
-      "INSERT INTO jobs (user_id, job_id, date_created) VALUES (?, ?, ?)",
-      user.id,
-      jobId.value,
-      new Date().toISOString(),
-    );
-
     return (
       <BaseHtml>
         <Header loggedIn />
-        <main class="container-fluid">
+        <main class="container">
           <article>
+            <h1>Convert</h1>
             <table id="file-list" />
             <input type="file" name="file" multiple />
           </article>
@@ -261,12 +354,10 @@ const app = new Elysia()
                 <option selected disabled value="">
                   Convert to
                 </option>
-                <option>JPG</option>
-                <option>PNG</option>
-                <option>SVG</option>
-                <option>PDF</option>
-                <option>DOCX</option>
-                <option>Yaml</option>
+                {getAllTargets().map((target) => (
+                  // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+                  <option value={target}>{target}</option>
+                ))}
               </select>
             </article>
             <input type="submit" value="Convert" />
@@ -276,10 +367,22 @@ const app = new Elysia()
       </BaseHtml>
     );
   })
+  .post("/conversions", ({ body }) => {
+    console.log(body);
+    return (
+      <select name="convert_to" aria-label="Convert to" required>
+        <option selected disabled value="">
+          Convert to
+        </option>
+        {getPossibleConversions(body.fileType).map((target) => (
+          // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+          <option value={target}>{target}</option>
+        ))}
+      </select>
+    );
+  })
   .post("/upload", async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
-    // validate jwt
     if (!auth?.value) {
-      // redirect to login
       return redirect("/login");
     }
 
@@ -288,7 +391,17 @@ const app = new Elysia()
       return redirect("/login");
     }
 
-    // let filesUploaded = [];
+    if (!jobId?.value) {
+      return redirect("/");
+    }
+
+    const existingJob = await db
+      .query("SELECT * FROM jobs WHERE id = ? AND user_id = ?")
+      .get(jobId.value, user.id);
+
+    if (!existingJob) {
+      return redirect("/");
+    }
 
     const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
 
@@ -307,15 +420,26 @@ const app = new Elysia()
       message: "Files uploaded successfully.",
     };
   })
-  .post("/delete", async ({ body, set, jwt, cookie: { auth, jobId } }) => {
+  .post("/delete", async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
+    if (!auth?.value) {
+      return redirect("/login");
+    }
+
     const user = await jwt.verify(auth.value);
     if (!user) {
-      // redirect to login
-      set.status = 302;
-      set.headers = {
-        Location: "/login",
-      };
-      return;
+      return redirect("/login");
+    }
+
+    if (!jobId?.value) {
+      return redirect("/");
+    }
+
+    const existingJob = await db
+      .query("SELECT * FROM jobs WHERE id = ? AND user_id = ?")
+      .get(jobId.value, user.id);
+
+    if (!existingJob) {
+      return redirect("/");
     }
 
     const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
@@ -324,21 +448,28 @@ const app = new Elysia()
   })
   .post(
     "/convert",
-    async ({ body, set, redirect, jwt, cookie: { auth, jobId } }) => {
+    async ({ body, redirect, jwt, cookie: { auth, jobId } }) => {
+      if (!auth?.value) {
+        return redirect("/login");
+      }
+
       const user = await jwt.verify(auth.value);
       if (!user) {
-        // redirect to login
-        set.status = 302;
-        set.headers = {
-          Location: "/login",
-        };
-        return;
+        return redirect("/login");
       }
 
       if (!jobId?.value) {
         return redirect("/");
       }
 
+      const existingJob = (await db
+        .query("SELECT * FROM jobs WHERE id = ? AND user_id = ?")
+        .get(jobId.value, user.id)) as IJobs;
+
+      if (!existingJob) {
+        return redirect("/");
+      }
+
       const userUploadsDir = `${uploadsDir}${user.id}/${jobId.value}/`;
       const userOutputDir = `${outputDir}${user.id}/${jobId.value}/`;
 
@@ -353,76 +484,196 @@ const app = new Elysia()
       }
 
       const convertTo = normalizeFiletype(body.convert_to);
-      const fileNames = JSON.parse(body.file_names);
+      const fileNames: string[] = JSON.parse(body.file_names) as string[];
 
-      jobs[jobId.value] = {
-        fileNames: fileNames,
-        filesToConvert: fileNames.length,
-        convertedFiles: 0,
-        outputFiles: [],
-      };
+      if (!Array.isArray(fileNames) || fileNames.length === 0) {
+        return redirect("/");
+      }
+
+      db.run(
+        "UPDATE jobs SET num_files = ? WHERE id = ?",
+        fileNames.length,
+        jobId.value,
+      );
+
+      const query = db.query(
+        "INSERT INTO file_names (job_id, file_name, output_file_name) VALUES (?, ?, ?)",
+      );
 
       for (const fileName of fileNames) {
         const filePath = `${userUploadsDir}${fileName}`;
-        const fileTypeOrig = fileName.split(".").pop();
+        const fileTypeOrig = fileName.split(".").pop() as string;
         const fileType = normalizeFiletype(fileTypeOrig);
         const newFileName = fileName.replace(fileTypeOrig, convertTo);
         const targetPath = `${userOutputDir}${newFileName}`;
 
         await mainConverter(filePath, fileType, convertTo, targetPath);
-        jobs[jobId.value].convertedFiles++;
-        jobs[jobId.value].outputFiles.push(newFileName);
+        query.run(jobId.value, fileName, newFileName);
       }
 
-      console.log(
-        "sending to results page...",
-        `http://${app.server?.hostname}:${app.server?.port}/results/${jobId.value}`,
-      );
-
-      // redirect to results
-      set.status = 302;
-      set.headers = {
-        Location: `/results/${jobId.value}`,
-      };
+      return redirect(`/results/${jobId.value}`);
     },
   )
-  .get("/results", async ({ params, jwt, set, redirect, cookie: { auth } }) => {
+  .get("/histt", async ({ jwt, redirect, cookie: { auth } }) => {
+    console.log("results page");
     if (!auth?.value) {
+      console.log("no auth value");
       return redirect("/login");
     }
     const user = await jwt.verify(auth.value);
+
     if (!user) {
+      console.log("no user");
       return redirect("/login");
     }
 
-    const userJobs = await db
+    const userJobs = db
       .query("SELECT * FROM jobs WHERE user_id = ?")
-      .all(user.id);
-    
+      .all(user.id) as {
+      id: number;
+      user_id: number;
+      date_created: string;
+      status: string;
+      num_files: number;
+      finished_files: number;
+    }[];
+
+    for (const job of userJobs) {
+      const files = db
+        .query("SELECT * FROM file_names WHERE job_id = ?")
+        .all(job.id) as IFileNames[];
+
+      job.finished_files = files.length;
+    }
+
     return (
       <BaseHtml title="ConvertX | Results">
         <Header loggedIn />
         <main class="container-fluid">
           <article>
             <h1>Results</h1>
-            <ul>
-              {userJobs.map((job) => (
-                <li>
-                  <a href={`/results/${job.job_id}`}>{job.job_id}</a>
-                </li>
-              ))}
-            </ul>
+            <table>
+              <thead>
+                <tr>
+                  <th>Time</th>
+                  <th>Files</th>
+                  <th>Files Done</th>
+                  <th>Status</th>
+                  <th>View</th>
+                </tr>
+              </thead>
+              <tbody>
+                {userJobs.map((job) => (
+                  // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+                  <tr>
+                    <td>{job.date_created}</td>
+                    <td>{job.num_files}</td>
+                    <td>{job.finished_files}</td>
+                    <td>{job.status}</td>
+                    <td>
+                      <a href={`/results/${job.id}`}>View</a>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </article>
         </main>
       </BaseHtml>
     );
-
-
-    // list all jobs belonging to the user
   })
   .get(
     "/results/:jobId",
-    async ({ params, jwt, set, redirect, cookie: { auth } }) => {
+    async ({ params, jwt, set, redirect, cookie: { auth, job_id } }) => {
+      if (!auth?.value) {
+        return redirect("/login");
+      }
+
+      if (job_id?.value) {
+        // clear the job_id cookie since we are viewing the results
+        job_id.remove();
+      }
+
+      const user = await jwt.verify(auth.value);
+      if (!user) {
+        return redirect("/login");
+      }
+
+      const job = (await db
+        .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
+        .get(user.id, params.jobId)) as IJobs;
+
+      if (!job) {
+        set.status = 404;
+        return {
+          message: "Job not found.",
+        };
+      }
+
+      const outputPath = `${user.id}/${params.jobId}/`;
+
+      const files = db
+        .query("SELECT * FROM file_names WHERE job_id = ?")
+        .all(params.jobId) as IFileNames[];
+
+      return (
+        <BaseHtml title="ConvertX | Result">
+          <Header loggedIn />
+          <main class="container-fluid">
+            <article>
+              <div class="grid">
+                <h1>Results</h1>
+                <div>
+                  <button
+                    type="button"
+                    style={{ width: "10rem", float: "right" }}
+                  >
+                    Download All
+                  </button>
+                </div>
+              </div>
+              <progress max={job.num_files} value={files.length} />
+              <table>
+                <thead>
+                  <tr>
+                    <th>Converted File Name</th>
+                    <th>View</th>
+                    <th>Download</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {files.map((file) => (
+                    // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
+                    <tr>
+                      <td>{file.output_file_name}</td>
+                      <td>
+                        <a
+                          href={`/download/${outputPath}${file.output_file_name}`}
+                        >
+                          View
+                        </a>
+                      </td>
+                      <td>
+                        <a
+                          href={`/download/${outputPath}${file.output_file_name}`}
+                          download={file.output_file_name}
+                        >
+                          Download
+                        </a>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </article>
+          </main>
+        </BaseHtml>
+      );
+    },
+  )
+  .get(
+    "/download/:userId/:jobId/:fileName",
+    async ({ params, jwt, redirect, cookie: { auth } }) => {
       if (!auth?.value) {
         return redirect("/login");
       }
@@ -433,35 +684,15 @@ const app = new Elysia()
       }
 
       const job = await db
-        .query("SELECT * FROM jobs WHERE user_id = ? AND job_id = ?")
+        .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
         .get(user.id, params.jobId);
 
       if (!job) {
-        set.status = 404;
-        return {
-          message: "Job not found.",
-        };
+        return redirect("/results");
       }
 
-      return (
-        <BaseHtml>
-          <Header loggedIn />
-          <main class="container-fluid">
-            <article>
-              <h1>Results</h1>
-              <ul>
-                {jobs[params.jobId].outputFiles.map((file: string) => (
-                  <li>
-                    <a href={`/output/${user.id}/${params.jobId}/${file}`}>
-                      {file}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </article>
-          </main>
-        </BaseHtml>
-      );
+      const filePath = `${outputDir}${params.userId}/${params.jobId}/${params.fileName}`;
+      return Bun.file(filePath);
     },
   )
   .onError(({ code, error, request }) => {

src/pages/register.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ConvertX | Register</title>
-  <link rel="stylesheet" href="pico.lime.min.css">
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <header class="container-fluid">
-    <nav>
-      <ul>
-        <li><a href="/">ConvertX</a></strong></li>
-      </ul>
-      <ul>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Services</a></li>
-        <li><button class="secondary">Products</button></li>
-      </ul>
-    </nav>
-  </header>
-
-  <main class="container-fluid">
-    <form method="post">
-      <input type="email" name="email" placeholder="Email" required>
-      <input type="password" name="password" placeholder="Password" required>
-      <input type="submit" value="Register">
-    </form>
-  </main>
-
-</body>
-
-</html>

src/public/script.js

@@ -1,83 +1,107 @@
 // Select the file input element
 const fileInput = document.querySelector('input[type="file"]');
 const fileNames = [];
+let fileType;
 
+const selectElem = document.querySelector("select[name='convert_to']");
 
 // Add a 'change' event listener to the file input element
 fileInput.addEventListener("change", (e) => {
-	console.log(e.target.files);
-	// Get the selected files from the event target
-	const files = e.target.files;
+  console.log(e.target.files);
+  // Get the selected files from the event target
+  const files = e.target.files;
 
-	// Select the file-list table
-	const fileList = document.querySelector("#file-list");
+  // Select the file-list table
+  const fileList = document.querySelector("#file-list");
 
-	// Loop through the selected files
-	for (const file of files) {
-		// Create a new table row for each file
-		const row = document.createElement("tr");
-		row.innerHTML = `
+  // Loop through the selected files
+  for (const file of files) {
+    // Create a new table row for each file
+    const row = document.createElement("tr");
+    row.innerHTML = `
       <td>${file.name}</td>
       <td>${(file.size / 1024 / 1024).toFixed(2)} MB</td>
       <td><button class="secondary" onclick="deleteRow(this)">x</button></td>
     `;
 
-		// Append the row to the file-list table
-		fileList.appendChild(row);
+    if (!fileType) {
+      fileType = file.name.split(".").pop();
+      console.log(file.type);
+      fileInput.setAttribute("accept", `.${fileType}`);
 
-		// Append the file to the hidden input
-		fileNames.push(file.name);
-	}
+      const title = document.querySelector("h1");
+      title.textContent = `Convert .${fileType}`;
 
-	uploadFiles(files);
+      fetch("/conversions", {
+        method: "POST",
+        body: JSON.stringify({ fileType: fileType }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((res) => res.text()) // Convert the response to text
+        .then((html) => {
+          console.log(html);
+          selectElem.outerHTML = html; // Set the HTML
+        })
+        .catch((err) => console.log(err));
+    }
+
+    // Append the row to the file-list table
+    fileList.appendChild(row);
+
+    // Append the file to the hidden input
+    fileNames.push(file.name);
+  }
+
+  uploadFiles(files);
 });
 
 // Add a onclick for the delete button
 const deleteRow = (target) => {
-	const filename = target.parentElement.parentElement.children[0].textContent;
-	const row = target.parentElement.parentElement;
-	row.remove();
+  const filename = target.parentElement.parentElement.children[0].textContent;
+  const row = target.parentElement.parentElement;
+  row.remove();
 
-	// remove from fileNames
-	const index = fileNames.indexOf(filename);
-	fileNames.splice(index, 1);
+  // remove from fileNames
+  const index = fileNames.indexOf(filename);
+  fileNames.splice(index, 1);
 
-	fetch("/delete", {
-		method: "POST",
-		body: JSON.stringify({ filename: filename }),
-		headers: {
-			"Content-Type": "application/json",
-		},
-	})
-		.then((res) => res.json())
-		.then((data) => {
-			console.log(data);
-		})
-		.catch((err) => console.log(err));
+  fetch("/delete", {
+    method: "POST",
+    body: JSON.stringify({ filename: filename }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      console.log(data);
+    })
+    .catch((err) => console.log(err));
 };
 
 const uploadFiles = (files) => {
-	const formData = new FormData();
+  const formData = new FormData();
 
-	for (const file of files) {
-		formData.append("file", file, file.name);
-	}
+  for (const file of files) {
+    formData.append("file", file, file.name);
+  }
 
-	fetch("/upload", {
-		method: "POST",
-		body: formData,
-	})
-		.then((res) => res.json())
-		.then((data) => {
-			console.log(data);
-		})
-		.catch((err) => console.log(err));
+  fetch("/upload", {
+    method: "POST",
+    body: formData,
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      console.log(data);
+    })
+    .catch((err) => console.log(err));
 };
 
-
 const formConvert = document.querySelector("form[action='/convert']");
 
 formConvert.addEventListener("submit", (e) => {
-	const hiddenInput = document.querySelector("input[name='file_names']");
-	hiddenInput.value = JSON.stringify(fileNames);
-});
+  const hiddenInput = document.querySelector("input[name='file_names']");
+  hiddenInput.value = JSON.stringify(fileNames);
+});

tsconfig.json

@@ -21,7 +21,7 @@
       "bun-types" // add Bun global
     ],
     // non bun init
-    // "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
+    "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
     "noUncheckedIndexedAccess": true,
     // "noUnusedLocals": true,
     // "noUnusedParameters": true,