Merge pull request #681 from AkshithaReddy1899/main

Added friendly-captcha to contact, sign-in, sign-up pages

frontend/components/FriendlyCaptcha.vue

@@ -1,17 +1,12 @@
 <template>
-  <button
-    class="flex items-center w-fit justify-center 2xl:space-x-10 xl:space-x-8 lg:space-x-4 md:space-x-4 lg:col-span-5 md:col-span-2 px-3 rounded border border-light-section-div dark:border-dark-section-div text-sm h-[48px] md:h-[40px] elem-shadow-sm"
-    type="button"
-    aria-label="test"
-  >
-    <span class="flex items-center space-x-4 whitespace-nowrap">
-      <Icon name="bi:shield-fill-check" size="28px" />
-      <span class="font-bold text-[18px] hidden lg:inline-block">{{
-        $t("components.friendly-captcha.i-am-human")
-      }}</span>
-    </span>
-    <span class="text-[12px] hidden lg:inline-block truncate">{{
-      $t("components.friendly-captcha.label")
-    }}</span>
-  </button>
+  <vue-friendly-captcha
+    @done="verifyCaptcha"
+    sitekey="<sitekey>"
+    :dark="($colorMode.preference = 'dark')"
+    language="en"
+  />
 </template>
+
+<script setup>
+import VueFriendlyCaptcha from "@somushq/vue3-friendly-captcha";
+</script>

frontend/package.json

@@ -38,6 +38,7 @@
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/plausible": "^0.2.1",
     "@popperjs/core": "^2.11.8",
+    "@somushq/vue3-friendly-captcha": "^1.0.2",
     "@types/geojson": "^7946.0.13",
     "axios": "^1.6.0",
     "dotenv": "^16.3.1",

frontend/pages/help/contact.vue

@@ -199,6 +199,9 @@
                 spellcheck="false"
               ></textarea>
             </div>
+            <div class="flex flex-col space-y-2">
+              <FriendlyCaptcha />
+            </div>
             <button
               class="flex items-center px-4 py-2 font-semibold text-center border select-none rounded-md xl:rounded-lg focus-brand w-fit elem-shadow-sm text-light-text border-light-text dark:text-dark-cta-orange dark:border-dark-cta-orange fill-light-text dark:fill-dark-cta-orange bg-light-cta-orange dark:bg-dark-cta-orange/10"
               :class="{