feat(feedback): added turnstile validation and character requirements (…

…#567)

.env

@@ -8,4 +8,5 @@ CLOUDFLARE_KV_SHORTLINKS_NAMESPACE=4f141ed7ad0b4113b8e61a53710b653f
 CLOUDFLARE_WORKER_ACCOUNT_ID=50396718bfac13dffb7727aad0e82150
 NEXT_PUBLIC_ALGOLIA_APP_ID=NT48R1WDTS
 NEXT_PUBLIC_ALGOLIA_SEARCH_KEY=6dfe4655a78904f8b01432e7db3b8d64
-NTHUMODS_OCR_BASE_URL=https://ocr.nthumods.com
+NTHUMODS_OCR_BASE_URL=https://ocr.nthumods.com
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=0x4AAAAAAAxDEAcqGfHzH5kX

.env.development

@@ -1 +1,2 @@
-NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_URL=http://localhost:3000
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=3x00000000000000000000FF

.env.local.example

@@ -12,4 +12,5 @@ DONER_STUDENTID=YOUR_DONER_STUDENTID
 DONER_PASSWORD=YOUR_DONER_PASSWORD
 FIREBASE_SERVICE_ACCOUNT=YOUR_FIREBASE_SERVICE_ACCOUNT
 CRON_SECRET=YOUR_CRON_SECRET
-ALGOLIA_API_KEY=YOUR_ALGOLIA_INSTANCE
+ALGOLIA_API_KEY=YOUR_ALGOLIA_INSTANCE
+TURNSTILE_SECRET_KEY=1x0000000000000000000000000000000AA

package.json

@@ -127,6 +127,7 @@
     "react-resizable-panels": "^2.0.11",
     "react-swipeable": "^7.0.1",
     "react-transition-group": "^4.4.5",
+    "react-turnstile": "^1.1.4",
     "recharts": "^2.12.7",
     "rxdb": "^15.11.1",
     "rxdb-hooks": "^5.0.2",

src/components/Forms/GenericIssueFormDialog.action.tsx

@@ -2,12 +2,44 @@
 import { createIssue } from "@/lib/github";
 
 export const genericIssueFormAction = async (form: FormData) => {
+  const url = "https://challenges.cloudflare.com/turnstile/v0/siteverify";
+  const token = form.get("token") as string;
+
+  const formData = new FormData();
+  formData.append("secret", process.env.TURNSTILE_SECRET_KEY!);
+  formData.append("response", token);
+
+  try {
+    const result = await fetch(url, {
+      body: formData,
+      method: "POST",
+    });
+    const outcome = await result.json();
+    if (outcome.success) {
+      return processForm(form);
+    }
+  } catch (err) {
+    return {
+      error: {
+        message: "Error verifying token",
+      },
+    };
+  }
+
+  return {
+    error: {
+      message: "Error verifying token",
+    },
+  };
+};
+
+const processForm = async (form: FormData) => {
   try {
     const title = form.get("title");
     const description = form.get("description");
     // verify that title and description are not empty and is a string
-    if (typeof title !== "string" || title.length === 0) {
-      throw new Error("Title is required");
+    if (typeof title !== "string" || title.length === 0 || title.length < 7) {
+      throw new Error("Title is required and should be more than 7 characters");
     }
     if (typeof description !== "string" || description.length === 0) {
       throw new Error("Description is required");

src/components/Forms/GenericIssueFormDialog.tsx

@@ -20,6 +20,7 @@ import { useQuery } from "@tanstack/react-query";
 import { listIssuesWithTag } from "@/lib/github";
 import { ScrollArea } from "../ui/scroll-area";
 import { event } from "@/lib/gtag";
+import Turnstile from "react-turnstile";
 
 const placeholderIssueDescription = `   **Describe the issue**
 A clear and concise description of what the issue is.
@@ -38,6 +39,7 @@ A clear and concise description of what you expected to happen.
 const GenericIssueForm = () => {
   const { pending } = useFormStatus();
   const [open, setOpen] = useState(false);
+  const [token, setToken] = useState<string | null>(null);
 
   useEffect(() => {
     if (!open) return;
@@ -49,6 +51,16 @@ const GenericIssueForm = () => {
   }, [open]);
 
   const action = async (form: FormData) => {
+    if (!token) {
+      toast({
+        title: "Error Occured",
+        description: "Please verify you're not a bot",
+      });
+      return;
+    }
+
+    form.append("token", token);
+
     const res = await genericIssueFormAction(form);
     if (res && "error" in res && res.error) {
       console.error(res.error.message);
@@ -128,6 +140,11 @@ const GenericIssueForm = () => {
               </p>
               <p className="text-xs">{"Markdown GFM enabled!"}</p>
             </div>
+            <Turnstile
+              sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!}
+              onVerify={(token) => setToken(token)}
+              size="flexible"
+            />
             <div className="flex flex-row gap-2 justify-end">
               <Button type="submit" disabled={pending}>
                 Submit