i skibidi a few toilets

2026-03-04 06:50:35 +00:00 · 2026-01-28 15:46:44 +05:00
parent 327dadff22
commit be7239fde7
7 changed files with 363 additions and 56 deletions
--- a/frontend-react/index.html
+++ b/frontend-react/index.html
@@ -10,7 +10,7 @@
      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      rel="stylesheet"
    />
-    <title>frontend-react</title>
+    <title>MvDevsUnion</title>
  </head>
  <body>
    <div id="root"></div>
--- a/frontend-react/src/lib/api.ts
+++ b/frontend-react/src/lib/api.ts
@@ -3,6 +3,26 @@ import type { PetitionDetails, SignatureSubmission } from "@/types/petition";
 // API base URL - empty for same-origin requests through Vite proxy
 const API_BASE_URL = "";

+export interface SimplePetition {
+  id: string;
+  slug: string;
+  title: string;
+  title_Dhiv: string;
+  signatureCount: number;
+}
+
+export async function fetchLatestPetitions(): Promise<SimplePetition[]> {
+  const response = await fetch(
+    `${API_BASE_URL}/api/Petition/get-latest-petitions`,
+  );
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return response.json();
+}
+
 export async function fetchPetition(
  petitionId: string,
 ): Promise<PetitionDetails> {
@@ -40,6 +60,7 @@ export interface PetitionFormData {
  authorNid: string;
  petitionBodyDhiv: string;
  petitionBodyEng: string;
+  turnstileToken: string;
 }

 export interface SubmitPetitionResponse {
@@ -63,9 +84,10 @@ export async function submitPetition(
  formData.append("AuthorNid", data.authorNid);
  formData.append("PetitionBodyDhiv", data.petitionBodyDhiv);
  formData.append("PetitionBodyEng", data.petitionBodyEng);
+  formData.append("turnstileToken", data.turnstileToken);

  const response = await fetch(
-    `${API_BASE_URL}/api/Debug/upload-petition-form`,
+    `${API_BASE_URL}/api/Petition/upload-petition-form`,
    {
      method: "POST",
      body: formData,
--- a/frontend-react/src/pages/CreatePetitionPage.tsx
+++ b/frontend-react/src/pages/CreatePetitionPage.tsx
@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { submitPetition, type PetitionFormData } from "@/lib/api";
+import { Turnstile, type TurnstileInstance } from "@marsidev/react-turnstile";
 import {
  FileText,
  Send,
@@ -104,8 +105,10 @@ export function CreatePetitionPage() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<{ slug: string } | null>(null);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+  const turnstileRef = useRef<TurnstileInstance>(null);

-  const [formData, setFormData] = useState<PetitionFormData>({
+  const [formData, setFormData] = useState<Omit<PetitionFormData, "turnstileToken">>({
    slug: "",
    nameDhiv: "",
    nameEng: "",
@@ -142,14 +145,27 @@ export function CreatePetitionPage() {

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
-    setIsSubmitting(true);
    setError(null);

+    // Validate turnstile token
+    if (!turnstileToken && !import.meta.env.DEV) {
+      setError("Please complete the verification challenge.");
+      return;
+    }
+
+    setIsSubmitting(true);
+
    try {
-      const result = await submitPetition(formData);
+      const result = await submitPetition({
+        ...formData,
+        turnstileToken: turnstileToken || "DEV_BYPASS_TOKEN",
+      });
      setSuccess({ slug: result.slug });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to submit petition");
+      // Reset turnstile on error
+      turnstileRef.current?.reset();
+      setTurnstileToken(null);
    } finally {
      setIsSubmitting(false);
    }
@@ -181,6 +197,8 @@ export function CreatePetitionPage() {
              <button
                onClick={() => {
                  setSuccess(null);
+                  setTurnstileToken(null);
+                  turnstileRef.current?.reset();
                  setFormData({
                    slug: "",
                    nameDhiv: "",
@@ -371,24 +389,33 @@ export function CreatePetitionPage() {
            />
          </div>

-          {/* Submit Button */}
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-3 px-6 rounded-lg transition-colors"
-          >
-            {isSubmitting ? (
-              <>
-                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                Creating...
-              </>
-            ) : (
-              <>
-                <Send className="w-5 h-5" />
-                Create Petition
-              </>
-            )}
-          </button>
+          {/* Turnstile and Submit */}
+          <div className="flex flex-col items-center gap-4">
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={import.meta.env.VITE_TURNSTILE_SITEKEY}
+              onSuccess={setTurnstileToken}
+              onError={() => setTurnstileToken(null)}
+              onExpire={() => setTurnstileToken(null)}
+            />
+            <button
+              type="submit"
+              disabled={isSubmitting || (!turnstileToken && !import.meta.env.DEV)}
+              className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-3 px-6 rounded-lg transition-colors"
+            >
+              {isSubmitting ? (
+                <>
+                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                <>
+                  <Send className="w-5 h-5" />
+                  Create Petition
+                </>
+              )}
+            </button>
+          </div>
        </form>
      </div>

--- a/frontend-react/src/pages/HomePage.tsx
+++ b/frontend-react/src/pages/HomePage.tsx
@@ -1,48 +1,112 @@
+import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { FileText, PenLine } from "lucide-react";
+import { fetchLatestPetitions, type SimplePetition } from "@/lib/api";
+import { FileText, PenLine, Users, ChevronRight, Loader2 } from "lucide-react";

 export function HomePage() {
+  const [petitions, setPetitions] = useState<SimplePetition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadPetitions() {
+      try {
+        const data = await fetchLatestPetitions();
+        setPetitions(data);
+      } catch (err) {
+        console.warn("Failed to fetch petitions:", err);
+        setError("Could not load petitions");
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadPetitions();
+  }, []);
+
  return (
-    <div className="min-h-screen bg-slate-50/50 p-4 md:p-8 font-sans">
-      <div className="max-w-3xl mx-auto bg-white rounded-xl shadow-sm border border-slate-100 p-6 md:p-10 animate-in fade-in duration-500 slide-in-from-bottom-4">
-        <div className="text-center space-y-6">
-          <div className="flex justify-center">
-            <div className="bg-blue-100 p-4 rounded-full">
-              <FileText className="w-12 h-12 text-blue-600" />
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 font-sans">
+      {/* Hero Section */}
+      <div className="bg-white border-b border-slate-100">
+        <div className="max-w-4xl mx-auto px-4 py-12 md:py-20">
+          <div className="text-center space-y-6">
+            <div className="flex justify-center">
+              <div className="bg-blue-100 p-4 rounded-full">
+                <FileText className="w-12 h-12 text-blue-600" />
+              </div>
            </div>
-          </div>

-          <h1 className="text-3xl md:text-4xl font-bold text-slate-900">
-            Petition.com.mv
-          </h1>
+            <h1 className="text-3xl md:text-5xl font-bold text-slate-900">
+              Bringing Real Change
+            </h1>

-          <p className="text-lg text-slate-600 max-w-xl mx-auto">
-            A platform for creating and signing petitions. Make your voice
-            heard on issues that matter to you and your community.
-          </p>
-
-          <div className="bg-slate-50 rounded-lg p-6 mt-8">
-            <h2 className="text-lg font-semibold text-slate-800 mb-2">
-              Looking for a petition?
-            </h2>
-            <p className="text-slate-600">
-              Use the direct link shared with you to view and sign a petition.
+            <p className="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto">
+              A platform for creating and signing petitions. With 0 costs to the tax payer and no Efass. Make your voice
+              heard on issues that matter to you and your community.
            </p>
-          </div>

-          <div className="pt-4">
-            <Link
-              to="/CreatePetition"
-              className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors"
-            >
-              <PenLine className="w-5 h-5" />
-              Create a Petition
-            </Link>
+            <div className="pt-4">
+              <Link
+                to="/CreatePetition"
+                className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg transition-colors shadow-md hover:shadow-lg"
+              >
+                <PenLine className="w-5 h-5" />
+                Create a Petition
+              </Link>
+            </div>
          </div>
        </div>
      </div>

-      <footer className="text-center text-slate-500 text-sm mt-6 pb-4">
+      {/* Latest Petitions Section */}
+      <div className="max-w-4xl mx-auto px-4 py-12">
+        <h2 className="text-2xl font-bold text-slate-900 mb-6">
+          Latest Petitions
+        </h2>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="w-8 h-8 text-blue-600 animate-spin" />
+          </div>
+        ) : error ? (
+          <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
+            <p className="text-slate-500">{error}</p>
+          </div>
+        ) : petitions.length === 0 ? (
+          <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
+            <p className="text-slate-500">No petitions yet. Be the first to create one!</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {petitions.map((petition) => (
+              <Link
+                key={petition.id}
+                to={`/Petition/${petition.slug}`}
+                className="block bg-white rounded-xl border border-slate-200 p-5 hover:border-blue-300 hover:shadow-md transition-all group"
+              >
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-semibold text-slate-900 group-hover:text-blue-600 transition-colors truncate">
+                      {petition.title}
+                    </h3>
+                    <p className="text-sm text-slate-500 mt-1 truncate dhivehi" dir="rtl">
+                      {petition.title_Dhiv}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-4 flex-shrink-0">
+                    <div className="flex items-center gap-1.5 text-slate-600">
+                      <Users className="w-4 h-4" />
+                      <span className="font-medium">{petition.signatureCount}</span>
+                    </div>
+                    <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-blue-600 transition-colors" />
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <footer className="text-center text-slate-500 text-sm py-8">
        Powered by Mv Devs Union
      </footer>
    </div>