etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 10:27:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(auth): чекбоксы согласия с офертой и политикой при первой авторизации

Browse Source 
Новый пользователь попадал в кабинет молча — никаких документов ему не показывали.
Теперь при создании аккаунта он подтверждает, что ознакомился с офертой и политикой.

Набор документов и сам факт включения гейта приходят с бэка
(GET /cabinet/info/legal-consent): там же учитывается, заполнены ли документы и
видны ли они в вебе. Фронт знает только ключи и адреса публичных страниц /offer
и /privacy — тех же, что уже линкует футер логина.

Два пути входа устроены по-разному, поэтому и UI разный:
- регистрация по email — чекбоксы прямо в форме, кнопка заблокирована до галочек;
- Telegram-вход происходит сам собой, спрашивать заранее не у чего. Поэтому ловим
  428 от бэка и показываем отдельный экран согласия, а замыкание помнит, какой
  именно вход повторить после простановки галочек. Тот же приём страхует и
  email-форму: конфиг мог протухнуть, если админ включил гейт между загрузкой
  страницы и отправкой.

Неизвестный ключ документа всё равно рисуем (без ссылки): бэк его требует, и молча
спрятанный чекбокс превратился бы в «кнопка не работает и непонятно почему».

Локали ru/en/zh/fa.
This commit is contained in:
Fringg
2026-07-30 00:31:47 +03:00
parent b615927283
commit 0f21629ba5
10 changed files with 319 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/auth.ts
View File

@@ -18,12 +18,14 @@ export const authApi = {
initData: string,
campaignSlug?: string | null,
referralCode?: string | null,
acceptedLegalDocuments?: string[],
): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>('/cabinet/auth/telegram', {
init_data: initData,
campaign_slug: campaignSlug || undefined,
referral_code: referralCode || undefined,
yandex_cid: getYandexCid() || undefined,
accepted_legal_documents: acceptedLegalDocuments,
});
return response.data;
},
@@ -40,12 +42,14 @@ export const authApi = {
},
campaignSlug?: string | null,
referralCode?: string | null,
acceptedLegalDocuments?: string[],
): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>('/cabinet/auth/telegram/widget', {
...data,
campaign_slug: campaignSlug || undefined,
referral_code: referralCode || undefined,
yandex_cid: getYandexCid() || undefined,
accepted_legal_documents: acceptedLegalDocuments,
});
return response.data;
},
@@ -54,12 +58,14 @@ export const authApi = {
idToken: string,
campaignSlug?: string | null,
referralCode?: string | null,
acceptedLegalDocuments?: string[],
): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>('/cabinet/auth/telegram/oidc', {
id_token: idToken,
campaign_slug: campaignSlug || undefined,
referral_code: referralCode || undefined,
yandex_cid: getYandexCid() || undefined,
accepted_legal_documents: acceptedLegalDocuments,
});
return response.data;
},
@@ -115,6 +121,7 @@ export const authApi = {
language?: string;
referral_code?: string;
campaign_slug?: string;
accepted_legal_documents?: string[];
}): Promise<RegisterResponse> => {
const response = await apiClient.post<RegisterResponse>(
'/cabinet/auth/email/register/standalone',

10
src/api/info.ts
View File

@@ -1,5 +1,5 @@
import apiClient from './client';
import type { SupportConfig } from '../types';
import type { LegalConsentConfig, SupportConfig } from '../types';
export interface FaqPage {
id: number;
@@ -125,4 +125,12 @@ export const infoApi = {
const response = await apiClient.get<InfoVisibility>('/cabinet/info/visibility');
return response.data;
},
// Публичный: экран логина запрашивает это ДО авторизации.
getLegalConsentConfig: async (language?: string): Promise<LegalConsentConfig> => {
const response = await apiClient.get<LegalConsentConfig>('/cabinet/info/legal-consent', {
params: language ? { language } : undefined,
});
return response.data;
},
};

82
src/components/LegalConsent.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { useTranslation } from 'react-i18next';
// Галочки «ознакомлен» для НОВОГО пользователя. Набор документов приходит с бэка
// (GET /cabinet/info/legal-consent) — там же решается, включён ли гейт вообще и
// какие документы реально заполнены. Здесь только отрисовка и ссылки: адреса
// публичных страниц знает фронт, бэк отдаёт лишь ключи.
export const LEGAL_DOCUMENT_LINKS: Record<string, string> = {
public_offer: '/offer',
privacy_policy: '/privacy',
};
const LEGAL_DOCUMENT_LABELS: Record<string, { key: string; fallback: string }> = {
public_offer: { key: 'footer.offer', fallback: 'Публичная оферта' },
privacy_policy: { key: 'footer.privacy', fallback: 'Политика конфиденциальности' },
};
interface LegalConsentProps {
documents: string[];
accepted: Record<string, boolean>;
onChange: (document: string, value: boolean) => void;
disabled?: boolean;
className?: string;
}
export default function LegalConsent({
documents,
accepted,
onChange,
disabled = false,
className = '',
}: LegalConsentProps) {
const { t } = useTranslation();
if (documents.length === 0) return null;
return (
<div className={`space-y-2.5 ${className}`}>
{documents.map((document) => {
// Неизвестный ключ всё равно показываем: он обязателен на бэке, и молча
// спрятанный чекбокс превратился бы в «кнопка не работает без объяснений».
const label = LEGAL_DOCUMENT_LABELS[document];
const href = LEGAL_DOCUMENT_LINKS[document];
const title = label ? t(label.key, label.fallback) : document;
const inputId = `legal-consent-${document}`;
return (
<label
key={document}
htmlFor={inputId}
className="flex cursor-pointer items-start gap-2.5 text-xs leading-relaxed text-dark-400"
>
<input
id={inputId}
type="checkbox"
checked={Boolean(accepted[document])}
disabled={disabled}
onChange={(e) => onChange(document, e.target.checked)}
className="mt-0.5 h-4 w-4 shrink-0 cursor-pointer rounded border-dark-600 bg-dark-800 text-accent-500 focus:ring-accent-500"
/>
<span>
{t('auth.legalConsentPrefix', 'Я ознакомлен(а) с документом')}{' '}
{href ? (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="text-accent-400 underline underline-offset-2 transition-colors hover:text-accent-300"
onClick={(e) => e.stopPropagation()}
>
{title}
</a>
) : (
<span className="text-dark-200">{title}</span>
)}
</span>
</label>
);
})}
</div>
);
}

4
src/locales/en.json
View File

@@ -225,6 +225,10 @@
"invalidCredentials": "Invalid email or password",
"tooManyAttempts": "Too many attempts. Please try again later",
"verificationEmailNotice": "After registration, a verification email will be sent to your address",
"legalConsentPrefix": "I have read the",
"legalConsentTitle": "One more step",
"legalConsentSubtitle": "To create an account, confirm that you have read the documents.",
"legalConsentContinue": "Continue",
"checkEmail": "Check your email",
"verificationSent": "We sent a verification link to:",
"clickLinkToVerify": "Click the link in the email to verify your account and log in.",

4
src/locales/fa.json
View File

@@ -228,6 +228,10 @@
"sendResetLink": "ارسال لینک بازنشانی",
"tooManyAttempts": "تلاش‌های زیاد. لطفاً بعداً امتحان کنید",
"verificationEmailNotice": "پس از ثبت نام، ایمیل تأیید به آدرس شما ارسال خواهد شد",
"legalConsentPrefix": "من این سند را مطالعه کرده‌ام:",
"legalConsentTitle": "یک قدم دیگر",
"legalConsentSubtitle": "برای ساخت حساب، تأیید کنید که اسناد را مطالعه کرده‌اید.",
"legalConsentContinue": "ادامه",
"continueWithGoogle": "ادامه با Google",
"continueWithYandex": "ادامه با Yandex",
"continueWithDiscord": "ادامه با Discord",

4
src/locales/ru.json
View File

@@ -231,6 +231,10 @@
"sendResetLink": "Отправить ссылку",
"tooManyAttempts": "Слишком много попыток. Попробуйте позже",
"verificationEmailNotice": "После регистрации на вашу почту будет отправлено письмо для подтверждения",
"legalConsentPrefix": "Я ознакомлен(а) с документом",
"legalConsentTitle": "Ещё один шаг",
"legalConsentSubtitle": "Чтобы создать аккаунт, подтвердите, что ознакомились с документами.",
"legalConsentContinue": "Продолжить",
"checkEmail": "Проверьте почту",
"verificationSent": "Мы отправили ссылку для подтверждения на:",
"clickLinkToVerify": "Перейдите по ссылке в письме, чтобы подтвердить аккаунт и войти.",

4
src/locales/zh.json
View File

@@ -228,6 +228,10 @@
"sendResetLink": "发送重置链接",
"tooManyAttempts": "尝试次数过多，请稍后再试",
"verificationEmailNotice": "注册后，验证邮件将发送到您的邮箱",
"legalConsentPrefix": "我已阅读",
"legalConsentTitle": "还差一步",
"legalConsentSubtitle": "创建账户前，请确认您已阅读以下文件。",
"legalConsentContinue": "继续",
"continueWithGoogle": "通过 Google 继续",
"continueWithYandex": "通过 Yandex 继续",
"continueWithDiscord": "通过 Discord 继续",

166
src/pages/Login.tsx
View File

@@ -26,9 +26,12 @@ import { saveOAuthState } from '../utils/oauth';
import { getPendingReferralCode } from '../utils/referral';
import { UsersIcon, EmailIcon, RefreshIcon, ChevronDownIcon } from '@/components/icons';
import LegalFooter from '../components/LegalFooter';
import LegalConsent from '../components/LegalConsent';
import { infoApi } from '../api/info';
import type { LegalConsentConfig } from '../types';
export default function Login() {
const { t } = useTranslation();
const { t, i18n } = useTranslation();
const navigate = useNavigate();
const location = useLocation();
const {
@@ -69,6 +72,70 @@ export default function Login() {
const [forgotPasswordError, setForgotPasswordError] = useState('');
const [showEmailForm, setShowEmailForm] = useState(true);
// Гейт согласия с офертой/политикой для НОВОГО пользователя. Конфиг публичный:
// нужен до авторизации, чтобы нарисовать чекбоксы ещё на экране входа.
const { data: legalConsent } = useQuery<LegalConsentConfig>({
queryKey: ['legal-consent-config', i18n.language],
queryFn: () => infoApi.getLegalConsentConfig(i18n.language),
staleTime: 5 * 60 * 1000,
retry: false,
});
const consentDocuments = useMemo(() => legalConsent?.documents ?? [], [legalConsent]);
const [acceptedDocuments, setAcceptedDocuments] = useState<Record<string, boolean>>({});
// Telegram-вход происходит сам собой, поэтому чекбоксы показываем только когда
// бэк ответил 428: пользователь новый и без согласия аккаунт не создастся.
// Замыкание помнит, какой именно вход повторить после простановки галочек.
const [pendingConsentRetry, setPendingConsentRetry] = useState<
((accepted: string[]) => Promise<void>) | null
>(null);
useEffect(() => {
if (!legalConsent?.prechecked || consentDocuments.length === 0) return;
setAcceptedDocuments((prev) => {
const next = { ...prev };
for (const document of consentDocuments) {
if (next[document] === undefined) next[document] = true;
}
return next;
});
}, [legalConsent?.prechecked, consentDocuments]);
const acceptedDocumentKeys = useMemo(
() => consentDocuments.filter((document) => acceptedDocuments[document]),
[consentDocuments, acceptedDocuments],
);
const allDocumentsAccepted =
consentDocuments.length === 0 || acceptedDocumentKeys.length === consentDocuments.length;
const toggleDocument = useCallback((document: string, value: boolean) => {
setAcceptedDocuments((prev) => ({ ...prev, [document]: value }));
}, []);
// 428 = бэк требует согласие. Запоминаем, что повторить, и рисуем чекбоксы.
const captureConsentRequirement = useCallback(
(err: unknown, retry: (accepted: string[]) => Promise<void>): boolean => {
const error = err as { response?: { status?: number; data?: { detail?: unknown } } };
if (error.response?.status !== 428) return false;
const detail = error.response?.data?.detail as
| { documents?: string[]; prechecked?: boolean }
| undefined;
if (detail?.documents?.length) {
const documents = detail.documents;
setAcceptedDocuments((prev) => {
const next = { ...prev };
for (const document of documents) {
if (next[document] === undefined) next[document] = Boolean(detail.prechecked);
}
return next;
});
}
setPendingConsentRetry(() => retry);
return true;
},
[],
);
// Telegram safe area insets
const { safeAreaInset, contentSafeAreaInset } = useTelegramSDK();
const safeTop = Math.max(safeAreaInset.top, contentSafeAreaInset.top);
@@ -197,6 +264,16 @@ export default function Login() {
if (import.meta.env.DEV)
console.warn(`Telegram auth attempt ${attempt + 1} failed:`, status, detail);
// Не ошибка входа, а недостающее согласие: показываем чекбоксы.
const needsConsent = captureConsentRequirement(err, async (accepted) => {
await loginWithTelegram(initData, accepted);
navigate(getReturnUrl(), { replace: true });
});
if (needsConsent) {
setIsLoading(false);
return;
}
if (status === 401 && attempt < MAX_RETRIES) {
await new Promise((r) => setTimeout(r, 1500));
continue;
@@ -211,7 +288,7 @@ export default function Login() {
};
tryTelegramAuth();
}, [isAuthInitializing, loginWithTelegram, navigate, t, getReturnUrl]);
}, [isAuthInitializing, loginWithTelegram, navigate, t, getReturnUrl, captureConsentRequirement]);
const handleRetryTelegramAuth = () => {
// Clear ALL cached auth state to prevent stale token/initData loops
@@ -264,6 +341,7 @@ export default function Login() {
password,
firstName || undefined,
referralCode || undefined,
acceptedDocumentKeys,
);
// Show "check your email" screen
setRegisteredEmail(result.email);
@@ -273,6 +351,24 @@ export default function Login() {
const status = error.response?.status;
const detail = getApiErrorMessage(err, '');
// Конфиг чекбоксов мог протухнуть (админ включил гейт между загрузкой страницы
// и отправкой формы) — показываем недостающие галочки вместо сырой ошибки.
const needsConsent = captureConsentRequirement(err, async (accepted) => {
const retried = await registerWithEmail(
email,
password,
firstName || undefined,
referralCode || undefined,
accepted,
);
setPendingConsentRetry(null);
setRegisteredEmail(retried.email);
});
if (needsConsent) {
setIsLoading(false);
return;
}
if (status === 400 && detail.includes('already registered')) {
setError(t('auth.emailAlreadyRegistered', 'This email is already registered'));
} else if (status === 401 || status === 403) {
@@ -376,8 +472,56 @@ export default function Login() {
)}
</div>
{/* Check Email Screen */}
{registeredEmail ? (
{/* Экран согласия: бэк ответил 428 на автоматический Telegram-вход */}
{pendingConsentRetry ? (
<div className="card">
<h2 className="mb-2 text-lg font-bold text-dark-50">
{t('auth.legalConsentTitle', 'Ещё один шаг')}
</h2>
<p className="mb-4 text-sm text-dark-400">
{t(
'auth.legalConsentSubtitle',
'Чтобы создать аккаунт, подтвердите, что ознакомились с документами.',
)}
</p>
<LegalConsent
documents={consentDocuments}
accepted={acceptedDocuments}
onChange={toggleDocument}
disabled={isLoading}
/>
{error && (
<p className="mt-4 text-sm text-error-400" role="alert">
{error}
</p>
)}
<button
type="button"
className="btn-primary mt-5 w-full"
disabled={!allDocumentsAccepted || isLoading}
onClick={async () => {
setError('');
setIsLoading(true);
try {
await pendingConsentRetry(acceptedDocumentKeys);
setPendingConsentRetry(null);
} catch (err) {
setError(getApiErrorMessage(err, t('common.error')));
} finally {
setIsLoading(false);
}
}}
>
{isLoading
? t('common.loading', 'Загрузка...')
: t('auth.legalConsentContinue', 'Продолжить')}
</button>
</div>
) : /* Check Email Screen */
registeredEmail ? (
<div className="card text-center">
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-success-500/20">
<EmailIcon className="h-7 w-7 text-success-400" />
@@ -696,9 +840,21 @@ export default function Login() {
</div>
)}
{authMode === 'register' && (
<LegalConsent
documents={consentDocuments}
accepted={acceptedDocuments}
onChange={toggleDocument}
disabled={isLoading}
className="pt-1"
/>
)}
<button
type="submit"
disabled={isLoading}
disabled={
isLoading || (authMode === 'register' && !allDocumentsAccepted)
}
className="btn-primary w-full py-2.5"
>
{isLoading ? (

46
src/store/auth.ts
View File

@@ -48,9 +48,12 @@ interface AuthState {
initialize: () => Promise<void>;
refreshUser: () => Promise<void>;
checkAdminStatus: () => Promise<void>;
loginWithTelegram: (initData: string) => Promise<void>;
loginWithTelegramWidget: (data: TelegramWidgetData) => Promise<void>;
loginWithTelegramOIDC: (idToken: string) => Promise<void>;
loginWithTelegram: (initData: string, acceptedLegalDocuments?: string[]) => Promise<void>;
loginWithTelegramWidget: (
data: TelegramWidgetData,
acceptedLegalDocuments?: string[],
) => Promise<void>;
loginWithTelegramOIDC: (idToken: string, acceptedLegalDocuments?: string[]) => Promise<void>;
loginWithEmail: (email: string, password: string) => Promise<void>;
loginWithOAuth: (
provider: string,
@@ -64,6 +67,7 @@ interface AuthState {
password: string,
firstName?: string,
referralCode?: string,
acceptedLegalDocuments?: string[],
) => Promise<RegisterResponse>;
}
@@ -261,10 +265,15 @@ export const useAuthStore = create<AuthState>()(
return initState.promise;
},
loginWithTelegram: async (initData) => {
loginWithTelegram: async (initData, acceptedLegalDocuments) => {
const campaignSlug = getPendingCampaignSlug();
const referralCode = getPendingReferralCode();
const response = await authApi.loginTelegram(initData, campaignSlug, referralCode);
const response = await authApi.loginTelegram(
initData,
campaignSlug,
referralCode,
acceptedLegalDocuments,
);
// Clear only after successful auth — retry keeps the slugs
consumeCampaignSlug();
consumeReferralCode();
@@ -279,10 +288,15 @@ export const useAuthStore = create<AuthState>()(
await get().checkAdminStatus();
},
loginWithTelegramWidget: async (data) => {
loginWithTelegramWidget: async (data, acceptedLegalDocuments) => {
const campaignSlug = getPendingCampaignSlug();
const referralCode = getPendingReferralCode();
const response = await authApi.loginTelegramWidget(data, campaignSlug, referralCode);
const response = await authApi.loginTelegramWidget(
data,
campaignSlug,
referralCode,
acceptedLegalDocuments,
);
consumeCampaignSlug();
consumeReferralCode();
tokenStorage.setTokens(response.access_token, response.refresh_token);
@@ -296,10 +310,15 @@ export const useAuthStore = create<AuthState>()(
await get().checkAdminStatus();
},
loginWithTelegramOIDC: async (idToken) => {
loginWithTelegramOIDC: async (idToken, acceptedLegalDocuments) => {
const campaignSlug = getPendingCampaignSlug();
const referralCode = getPendingReferralCode();
const response = await authApi.loginTelegramOIDC(idToken, campaignSlug, referralCode);
const response = await authApi.loginTelegramOIDC(
idToken,
campaignSlug,
referralCode,
acceptedLegalDocuments,
);
consumeCampaignSlug();
consumeReferralCode();
tokenStorage.setTokens(response.access_token, response.refresh_token);
@@ -370,7 +389,13 @@ export const useAuthStore = create<AuthState>()(
await get().checkAdminStatus();
},
registerWithEmail: async (email, password, firstName, referralCode) => {
registerWithEmail: async (
email,
password,
firstName,
referralCode,
acceptedLegalDocuments,
) => {
const code = referralCode || getPendingReferralCode() || undefined;
const campaignSlug = getPendingCampaignSlug() || undefined;
const response = await authApi.registerEmailStandalone({
@@ -380,6 +405,7 @@ export const useAuthStore = create<AuthState>()(
language: navigator.language.split('-')[0] || 'ru',
referral_code: code,
campaign_slug: campaignSlug,
accepted_legal_documents: acceptedLegalDocuments,
});
consumeReferralCode();
return response;

8
src/types/index.ts
View File

@@ -529,6 +529,14 @@ export interface TicketDetail extends Omit<Ticket, 'messages_count' | 'last_mess
messages: TicketMessage[];
}
// Гейт согласия с офертой/политикой на экране первой авторизации.
// documents — ключи документов, которые бэк реально требует отметить.
export interface LegalConsentConfig {
required: boolean;
prechecked: boolean;
documents: string[];
}
export interface SupportConfig {
tickets_enabled: boolean;
support_type: 'tickets' | 'profile' | 'url' | 'both';