Brunobrno/vontor-cz
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

turnstile is working - keep SSL turned of on dev

Browse Source
This commit is contained in:
David Bruno Vontor
2026-06-11 11:35:36 +02:00
parent 192143bfb6
commit 5ca62497b1
12 changed files with 245 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
backend/.env.example
View File

@@ -54,14 +54,11 @@ DEFAULT_FROM_EMAIL=
USE_S3=False
# RustFS (docker-compose default — S3-compatible MinIO successor)
AWS_S3_ENDPOINT_URL=http://rustfs:9000
AWS_S3_CUSTOM_DOMAIN=localhost:9000/vontor
AWS_STORAGE_BUCKET_NAME=vontor
AWS_ACCESS_KEY_ID=rustfsadmin
AWS_SECRET_ACCESS_KEY=rustfsadmin
RUSTFS_ACCESS_KEY=rustfsadmin
RUSTFS_SECRET_KEY=rustfsadmin
RUSTFS_BUCKET_NAME=vontor
AWS_S3_ENDPOINT_URL=https://s3.vontor.cz
AWS_S3_CUSTOM_DOMAIN=s3.vontor.cz
AWS_STORAGE_BUCKET_NAME=vontor-cz
AWS_ACCESS_KEY_ID=pO70oxXGV4R6OSHxNmzv
AWS_SECRET_ACCESS_KEY=1gY19XzWBOWiIkDKvCQF8Xkc72mFX4iILkBBV0ML
# AWS S3 (swap in for production — clear AWS_S3_ENDPOINT_URL)
# AWS_STORAGE_BUCKET_NAME=my-bucket
@@ -81,3 +78,6 @@ RUSTFS_BUCKET_NAME=vontor
CSOB_MERCHANT_ID=A6680stogb
CSOB_API_URL=https://iapi.iplatebnibrana.csob.cz/ # PŘI PRODUKCI VYMĚNIT ZA REALNE API!!!!
# -- TURNSTILE CAPTCHA --
SECRET_KEY_TURNSTILE=xxx

11
backend/account/views.py
View File

@@ -25,6 +25,7 @@ from rest_framework_simplejwt.exceptions import TokenError, AuthenticationFailed
from django_filters.rest_framework import DjangoFilterBackend
from drf_spectacular.utils import extend_schema, OpenApiResponse, OpenApiExample, OpenApiParameter
from vontor_cz.turnstile import verify_turnstile
User = get_user_model()
@@ -52,6 +53,11 @@ class CookieTokenObtainPairView(TokenObtainPairView):
def post(self, request, *args, **kwargs):
turnstile_token = request.data.get("turnstile_token", "")
remote_ip = request.META.get("HTTP_X_FORWARDED_FOR", request.META.get("REMOTE_ADDR", ""))
if not verify_turnstile(turnstile_token, remote_ip):
return Response({"detail": "Ověření CAPTCHA selhalo."}, status=status.HTTP_400_BAD_REQUEST)
serializer = self.get_serializer(data=request.data)
try:
serializer.is_valid(raise_exception=True)
@@ -310,6 +316,11 @@ class UserRegistrationViewSet(ModelViewSet):
http_method_names = ['post']
def create(self, request, *args, **kwargs):
turnstile_token = request.data.get("turnstile_token", "")
remote_ip = request.META.get("HTTP_X_FORWARDED_FOR", request.META.get("REMOTE_ADDR", ""))
if not verify_turnstile(turnstile_token, remote_ip):
return Response({"detail": "Ověření CAPTCHA selhalo."}, status=status.HTTP_400_BAD_REQUEST)
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.save()

6
backend/advertisement/views.py
View File

@@ -9,6 +9,7 @@ from drf_spectacular.utils import extend_schema, extend_schema_view
from .models import ContactMe
from .serializer import ContactMeSerializer
from .tasks import send_contact_me_email_task, send_newly_added_items_to_store_email_task_last_week
from vontor_cz.turnstile import verify_turnstile
@extend_schema(tags=["advertisement", "public"])
@@ -26,6 +27,11 @@ class ContactMePublicView(APIView):
if honeypot:
return Response({"status": "ok"}, status=status.HTTP_200_OK)
turnstile_token = request.data.get("turnstile_token", "")
remote_ip = request.META.get("HTTP_X_FORWARDED_FOR", request.META.get("REMOTE_ADDR", ""))
if not verify_turnstile(turnstile_token, remote_ip):
return Response({"detail": "Ověření CAPTCHA selhalo."}, status=status.HTTP_400_BAD_REQUEST)
if not email or not message:
return Response({"detail": "Missing email or message."}, status=status.HTTP_400_BAD_REQUEST)

3
backend/vontor_cz/settings.py
View File

@@ -958,6 +958,9 @@ GOPAY_GATEWAY_URL = os.getenv("GOPAY_GATEWAY_URL", "https://gw.sandbox.gopay.com
# New: absolute URL that GoPay calls (publicly reachable)
GOPAY_NOTIFICATION_URL = os.getenv("GOPAY_NOTIFICATION_URL", "http://localhost:8000/api/payments/gopay/webhook")
# --- Cloudflare Turnstile ---
CLOUDFLARE_TURNSTILE_SECRET_KEY = os.getenv("SECRET_KEY_TURNSTILE", "")
# -------------------------------------DOWNLOADER LIMITS------------------------------------
DOWNLOADER_MAX_SIZE_MB = int(os.getenv("DOWNLOADER_MAX_SIZE_MB", "200")) # Raspberry Pi safe cap
DOWNLOADER_MAX_SIZE_BYTES = DOWNLOADER_MAX_SIZE_MB * 1024 * 1024

33
backend/vontor_cz/turnstile.py Normal file
View File

@@ -0,0 +1,33 @@
import logging
import requests
from django.conf import settings
logger = logging.getLogger(__name__)
SITEVERIFY_URL = "https://challenges.cloudflare.com/turnstile/v0/siteverify"
def verify_turnstile(token: str, remote_ip: str | None = None) -> bool:
"""
Verify a Cloudflare Turnstile token against the siteverify API.
Returns True if valid, False otherwise.
If CLOUDFLARE_TURNSTILE_SECRET_KEY is not configured, skips verification (dev bypass).
"""
secret = getattr(settings, "CLOUDFLARE_TURNSTILE_SECRET_KEY", "")
if not secret:
logger.debug("Turnstile: no secret key configured, skipping verification.")
return True
payload = {"secret": secret, "response": token}
if remote_ip:
payload["remoteip"] = remote_ip
try:
resp = requests.post(SITEVERIFY_URL, data=payload, timeout=5)
result = resp.json()
if not result.get("success"):
logger.warning("Turnstile verification failed: %s", result.get("error-codes"))
return bool(result.get("success"))
except Exception as e:
logger.error("Turnstile: siteverify request failed: %s", e)
return False

4
frontend/index.html
View File

@@ -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>

78
frontend/src/components/home/ContactMe/ContactMeForm.tsx
View File

@@ -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,41 +67,24 @@ export default function ContactMeForm() {
}
}
return (
<div className={styles["contact-me"]}>
<div
ref={openingRef}
className={
[
styles.opening,
opened ? styles["rotate-opening"] : "",
openingBehind ? styles["opening-behind"] : ""
].filter(Boolean).join(" ")
function handleNewMessage() {
setSuccess(false)
setEnvelopeFading(false)
setOpened(true)
setContentMoveUp(true)
setOpeningBehind(true)
}
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",
}}>
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={() => setSuccess(false)}
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",
@@ -98,7 +94,25 @@ export default function ContactMeForm() {
{t("contact.newMessage")}
</button>
</div>
) : (
)
}
return (
<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(" ")}
onClick={toggleOpen}
onTransitionEnd={handleTransitionEnd}
>
<LuMousePointerClick />
</div>
<div className={[styles.content, contentMoveUp ? styles["content-moveup"] : ""].filter(Boolean).join(" ")}>
<form onSubmit={handleSubmit}>
<input
type="email"
@@ -118,9 +132,9 @@ export default function ContactMeForm() {
{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} />
{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>

32
frontend/src/components/home/ContactMe/contact-me.module.css
View File

@@ -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;
}

6
frontend/src/context/AuthContext.tsx
View File

@@ -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();
}

53
frontend/src/hooks/useTurnstile.ts Normal file
View File

@@ -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 };
}

14
frontend/src/pages/social/account/Login.tsx
View File

@@ -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")}
</>

10
frontend/src/pages/social/account/Register.tsx
View File

@@ -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")}