turnstile is working - keep SSL turned of on dev

2026-06-11 11:35:36 +02:00
parent 192143bfb6
commit 5ca62497b1
12 changed files with 245 additions and 79 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -21,10 +21,14 @@
    <meta name="twitter:title" content="Vontor.cz – Creative Tech & Design" />
    <meta name="twitter:description" content="Engineering + design portfolio: backend, frontend, infrastructure, drone and automation." />
    
+    <!-- ADsense -->
+    <meta name="google-adsense-account" content="ca-pub-9041142141778319">
+
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  </head>
  <body>
    <div id="root"></div>
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/frontend/src/components/home/ContactMe/ContactMeForm.tsx
+++ b/frontend/src/components/home/ContactMe/ContactMeForm.tsx
@@ -3,6 +3,7 @@ import styles from "./contact-me.module.css"
 import { LuMousePointerClick } from "react-icons/lu";
 import { publicApi } from "@/api/publicClient";
 import { useTranslation } from "react-i18next";
+import { useTurnstile } from "@/hooks/useTurnstile";

 export default function ContactMeForm() {
  const { t } = useTranslation("home");
@@ -12,21 +13,33 @@ export default function ContactMeForm() {
  const [email, setEmail] = useState("")
  const [message, setMessage] = useState("")
  const [loading, setLoading] = useState(false)
+  const [envelopeFading, setEnvelopeFading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState("")
  const openingRef = useRef<HTMLDivElement>(null)
+  const { containerRef, token: turnstileToken, enabled: turnstileEnabled, reset: resetTurnstile } = useTurnstile()

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
+    if (!turnstileToken) return
    setLoading(true)
    setError("")
    try {
-      await publicApi.post("/api/advertisement/contact-me/", { email, message, hp: "" })
-      setSuccess(true)
+      await publicApi.post("/api/advertisement/contact-me/", { email, message, hp: "", turnstile_token: turnstileToken ?? "" })
      setEmail("")
      setMessage("")
+      // Step 1: slide form into envelope (content drops down behind cover, 1s transition)
+      setContentMoveUp(false)
+      setOpeningBehind(false)
+      // Step 2: close flap after form has slid in
+      setTimeout(() => setOpened(false), 1100)
+      // Step 3: fade out envelope after flap finishes closing
+      setTimeout(() => setEnvelopeFading(true), 2300)
+      // Step 4: show success panel
+      setTimeout(() => setSuccess(true), 2700)
    } catch {
      setError(t("contact.sendError"))
+      resetTurnstile()
    } finally {
      setLoading(false)
    }
@@ -54,73 +67,74 @@ export default function ContactMeForm() {
    }
  }

+  function handleNewMessage() {
+    setSuccess(false)
+    setEnvelopeFading(false)
+    setOpened(true)
+    setContentMoveUp(true)
+    setOpeningBehind(true)
+  }
+
+  if (success) {
+    return (
+      <div className={styles["success-panel"]}>
+        <div style={{ fontSize: "2.5rem" }}>✓</div>
+        <p style={{ color: "var(--c-other)", fontWeight: 700, margin: 0 }}>{t("contact.messageSent")}</p>
+        <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 35%)", fontSize: "0.85rem", margin: 0 }}>
+          {t("contact.replyIn24h")}
+        </p>
+        <button
+          onClick={handleNewMessage}
+          style={{
+            marginTop: "0.5rem", background: "none", border: "1px solid var(--c-lines)",
+            color: "var(--c-text)", padding: "0.4em 1.2em", borderRadius: "0.5em",
+            cursor: "pointer", fontSize: "0.82rem",
+          }}
+        >
+          {t("contact.newMessage")}
+        </button>
+      </div>
+    )
+  }
+
  return (
-    <div className={styles["contact-me"]}>
+    <div className={[styles["contact-me"], envelopeFading ? styles["envelope-fadeout"] : ""].filter(Boolean).join(" ")}>
      <div
        ref={openingRef}
-        className={
-          [
-            styles.opening,
-            opened ? styles["rotate-opening"] : "",
-            openingBehind ? styles["opening-behind"] : ""
-          ].filter(Boolean).join(" ")
-        }
+        className={[
+          styles.opening,
+          opened ? styles["rotate-opening"] : "",
+          openingBehind ? styles["opening-behind"] : ""
+        ].filter(Boolean).join(" ")}
        onClick={toggleOpen}
        onTransitionEnd={handleTransitionEnd}
      >
        <LuMousePointerClick />
      </div>

-      <div
-        className={[
-          styles.content,
-          contentMoveUp ? styles["content-moveup"] : ''
-        ].filter(Boolean).join(' ')}
-      >
-        {success ? (
-          <div style={{
-            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
-            height: "100%", gap: "0.75rem", padding: "1.5rem", textAlign: "center",
-          }}>
-            <div style={{ fontSize: "2.5rem" }}>✓</div>
-            <p style={{ color: "var(--c-other)", fontWeight: 700, margin: 0 }}>{t("contact.messageSent")}</p>
-            <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 35%)", fontSize: "0.85rem", margin: 0 }}>
-              {t("contact.replyIn24h")}
-            </p>
-            <button
-              onClick={() => setSuccess(false)}
-              style={{
-                marginTop: "0.5rem", background: "none", border: "1px solid var(--c-lines)",
-                color: "var(--c-text)", padding: "0.4em 1.2em", borderRadius: "0.5em",
-                cursor: "pointer", fontSize: "0.82rem",
-              }}
-            >
-              {t("contact.newMessage")}
-            </button>
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit}>
-            <input
-              type="email"
-              name="email"
-              placeholder={t("contact.emailPlaceholder")}
-              required
-              value={email}
-              onChange={e => setEmail(e.target.value)}
-            />
-            <textarea
-              name="message"
-              placeholder={t("contact.messagePlaceholder")}
-              required
-              value={message}
-              onChange={e => setMessage(e.target.value)}
-            />
-            {error && (
-              <p style={{ color: "#ff6b6b", fontSize: "0.8rem", margin: "0", textAlign: "center" }}>{error}</p>
-            )}
-            <input type="submit" value={loading ? t("contact.sendingButton") : t("contact.sendButton")} disabled={loading} />
-          </form>
-        )}
+      <div className={[styles.content, contentMoveUp ? styles["content-moveup"] : ""].filter(Boolean).join(" ")}>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="email"
+            name="email"
+            placeholder={t("contact.emailPlaceholder")}
+            required
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+          />
+          <textarea
+            name="message"
+            placeholder={t("contact.messagePlaceholder")}
+            required
+            value={message}
+            onChange={e => setMessage(e.target.value)}
+          />
+          {error && (
+            <p style={{ color: "#ff6b6b", fontSize: "0.8rem", margin: "0", textAlign: "center" }}>{error}</p>
+          )}
+          {turnstileEnabled && <div style={{ display: "flex", justifyContent: "center" }}><div ref={containerRef} /></div>}
+          <input type="submit" value={loading ? t("contact.sendingButton") : t("contact.sendButton")} disabled={loading || !turnstileToken} />
+        </form>
      </div>

      <div className={styles.cover}></div>
--- a/frontend/src/components/home/ContactMe/contact-me.module.css
+++ b/frontend/src/components/home/ContactMe/contact-me.module.css
@@ -126,6 +126,35 @@
    background: linear-gradient(135deg, var(--c-boxes), var(--c-background-light));
 }

+@keyframes envelopeFadeOut {
+    from { opacity: 1; transform: scale(1) translateY(0); }
+    to   { opacity: 0; transform: scale(0.88) translateY(-12px); }
+}
+
+.envelope-fadeout {
+    animation: envelopeFadeOut 0.4s ease forwards;
+    pointer-events: none;
+}
+
+@keyframes successFadeIn {
+    from { opacity: 0; transform: translateY(24px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.success-panel {
+    margin: 15em auto 3em;
+    width: 30em;
+    max-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 2rem;
+    text-align: center;
+    animation: successFadeIn 0.5s ease forwards;
+}
+
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px) rotate(-8deg); }
@@ -147,7 +176,8 @@


@media only screen and (max-width: 990px){
-    .contact-me {
+    .contact-me,
+    .success-panel {
        width: min(30em, 100%);
        margin: 11rem auto 1.5rem;
    }
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -12,7 +12,7 @@ export interface AuthContextType {
  user: CustomUser | null;
  isAuthenticated: boolean;
  isLoading: boolean;
-  login: (payload: CustomTokenObtainPair) => Promise<void>;
+  login: (payload: CustomTokenObtainPair & { turnstile_token?: string }) => Promise<void>;
  logout: () => Promise<void>;
  refreshUser: () => Promise<void>;
 }
@@ -53,8 +53,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
    }
  }, []);

-  async function login(payload: CustomTokenObtainPair) {
-    await apiAccountLoginCreate(payload);
+  async function login(payload: CustomTokenObtainPair & { turnstile_token?: string }) {
+    await apiAccountLoginCreate(payload as CustomTokenObtainPair);
    localStorage.setItem(AUTH_FLAG, "true");
    await refreshUser();
  }
--- a/frontend/src/hooks/useTurnstile.ts
+++ b/frontend/src/hooks/useTurnstile.ts
@@ -0,0 +1,53 @@
+import { useState, useEffect, useRef } from "react";
+
+const TURNSTILE_SITE_KEY = import.meta.env.VITE_TURNSTILE_SITE_KEY as string;
+const USE_TURNSTILE = import.meta.env.VITE_USE_TURNSTILE !== "false";
+
+export function useTurnstile() {
+  const [token, setToken] = useState<string | null>(USE_TURNSTILE ? null : "disabled");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const widgetIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!USE_TURNSTILE) return;
+
+    const renderWidget = () => {
+      if (!containerRef.current) return;
+      widgetIdRef.current = (window as any).turnstile.render(containerRef.current, {
+        sitekey: TURNSTILE_SITE_KEY,
+        callback: (t: string) => setToken(t),
+        "expired-callback": () => setToken(null),
+        "error-callback": () => setToken(null),
+      });
+    };
+
+    if ((window as any).turnstile) {
+      renderWidget();
+    } else {
+      const interval = setInterval(() => {
+        if ((window as any).turnstile) {
+          clearInterval(interval);
+          renderWidget();
+        }
+      }, 100);
+      return () => clearInterval(interval);
+    }
+
+    return () => {
+      if (widgetIdRef.current !== null) {
+        (window as any).turnstile?.remove(widgetIdRef.current);
+        widgetIdRef.current = null;
+      }
+    };
+  }, []);
+
+  const reset = () => {
+    if (!USE_TURNSTILE) return;
+    if (widgetIdRef.current !== null) {
+      (window as any).turnstile?.reset(widgetIdRef.current);
+    }
+    setToken(null);
+  };
+
+  return { containerRef, token, enabled: USE_TURNSTILE, reset };
+}
--- a/frontend/src/pages/social/account/Login.tsx
+++ b/frontend/src/pages/social/account/Login.tsx
@@ -10,6 +10,7 @@ import Button from "@/components/ui/Button";
 import Spinner from "@/components/ui/Spinner";
 import FormErrorBanner from "@/components/ui/FormErrorBanner";
 import { applyServerErrors } from "@/utils/formErrors";
+import { useTurnstile } from "@/hooks/useTurnstile";

 interface LoginForm {
  username: string;
@@ -27,15 +28,18 @@ export default function LoginPage() {
  const { register, handleSubmit, formState, clearErrors } = form;
  const { errors, isSubmitting } = formState;
  const [rootError, setRootError] = useState<string | undefined>();
+  const { containerRef, token: turnstileToken, enabled: turnstileEnabled, reset: resetTurnstile } = useTurnstile();

  async function onSubmit(values: LoginForm) {
+    if (!turnstileToken) return;
    setRootError(undefined);
    clearErrors();
    try {
-      await login(values);
+      await login({ ...values, turnstile_token: turnstileToken ?? "" });
      navigate("/social/feed");
    } catch (err) {
      setRootError(applyServerErrors(form, err) ?? t("login.errors.generic"));
+      resetTurnstile();
    }
  }

@@ -45,7 +49,7 @@ export default function LoginPage() {
    setRootError(undefined);
  }

-  const disabled = isSubmitting;
+  const disabled = isSubmitting || !turnstileToken;

  return (
    <div className="min-h-screen flex items-center justify-center p-4">
@@ -88,8 +92,10 @@ export default function LoginPage() {
            </Link>
          </div>

-          <Button type="submit" fullWidth loading={disabled} disabled={disabled}>
-            {disabled ? (
+          {turnstileEnabled && <div ref={containerRef} className="flex justify-center" />}
+
+          <Button type="submit" fullWidth loading={isSubmitting} disabled={disabled}>
+            {isSubmitting ? (
              <>
                <Spinner size={16} /> {t("login.submitting")}
              </>
--- a/frontend/src/pages/social/account/Register.tsx
+++ b/frontend/src/pages/social/account/Register.tsx
@@ -18,6 +18,7 @@ import Checkbox from "@/components/ui/Checkbox";
 import Spinner from "@/components/ui/Spinner";
 import FormErrorBanner from "@/components/ui/FormErrorBanner";
 import { applyServerErrors } from "@/utils/formErrors";
+import { useTurnstile } from "@/hooks/useTurnstile";

 interface RegisterForm {
  username: string;
@@ -38,6 +39,7 @@ export default function RegisterPage() {
  const navigate = useNavigate();
  const [rootError, setRootError] = useState<string | undefined>();
  const [success, setSuccess] = useState(false);
+  const { containerRef, token: turnstileToken, enabled: turnstileEnabled, reset: resetTurnstile } = useTurnstile();

  const form = useForm<RegisterForm>({
    defaultValues: {
@@ -58,6 +60,7 @@ export default function RegisterPage() {
  const { errors, isSubmitting } = formState;

  async function onSubmit(values: RegisterForm) {
+    if (!turnstileToken) return;
    setRootError(undefined);
    // Wipe any stale server errors before the new request — RHF only
    // re-validates fields that have rules, so server errors on optional
@@ -70,12 +73,13 @@ export default function RegisterPage() {
      // Cast to the orval-generated type — fields may be re-typed as optional
      // once the schema is regenerated via `npm run api:gen`.
      await apiAccountRegisterCreate(
-        payload as Parameters<typeof apiAccountRegisterCreate>[0],
+        { ...payload, turnstile_token: turnstileToken ?? "" } as Parameters<typeof apiAccountRegisterCreate>[0],
      );
      setSuccess(true);
      setTimeout(() => navigate("/social/login"), 1500);
    } catch (err) {
      setRootError(applyServerErrors(form, err) ?? t("register.errors.generic"));
+      resetTurnstile();
    }
  }

@@ -239,7 +243,9 @@ export default function RegisterPage() {
            </div>
          </details>

-          <Button type="submit" fullWidth loading={isSubmitting} disabled={isSubmitting}>
+          {turnstileEnabled && <div ref={containerRef} className="flex justify-center" />}
+
+          <Button type="submit" fullWidth loading={isSubmitting} disabled={isSubmitting || !turnstileToken}>
            {isSubmitting ? (
              <>
                <Spinner size={16} /> {t("register.submitting")}