diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: HIGH priority — scroll debounce, timing-safe auth, a11y, error logging, cleanup dead modals

Browse Source 
- Header: throttle scroll handler via requestAnimationFrame (was firing 60+/sec)
- Auth: use crypto.timingSafeEqual for password and token signature comparison
- A11y: add role="dialog", aria-modal, aria-label to all modals (SignupModal, NewsModal, TeamProfile lightbox)
- A11y: add aria-label to close buttons, menu toggle (with aria-expanded), floating CTA
- A11y: add aria-label to MC Instagram buttons
- Error logging: add console.error with route names to all API catch blocks (admin + public)
- Fix open-day-register error leak (was returning raw DB error to client)
- Fix MasterClasses key={index} → key={item.title}
- Delete 3 unused modal components (BookingModal, MasterClassSignupModal, OpenDaySignupModal) — replaced by unified SignupModal

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-19 14:01:21 +03:00
parent 127990e532
commit 66dce3f8f5
19 changed files with 56 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/api/admin/group-bookings/route.ts
View File

@@ -21,7 +21,8 @@ export async function PUT(request: NextRequest) {
return NextResponse.json({ ok: true });
}
return NextResponse.json({ error: "Unknown action" }, { status: 400 });
} catch {
} catch (err) {
console.error("[admin/group-bookings] error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

6
src/app/api/admin/mc-registrations/route.ts
View File

@@ -19,7 +19,8 @@ export async function POST(request: NextRequest) {
}
const id = addMcRegistration(masterClassTitle.trim(), name.trim(), instagram.trim(), telegram?.trim() || undefined);
return NextResponse.json({ ok: true, id });
} catch {
} catch (err) {
console.error("[admin/mc-registrations] error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}
@@ -48,7 +49,8 @@ export async function PUT(request: NextRequest) {
}
updateMcRegistration(id, name.trim(), instagram.trim(), telegram?.trim() || undefined);
return NextResponse.json({ ok: true });
} catch {
} catch (err) {
console.error("[admin/mc-registrations] error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

3
src/app/api/admin/open-day/bookings/route.ts
View File

@@ -28,7 +28,8 @@ export async function PUT(request: NextRequest) {
return NextResponse.json({ ok: true });
}
return NextResponse.json({ error: "Unknown action" }, { status: 400 });
} catch {
} catch (err) {
console.error("[admin/open-day/bookings] error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

3
src/app/api/admin/open-day/classes/route.ts
View File

@@ -39,7 +39,8 @@ export async function PUT(request: NextRequest) {
const { id, ...data } = body;
updateOpenDayClass(id, data);
return NextResponse.json({ ok: true });
} catch {
} catch (err) {
console.error("[admin/open-day/classes] error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

6
src/app/api/admin/open-day/route.ts
View File

@@ -27,7 +27,8 @@ export async function POST(request: NextRequest) {
}
const id = createOpenDayEvent(body);
return NextResponse.json({ ok: true, id });
} catch {
} catch (err) {
console.error("[admin/open-day] error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}
@@ -39,7 +40,8 @@ export async function PUT(request: NextRequest) {
const { id, ...data } = body;
updateOpenDayEvent(id, data);
return NextResponse.json({ ok: true });
} catch {
} catch (err) {
console.error("[admin/open-day] error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

3
src/app/api/admin/reminders/route.ts
View File

@@ -30,7 +30,8 @@ export async function PUT(request: NextRequest) {
status as ReminderStatus | null
);
return NextResponse.json({ ok: true });
} catch {
} catch (err) {
console.error("[admin/reminders] error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

3
src/app/api/admin/validate-instagram/route.ts
View File

@@ -20,7 +20,8 @@ export async function GET(request: NextRequest) {
// Instagram returns 200 for existing profiles, 404 for non-existing
const valid = res.ok;
return NextResponse.json({ valid });
} catch {
} catch (err) {
console.error("[admin/validate-instagram] error:", err);
// Network error or timeout — don't block the user
return NextResponse.json({ valid: true, uncertain: true });
}

3
src/app/api/group-booking/route.ts
View File

@@ -27,7 +27,8 @@ export async function POST(request: NextRequest) {
const id = addGroupBooking(cleanName, cleanPhone, cleanGroup, cleanIg, cleanTg);
return NextResponse.json({ ok: true, id });
} catch {
} catch (err) {
console.error("[group-booking] POST error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

3
src/app/api/master-class-register/route.ts
View File

@@ -38,7 +38,8 @@ export async function POST(request: Request) {
);
return NextResponse.json({ ok: true, id });
} catch {
} catch (err) {
console.error("[master-class-register] POST error:", err);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

3
src/app/api/open-day-register/route.ts
View File

@@ -58,6 +58,7 @@ export async function POST(request: NextRequest) {
if (msg.includes("UNIQUE")) {
return NextResponse.json({ error: "Вы уже записаны на это занятие" }, { status: 409 });
}
return NextResponse.json({ error: msg }, { status: 500 });
console.error("[open-day-register] POST error:", e);
return NextResponse.json({ error: "Internal error" }, { status: 500 });
}
}

13
src/components/layout/Header.tsx
View File

@@ -15,8 +15,15 @@ export function Header() {
const [bookingOpen, setBookingOpen] = useState(false);
useEffect(() => {
let ticking = false;
function handleScroll() {
setScrolled(window.scrollY > UI_CONFIG.scrollThresholds.header);
if (!ticking) {
ticking = true;
requestAnimationFrame(() => {
setScrolled(window.scrollY > UI_CONFIG.scrollThresholds.header);
ticking = false;
});
}
}
window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll);
@@ -128,7 +135,8 @@ export function Header() {
<div className="flex items-center gap-2 lg:hidden">
<button
onClick={() => setMenuOpen(!menuOpen)}
aria-label="Меню"
aria-label={menuOpen ? "Закрыть меню" : "Открыть меню"}
aria-expanded={menuOpen}
className="rounded-lg p-2 text-neutral-400 transition-colors hover:text-white"
>
{menuOpen ? <X size={24} /> : <Menu size={24} />}
@@ -175,6 +183,7 @@ export function Header() {
{/* Floating booking button — visible on scroll, mobile */}
<button
onClick={() => setBookingOpen(true)}
aria-label="Записаться"
className={`fixed bottom-6 right-6 z-40 flex items-center gap-2 rounded-full bg-gold px-5 py-3 text-sm font-semibold text-black shadow-lg shadow-gold/25 transition-all duration-500 hover:bg-gold-light hover:shadow-xl hover:shadow-gold/30 cursor-pointer lg:hidden ${
scrolled ? "translate-y-0 opacity-100" : "translate-y-16 opacity-0 pointer-events-none"
}`}

5
src/components/sections/MasterClasses.tsx
View File

@@ -163,6 +163,7 @@ function MasterClassCard({
onClick={() =>
window.open(item.instagramUrl, "_blank", "noopener,noreferrer")
}
aria-label={`Instagram ${item.trainer}`}
className="flex h-[46px] w-[46px] items-center justify-center rounded-xl border border-white/10 text-white/40 transition-all hover:border-gold/30 hover:text-gold cursor-pointer"
>
<Instagram size={18} />
@@ -225,9 +226,9 @@ export function MasterClasses({ data }: MasterClassesProps) {
) : (
<Reveal>
<div className="mx-auto mt-10 grid max-w-5xl grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
{upcoming.map((item, i) => (
{upcoming.map((item) => (
<MasterClassCard
key={i}
key={item.title}
item={item}
onSignup={() => setSignupTitle(item.title)}
/>

4
src/components/sections/team/TeamProfile.tsx
View File

@@ -309,10 +309,14 @@ export function TeamProfile({ member, onBack, schedule }: TeamProfileProps) {
{lightbox && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
role="dialog"
aria-modal="true"
aria-label="Просмотр изображения"
onClick={() => setLightbox(null)}
>
<button
onClick={() => setLightbox(null)}
aria-label="Закрыть"
className="absolute top-4 right-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors"
>
<X size={20} />

214
src/components/ui/BookingModal.tsx
View File

@@ -1,214 +0,0 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { createPortal } from "react-dom";
import { X, Instagram, Send, CheckCircle, Phone } from "lucide-react";
import { BRAND } from "@/lib/constants";
interface BookingModalProps {
open: boolean;
onClose: () => void;
groupInfo?: string;
contact?: { instagram: string; phone: string };
}
const DEFAULT_CONTACT = {
instagram: BRAND.instagram,
phone: "+375 29 389-70-01",
};
export function BookingModal({ open, onClose, groupInfo, contact: contactProp }: BookingModalProps) {
const contact = contactProp ?? DEFAULT_CONTACT;
const [name, setName] = useState("");
const [phone, setPhone] = useState("+375 ");
// Format phone: +375 (XX) XXX-XX-XX
function handlePhoneChange(raw: string) {
// Strip everything except digits
let digits = raw.replace(/\D/g, "");
// Ensure starts with 375
if (!digits.startsWith("375")) {
digits = "375" + digits.replace(/^375?/, "");
}
// Limit to 12 digits (375 + 9 digits)
digits = digits.slice(0, 12);
// Format
let formatted = "+375";
const rest = digits.slice(3);
if (rest.length > 0) formatted += " (" + rest.slice(0, 2);
if (rest.length >= 2) formatted += ") ";
if (rest.length > 2) formatted += rest.slice(2, 5);
if (rest.length > 5) formatted += "-" + rest.slice(5, 7);
if (rest.length > 7) formatted += "-" + rest.slice(7, 9);
setPhone(formatted);
}
const [submitted, setSubmitted] = useState(false);
// Close on Escape
useEffect(() => {
if (!open) return;
function onKey(e: KeyboardEvent) {
if (e.key === "Escape") onClose();
}
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
// Lock body scroll
useEffect(() => {
if (open) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
return () => {
document.body.style.overflow = "";
};
}, [open]);
const handleSubmit = useCallback(
(e: React.FormEvent) => {
e.preventDefault();
// Save booking to DB (fire-and-forget)
fetch("/api/group-booking", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name, phone, groupInfo }),
}).catch(() => {});
// Build Instagram DM message with pre-filled text
const groupText = groupInfo ? ` (${groupInfo})` : "";
const message = `Здравствуйте! Меня зовут ${name}, хочу записаться на занятие${groupText}. Мой телефон: ${phone}`;
const instagramUrl = `https://ig.me/m/blackheartdancehouse?text=${encodeURIComponent(message)}`;
window.open(instagramUrl, "_blank");
setSubmitted(true);
},
[name, phone, groupInfo, contact]
);
const handleClose = useCallback(() => {
onClose();
// Reset after animation
setTimeout(() => {
setName("");
setPhone("+375 ");
setSubmitted(false);
}, 300);
}, [onClose]);
if (!open) return null;
return createPortal(
<div
className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4"
onClick={handleClose}
>
{/* Backdrop */}
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
{/* Modal */}
<div
className="modal-content relative w-full max-w-md rounded-2xl border border-white/[0.08] bg-[#0a0a0a] p-6 sm:p-8 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
{/* Close button */}
<button
onClick={handleClose}
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full text-neutral-500 transition-colors hover:bg-white/[0.06] hover:text-white cursor-pointer"
>
<X size={18} />
</button>
{submitted ? (
/* Success state */
<div className="py-4 text-center">
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500/10">
<CheckCircle size={28} className="text-emerald-500" />
</div>
<h3 className="text-lg font-bold text-white">Отлично!</h3>
<p className="mt-2 text-sm text-neutral-400">
Сообщение отправлено в Instagram. Мы свяжемся с вами в ближайшее время!
</p>
<button
onClick={handleClose}
className="mt-6 rounded-full bg-gold px-6 py-2.5 text-sm font-semibold text-black transition-all hover:bg-gold-light cursor-pointer"
>
Закрыть
</button>
</div>
) : (
<>
{/* Header */}
<div className="mb-6">
<h3 className="text-xl font-bold text-white">Записаться</h3>
<p className="mt-1 text-sm text-neutral-400">
Оставьте данные и мы свяжемся с вами, или напишите нам напрямую
</p>
</div>
{/* Form */}
<form onSubmit={handleSubmit} className="space-y-3">
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Ваше имя"
required
className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-gold/40 focus:bg-white/[0.06]"
/>
</div>
<div>
<input
type="tel"
value={phone}
onChange={(e) => handlePhoneChange(e.target.value)}
placeholder="+375 (__) ___-__-__"
required
className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-gold/40 focus:bg-white/[0.06]"
/>
</div>
<button
type="submit"
className="flex w-full items-center justify-center gap-2 rounded-xl bg-gold py-3 text-sm font-semibold text-black transition-all hover:bg-gold-light hover:shadow-lg hover:shadow-gold/20 cursor-pointer"
>
<Send size={15} />
Отправить в Instagram
</button>
</form>
{/* Divider */}
<div className="my-5 flex items-center gap-3">
<span className="h-px flex-1 bg-white/[0.06]" />
<span className="text-xs text-neutral-500">или напрямую</span>
<span className="h-px flex-1 bg-white/[0.06]" />
</div>
{/* Direct links */}
<div className="flex gap-2">
<a
href={contact.instagram}
target="_blank"
rel="noopener noreferrer"
className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-white/[0.08] bg-white/[0.03] py-3 text-sm font-medium text-neutral-300 transition-all hover:border-gold/30 hover:text-gold-light cursor-pointer"
>
<Instagram size={16} />
Instagram
</a>
<a
href={`tel:${contact.phone.replace(/\s/g, "")}`}
className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-white/[0.08] bg-white/[0.03] py-3 text-sm font-medium text-neutral-300 transition-all hover:border-gold/30 hover:text-gold-light cursor-pointer"
>
<Phone size={16} />
Позвонить
</a>
</div>
</>
)}
</div>
</div>,
document.body
);
}

195
src/components/ui/MasterClassSignupModal.tsx
View File

@@ -1,195 +0,0 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { createPortal } from "react-dom";
import { X, Instagram, Send, CheckCircle } from "lucide-react";
interface MasterClassSignupModalProps {
open: boolean;
onClose: () => void;
masterClassTitle: string;
successMessage?: string;
}
export function MasterClassSignupModal({
open,
onClose,
masterClassTitle,
successMessage,
}: MasterClassSignupModalProps) {
const [name, setName] = useState("");
const [instagram, setInstagram] = useState("");
const [telegram, setTelegram] = useState("");
const [submitting, setSubmitting] = useState(false);
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState("");
// Close on Escape
useEffect(() => {
if (!open) return;
function onKey(e: KeyboardEvent) {
if (e.key === "Escape") onClose();
}
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
// Lock body scroll
useEffect(() => {
if (open) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
return () => {
document.body.style.overflow = "";
};
}, [open]);
const handleSubmit = useCallback(
async (e: React.FormEvent) => {
e.preventDefault();
setError("");
setSubmitting(true);
try {
const res = await fetch("/api/master-class-register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
masterClassTitle,
name: name.trim(),
instagram: `@${instagram.trim()}`,
telegram: telegram.trim() ? `@${telegram.trim()}` : undefined,
}),
});
if (!res.ok) {
const data = await res.json();
throw new Error(data.error || "Ошибка регистрации");
}
setSubmitted(true);
} catch (err) {
setError(err instanceof Error ? err.message : "Ошибка регистрации");
} finally {
setSubmitting(false);
}
},
[masterClassTitle, name, instagram, telegram]
);
const handleClose = useCallback(() => {
onClose();
setTimeout(() => {
setName("");
setInstagram("");
setTelegram("");
setSubmitted(false);
setError("");
}, 300);
}, [onClose]);
if (!open) return null;
return createPortal(
<div
className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4"
onClick={handleClose}
>
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
<div
className="modal-content relative w-full max-w-md rounded-2xl border border-white/[0.08] bg-[#0a0a0a] p-6 sm:p-8 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<button
onClick={handleClose}
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full text-neutral-500 transition-colors hover:bg-white/[0.06] hover:text-white cursor-pointer"
>
<X size={18} />
</button>
{submitted ? (
<div className="py-4 text-center">
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500/10">
<CheckCircle size={28} className="text-emerald-500" />
</div>
<h3 className="text-lg font-bold text-white">Отлично!</h3>
<p className="mt-2 text-sm text-neutral-400">
{successMessage || "Вы записаны! Мы свяжемся с вами"}
</p>
<button
onClick={handleClose}
className="mt-6 rounded-full bg-gold px-6 py-2.5 text-sm font-semibold text-black transition-all hover:bg-gold-light cursor-pointer"
>
Закрыть
</button>
</div>
) : (
<>
<div className="mb-6">
<h3 className="text-xl font-bold text-white">Записаться</h3>
<p className="mt-1 text-sm text-neutral-400">{masterClassTitle}</p>
</div>
<form onSubmit={handleSubmit} className="space-y-3">
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Ваше имя"
required
className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-gold/40 focus:bg-white/[0.06]"
/>
</div>
<div className="flex items-center gap-0 rounded-xl border border-white/[0.08] bg-white/[0.04] transition-colors focus-within:border-gold/40 focus-within:bg-white/[0.06]">
<span className="flex items-center gap-1.5 pl-4 text-sm text-neutral-500 select-none">
<Instagram size={14} className="text-pink-400" />
@
</span>
<input
type="text"
value={instagram}
onChange={(e) => setInstagram(e.target.value.replace(/^@/, ""))}
placeholder="username"
required
className="flex-1 bg-transparent px-2 py-3 text-sm text-white placeholder-neutral-500 outline-none"
/>
</div>
<div className="flex items-center gap-0 rounded-xl border border-white/[0.08] bg-white/[0.04] transition-colors focus-within:border-gold/40 focus-within:bg-white/[0.06]">
<span className="flex items-center gap-1.5 pl-4 text-sm text-neutral-500 select-none">
<Send size={14} className="text-blue-400" />
@
</span>
<input
type="text"
value={telegram}
onChange={(e) => setTelegram(e.target.value.replace(/^@/, ""))}
placeholder="username (необязательно)"
className="flex-1 bg-transparent px-2 py-3 text-sm text-white placeholder-neutral-500 outline-none"
/>
</div>
{error && (
<p className="text-sm text-red-400">{error}</p>
)}
<button
type="submit"
disabled={submitting}
className="flex w-full items-center justify-center gap-2 rounded-xl bg-gold py-3 text-sm font-semibold text-black transition-all hover:bg-gold-light hover:shadow-lg hover:shadow-gold/20 cursor-pointer disabled:opacity-50"
>
{submitting ? "Отправка..." : "Записаться"}
</button>
</form>
</>
)}
</div>
</div>,
document.body
);
}

4
src/components/ui/NewsModal.tsx
View File

@@ -49,6 +49,9 @@ export function NewsModal({ item, onClose }: NewsModalProps) {
return createPortal(
<div
className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4"
role="dialog"
aria-modal="true"
aria-label={item.title}
onClick={onClose}
>
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
@@ -59,6 +62,7 @@ export function NewsModal({ item, onClose }: NewsModalProps) {
>
<button
onClick={onClose}
aria-label="Закрыть"
className="absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/50 text-neutral-400 backdrop-blur-sm transition-colors hover:bg-white/[0.1] hover:text-white cursor-pointer"
>
<X size={18} />

210
src/components/ui/OpenDaySignupModal.tsx
View File

@@ -1,210 +0,0 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { createPortal } from "react-dom";
import { X, CheckCircle, Send, Phone as PhoneIcon } from "lucide-react";
interface OpenDaySignupModalProps {
open: boolean;
onClose: () => void;
classId: number;
eventId: number;
classLabel: string;
}
export function OpenDaySignupModal({ open, onClose, classId, eventId, classLabel }: OpenDaySignupModalProps) {
const [name, setName] = useState("");
const [phone, setPhone] = useState("+375 ");
const [instagram, setInstagram] = useState("");
const [telegram, setTelegram] = useState("");
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState("");
const [result, setResult] = useState<{ totalBookings: number; pricePerClass: number } | null>(null);
function handlePhoneChange(raw: string) {
let digits = raw.replace(/\D/g, "");
if (!digits.startsWith("375")) {
digits = "375" + digits.replace(/^375?/, "");
}
digits = digits.slice(0, 12);
let formatted = "+375";
const rest = digits.slice(3);
if (rest.length > 0) formatted += " (" + rest.slice(0, 2);
if (rest.length >= 2) formatted += ") ";
if (rest.length > 2) formatted += rest.slice(2, 5);
if (rest.length > 5) formatted += "-" + rest.slice(5, 7);
if (rest.length > 7) formatted += "-" + rest.slice(7, 9);
setPhone(formatted);
}
useEffect(() => {
if (!open) return;
function onKey(e: KeyboardEvent) {
if (e.key === "Escape") onClose();
}
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
useEffect(() => {
if (open) document.body.style.overflow = "hidden";
else document.body.style.overflow = "";
return () => { document.body.style.overflow = ""; };
}, [open]);
const handleSubmit = useCallback(async (e: React.FormEvent) => {
e.preventDefault();
setError("");
setSubmitting(true);
const cleanPhone = phone.replace(/\D/g, "");
if (cleanPhone.length < 12) {
setError("Введите корректный номер телефона");
setSubmitting(false);
return;
}
try {
const res = await fetch("/api/open-day-register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
classId,
eventId,
name: name.trim(),
phone: cleanPhone,
instagram: instagram.trim() ? `@${instagram.trim()}` : undefined,
telegram: telegram.trim() ? `@${telegram.trim()}` : undefined,
}),
});
const data = await res.json();
if (!res.ok) {
setError(data.error || "Ошибка при записи");
setSubmitting(false);
return;
}
setResult({ totalBookings: data.totalBookings, pricePerClass: data.pricePerClass });
} catch {
setError("Ошибка сети");
} finally {
setSubmitting(false);
}
}, [classId, eventId, name, phone, instagram, telegram]);
const handleClose = useCallback(() => {
onClose();
setTimeout(() => {
setName("");
setPhone("+375 ");
setInstagram("");
setTelegram("");
setError("");
setResult(null);
}, 300);
}, [onClose]);
if (!open) return null;
return createPortal(
<div className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
<div
className="modal-content relative w-full max-w-md rounded-2xl border border-white/[0.08] bg-[#0a0a0a] p-6 sm:p-8 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<button
onClick={handleClose}
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full text-neutral-500 transition-colors hover:bg-white/[0.06] hover:text-white cursor-pointer"
>
<X size={18} />
</button>
{result ? (
<div className="py-4 text-center">
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500/10">
<CheckCircle size={28} className="text-emerald-500" />
</div>
<h3 className="text-lg font-bold text-white">Вы записаны!</h3>
<p className="mt-2 text-sm text-neutral-400">{classLabel}</p>
<p className="mt-3 text-sm text-white">
Вы записаны на <span className="text-gold font-semibold">{result.totalBookings}</span> занятий.
<br />
Стоимость: <span className="text-gold font-semibold">{result.pricePerClass} BYN</span> за занятие
</p>
<button
onClick={handleClose}
className="mt-6 rounded-full bg-gold px-6 py-2.5 text-sm font-semibold text-black transition-all hover:bg-gold-light cursor-pointer"
>
Закрыть
</button>
</div>
) : (
<>
<div className="mb-6">
<h3 className="text-xl font-bold text-white">Записаться</h3>
<p className="mt-1 text-sm text-neutral-400">{classLabel}</p>
</div>
<form onSubmit={handleSubmit} className="space-y-3">
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Ваше имя"
required
className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-gold/40 focus:bg-white/[0.06]"
/>
<div className="relative">
<PhoneIcon size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500" />
<input
type="tel"
value={phone}
onChange={(e) => handlePhoneChange(e.target.value)}
placeholder="+375 (__) ___-__-__"
required
className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] pl-9 pr-4 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-gold/40 focus:bg-white/[0.06]"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500 text-xs">@</span>
<input
type="text"
value={instagram}
onChange={(e) => setInstagram(e.target.value.replace(/^@/, ""))}
placeholder="Instagram"
className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] pl-7 pr-3 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-gold/40 focus:bg-white/[0.06]"
/>
</div>
<div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500 text-xs">@</span>
<input
type="text"
value={telegram}
onChange={(e) => setTelegram(e.target.value.replace(/^@/, ""))}
placeholder="Telegram"
className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] pl-7 pr-3 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-gold/40 focus:bg-white/[0.06]"
/>
</div>
</div>
{error && (
<p className="text-sm text-red-400">{error}</p>
)}
<button
type="submit"
disabled={submitting}
className="flex w-full items-center justify-center gap-2 rounded-xl bg-gold py-3 text-sm font-semibold text-black transition-all hover:bg-gold-light hover:shadow-lg hover:shadow-gold/20 cursor-pointer disabled:opacity-50"
>
<Send size={15} />
{submitting ? "Записываем..." : "Записаться"}
</button>
</form>
</>
)}
</div>
</div>,
document.body
);
}

3
src/components/ui/SignupModal.tsx
View File

@@ -132,7 +132,7 @@ export function SignupModal({
if (!open) return null;
return createPortal(
<div className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
<div className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-label={title} onClick={handleClose}>
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
<div
className="modal-content relative w-full max-w-md rounded-2xl border border-white/[0.08] bg-[#0a0a0a] p-6 sm:p-8 shadow-2xl"
@@ -140,6 +140,7 @@ export function SignupModal({
>
<button
onClick={handleClose}
aria-label="Закрыть"
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full text-neutral-500 transition-colors hover:bg-white/[0.06] hover:text-white cursor-pointer"
>
<X size={18} />

10
src/lib/auth.ts
View File

@@ -17,7 +17,13 @@ function getAdminPassword(): string {
}
export function verifyPassword(password: string): boolean {
return password === getAdminPassword();
const expected = getAdminPassword();
if (password.length !== expected.length) return false;
const a = Buffer.from(password);
const b = Buffer.from(expected);
// Pad to equal length for timingSafeEqual
if (a.length !== b.length) return false;
return crypto.timingSafeEqual(a, b);
}
export function signToken(): string {
@@ -51,7 +57,7 @@ function verifyTokenNode(token: string): boolean {
.update(data)
.digest("base64url");
if (sig !== expectedSig) return false;
if (!crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expectedSig))) return false;
const payload = JSON.parse(
Buffer.from(data, "base64url").toString()