From 5f0140c6dfb9e1d92349029a611dab34865b228b Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Thu, 20 Mar 2025 23:31:40 +0530
Subject: [PATCH] Create form abuse page (#731)

* Create form abuse page

* Update iframe height in report-abuse.vue for improved user experience

- Increased the minimum height of the iframe from 600px to 1000px to enhance visibility and usability of the abuse report form. This change aims to provide a better user experience by ensuring that the entire form is more easily accessible without the need for scrolling.

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/pages/OpenFormFooter.vue |  7 +++++
 client/pages/report-abuse.vue              | 36 ++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 client/pages/report-abuse.vue

diff --git a/client/components/pages/OpenFormFooter.vue b/client/components/pages/OpenFormFooter.vue
index f9446d26..6f47a834 100644
--- a/client/components/pages/OpenFormFooter.vue
+++ b/client/components/pages/OpenFormFooter.vue
@@ -63,6 +63,13 @@
             >
               Terms & Conditions
             </router-link>
+
+            <router-link
+              :to="{ name: 'report-abuse' }"
+              class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+            >
+              Report Abuse
+            </router-link>
           </template>
         </div>
       </div>
diff --git a/client/pages/report-abuse.vue b/client/pages/report-abuse.vue
new file mode 100644
index 00000000..43b6e3b4
--- /dev/null
+++ b/client/pages/report-abuse.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div
+      class="h-screen w-screen mt-4"
+      style="height: 100%;"
+    >
+      <iframe
+        id="opnform-form-abuse-report-wnociq"
+        style="border:none;width:100%;min-height: 1000px;"
+        src="https://opnform.com/forms/opnform-form-abuse-report-wnociq"
+      />
+    </div>
+    <open-form-footer />
+  </div>
+</template>
+
+<script setup>
+useOpnSeoMeta({
+  title: "Report Abuse",
+})
+definePageMeta({
+  middleware: ["self-hosted"]
+})
+defineRouteRules({
+  swr: 3600,
+})
+
+useHead({
+  script: [
+    {
+      src: 'https://opnform.com/widgets/iframe.min.js',
+      onload: "initEmbed('opnform-form-abuse-report-wnociq')"
+    }
+  ]
+})
+</script>