added Password Protect input

.github/workflows/release.yml

@@ -8,8 +8,6 @@ on:
 jobs:
   docker:
     runs-on: ubuntu-latest
-    needs:
-      - build
     steps:
       -
         name: "⛏️ Set up QEMU"
@@ -29,27 +27,8 @@ jobs:
         with:
           push: true
           tags: flowko1/website-shot:latest
-
-  build:
-    name: Build application
-    runs-on: ubuntu-latest
-    steps:
-      - name: "☁️ checkout repository"
-        uses: actions/checkout@v3
-
-      - name: "🔧 setup node"
-        uses: actions/[email protected]
-        with:
-          node-version: 16
-
-      - name: "🔧 install npm@latest"
-        run: npm i -g npm@latest
-
-      - name: "📦 install dependencies"
-        uses: bahmutov/npm-install@v1
-
-      - name: "🚀 static app"
-        run: npm run build
+          cache-from: type=gha, scope=${{ github.workflow }}
+          cache-to: type=gha, scope=${{ github.workflow }}
 
   release:
     environment:
@@ -58,7 +37,6 @@ jobs:
     name: Semantic release
     needs:
       - docker
-      - build
     runs-on: ubuntu-latest
     steps:
       - name: "☁️ checkout repository"

Dockerfile

@@ -18,7 +18,9 @@ RUN npm run build
 
 EXPOSE 3000
 
-ENV NUXT_HOST=0.0.0.0
-ENV NUXT_PORT=3000
+ENV NUXT_HOST 0.0.0.0
+ENV NUXT_PORT 3000
+ENV PASSWORD_PROTECT 0
+ENV PASSWORD null
 
 CMD [ "npm", "start" ]

README.md

@@ -40,6 +40,13 @@ Website Shot is an open source cross-platform screenshot app, powered by a nodej
 ```bash
 docker pull flowko1/website-shot
 docker run -it -d -p 3000:3000 flowko1/website-shot
+
+# to enable password protection | to disabled it set PASSWORD_PROTECT to 0
+# default password is admin
+docker run -it -d -p 3000:3000 -e PASSWORD_PROTECT=1 -e PASSWORD=yourpassword flowko1/website-shot
+
+# you'll notice a password field on the homepage, make sure to add the password there as well
+
 ```
 
 # Build Setup

jsconfig.json

@@ -6,7 +6,11 @@
       "@/*": ["./*"],
       "~~/*": ["./*"],
       "@@/*": ["./*"]
-    }
+    },
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"],
+  "vueCompilerOptions": {
+    "experimentalDisableTemplateSupport": true
   },
-  "exclude": ["node_modules", ".nuxt", "dist"]
 }

nuxt.config.js

@@ -53,6 +53,10 @@ export default {
     "@nuxtjs/axios",
   ],
 
+  publicRuntimeConfig: {
+    passwordEnabled: Boolean(Number(process.env.PASSWORD_PROTECT || 0)),
+  },
+
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
     // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
@@ -78,8 +82,4 @@ export default {
     prefetch: true,
     preconnect: true,
   },
-
-  publicRuntimeConfig: {
-    runningHeroku: process.env.RUNNING_HEROKU,
-  },
 };

pages/index.vue

@@ -3,7 +3,17 @@
     <div class="flex flex-col bg-[#FAFBFB] rounded-md shadow-lg">
       <input
         v-if="selectedType != 'multiple-imgs'"
-        class="w-full p-3 transition-all ease-linear delay-75 border-2 rounded-md outline-none  focus:outline-none focus:border-primary-200 focus:border-dashed"
+        class="
+          w-full
+          p-3
+          transition-all
+          ease-linear
+          delay-75
+          border-2
+          rounded-md
+          outline-none
+          focus:outline-none focus:border-primary-200 focus:border-dashed
+        "
         @keyup.enter="generateScreenshot"
         placeholder="https://github.com/flowko..."
         type="url"
@@ -12,7 +22,18 @@
 
       <div class="flex items-center justify-center my-4 space-x-10">
         <div
-          class="flex flex-col items-center justify-center w-32 h-32 text-center bg-gray-200 cursor-pointer  rounded-2xl hover:bg-gray-300"
+          class="
+            flex flex-col
+            items-center
+            justify-center
+            w-32
+            h-32
+            text-center
+            bg-gray-200
+            cursor-pointer
+            rounded-2xl
+            hover:bg-gray-300
+          "
           :class="{
             'border-primary-200 border-dashed border-2 shadow-md ':
               selectedType == type.value,
@@ -41,7 +62,17 @@
           :key="index"
         >
           <input
-            class="w-full p-3 transition-all ease-linear delay-75 border-2 rounded-md outline-none  focus:outline-none focus:border-primary-200 focus:border-dashed"
+            class="
+              w-full
+              p-3
+              transition-all
+              ease-linear
+              delay-75
+              border-2
+              rounded-md
+              outline-none
+              focus:outline-none focus:border-primary-200 focus:border-dashed
+            "
             :placeholder="`URL - ${index}`"
             type="url"
             v-model="url.url"
@@ -393,6 +424,14 @@
             </b-field>
           </div>
         </div>
+        <div class="s-row">
+          <div class="s-grid-item" v-if="$config.passwordEnabled">
+            <label class="label">Password: </label>
+            <div class="columns">
+              <b-input class="column" v-model="password"></b-input>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div class="s-grid" v-if="loadStyleScript">
@@ -679,6 +718,7 @@ export default {
         "Legal",
       ],
       disableBtn: true,
+      password: null,
     };
   },
   mounted() {},
@@ -704,6 +744,7 @@ export default {
             size: [this.params.size],
             type: selectedType,
             mimeType,
+            password: this.password,
           })
           .then(({ base64, filename, success }) => {
             const blob = new window.Blob([this.convertBase64ToBlob(base64)], {

server-middleware/website-shot.js

@@ -13,6 +13,21 @@ app.use(bodyParser.urlencoded({ extended: true }));
 
 app.post("/screenshot", async (req, res) => {
   const params = req.body;
+  const password = params.password;
+
+  if (
+    process.env.PASSWORD_PROTECT &&
+    Boolean(Number(process.env.PASSWORD_PROTECT))
+  ) {
+    if (!password || password !== process.env.PASSWORD) {
+      res.status(401).send({
+        error: "Unauthorized",
+        success: false,
+      });
+      return;
+    }
+  }
+
   const url = params.url ? params.url.toString().trim() : null;
   const urls = params.urls
     .filter((url) => {
@@ -92,9 +107,7 @@ app.post("/screenshot", async (req, res) => {
     },
   };
 
-  if (process.env.RUNNING_HEROKU == null) {
-    options.launchOptions.executablePath = "/usr/bin/chromium-browser";
-  }
+  options.launchOptions.executablePath = "/usr/bin/chromium-browser";
 
   const mimeType = params.mimeType;