Added Captcha on User creation and versioning

.env.local

@@ -13,6 +13,8 @@
 # NEXT_PUBLIC_IMAP_PORT -> Use the IMAP port (ex: 143)
 # NEXT_PUBLIC_SMTP_PORT -> Use the SMTP port (ex: 465)
 
+NEXT_PUBLIC_SITE_KEY="xyz"
+CAPTCHA_KEY="xyz"
 MONGODB_URL="mongodb://127.0.0.1:27017/solun"
 JWT_SECRET_KEY="solunSecretBoomBoomTest"
 MAILSERVER_BASEURL="http://172.17.0.130"

.github/workflows/docker-image.yml

@@ -64,3 +64,45 @@ jobs:
       - name: Restart Node 2
         run: |
           curl -X POST ${{ secrets.WEBHOOK_DOMAIN }}/hooks/restart-app-2
+
+
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+
+      - name: Discord Webhook for Main
+        if: github.ref == 'refs/heads/main'
+        run: |
+          PACKAGE_VERSION=$(node -p "require('./package.json').version")
+          COMMIT_LINK="https://github.com/${{ github.repository }}/commit/${{ github.sha }}"
+          curl -X POST ${{ secrets.DISCORD_WEBHOOK }} \
+          -H "Content-Type: application/json" \
+          -d '{
+            "embeds": [{
+              "title": "New Production Version deployed on auth.solun.pm",
+              "url": "https://auth.solun.pm",
+              "description": "[Changes]('$COMMIT_LINK')",
+              "fields": [
+                { "name": "Version", "value": "'$PACKAGE_VERSION'", "inline": false }
+              ],
+              "color": 255
+            }]
+          }'
+
+      - name: Discord Webhook for Dev
+        if: github.ref == 'refs/heads/dev'
+        run: |
+          PACKAGE_VERSION=$(node -p "require('./package.json').version")
+          COMMIT_LINK="https://github.com/${{ github.repository }}/commit/${{ github.sha }}"
+          curl -X POST ${{ secrets.DISCORD_WEBHOOK }} \
+          -H "Content-Type: application/json" \
+          -d '{
+            "embeds": [{
+              "title": "New Development Version deployed on dev-auth.solun.pm",
+              "url": "https://dev-auth.solun.pm",
+              "description": "[Changes]('$COMMIT_LINK')",
+              "fields": [
+                { "name": "Version", "value": "'$PACKAGE_VERSION'", "inline": false }
+              ],
+              "color": 16753920
+            }]
+          }'

Dockerfile

@@ -7,6 +7,8 @@ COPY . .
 
 RUN npm install
 
+ENV NEXT_PUBLIC_SITE_KEY=
+ENV CAPTCHA_KEY=
 ENV MONGODB_URL=
 ENV JWT_SECRET_KEY=
 ENV MAILSERVER_BASEURL=

app/[...login]/page.tsx

@@ -13,6 +13,8 @@ import { useRouter } from "next/navigation";
 import toast, { Toaster } from "react-hot-toast";
 import { Dialog, Transition } from "@headlessui/react";
 
+const { version } = require("../../package.json");
+
 const LoginPage = ({ params }: { params: { login: string[] } }) => {
   const router = useRouter();
 
@@ -353,6 +355,9 @@ const LoginPage = ({ params }: { params: { login: string[] } }) => {
             </a>
             .
           </p>
+          <p className="text-sm mt-4 text-slate-400">
+            Solun Auth {version}
+          </p>
         </div>
       </div>
     </div>

app/globals.css

@@ -29,3 +29,69 @@ body {
 .align-start {
   align-content: start;
 }
+
+
+/* Captcha */
+
+.frc-captcha * {
+  /* Mostly a CSS reset so existing website styles don't clash */
+  margin: 0;
+  padding: 0;
+  border: 0;
+  text-align: initial;
+  border-radius: px;
+  filter: none !important;
+  transition: none !important;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 1.2;
+  text-decoration: none;
+  background-color: initial;
+  color: #222;
+}
+
+/* Solun theme */
+
+.solun.frc-captcha {
+  color: #fff;
+  background-color: rgb(15 23 42);
+  border-color: rgb(59 130 246);
+}
+
+.solun.frc-captcha * {
+  color: #fff;
+}
+
+.solun.frc-captcha button {
+  background-color: #444;
+}
+
+.solun .frc-icon {
+  fill: rgb(59 130 246);
+  stroke: rgb(59 130 246);
+}
+
+.solun .frc-progress {
+  background-color: #444;
+}
+
+.solun .frc-progress::-webkit-progress-bar {
+  background: #444;
+}
+
+.solun .frc-progress::-webkit-progress-value {
+  background: rgb(59 130 246);
+}
+
+.solun .frc-progress::-moz-progress-bar {
+  background: rgb(59 130 246);
+}
+
+@keyframes frc-fade-in {
+  from {
+      opacity: 0;
+  }
+  to {
+      opacity: 1;
+  }
+}

app/signup/page.tsx

@@ -11,6 +11,9 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/navigation";
 import toast, { Toaster } from "react-hot-toast";
+import { FriendlyCaptcha } from "@/components/captcha";
+
+const { version } = require("../../package.json");
 
 const RegisterPage = () => {
   const router = useRouter();
@@ -29,6 +32,8 @@ const RegisterPage = () => {
   const [status, setStatus] = useState("idle");
   const [exists, setExists] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [disabled, setDisabled] = useState(true)
+  const [solution, setSolution] = useState(null)
 
   useEffect(() => {
     let timer: any;
@@ -107,6 +112,7 @@ const RegisterPage = () => {
           domain: formData.domain,
           password: formData.password,
           confirmPassword: formData.confirmPassword,
+          solution: solution,
         }),
       });
 
@@ -215,10 +221,13 @@ const RegisterPage = () => {
               />
             </div>
           </div>
+          <div className="mb-4 flex justify-center">
+            <FriendlyCaptcha setDisabled={setDisabled} setSolution={setSolution} />
+          </div>
           <button
             type="submit"
             className="bg-blue-500 hover:bg-blue-600 text-white font-bold w-full py-3 rounded transition duration-200 flex justify-center items-center"
-            disabled={!isValidForm() || isSubmitting}
+            disabled={!isValidForm() || isSubmitting || disabled}
           >
             {isSubmitting && (
               <FontAwesomeIcon
@@ -254,6 +263,9 @@ const RegisterPage = () => {
             </a>
             .
           </p>
+          <p className="text-sm mt-4 text-slate-400">
+            Solun Auth {version}
+          </p>
         </div>
       </div>
     </div>

components/captcha.tsx

@@ -0,0 +1,43 @@
+import { WidgetInstance } from 'friendly-challenge'
+import { useEffect, useRef } from 'react'
+import toast from 'react-hot-toast'
+
+export const FriendlyCaptcha = ({ setDisabled, setSolution }: any) => {
+    const container = useRef()
+    const widget = useRef()
+
+    const doneCallback = (solution: any) => {
+      setSolution(solution)
+      setDisabled(false)
+    }
+
+    const errorCallback = (err: any) => {
+      toast.error('Something went wrong')
+    }
+
+    useEffect(() => {
+      if (!widget.current && container.current) {
+        // @ts-ignore
+        widget.current = new WidgetInstance(container.current, {
+          startMode: 'auto',
+          doneCallback: doneCallback,
+          errorCallback: errorCallback,
+        })
+      }
+
+      return () => {
+        // @ts-ignore
+        if (widget.current != undefined) widget.current.reset()
+      }
+    }, [container])
+
+    return (
+      <div
+        {...{/* @ts-ignore */}}
+        ref={container}
+        className="frc-captcha solun"
+        data-start="auto"
+        data-sitekey={process.env.NEXT_PUBLIC_SITE_KEY}
+      />
+    )
+  }

docker-compose.yml

@@ -6,6 +6,8 @@ services:
     ports:
       - 3000:3000
     environment:
+      - NEXT_PUBLIC_SITE_KEY=
+      - CAPTCHA_KEY=
       - MONGODB_URL=
       - JWT_SECRET_KEY=
       - MAILSERVER_BASEURL=