1543 lines
35 KiB
TypeScript
1543 lines
35 KiB
TypeScript
'use client';
|
||
|
||
|
||
|
||
import Link from 'next/link';
|
||
|
||
import { FormEvent, Suspense, useCallback, useEffect, useState } from 'react';
|
||
|
||
import { useRouter, useSearchParams } from 'next/navigation';
|
||
|
||
import { ChevronLeft, Download, KeyRound, Loader2, Mail, Network, Phone, QrCode, ShieldCheck, ShieldQuestion, UserRound } from 'lucide-react';
|
||
|
||
import { QRCodeSVG } from 'qrcode.react';
|
||
|
||
import { BrandLogo, ProjectTagline } from '@/components/id/brand-logo';
|
||
|
||
import { useAuth } from '@/components/id/auth-provider';
|
||
|
||
import { usePublicSettings } from '@/components/id/public-settings-provider';
|
||
|
||
import { useToast } from '@/components/id/toast-provider';
|
||
|
||
import { Button } from '@/components/ui/button';
|
||
|
||
import { Input } from '@/components/ui/input';
|
||
import { PinInput } from '@/components/ui/pin-input';
|
||
import { isPinInputComplete } from '@/lib/pin-input';
|
||
|
||
import { OtpInput } from '@/components/ui/otp-input';
|
||
|
||
import { PhoneInput, phoneCountries, toE164 } from '@/components/ui/phone-input';
|
||
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
|
||
import type { AuthTokens, LoginMethod, OtpChannel, OtpSendResponse } from '@/lib/api';
|
||
import { AUTH_TOKEN_KEY, claimQrLoginSession, createQrLoginSession, fetchFedcmSessionStatus, pollQrLoginSession } from '@/lib/api';
|
||
|
||
import { isFedcmLoginPopup, finalizeFedcmLogin } from '@/lib/fedcm-login-bridge';
|
||
|
||
import {
|
||
clearOtpResendAvailableAt,
|
||
formatCooldownSeconds,
|
||
readOtpResendAvailableAt,
|
||
useOtpResendCooldown,
|
||
writeOtpResendAvailableAt
|
||
} from '@/hooks/use-otp-resend-cooldown';
|
||
|
||
|
||
|
||
type Step = 'identify' | 'otp' | 'otpChannel' | 'password' | 'pin' | 'ldap' | 'qr' | 'qrLink' | 'totp';
|
||
|
||
|
||
|
||
const channelIcon: Record<string, typeof Mail> = {
|
||
|
||
email: Mail,
|
||
|
||
backupEmail: Mail,
|
||
|
||
phone: Phone,
|
||
|
||
backupPhone: Phone,
|
||
|
||
password: KeyRound
|
||
|
||
};
|
||
|
||
|
||
|
||
const channelLabel: Record<string, string> = {
|
||
|
||
email: 'Почта',
|
||
|
||
phone: 'Телефон',
|
||
|
||
backupEmail: 'Резервная почта',
|
||
|
||
backupPhone: 'Резервный телефон'
|
||
|
||
};
|
||
|
||
|
||
|
||
export default function LoginPage() {
|
||
return (
|
||
<Suspense
|
||
fallback={
|
||
<main className="flex min-h-screen items-center justify-center bg-[#1f2128] text-white">
|
||
<Loader2 className="h-6 w-6 animate-spin text-[#b9bdc9]" />
|
||
</main>
|
||
}
|
||
>
|
||
<LoginPageContent />
|
||
</Suspense>
|
||
);
|
||
}
|
||
|
||
function LoginPageContent() {
|
||
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
|
||
const finishLoginRedirect = useCallback(() => {
|
||
if (typeof window !== 'undefined') {
|
||
const fedcmLoginApi = (navigator as Navigator & { login?: { setStatus?: (status: string) => void } }).login;
|
||
if (window.opener && typeof fedcmLoginApi?.setStatus === 'function') {
|
||
return;
|
||
}
|
||
}
|
||
const redirectAfterLogin =
|
||
typeof window !== 'undefined' ? new URLSearchParams(window.location.search).get('redirect') : null;
|
||
if (redirectAfterLogin && redirectAfterLogin.startsWith('/')) {
|
||
router.replace(redirectAfterLogin);
|
||
return;
|
||
}
|
||
router.replace('/');
|
||
}, [router]);
|
||
|
||
const { identifyLogin, sendLoginOtp, verifyLoginOtp, loginWithPassword, loginWithLdap, beginTotpLogin, verifyTotpLogin, completePin, applyLoginAuth } = useAuth();
|
||
|
||
const { showToast } = useToast();
|
||
|
||
const { ldapEnabled, ldapUseLdaps, publicApiUrl } = usePublicSettings();
|
||
|
||
|
||
|
||
const [authTab, setAuthTab] = useState<'email' | 'phone'>('email');
|
||
|
||
const [email, setEmail] = useState('');
|
||
|
||
const [phoneNumber, setPhoneNumber] = useState('');
|
||
|
||
const [country, setCountry] = useState(phoneCountries[0]);
|
||
|
||
|
||
|
||
const [recipient, setRecipient] = useState('');
|
||
|
||
const [maskedTarget, setMaskedTarget] = useState('');
|
||
|
||
const [otp, setOtp] = useState('');
|
||
|
||
const [totpCode, setTotpCode] = useState('');
|
||
|
||
const [totpChallengeToken, setTotpChallengeToken] = useState<string | null>(null);
|
||
|
||
const [password, setPassword] = useState('');
|
||
|
||
const [ldapUsername, setLdapUsername] = useState('');
|
||
|
||
const [ldapPassword, setLdapPassword] = useState('');
|
||
|
||
const [pin, setPin] = useState('');
|
||
|
||
const [pendingSessionId, setPendingSessionId] = useState<string | null>(null);
|
||
|
||
const [methods, setMethods] = useState<LoginMethod[]>([]);
|
||
|
||
const [otpChannels, setOtpChannels] = useState<OtpChannel[]>([]);
|
||
|
||
const [otpBackupChannels, setOtpBackupChannels] = useState<OtpChannel[]>([]);
|
||
|
||
const [showMethods, setShowMethods] = useState(false);
|
||
|
||
const [step, setStep] = useState<Step>('identify');
|
||
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
|
||
const [qrPayload, setQrPayload] = useState<string | null>(null);
|
||
|
||
const [qrSessionId, setQrSessionId] = useState<string | null>(null);
|
||
|
||
const [qrExpiresAt, setQrExpiresAt] = useState<string | null>(null);
|
||
|
||
const [qrLoading, setQrLoading] = useState(false);
|
||
const [lastOtpChannel, setLastOtpChannel] = useState<string | undefined>();
|
||
const [otpResendAvailableAt, setOtpResendAvailableAt] = useState<string | null>(null);
|
||
const otpResendSecondsLeft = useOtpResendCooldown(otpResendAvailableAt);
|
||
const canResendOtp = otpResendSecondsLeft <= 0 && !isSubmitting;
|
||
|
||
|
||
|
||
function getIdentifier() {
|
||
|
||
return authTab === 'email' ? email.trim() : toE164(country, phoneNumber);
|
||
|
||
}
|
||
|
||
|
||
|
||
function beginTotpStep(challengeToken: string) {
|
||
|
||
setTotpChallengeToken(challengeToken);
|
||
|
||
setTotpCode('');
|
||
|
||
setStep('totp');
|
||
|
||
}
|
||
|
||
|
||
|
||
function finishAuth(pinVerified: boolean, sessionId: string) {
|
||
|
||
if (!pinVerified) {
|
||
|
||
setPendingSessionId(sessionId);
|
||
|
||
setStep('pin');
|
||
|
||
} else {
|
||
|
||
finishLoginRedirect();
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
function finishQrAuth(auth: AuthTokens) {
|
||
void (async () => {
|
||
const resolved = await applyLoginAuth(auth);
|
||
finishAuth(resolved.pinVerified, resolved.sessionId);
|
||
})();
|
||
}
|
||
|
||
|
||
|
||
function applyOtpSendResponse(response: OtpSendResponse, loginRecipient: string, channel?: string) {
|
||
setMaskedTarget(response.maskedTarget);
|
||
setLastOtpChannel(channel);
|
||
setOtp('');
|
||
setShowMethods(false);
|
||
const resendAt = response.resendAvailableAt ?? new Date(Date.now() + 60_000).toISOString();
|
||
setOtpResendAvailableAt(resendAt);
|
||
writeOtpResendAvailableAt(loginRecipient, resendAt);
|
||
setStep('otp');
|
||
}
|
||
|
||
async function requestLoginOtp(channel?: string, recipientOverride?: string) {
|
||
setIsSubmitting(true);
|
||
const loginRecipient = recipientOverride ?? recipient;
|
||
|
||
try {
|
||
const response = await sendLoginOtp(loginRecipient, channel);
|
||
applyOtpSendResponse(response, loginRecipient, channel);
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось отправить код');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
}
|
||
|
||
async function handleResendOtp() {
|
||
if (!canResendOtp) return;
|
||
await requestLoginOtp(lastOtpChannel, recipient);
|
||
}
|
||
|
||
|
||
|
||
function openOtpDelivery() {
|
||
|
||
if (otpChannels.length > 1) {
|
||
|
||
setShowMethods(false);
|
||
|
||
setStep('otpChannel');
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
void requestLoginOtp(otpChannels[0]?.channel);
|
||
|
||
}
|
||
|
||
|
||
|
||
useEffect(() => {
|
||
if (!isFedcmLoginPopup()) return;
|
||
let cancelled = false;
|
||
|
||
void (async () => {
|
||
const status = await fetchFedcmSessionStatus(publicApiUrl);
|
||
if (cancelled || !status?.active) return;
|
||
|
||
if (status.requiresPin && status.sessionId) {
|
||
setPendingSessionId(status.sessionId);
|
||
setStep('pin');
|
||
return;
|
||
}
|
||
|
||
const token = window.localStorage.getItem(AUTH_TOKEN_KEY);
|
||
if (token) {
|
||
await finalizeFedcmLogin(token);
|
||
}
|
||
})();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [publicApiUrl]);
|
||
|
||
useEffect(() => {
|
||
const qrLink = searchParams.get('qrLink');
|
||
if (!qrLink || qrSessionId) return;
|
||
|
||
let cancelled = false;
|
||
setQrLoading(true);
|
||
|
||
void (async () => {
|
||
try {
|
||
const claimed = await claimQrLoginSession(qrLink);
|
||
if (cancelled) return;
|
||
setQrSessionId(qrLink);
|
||
setQrExpiresAt(claimed.expiresAt);
|
||
setStep('qrLink');
|
||
} catch (error) {
|
||
if (!cancelled) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось подключить устройство по QR-коду');
|
||
}
|
||
} finally {
|
||
if (!cancelled) setQrLoading(false);
|
||
}
|
||
})();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [qrSessionId, searchParams, showToast]);
|
||
|
||
useEffect(() => {
|
||
if (step !== 'otp' || !recipient) return;
|
||
const saved = readOtpResendAvailableAt(recipient);
|
||
if (saved && new Date(saved).getTime() > Date.now()) {
|
||
setOtpResendAvailableAt(saved);
|
||
}
|
||
}, [recipient, step]);
|
||
|
||
const startQrLogin = useCallback(async () => {
|
||
|
||
setQrLoading(true);
|
||
|
||
try {
|
||
|
||
const session = await createQrLoginSession();
|
||
|
||
setQrSessionId(session.sessionId);
|
||
|
||
setQrPayload(session.qrPayload ?? null);
|
||
|
||
setQrExpiresAt(session.expiresAt);
|
||
|
||
setStep('qr');
|
||
|
||
} catch (error) {
|
||
|
||
showToast(error instanceof Error ? error.message : 'Не удалось создать QR-сессию');
|
||
|
||
} finally {
|
||
|
||
setQrLoading(false);
|
||
|
||
}
|
||
|
||
}, [showToast]);
|
||
|
||
|
||
|
||
useEffect(() => {
|
||
|
||
if ((step !== 'qr' && step !== 'qrLink') || !qrSessionId) return;
|
||
|
||
let cancelled = false;
|
||
|
||
|
||
|
||
const poll = async () => {
|
||
|
||
try {
|
||
|
||
const session = await pollQrLoginSession(qrSessionId);
|
||
|
||
if (cancelled) return;
|
||
|
||
if (session.status === 'EXPIRED') {
|
||
|
||
showToast(step === 'qrLink' ? 'QR-код истёк. Отсканируйте новый код на основном устройстве.' : 'QR-код истёк, создайте новый');
|
||
|
||
if (step === 'qrLink') {
|
||
setStep('identify');
|
||
setQrSessionId(null);
|
||
return;
|
||
}
|
||
|
||
setStep('identify');
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
if (session.status === 'APPROVED' && session.auth?.user) {
|
||
|
||
finishQrAuth({
|
||
|
||
accessToken: session.auth.accessToken,
|
||
|
||
refreshToken: session.auth.refreshToken,
|
||
|
||
sessionId: session.auth.sessionId,
|
||
|
||
pinVerified: session.auth.pinVerified,
|
||
|
||
expiresAt: session.auth.expiresAt,
|
||
|
||
user: session.auth.user
|
||
|
||
});
|
||
|
||
}
|
||
|
||
} catch {
|
||
|
||
if (!cancelled) {
|
||
|
||
showToast('Не удалось проверить QR-сессию');
|
||
|
||
}
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
void poll();
|
||
|
||
const timer = window.setInterval(() => void poll(), 2000);
|
||
|
||
return () => {
|
||
|
||
cancelled = true;
|
||
|
||
window.clearInterval(timer);
|
||
|
||
};
|
||
|
||
}, [applyLoginAuth, qrSessionId, showToast, step]);
|
||
|
||
|
||
|
||
async function handleIdentify(event: FormEvent<HTMLFormElement>) {
|
||
|
||
event.preventDefault();
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
|
||
const identifier = getIdentifier();
|
||
|
||
if (authTab === 'phone') {
|
||
const digits = phoneNumber.replace(/\D/g, '');
|
||
if (digits.length < country.maxDigits) {
|
||
showToast('Введите номер телефона полностью');
|
||
return;
|
||
}
|
||
} else if (!identifier) {
|
||
showToast('Укажите почту');
|
||
return;
|
||
}
|
||
|
||
setRecipient(identifier);
|
||
|
||
const result = await identifyLogin(identifier);
|
||
|
||
setMethods(result.methods ?? []);
|
||
|
||
setOtpChannels(result.otpChannels ?? []);
|
||
|
||
setOtpBackupChannels(result.otpBackupChannels ?? []);
|
||
|
||
if (result.isTotpEnabled) {
|
||
|
||
const challengeToken = await beginTotpLogin(identifier);
|
||
|
||
beginTotpStep(challengeToken);
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
const channels = result.otpChannels ?? [];
|
||
|
||
const backupChannels = result.otpBackupChannels ?? [];
|
||
|
||
const hasPassword = result.hasPassword;
|
||
|
||
const primaryChoiceCount = channels.length + (hasPassword ? 1 : 0);
|
||
|
||
if (primaryChoiceCount > 1) {
|
||
|
||
setPassword('');
|
||
|
||
setStep('otpChannel');
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
if (hasPassword) {
|
||
|
||
setPassword('');
|
||
|
||
setStep('password');
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
if (channels.length === 1) {
|
||
|
||
await requestLoginOtp(channels[0].channel, identifier);
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
if (backupChannels.length > 1) {
|
||
|
||
setStep('otpChannel');
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
if (backupChannels.length === 1) {
|
||
|
||
await requestLoginOtp(backupChannels[0].channel, identifier);
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
showToast('Для этого аккаунта не настроены каналы для SMS или email-кода');
|
||
|
||
} catch (error) {
|
||
|
||
showToast(error instanceof Error ? error.message : 'Не удалось продолжить вход');
|
||
|
||
} finally {
|
||
|
||
setIsSubmitting(false);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
async function verifyOtp(code: string) {
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
|
||
const response = await verifyLoginOtp(recipient, code);
|
||
|
||
if (response.requiresTotp && response.totpChallengeToken) {
|
||
beginTotpStep(response.totpChallengeToken);
|
||
return;
|
||
}
|
||
|
||
if (response.auth) {
|
||
|
||
finishAuth(response.auth.pinVerified, response.auth.sessionId);
|
||
|
||
} else {
|
||
|
||
showToast('Не удалось завершить вход');
|
||
|
||
}
|
||
|
||
} catch (error) {
|
||
|
||
setOtp('');
|
||
|
||
showToast(error instanceof Error ? error.message : 'Неверный код');
|
||
|
||
} finally {
|
||
|
||
setIsSubmitting(false);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
async function verifyTotp(code: string) {
|
||
|
||
if (!totpChallengeToken) return;
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
|
||
const auth = await verifyTotpLogin(totpChallengeToken, code);
|
||
|
||
setTotpChallengeToken(null);
|
||
|
||
finishAuth(auth.pinVerified, auth.sessionId);
|
||
|
||
} catch (error) {
|
||
|
||
setTotpCode('');
|
||
|
||
showToast(error instanceof Error ? error.message : 'Неверный код аутентификатора');
|
||
|
||
} finally {
|
||
|
||
setIsSubmitting(false);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
async function handlePasswordSubmit(event: FormEvent<HTMLFormElement>) {
|
||
|
||
event.preventDefault();
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
|
||
const auth = await loginWithPassword(recipient, password);
|
||
|
||
finishAuth(auth.pinVerified, auth.sessionId);
|
||
|
||
} catch (error) {
|
||
|
||
showToast(error instanceof Error ? error.message : 'Неверный пароль');
|
||
|
||
} finally {
|
||
|
||
setIsSubmitting(false);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
async function chooseMethod(method: LoginMethod) {
|
||
|
||
setShowMethods(false);
|
||
|
||
if (method.kind === 'password') {
|
||
|
||
setPassword('');
|
||
|
||
setStep('password');
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
await requestLoginOtp(method.channel);
|
||
|
||
}
|
||
|
||
|
||
|
||
async function handleLdapSubmit(event: FormEvent<HTMLFormElement>) {
|
||
|
||
event.preventDefault();
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
|
||
const auth = await loginWithLdap(ldapUsername.trim(), ldapPassword);
|
||
|
||
finishAuth(auth.pinVerified, auth.sessionId);
|
||
|
||
} catch (error) {
|
||
|
||
showToast(error instanceof Error ? error.message : 'Не удалось выполнить LDAP-вход');
|
||
|
||
} finally {
|
||
|
||
setIsSubmitting(false);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
async function handlePinSubmit(event: FormEvent<HTMLFormElement>) {
|
||
|
||
event.preventDefault();
|
||
|
||
if (!pendingSessionId) return;
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
|
||
await completePin(pendingSessionId, pin);
|
||
setPendingSessionId(null);
|
||
setPin('');
|
||
finishLoginRedirect();
|
||
|
||
} catch (error) {
|
||
|
||
showToast(error instanceof Error ? error.message : 'Не удалось проверить PIN-код');
|
||
|
||
} finally {
|
||
|
||
setIsSubmitting(false);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
function resetToIdentify() {
|
||
|
||
setStep('identify');
|
||
|
||
setShowMethods(false);
|
||
|
||
setOtp('');
|
||
|
||
setTotpCode('');
|
||
|
||
setTotpChallengeToken(null);
|
||
|
||
setOtpChannels([]);
|
||
|
||
setPassword('');
|
||
|
||
setLdapUsername('');
|
||
|
||
setLdapPassword('');
|
||
|
||
setQrPayload(null);
|
||
|
||
setQrSessionId(null);
|
||
|
||
setQrExpiresAt(null);
|
||
|
||
clearOtpResendAvailableAt(recipient);
|
||
setOtpResendAvailableAt(null);
|
||
setLastOtpChannel(undefined);
|
||
|
||
}
|
||
|
||
|
||
|
||
function renderAlternativeMethods(context: 'select' | 'password' | 'otp' | 'totp') {
|
||
|
||
const passwordMethod = methods.find((method) => method.kind === 'password');
|
||
|
||
const showPassword = context !== 'password' && context !== 'select' && Boolean(passwordMethod);
|
||
|
||
const showPrimaryOtp = context !== 'otp' && context !== 'select' && otpChannels.length > 0;
|
||
|
||
const showBackupOtp = otpBackupChannels.length > 0;
|
||
|
||
const hasAlternatives = showPassword || showPrimaryOtp || showBackupOtp;
|
||
|
||
if (!hasAlternatives) return null;
|
||
|
||
|
||
|
||
return (
|
||
|
||
<div className="mt-6">
|
||
|
||
<Button type="button" variant="outline" size="lg" className="w-full rounded-[18px] border-[#424550] text-white hover:bg-[#2a2c36]" onClick={() => setShowMethods((prev) => !prev)}>
|
||
|
||
<ShieldQuestion className="h-5 w-5" />
|
||
|
||
Другой способ входа
|
||
|
||
</Button>
|
||
|
||
{showMethods ? (
|
||
|
||
<div className="mt-3 space-y-2">
|
||
|
||
{showPrimaryOtp ? (
|
||
|
||
<button
|
||
|
||
type="button"
|
||
|
||
onClick={() => openOtpDelivery()}
|
||
|
||
disabled={isSubmitting}
|
||
|
||
className="flex w-full items-center gap-3 rounded-[16px] bg-[#2a2c36] p-3 text-left hover:bg-[#33353f] disabled:opacity-50"
|
||
|
||
>
|
||
|
||
<Mail className="h-5 w-5 text-[#b9bdc9]" />
|
||
|
||
<span className="text-sm">
|
||
|
||
Получить код на {otpChannels.length > 1 ? 'почту или телефон' : otpChannels[0]?.masked}
|
||
|
||
</span>
|
||
|
||
</button>
|
||
|
||
) : null}
|
||
|
||
{showPassword ? (
|
||
|
||
<button
|
||
|
||
type="button"
|
||
|
||
onClick={() => {
|
||
|
||
if (passwordMethod) void chooseMethod(passwordMethod);
|
||
|
||
}}
|
||
|
||
disabled={isSubmitting}
|
||
|
||
className="flex w-full items-center gap-3 rounded-[16px] bg-[#2a2c36] p-3 text-left hover:bg-[#33353f] disabled:opacity-50"
|
||
|
||
>
|
||
|
||
<KeyRound className="h-5 w-5 text-[#b9bdc9]" />
|
||
|
||
<span className="text-sm">Войти с паролем</span>
|
||
|
||
</button>
|
||
|
||
) : null}
|
||
|
||
{showBackupOtp ? (
|
||
|
||
<>
|
||
|
||
<p className="px-1 pt-1 text-xs uppercase tracking-wide text-[#7d818d]">Резервные контакты</p>
|
||
|
||
{otpBackupChannels.map((channel) => {
|
||
|
||
const Icon = channelIcon[channel.channel] ?? Mail;
|
||
|
||
return (
|
||
|
||
<button
|
||
|
||
key={channel.channel}
|
||
|
||
type="button"
|
||
|
||
onClick={() => void requestLoginOtp(channel.channel)}
|
||
|
||
disabled={isSubmitting}
|
||
|
||
className="flex w-full items-center gap-3 rounded-[16px] bg-[#2a2c36] p-3 text-left hover:bg-[#33353f] disabled:opacity-50"
|
||
|
||
>
|
||
|
||
<Icon className="h-5 w-5 text-[#b9bdc9]" />
|
||
|
||
<span className="text-sm">
|
||
|
||
{channelLabel[channel.channel] ?? 'Резервный код'} — {channel.masked}
|
||
|
||
</span>
|
||
|
||
</button>
|
||
|
||
);
|
||
|
||
})}
|
||
|
||
</>
|
||
|
||
) : null}
|
||
|
||
</div>
|
||
|
||
) : null}
|
||
|
||
</div>
|
||
|
||
);
|
||
|
||
}
|
||
|
||
|
||
|
||
return (
|
||
|
||
<main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_center,#596075_0%,#2b2534_45%,#121017_100%)] px-5">
|
||
|
||
<section className="w-full max-w-[430px] rounded-[34px] bg-[#1f2028] px-9 pb-8 pt-10 text-white shadow-2xl">
|
||
|
||
<div className="mb-8 flex flex-col items-center text-center">
|
||
|
||
<BrandLogo size="lg" variant="light" />
|
||
|
||
<h1 className="mt-8 text-xl font-bold">Войдите с ID</h1>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
{step !== 'identify' ? (
|
||
|
||
<button type="button" onClick={resetToIdentify} className="mb-4 flex items-center gap-1 text-sm text-[#b9bdc9] hover:text-white">
|
||
|
||
<ChevronLeft className="h-4 w-4" />
|
||
|
||
Изменить аккаунт
|
||
|
||
</button>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'identify' ? (
|
||
|
||
<form onSubmit={handleIdentify}>
|
||
|
||
<Tabs value={authTab} onValueChange={(value) => setAuthTab(value as 'email' | 'phone')} className="w-full">
|
||
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
|
||
<TabsTrigger value="email">Почта</TabsTrigger>
|
||
|
||
<TabsTrigger value="phone">Телефон</TabsTrigger>
|
||
|
||
</TabsList>
|
||
|
||
<TabsContent value="email">
|
||
|
||
<Input
|
||
|
||
className="h-[58px] border-[#555762] bg-transparent text-lg text-white placeholder:text-[#8f92a0]"
|
||
|
||
placeholder="name@example.com"
|
||
|
||
type="email"
|
||
|
||
value={email}
|
||
|
||
onChange={(event) => setEmail(event.target.value)}
|
||
|
||
required={authTab === 'email'}
|
||
|
||
/>
|
||
|
||
</TabsContent>
|
||
|
||
<TabsContent value="phone">
|
||
|
||
<PhoneInput country={country} value={phoneNumber} onCountryChange={setCountry} onValueChange={setPhoneNumber} />
|
||
|
||
</TabsContent>
|
||
|
||
</Tabs>
|
||
|
||
<Button variant="white" size="lg" className="mt-8 w-full rounded-[18px] text-base" disabled={isSubmitting}>
|
||
|
||
{isSubmitting ? 'Проверяем...' : 'Далее'}
|
||
|
||
</Button>
|
||
|
||
<Button
|
||
|
||
type="button"
|
||
|
||
variant="outline"
|
||
|
||
size="lg"
|
||
|
||
className="mt-3 w-full rounded-[18px] border-[#424550] text-white hover:bg-[#2a2c36]"
|
||
|
||
disabled={qrLoading}
|
||
|
||
onClick={() => void startQrLogin()}
|
||
|
||
>
|
||
|
||
<QrCode className="h-5 w-5" />
|
||
|
||
{qrLoading ? 'Создаём QR...' : 'Войти по QR-коду'}
|
||
|
||
</Button>
|
||
|
||
{ldapEnabled ? (
|
||
|
||
<Button
|
||
|
||
type="button"
|
||
|
||
variant="outline"
|
||
|
||
size="lg"
|
||
|
||
className="mt-3 w-full rounded-[18px] border-[#424550] text-white hover:bg-[#2a2c36]"
|
||
|
||
onClick={() => {
|
||
|
||
setLdapUsername('');
|
||
|
||
setLdapPassword('');
|
||
|
||
setStep('ldap');
|
||
|
||
}}
|
||
|
||
>
|
||
|
||
<Network className="h-5 w-5" />
|
||
|
||
{ldapUseLdaps ? 'Войти через LDAPS' : 'Войти через LDAP'}
|
||
|
||
</Button>
|
||
|
||
) : null}
|
||
|
||
</form>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'ldap' ? (
|
||
|
||
<form onSubmit={handleLdapSubmit}>
|
||
|
||
<div className="mb-5 flex items-center gap-3 rounded-[20px] bg-[#2a2c36] p-3">
|
||
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-white/10">
|
||
|
||
<Network className="h-5 w-5" />
|
||
|
||
</div>
|
||
|
||
<div className="min-w-0 text-left">
|
||
|
||
<p className="text-sm text-[#b9bdc9]">Корпоративный вход</p>
|
||
|
||
<p className="truncate text-sm font-semibold">{ldapUseLdaps ? 'LDAPS' : 'LDAP'}</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<Input
|
||
|
||
className="h-[58px] border-[#555762] bg-transparent text-lg text-white placeholder:text-[#8f92a0]"
|
||
|
||
placeholder="Логин LDAP"
|
||
|
||
value={ldapUsername}
|
||
|
||
onChange={(event) => setLdapUsername(event.target.value)}
|
||
|
||
autoComplete="username"
|
||
|
||
required
|
||
|
||
/>
|
||
|
||
<Input
|
||
|
||
className="mt-3 h-[58px] border-[#555762] bg-transparent text-lg text-white placeholder:text-[#8f92a0]"
|
||
|
||
placeholder="Пароль LDAP"
|
||
|
||
type="password"
|
||
|
||
value={ldapPassword}
|
||
|
||
onChange={(event) => setLdapPassword(event.target.value)}
|
||
|
||
autoComplete="current-password"
|
||
|
||
required
|
||
|
||
/>
|
||
|
||
<Button variant="white" size="lg" className="mt-8 w-full rounded-[18px] text-base" disabled={isSubmitting}>
|
||
|
||
{isSubmitting ? 'Проверяем...' : ldapUseLdaps ? 'Войти через LDAPS' : 'Войти через LDAP'}
|
||
|
||
</Button>
|
||
|
||
</form>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'otpChannel' ? (
|
||
|
||
<div>
|
||
|
||
<div className="mb-5 flex items-center gap-3 rounded-[20px] bg-[#2a2c36] p-3">
|
||
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-white/10">
|
||
|
||
<UserRound className="h-5 w-5" />
|
||
|
||
</div>
|
||
|
||
<div className="min-w-0 text-left">
|
||
|
||
<p className="text-sm text-[#b9bdc9]">Куда отправить код</p>
|
||
|
||
<p className="truncate text-sm font-semibold">Выберите канал доставки</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
|
||
{otpChannels.map((channel) => {
|
||
|
||
const Icon = channelIcon[channel.channel] ?? Mail;
|
||
|
||
return (
|
||
|
||
<button
|
||
|
||
key={channel.channel}
|
||
|
||
type="button"
|
||
|
||
disabled={isSubmitting}
|
||
|
||
onClick={() => void requestLoginOtp(channel.channel)}
|
||
|
||
className="flex w-full items-center gap-3 rounded-[16px] bg-[#2a2c36] p-3 text-left hover:bg-[#33353f] disabled:opacity-50"
|
||
|
||
>
|
||
|
||
<Icon className="h-5 w-5 text-[#b9bdc9]" />
|
||
|
||
<span className="text-sm">
|
||
|
||
{channelLabel[channel.channel] ?? 'Код'} — {channel.masked}
|
||
|
||
</span>
|
||
|
||
</button>
|
||
|
||
);
|
||
|
||
})}
|
||
|
||
{methods.some((method) => method.kind === 'password') ? (
|
||
|
||
<button
|
||
|
||
type="button"
|
||
|
||
disabled={isSubmitting}
|
||
|
||
onClick={() => {
|
||
|
||
setPassword('');
|
||
|
||
setStep('password');
|
||
|
||
}}
|
||
|
||
className="flex w-full items-center gap-3 rounded-[16px] bg-[#2a2c36] p-3 text-left hover:bg-[#33353f] disabled:opacity-50"
|
||
|
||
>
|
||
|
||
<KeyRound className="h-5 w-5 text-[#b9bdc9]" />
|
||
|
||
<span className="text-sm">Пароль</span>
|
||
|
||
</button>
|
||
|
||
) : null}
|
||
|
||
{otpChannels.length === 0 && !methods.some((method) => method.kind === 'password')
|
||
|
||
? otpBackupChannels.map((channel) => {
|
||
|
||
const Icon = channelIcon[channel.channel] ?? Mail;
|
||
|
||
return (
|
||
|
||
<button
|
||
|
||
key={channel.channel}
|
||
|
||
type="button"
|
||
|
||
disabled={isSubmitting}
|
||
|
||
onClick={() => void requestLoginOtp(channel.channel)}
|
||
|
||
className="flex w-full items-center gap-3 rounded-[16px] bg-[#2a2c36] p-3 text-left hover:bg-[#33353f] disabled:opacity-50"
|
||
|
||
>
|
||
|
||
<Icon className="h-5 w-5 text-[#b9bdc9]" />
|
||
|
||
<span className="text-sm">
|
||
|
||
{channelLabel[channel.channel] ?? 'Резервный код'} — {channel.masked}
|
||
|
||
</span>
|
||
|
||
</button>
|
||
|
||
);
|
||
|
||
})
|
||
|
||
: null}
|
||
|
||
</div>
|
||
|
||
{renderAlternativeMethods('select')}
|
||
|
||
{totpChallengeToken ? (
|
||
|
||
<Button type="button" variant="outline" size="lg" className="mt-6 w-full rounded-[18px] border-[#424550] text-white hover:bg-[#2a2c36]" onClick={() => setStep('totp')}>
|
||
|
||
Вернуться к аутентификатору
|
||
|
||
</Button>
|
||
|
||
) : null}
|
||
|
||
</div>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'otp' ? (
|
||
|
||
<div>
|
||
|
||
<div className="mb-5 flex items-center gap-3 rounded-[20px] bg-[#2a2c36] p-3">
|
||
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-white/10">
|
||
|
||
<UserRound className="h-5 w-5" />
|
||
|
||
</div>
|
||
|
||
<div className="min-w-0 text-left">
|
||
|
||
<p className="text-sm text-[#b9bdc9]">Код отправлен на</p>
|
||
|
||
<p className="truncate text-sm font-semibold">{maskedTarget || recipient}</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<OtpInput value={otp} onChange={setOtp} onComplete={verifyOtp} disabled={isSubmitting} />
|
||
|
||
{isSubmitting ? <p className="mt-3 text-center text-sm text-[#b9bdc9]">Проверяем код...</p> : null}
|
||
|
||
<div className="mt-4 text-center">
|
||
{canResendOtp ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => void handleResendOtp()}
|
||
className="text-sm text-[#b9bdc9] underline-offset-4 transition hover:text-white hover:underline"
|
||
>
|
||
Запросить новый код
|
||
</button>
|
||
) : (
|
||
<p className="text-sm text-[#b9bdc9]">
|
||
Запросить новый код через {formatCooldownSeconds(otpResendSecondsLeft)}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{renderAlternativeMethods('otp')}
|
||
|
||
{totpChallengeToken ? (
|
||
|
||
<Button type="button" variant="outline" size="lg" className="mt-3 w-full rounded-[18px] border-[#424550] text-white hover:bg-[#2a2c36]" onClick={() => setStep('totp')}>
|
||
|
||
Войти через аутентификатор
|
||
|
||
</Button>
|
||
|
||
) : null}
|
||
|
||
</div>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'totp' ? (
|
||
|
||
<div>
|
||
|
||
<div className="mb-5 flex items-center gap-3 rounded-[20px] bg-[#2a2c36] p-3">
|
||
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-white/10">
|
||
|
||
<ShieldCheck className="h-5 w-5" />
|
||
|
||
</div>
|
||
|
||
<div className="min-w-0 text-left">
|
||
|
||
<p className="text-sm text-[#b9bdc9]">Вход в аккаунт</p>
|
||
|
||
<p className="truncate text-sm font-semibold">Код из приложения-аутентификатора</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<OtpInput value={totpCode} onChange={setTotpCode} onComplete={verifyTotp} disabled={isSubmitting} />
|
||
|
||
{isSubmitting ? <p className="mt-3 text-center text-sm text-[#b9bdc9]">Проверяем код...</p> : null}
|
||
|
||
{renderAlternativeMethods('totp')}
|
||
|
||
</div>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'password' ? (
|
||
|
||
<form onSubmit={handlePasswordSubmit}>
|
||
|
||
<div className="mb-5 flex items-center gap-3 rounded-[20px] bg-[#2a2c36] p-3">
|
||
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-white/10">
|
||
|
||
<UserRound className="h-5 w-5" />
|
||
|
||
</div>
|
||
|
||
<div className="min-w-0 text-left">
|
||
|
||
<p className="text-sm text-[#b9bdc9]">Вход в аккаунт</p>
|
||
|
||
<p className="truncate text-sm font-semibold">{recipient}</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<Input
|
||
|
||
className="h-[58px] border-[#555762] bg-transparent text-lg text-white placeholder:text-[#8f92a0]"
|
||
|
||
placeholder="Пароль"
|
||
|
||
type="password"
|
||
|
||
value={password}
|
||
|
||
onChange={(event) => setPassword(event.target.value)}
|
||
|
||
required
|
||
|
||
/>
|
||
|
||
<Button variant="white" size="lg" className="mt-8 w-full rounded-[18px] text-base" disabled={isSubmitting}>
|
||
|
||
{isSubmitting ? 'Входим...' : 'Войти'}
|
||
|
||
</Button>
|
||
|
||
{totpChallengeToken ? (
|
||
|
||
<Button type="button" variant="outline" size="lg" className="mt-3 w-full rounded-[18px] border-[#424550] text-white hover:bg-[#2a2c36]" onClick={() => setStep('totp')}>
|
||
|
||
Войти через аутентификатор
|
||
|
||
</Button>
|
||
|
||
) : null}
|
||
|
||
{renderAlternativeMethods('password')}
|
||
|
||
</form>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'qr' && qrPayload ? (
|
||
|
||
<div className="text-center">
|
||
|
||
<div className="mx-auto flex w-fit rounded-[24px] bg-white p-4">
|
||
|
||
<QRCodeSVG value={qrPayload} size={220} />
|
||
|
||
</div>
|
||
|
||
<p className="mt-5 text-sm leading-relaxed text-[#b9bdc9]">
|
||
|
||
Откройте мобильное приложение ID, отсканируйте код и подтвердите вход на этом устройстве.
|
||
|
||
</p>
|
||
|
||
{qrExpiresAt ? (
|
||
|
||
<p className="mt-2 text-xs text-[#8f92a0]">Код действует до {new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(new Date(qrExpiresAt))}</p>
|
||
|
||
) : null}
|
||
|
||
<Button type="button" variant="outline" size="lg" className="mt-6 w-full rounded-[18px] border-[#424550] text-white hover:bg-[#2a2c36]" disabled={qrLoading} onClick={() => void startQrLogin()}>
|
||
|
||
{qrLoading ? 'Обновляем QR...' : 'Обновить QR-код'}
|
||
|
||
</Button>
|
||
|
||
</div>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'qrLink' ? (
|
||
|
||
<div className="text-center">
|
||
|
||
<Loader2 className="mx-auto h-8 w-8 animate-spin text-white" />
|
||
|
||
<p className="mt-5 text-sm leading-relaxed text-[#b9bdc9]">
|
||
|
||
Подтверждаем подключение устройства. Дождитесь автоматического входа в аккаунт.
|
||
|
||
</p>
|
||
|
||
{qrExpiresAt ? (
|
||
|
||
<p className="mt-2 text-xs text-[#8f92a0]">
|
||
|
||
QR-код действует до {new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(new Date(qrExpiresAt))}
|
||
|
||
</p>
|
||
|
||
) : null}
|
||
|
||
</div>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'pin' && pendingSessionId ? (
|
||
|
||
<form onSubmit={handlePinSubmit} className="space-y-3">
|
||
|
||
<PinInput
|
||
|
||
className="h-[58px] border-[#555762] bg-transparent text-center text-lg tracking-[0.4em] text-white placeholder:text-[#8f92a0]"
|
||
|
||
placeholder="PIN"
|
||
|
||
value={pin}
|
||
|
||
onChange={setPin}
|
||
|
||
required
|
||
|
||
minLength={4}
|
||
|
||
maxLength={6}
|
||
|
||
/>
|
||
|
||
<Button variant="white" size="lg" className="w-full rounded-[18px] text-base" disabled={isSubmitting || !isPinInputComplete(pin)}>
|
||
|
||
{isSubmitting ? 'Проверяем...' : 'Подтвердить PIN'}
|
||
|
||
</Button>
|
||
|
||
</form>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
{step === 'identify' ? (
|
||
|
||
<div className="mt-3">
|
||
|
||
<Button asChild variant="outline" size="lg" className="w-full rounded-[18px] border-[#424550] text-white hover:bg-[#2a2c36]">
|
||
|
||
<Link href="/auth/register">Создать ID</Link>
|
||
|
||
</Button>
|
||
|
||
</div>
|
||
|
||
) : null}
|
||
|
||
|
||
|
||
<ProjectTagline className="mt-9 text-center text-sm font-semibold" />
|
||
|
||
<Link
|
||
href="/downloads"
|
||
className="mx-auto mt-3 flex w-fit items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium text-[#b9bdc9] transition hover:bg-white/10 hover:text-white"
|
||
>
|
||
<Download className="h-3.5 w-3.5" />
|
||
Скачать приложение
|
||
</Link>
|
||
|
||
</section>
|
||
|
||
</main>
|
||
|
||
);
|
||
|
||
}
|
||
|
||
|