.
let data = null;
try { data = await r.json(); } catch {}
if (!r.ok) throw new Error((data && data.error) || `HTTP ${r.status}`);
return data;
}
const AuthContext = createContext({ user: null, signIn: () => {}, signUp: () => {}, signOut: () => {}, refreshUser: () => {} });
function useAuth() { return useContext(AuthContext); }
// ── Миграция гостевых данных в аккаунт пользователя ─────────────────────────
// Все данные кабинета хранятся в localStorage с ключом вида
// `ds__` (или `ds___` для
// per-drama/per-actor рейтингов). Когда юзер логинится — переносим всё, что
// он успел сделать в гостевом режиме, в его аккаунт. Без потерь данных:
// - массивы (library, fav_dramas, fav_people, user_lists, quiz_results) →
// additive merge с dedup по id;
// - объекты (рейтинги дорам/актёров) → shallow merge (user-данные имеют
// приоритет — он явно их перезаписал после логина);
// - примитивы (bio, settings) → user wins, guest fallback.
// После успешного слияния guest-копия удаляется.
function migrateGuestData(email) {
if (!email) return;
const guestSuffix = '_guest';
const userSuffix = '_' + email;
// Собираем все guest-ключи (нельзя итерироваться и удалять одновременно).
const guestKeys = [];
for (let i = 0; i < localStorage.length; i++) {
const k = localStorage.key(i);
if (k && k.endsWith(guestSuffix) && k.startsWith('ds_')) guestKeys.push(k);
}
let mergedCount = 0;
for (const gKey of guestKeys) {
const uKey = gKey.slice(0, gKey.length - guestSuffix.length) + userSuffix;
let gVal, uVal;
try { gVal = JSON.parse(localStorage.getItem(gKey)); } catch { gVal = null; }
try { uVal = JSON.parse(localStorage.getItem(uKey)); } catch { uVal = null; }
if (gVal == null) { localStorage.removeItem(gKey); continue; }
let merged;
if (Array.isArray(gVal)) {
// additive merge с dedup по id (если есть) или по sig (quiz_results)
const arr = Array.isArray(uVal) ? [...uVal] : [];
const seen = new Set(arr.map(x => (x && (x.id != null ? String(x.id) : (x.sig || JSON.stringify(x))))));
for (const item of gVal) {
const key = item && (item.id != null ? String(item.id) : (item.sig || JSON.stringify(item)));
if (!seen.has(key)) { arr.push(item); seen.add(key); }
}
merged = arr;
} else if (gVal && typeof gVal === 'object') {
// shallow merge: user поверх guest (user явно поставил после логина)
merged = { ...gVal, ...(uVal && typeof uVal === 'object' ? uVal : {}) };
} else {
// примитив (string/number/bool) — user wins
merged = (uVal != null) ? uVal : gVal;
}
try {
localStorage.setItem(uKey, JSON.stringify(merged));
localStorage.removeItem(gKey);
mergedCount++;
} catch {}
}
if (mergedCount > 0) {
// Подёргать все слушатели, чтобы кабинет/виджеты перечитали данные.
const events = [
'ds-library-changed', 'ds-fav-dramas-changed', 'ds-fav-people-changed',
'ds-userlists-changed', 'ds-ratings-changed', 'ds-actor-ratings-changed',
'ds-quiz-results-changed', 'storage',
];
for (const e of events) {
try { window.dispatchEvent(new CustomEvent(e)); } catch {}
}
}
return mergedCount;
}
function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [modalMode, setModalMode] = useState(null); // null | 'signin' | 'signup'
// Map API user → UI shape (display_name → name alias for legacy UI)
const normalizeUser = (u) => u ? { ...u, name: u.display_name || u.name, joinedAt: u.created_at } : null;
// Restore session from cookie on mount
const refreshUser = useCallback(async () => {
try {
const data = await apiFetch('/api/me');
setUser(normalizeUser(data.user));
} catch {
setUser(null);
} finally {
setLoading(false);
}
}, []);
useEffect(() => { refreshUser(); }, [refreshUser]);
// Слушаем глобальный event ds-user-changed — позволяет любому компоненту
// (например ProfilePage после загрузки нового аватара) пере-pull'нуть user
// и обновить навбар/AvatarMenu без перезагрузки страницы.
useEffect(() => {
const h = () => { refreshUser(); };
window.addEventListener('ds-user-changed', h);
return () => window.removeEventListener('ds-user-changed', h);
}, [refreshUser]);
const signIn = async ({ email, password }) => {
const data = await apiFetch('/api/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
const u = normalizeUser(data.user);
try { migrateGuestData(u?.email); } catch {}
setUser(u);
setModalMode(null);
return data.user;
};
const signUp = async ({ email, name, password, turnstile_token }) => {
const data = await apiFetch('/api/auth/register', {
method: 'POST',
body: JSON.stringify({ email, password, display_name: name, turnstile_token }),
});
const u = normalizeUser(data.user);
try { migrateGuestData(u?.email); } catch {}
setUser(u);
setModalMode(null);
return data.user;
};
const signOut = async () => {
try { await apiFetch('/api/auth/logout', { method: 'POST' }); } catch {}
setUser(null);
};
const openSignIn = () => setModalMode('signin');
const openSignUp = () => setModalMode('signup');
const closeModal = () => setModalMode(null);
return (
{children}
{modalMode && );
}
// Expose for non-React code if нужно
if (typeof window !== 'undefined') {
window.__dsApi = { base: API_BASE, fetch: apiFetch };
// Выставляем I18N в window — админ UI текстов перечисляет известные ключи.
window.__dsI18N = I18N;
}
// ── Перевод серверных error-сообщений в дружелюбный текст для юзера ─────────
// Worker возвращает короткие английские строки (см. worker/src/auth.js).
// Тут мы выбираем перевод по lang + добавляем подсказки.
function friendlyAuthError(rawMsg, mode, isRu) {
const m = String(rawMsg || '').toLowerCase();
const ru = isRu;
// Auth errors
if (m.includes('invalid credentials')) return ru ? 'Неверный email или пароль' : 'Wrong email or password';
if (m.includes('email already registered')) return ru ? 'Этот email уже зарегистрирован. Попробуй войти.' : 'This email is already registered. Try signing in.';
if (m.includes('invalid email')) return ru ? 'Неверный формат email' : 'Invalid email format';
if (m.includes('display name required')) return ru ? 'Введи имя (минимум 2 символа)' : 'Display name required (min 2 chars)';
if (m.includes('email and password required')) return ru ? 'Заполни email и пароль' : 'Email and password required';
// Password policy (server-side)
if (m.includes('password must be at least')) return ru ? 'Пароль должен быть минимум 8 символов' : 'Password must be at least 8 characters';
if (m.includes('password is too long')) return ru ? 'Пароль слишком длинный (максимум 20 символов)' : 'Password is too long (max 20 characters)';
if (m.includes('must contain at least one lowercase')) return ru ? 'Нужна хотя бы одна строчная буква' : 'Need at least one lowercase letter';
if (m.includes('must contain at least one uppercase')) return ru ? 'Нужна хотя бы одна заглавная буква' : 'Need at least one uppercase letter';
if (m.includes('must contain at least one letter')) return ru ? 'Пароль должен содержать хотя бы одну букву' : 'Password must contain at least one letter';
if (m.includes('must contain at least one digit')) return ru ? 'Пароль должен содержать хотя бы одну цифру' : 'Password must contain at least one digit';
if (m.includes('must contain at least one special')) return ru ? 'Нужен хотя бы один спецсимвол (например, ! ? # @ $)' : 'Need at least one special character (e.g. ! ? # @ $)';
if (m.includes('password is too simple')) return ru ? 'Слишком простой пароль — попробуй сложнее' : 'Password is too simple — try something less guessable';
// HIBP breach — текст содержит число утечек, парсим и вставляем в перевод
if (m.includes('appeared in') && m.includes('data breaches')) {
const match = /appeared in ([\d,]+) /.exec(rawMsg);
const count = match ? match[1] : '';
return ru
? `Этот пароль найден в утечках (${count} раз). Выбери другой пароль — он давно скомпрометирован.`
: `This password has appeared in ${count} data breaches. Please choose a different one.`;
}
// Rate-limit — нейтральный текст, не упоминаем IP / детали механизма.
// Сервер теперь шлёт "Too many attempts. Try again later." (один общий текст
// и для login и для register) — у нас на фронте можем ещё уточнить про время.
if (m.includes('too many attempts')) return ru ? 'Слишком много попыток. Попробуй позже.' : 'Too many attempts. Try again later.';
// Legacy-match для совместимости со старыми ответами сервера (если кэшированы)
if (m.includes('too many login attempts')) return ru ? 'Слишком много попыток. Попробуй через 15 минут.' : 'Too many attempts. Try again in 15 minutes.';
if (m.includes('too many registrations')) return ru ? 'Слишком много попыток. Попробуй позже.' : 'Too many attempts. Try again later.';
// CSRF
if (m.includes('csrf')) return ru ? 'Сессия устарела. Перезагрузи страницу и войди заново.' : 'Session expired. Refresh and sign in again.';
// Google
if (m.includes('google token verification failed')) return ru ? 'Не удалось проверить Google-логин. Попробуй ещё раз.' : 'Google sign-in failed. Try again.';
if (m.includes('google login not configured')) return ru ? 'Google-логин временно недоступен.' : 'Google sign-in is temporarily unavailable.';
// Network
if (m.includes('failed to fetch') || m.includes('networkerror')) return ru ? 'Нет связи с сервером. Проверь интернет.' : 'Can\'t reach server. Check your connection.';
// По умолчанию — оставляем как есть, но без HTTP-кода
return rawMsg.replace(/^HTTP \d+/, '').trim() || (ru ? 'Ошибка' : 'Error');
}
// ── Google Sign-In кнопка ───────────────────────────────────────────────────
// Рендерит официальный Google-button через GIS (Google Identity Services).
// При клике пользователь видит попап Google → подтверждает аккаунт → мы
// получаем ID-токен и шлём его на /api/auth/google. После успеха —
// migrateGuestData + setUser (как обычный signIn).
function GoogleSignInButton({ onSuccess, onError, isRu, mode }) {
const containerRef = useRef(null);
const [ready, setReady] = useState(typeof window !== 'undefined' && !!window.google?.accounts?.id);
const [unconfigured, setUnconfigured] = useState(false);
// Google Sign-In в Telegram WebView не работает (Google блокирует OAuth).
// Решение — оставлено на будущее (Sign in with Telegram или специальный UX).
// Пока просто показываем кнопку как обычно — юзер сам разберётся.
// Дождаться загрузки GIS-скрипта (он async/defer, может ещё не быть готов).
useEffect(() => {
if (ready) return;
const clientId = (typeof window !== 'undefined') && window.__dsGoogleClientId;
if (!clientId) { setUnconfigured(true); return; }
let cancelled = false;
const check = () => {
if (cancelled) return;
if (window.google?.accounts?.id) setReady(true);
else setTimeout(check, 120);
};
check();
return () => { cancelled = true; };
}, [ready]);
// Когда GIS готов — рендерим кнопку.
useEffect(() => {
if (!ready) return;
const clientId = window.__dsGoogleClientId;
if (!clientId || !containerRef.current) return;
try {
window.google.accounts.id.initialize({
client_id: clientId,
callback: async (resp) => {
if (!resp || !resp.credential) {
if (onError) onError(new Error('No credential from Google'));
return;
}
try {
const data = await apiFetch('/api/auth/google', {
method: 'POST',
body: JSON.stringify({ credential: resp.credential }),
});
if (onSuccess) onSuccess(data.user);
} catch (e) {
if (onError) onError(e);
}
},
});
// Очистить контейнер (на случай ре-рендера)
containerRef.current.innerHTML = '';
window.google.accounts.id.renderButton(containerRef.current, {
theme: 'outline',
size: 'large',
type: 'standard',
shape: 'rectangular',
text: mode === 'signup' ? 'signup_with' : 'signin_with',
logo_alignment: 'left',
width: 340,
});
} catch (e) {
if (onError) onError(e);
}
}, [ready, mode]);
if (unconfigured) {
// Не настроен CLIENT_ID — просто прячемся, не показываем placeholder
// (чтобы тестеры не путались).
return null;
}
return (
{!ready && (
{isRu ? 'Загружаем Google…' : 'Loading Google…'}
)}
);
}
// Маленькое красное сообщение под полем ввода. Для inline-валидации.
function FieldError({ text }) {
return (
{text}
);
}
// Чек-листочек правила пароля. Зелёный когда выполнено, серый — пока нет.
function PolicyCheck({ ok, text }) {
return (
{ok ? '✓' : '○'}
{text}
);
}
// ── Forgot password form ──────────────────────────────────────────────────
// Простая форма: email → POST /api/auth/forgot-password → show "check inbox"
// Backend всегда возвращает 200 (чтобы не палить какие email'ы зарегистрированы),
// поэтому UX просто показывает success-сообщение.
function ForgotPasswordForm({ isRu, apiFetch, onBack }) {
const [email, setEmail] = useState('');
const [busy, setBusy] = useState(false);
const [sent, setSent] = useState(false);
const submit = async (e) => {
e.preventDefault();
if (!email.trim() || !email.includes('@')) return;
setBusy(true);
try {
await apiFetch('/api/auth/forgot-password', {
method: 'POST',
body: JSON.stringify({ email: email.trim() }),
});
setSent(true);
} catch {
// Даже при сетевой ошибке показываем success (чтобы не было ситуации
// когда юзер думает что email не зарегистрирован — мы не палим этот факт)
setSent(true);
} finally {
setBusy(false);
}
};
if (sent) {
return (
📬
{isRu ? 'Письмо отправлено' : 'Email sent'}
{isRu
? `Если email ${email} зарегистрирован — пришлём ссылку для сброса пароля в течение минуты. Проверь папку «Спам» если не нашёл.`
: `If ${email} is registered — we will send a reset link within a minute. Check Spam folder if you don't see it.`}
);
}
return (
);
}
function AuthModal({ mode, setMode, onClose }) {
const { signIn, signUp, refreshUser } = useAuth();
const { t, lang } = useI18n();
const isRu = lang === 'ru';
const [email, setEmail] = useState('');
const [name, setName] = useState('');
const [password, setPassword] = useState('');
const [password2, setPassword2] = useState(''); // confirm password (только signup)
const [showPassword, setShowPassword] = useState(false);
const [fieldErrors, setFieldErrors] = useState({}); // { name?, email?, password?, password2? }
const [topErr, setTopErr] = useState(''); // общая ошибка от сервера
const [busy, setBusy] = useState(false);
const firstFieldRef = useRef(null);
// Turnstile token — заполняется async callback'ом из CF api.js. Без него
// signUp() пошлёт пустую строку, worker ответит "Captcha verification failed".
const [turnstileToken, setTurnstileToken] = useState('');
const turnstileRef = useRef(null);
const turnstileWidgetIdRef = useRef(null);
// Авто-фокус на первое поле при открытии (signup — name, signin — email).
useEffect(() => {
const id = setTimeout(() => { try { firstFieldRef.current?.focus(); } catch {} }, 50);
return () => clearTimeout(id);
}, [mode]);
const hasGoogle = typeof window !== 'undefined' && !!window.__dsGoogleClientId;
const hasTurnstile = typeof window !== 'undefined' && !!window.__dsTurnstileSiteKey;
// Turnstile widget — рендерим только в режиме signup. CF api.js загружается
// асинхронно через