feat(project): migrate to TypeScript

ckt1031 · Oct 9, 2024 · c37003b · c37003b
1 parent f941eb4
commit c37003b
Show file tree

Hide file tree

Showing 19 changed files with 264 additions and 226 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -26,6 +26,6 @@ jobs:
       - name: Build and Publish head Docker image
         uses: VaultVulp/gp-docker-action@1.6.0
         with:
-            github-token: ${{ secrets.GITHUB_TOKEN }}
-            image-name: discord-captcha-site
-            image-tag: ${{ github.ref_name }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          image-name: discord-captcha-bot
+          image-tag: ${{ github.ref_name }}
diff --git a/.gitignore b/.gitignore
@@ -17,5 +17,4 @@ replit.nix
 .env.test.local
 .env.production.local
 /cache/
-package-lock.json
-bun.lockb
+dist
diff --git a/Dockerfile b/Dockerfile
@@ -1,11 +1,26 @@
-FROM node:lts-alpine
+FROM node:lts-alpine AS build
 
 WORKDIR /app
 
+COPY package.json package-lock.json ./
+
+RUN npm ci
+
 COPY . .
 
-RUN npm install --omit=dev
+RUN npm run build
+
+FROM node:lts-alpine AS production
+
+WORKDIR /app
+
+COPY --from=build /app/package.json /app/package-lock.json ./
+
+RUN npm ci --omit=dev
 
-EXPOSE ${PORT}
+# COPY assets and html
+COPY --from=build /app/assets ./assets
+COPY --from=build /app/html ./html
+COPY --from=build /app/dist ./dist
 
-CMD ["npm", "start"]
+CMD ["node", "dist/index.js"]
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ A powerful, advanced captcha verification system for new members in a Discord se
 ## Docker setup
 
 If you want to run this application without installing Node.js or other tools, you can use Docker to run it. Usage:
+
 ```
 docker run \
 -e VERIFIED_ROLE_ID=x \
@@ -34,13 +35,13 @@ docker run \
 -e CALLBACK_URL=x \
 -e CLIENT_SECRET=x \
 -e TOKEN=x \
-ghcr.io/ckt1031/discord-captcha-site
+ghcr.io/ckt1031/discord-captcha-bot
 ```
 
 ## Installation
 
 1. Clone the repository
-2. Install the dependencies with `npm install` or `yarn`
+2. Install the dependencies with `npm install`
 
 ## Environment Variables
 
@@ -76,15 +77,14 @@ ghcr.io/ckt1031/discord-captcha-site
 6. The user will have to complete the captcha
 7. After the user completes the captcha, they will be given the `Verified` role and notified in the DMs
 
-## Production Deployment
-
-1. Install [PM2](https://pm2.keymetrics.io) with `npm install pm2 -g` or `yarn global add pm2`
-2. Start the server with `pm2 start ecosystem.config.js`
-3. Run command `pm2 start --max-memory-restart 300M --attach npm -- run start`
-4. (Optional) Run command `pm2 startup` to enable startup on boot
-
 # Screenshots
 
 ## Captcha Verification Page
 
-![Captcha Verification Page](./screenshots/verify-page.png)
+Light Mode:
+
+![Captcha Verification Page](https://imgur.com/VnCbk5V.png)
+
+Dark Mode:
+
+![Captcha Verification Page (Dark)](https://imgur.com/ory13FX.png)
diff --git a/assets/style.css b/assets/style.css
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,10 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import ts_eslint from 'typescript-eslint';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts}'] },
+  { languageOptions: { globals: globals.node } },
+  pluginJs.configs.recommended,
+  ...ts_eslint.configs.recommended,
+];
diff --git a/html/captcha.html b/html/captcha.html
@@ -1,37 +1,50 @@
-<html>
+<html lang="en">
   <head>
     <title>Verification</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
     <script src="<%= captcha_provider_script %>" async defer></script>
-    <link rel="stylesheet" href="../style.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        // Use system dark mode
+        darkMode: 'media',
+      };
+    </script>
   </head>
 
-  <body>
-    <div class="main">
-      <h1>Verification</h1>
-      <h4>
-        Please solve the <%= captcha_provider %> following below to make sure you are not a
-        robot.
+  <body class="dark:bg-black">
+    <div class="h-screen flex flex-col items-center p-3">
+      <h1 class="mt-5 text-3xl font-bold dark:text-white">Verification</h1>
+      <h4 class="text-xl text-gray-600 dark:text-gray-400">
+        Please solve the <%= captcha_provider %> following below to make sure
+        you are not a robot.
       </h4>
-      <form action="/verify/solve" method="POST" id="captcha_verification">
-        <center>
-          <div
-            class="g-recaptcha h-captcha cf-turnstile"
-            data-sitekey="<%= captcha_sitekey %>"
-            data-callback="onPassed"
-            data-expired-callback="onExpired"></div>
-        </center>
+      <form
+        action="/verify/solve"
+        method="POST"
+        id="captcha_verification"
+        class="mt-5">
+        <div
+          class="g-recaptcha h-captcha cf-turnstile"
+          data-sitekey="<%= captcha_sitekey %>"
+          data-callback="onPassed"
+          data-expired-callback="onExpired"></div>
       </form>
-    </div>
-    <div class="footer">
-      <a href="../verify/logout">Logout</a>
+      <div class="mt-5">
+        <a
+          href="../verify/logout"
+          class="text-blue-500 dark:text-blue-400 hover:underline">
+          Logout
+        </a>
+      </div>
     </div>
     <script>
       function onPassed() {
         document.getElementById('captcha_verification').submit();
       }
+
       function onExpired() {
         location.reload();
       }

diff --git a/html/error.html b/html/error.html
@@ -1,21 +1,25 @@
-<html>
+<html lang="en">
   <head>
-    <title>Error Occured!</title>
+    <title>Error Occurred!</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-    <link rel="stylesheet" href="../style.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        // Use system dark mode
+        darkMode: 'media',
+      };
+    </script>
   </head>
 
-  <body>
-    <div class="error_success">
-      <center>
-        <img
-          src="../cross.png"
-          alt="Verified"
-          style="width: 100px; height: 100px" />
-        <h1><%= messageText %></h1>
-      </center>
+  <body class="dark:bg-black">
+    <div class="h-screen flex flex-col justify-center items-center">
+      <img
+        src="../cross.png"
+        alt="Verified"
+        class="w-[100px] h-[100px] mb-10" />
+      <h1 class="text-3xl font-bold text-red-500"><%= messageText %></h1>
     </div>
   </body>
 </html>
diff --git a/html/success.html b/html/success.html
@@ -1,21 +1,25 @@
-<html>
+<html lang="en">
   <head>
     <title>Success!</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <link rel="stylesheet" href="../style.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        // Use system dark mode
+        darkMode: 'media',
+      };
+    </script>
   </head>
 
-  <body>
-    <div class="error_success">
-      <center>
-        <img
-          src="../tick-label.png"
-          alt="Success"
-          style="width: 100px; height: 100px" />
-        <h1><%= messageText %></h1>
-      </center>
+  <body class="dark:bg-black">
+    <div class="h-screen flex flex-col justify-center items-center">
+      <img
+        src="../tick-label.png"
+        alt="Success"
+        class="w-[100px] h-[100px] mb-10" />
+      <h1 class="text-3xl font-bold text-green-500"><%= messageText %></h1>
     </div>
   </body>
 </html>
diff --git a/html/verified.html b/html/verified.html
@@ -1,21 +1,25 @@
-<html>
+<html lang="en">
   <head>
     <title>Verified!</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <link rel="stylesheet" href="../style.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        // Use system dark mode
+        darkMode: 'media',
+      };
+    </script>
   </head>
 
-  <body>
-    <div class="verified">
-      <center>
-        <img
-          src="../tick-label.png"
-          alt="Verified"
-          style="width: 100px; height: 100px" />
-        <h1>Verified</h1>
-      </center>
+  <body class="dark:bg-black">
+    <div class="h-screen flex flex-col justify-center items-center">
+      <img
+        src="../tick-label.png"
+        alt="Verified"
+        class="w-[100px] h-[100px] mb-10" />
+      <h1 class="text-3xl font-bold text-green-500"><%= messageText %></h1>
     </div>
   </body>
 </html>