394 lines
18 KiB
TypeScript
394 lines
18 KiB
TypeScript
'use client';
|
||
|
||
import { useCallback, useEffect, useState } from 'react';
|
||
import {
|
||
ChevronRight,
|
||
Clock3,
|
||
Fingerprint,
|
||
KeyRound,
|
||
Laptop,
|
||
LogOut,
|
||
Mail,
|
||
Monitor,
|
||
type LucideIcon,
|
||
Phone,
|
||
ShieldCheck,
|
||
Smartphone,
|
||
Speaker,
|
||
Tv
|
||
} from 'lucide-react';
|
||
import { useAuth } from '@/components/id/auth-provider';
|
||
import { IdShell } from '@/components/id/shell';
|
||
import { useToast } from '@/components/id/toast-provider';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||
import { Input } from '@/components/ui/input';
|
||
import { OtpInput } from '@/components/ui/otp-input';
|
||
import { ActiveDevice, apiFetch, SignInEvent, TotpSetupResponse, TotpStatusResponse } from '@/lib/api';
|
||
import { QRCodeSVG } from 'qrcode.react';
|
||
import { useRequireAuth } from '@/hooks/use-require-auth';
|
||
|
||
function formatDate(value: string) {
|
||
return new Intl.DateTimeFormat('ru-RU', {
|
||
day: '2-digit',
|
||
month: 'short',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
}).format(new Date(value));
|
||
}
|
||
|
||
const deviceIcons: Record<string, LucideIcon> = {
|
||
WEB: Monitor,
|
||
DESKTOP: Monitor,
|
||
IOS: Smartphone,
|
||
ANDROID: Smartphone,
|
||
TV: Tv,
|
||
SMART_SPEAKER: Speaker,
|
||
OTHER: Laptop
|
||
};
|
||
|
||
type DialogMode = 'pin' | 'password' | 'backupEmail' | 'backupPhone' | 'totpSetup' | 'totpDisable' | null;
|
||
|
||
const dialogConfig: Record<Exclude<DialogMode, null | 'totpSetup' | 'totpDisable'>, { title: string; placeholder: string; type: string }> = {
|
||
pin: { title: 'Установить PIN-код', placeholder: 'PIN из 4-6 цифр', type: 'password' },
|
||
password: { title: 'Установить пароль', placeholder: 'Новый пароль (мин. 8 символов)', type: 'password' },
|
||
backupEmail: { title: 'Резервная почта', placeholder: 'backup@example.com', type: 'email' },
|
||
backupPhone: { title: 'Резервный телефон', placeholder: '+79991234567', type: 'tel' }
|
||
};
|
||
|
||
export default function SecurityPage() {
|
||
const { user, token } = useAuth();
|
||
const { isReady } = useRequireAuth();
|
||
const { showToast } = useToast();
|
||
const [devices, setDevices] = useState<ActiveDevice[]>([]);
|
||
const [history, setHistory] = useState<SignInEvent[]>([]);
|
||
const [isSecurityLoading, setIsSecurityLoading] = useState(true);
|
||
const [isRevoking, setIsRevoking] = useState(false);
|
||
const [dialogMode, setDialogMode] = useState<DialogMode>(null);
|
||
const [dialogValue, setDialogValue] = useState('');
|
||
const [isDialogSaving, setIsDialogSaving] = useState(false);
|
||
const [totpEnabled, setTotpEnabled] = useState(false);
|
||
const [totpSetup, setTotpSetup] = useState<TotpSetupResponse | null>(null);
|
||
const [totpCode, setTotpCode] = useState('');
|
||
|
||
const loadSecurity = useCallback(async () => {
|
||
if (!user || !token) return;
|
||
setIsSecurityLoading(true);
|
||
try {
|
||
const [devicesResponse, historyResponse, totpResponse] = await Promise.all([
|
||
apiFetch<{ devices: ActiveDevice[] }>(`/security/users/${user.id}/devices`, {}, token),
|
||
apiFetch<{ events: SignInEvent[] }>(`/security/users/${user.id}/sign-in-history`, {}, token),
|
||
apiFetch<TotpStatusResponse>(`/security/users/${user.id}/totp/status`, {}, token)
|
||
]);
|
||
setDevices(devicesResponse.devices ?? []);
|
||
setHistory(historyResponse.events ?? []);
|
||
setTotpEnabled(Boolean(totpResponse.isEnabled));
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось загрузить безопасность');
|
||
} finally {
|
||
setIsSecurityLoading(false);
|
||
}
|
||
}, [showToast, token, user]);
|
||
|
||
useEffect(() => {
|
||
if (!isReady || !user) return;
|
||
void loadSecurity();
|
||
}, [isReady, loadSecurity, user]);
|
||
|
||
async function revokeDevice(deviceId: string) {
|
||
if (!user || !token) return;
|
||
try {
|
||
await apiFetch(`/security/users/${user.id}/devices/${deviceId}/revoke`, { method: 'POST' }, token);
|
||
setDevices((current) => current.filter((device) => device.id !== deviceId));
|
||
showToast('Сессии устройства завершены');
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось завершить сессию');
|
||
}
|
||
}
|
||
|
||
async function revokeAllSessions() {
|
||
if (!user || !token) return;
|
||
setIsRevoking(true);
|
||
try {
|
||
await apiFetch(`/security/users/${user.id}/revoke-all-sessions`, { method: 'POST' }, token);
|
||
showToast('Выход выполнен на всех остальных устройствах');
|
||
await loadSecurity();
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось выйти везде');
|
||
} finally {
|
||
setIsRevoking(false);
|
||
}
|
||
}
|
||
|
||
async function openTotpDialog() {
|
||
if (!user || !token) return;
|
||
if (totpEnabled) {
|
||
setTotpCode('');
|
||
setDialogMode('totpDisable');
|
||
return;
|
||
}
|
||
if (totpSetup) {
|
||
setTotpCode('');
|
||
setDialogMode('totpSetup');
|
||
return;
|
||
}
|
||
setIsDialogSaving(true);
|
||
try {
|
||
const setup = await apiFetch<TotpSetupResponse>(`/security/users/${user.id}/totp/setup`, { method: 'POST' }, token);
|
||
setTotpSetup(setup);
|
||
setTotpCode('');
|
||
setDialogMode('totpSetup');
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось начать настройку аутентификатора');
|
||
} finally {
|
||
setIsDialogSaving(false);
|
||
}
|
||
}
|
||
|
||
async function submitTotpSetup(code: string) {
|
||
if (!user || !token) return;
|
||
setIsDialogSaving(true);
|
||
try {
|
||
await apiFetch(`/security/users/${user.id}/totp/enable`, { method: 'POST', body: JSON.stringify({ code }) }, token);
|
||
setTotpEnabled(true);
|
||
setDialogMode(null);
|
||
setTotpSetup(null);
|
||
setTotpCode('');
|
||
showToast('Приложение-аутентификатор подключено');
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось подтвердить код');
|
||
} finally {
|
||
setIsDialogSaving(false);
|
||
}
|
||
}
|
||
|
||
async function submitTotpDisable(code: string) {
|
||
if (!user || !token) return;
|
||
setIsDialogSaving(true);
|
||
try {
|
||
await apiFetch(`/security/users/${user.id}/totp/disable`, { method: 'POST', body: JSON.stringify({ code }) }, token);
|
||
setTotpEnabled(false);
|
||
setDialogMode(null);
|
||
setTotpCode('');
|
||
showToast('Приложение-аутентификатор отключено');
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось отключить аутентификатор');
|
||
} finally {
|
||
setIsDialogSaving(false);
|
||
}
|
||
}
|
||
|
||
async function submitDialog() {
|
||
if (!user || !token || !dialogMode) return;
|
||
setIsDialogSaving(true);
|
||
try {
|
||
if (dialogMode === 'pin') {
|
||
await apiFetch(`/security/users/${user.id}/pin/setup`, { method: 'POST', body: JSON.stringify({ pin: dialogValue.trim() }) }, token);
|
||
showToast('PIN-код установлен');
|
||
} else if (dialogMode === 'password') {
|
||
await apiFetch(`/profile/users/${user.id}/password`, { method: 'POST', body: JSON.stringify({ password: dialogValue }) }, token);
|
||
showToast('Пароль установлен');
|
||
} else if (dialogMode === 'backupEmail') {
|
||
await apiFetch(`/profile/users/${user.id}/contacts`, { method: 'PATCH', body: JSON.stringify({ backupEmail: dialogValue.trim() }) }, token);
|
||
showToast('Резервная почта добавлена');
|
||
} else if (dialogMode === 'backupPhone') {
|
||
await apiFetch(`/profile/users/${user.id}/contacts`, { method: 'PATCH', body: JSON.stringify({ backupPhone: dialogValue.trim() }) }, token);
|
||
showToast('Резервный телефон добавлен');
|
||
}
|
||
setDialogMode(null);
|
||
setDialogValue('');
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось сохранить');
|
||
} finally {
|
||
setIsDialogSaving(false);
|
||
}
|
||
}
|
||
|
||
function openDialog(mode: Exclude<DialogMode, null>) {
|
||
setDialogValue('');
|
||
setDialogMode(mode);
|
||
}
|
||
|
||
return (
|
||
<IdShell active="/security">
|
||
<p className="text-sm text-[#667085]">Безопасность</p>
|
||
<h1 className="text-4xl font-medium tracking-tight">Устройства</h1>
|
||
<p className="mt-2 max-w-[460px] text-base">На них вы вошли в ID и получаете уведомления безопасности от сервисов</p>
|
||
|
||
<div className="mt-8 space-y-2">
|
||
{isSecurityLoading ? (
|
||
<div className="rounded-[20px] bg-[#f4f5f8] px-4 py-5 text-[#667085]">Загружаем устройства...</div>
|
||
) : devices.length ? (
|
||
devices.map((device) => {
|
||
const Icon = deviceIcons[device.type] ?? Laptop;
|
||
return (
|
||
<div key={device.id} className="flex items-center gap-4 rounded-[20px] bg-[#f4f5f8] px-4 py-3">
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white">
|
||
<Icon className="h-5 w-5" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<span className="block truncate font-medium">{device.name}</span>
|
||
<span className="text-xs text-[#667085]">{device.lastIp ?? 'IP не сохранён'} · {formatDate(device.lastSeenAt)}</span>
|
||
</div>
|
||
<Button variant="ghost" size="sm" className="shrink-0 text-[#d14343] hover:bg-[#fbeaea]" onClick={() => revokeDevice(device.id)}>
|
||
Выйти
|
||
</Button>
|
||
</div>
|
||
);
|
||
})
|
||
) : (
|
||
<div className="rounded-[20px] bg-[#f4f5f8] px-4 py-5 text-[#667085]">Активных устройств пока нет</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-6 space-y-1">
|
||
<button type="button" onClick={revokeAllSessions} disabled={isRevoking || !user} className="flex w-full items-center gap-4 border-t border-[#eceef4] py-4 text-left disabled:opacity-60">
|
||
<LogOut className="h-6 w-6" />
|
||
<span>{isRevoking ? 'Выходим...' : 'Выйти везде'}</span>
|
||
</button>
|
||
<p className="text-sm text-[#667085]">Завершит сессии на всех устройствах, кроме текущего. Выход с этого устройства — через меню профиля.</p>
|
||
</div>
|
||
|
||
<section className="mt-10">
|
||
<h2 className="text-2xl font-medium">Дополнительная защита</h2>
|
||
<div className="mt-4 space-y-2">
|
||
<button type="button" onClick={() => void openTotpDialog()} disabled={isDialogSaving} className="flex w-full items-center gap-4 rounded-[18px] bg-[#f8f9fb] p-4 text-left hover:bg-[#f1f2f6] disabled:opacity-60">
|
||
<ShieldCheck className="h-5 w-5" />
|
||
<div className="flex-1">
|
||
<p className="font-medium">Приложение-аутентификатор</p>
|
||
<p className="text-sm text-[#667085]">
|
||
{totpEnabled ? 'Google Authenticator и аналоги подключены' : 'Подключите OTP-коды через Google Authenticator'}
|
||
</p>
|
||
</div>
|
||
<ChevronRight className="h-5 w-5 text-[#a8adbc]" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="mt-10">
|
||
<h2 className="text-2xl font-medium">Способ входа в профиль</h2>
|
||
<div className="mt-4 space-y-2">
|
||
<button type="button" onClick={() => openDialog('pin')} className="flex w-full items-center gap-4 rounded-[18px] bg-[#f8f9fb] p-4 text-left hover:bg-[#f1f2f6]">
|
||
<Fingerprint className="h-5 w-5" />
|
||
<div className="flex-1">
|
||
<p className="font-medium">PIN-код</p>
|
||
<p className="text-sm text-[#667085]">Установить или изменить PIN для входа</p>
|
||
</div>
|
||
<ChevronRight className="h-5 w-5 text-[#a8adbc]" />
|
||
</button>
|
||
<button type="button" onClick={() => openDialog('password')} className="flex w-full items-center gap-4 rounded-[18px] bg-[#f8f9fb] p-4 text-left hover:bg-[#f1f2f6]">
|
||
<KeyRound className="h-5 w-5" />
|
||
<div className="flex-1">
|
||
<p className="font-medium">Пароль</p>
|
||
<p className="text-sm text-[#667085]">{user?.email || user?.phone ? 'Добавить пароль как способ входа' : 'Установить пароль'}</p>
|
||
</div>
|
||
<ChevronRight className="h-5 w-5 text-[#a8adbc]" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="mt-10">
|
||
<h2 className="text-2xl font-medium">Способы восстановления</h2>
|
||
<div className="mt-4 space-y-2">
|
||
<button type="button" onClick={() => openDialog('backupEmail')} className="flex w-full items-center gap-4 rounded-[18px] bg-[#f8f9fb] p-4 text-left hover:bg-[#f1f2f6]">
|
||
<Mail className="h-5 w-5" />
|
||
<div className="flex-1">
|
||
<p className="font-medium">Резервная почта</p>
|
||
<p className="text-sm text-[#667085]">{user?.backupEmail || 'Не добавлена'}</p>
|
||
</div>
|
||
<ChevronRight className="h-5 w-5 text-[#a8adbc]" />
|
||
</button>
|
||
<button type="button" onClick={() => openDialog('backupPhone')} className="flex w-full items-center gap-4 rounded-[18px] bg-[#f8f9fb] p-4 text-left hover:bg-[#f1f2f6]">
|
||
<Phone className="h-5 w-5" />
|
||
<div className="flex-1">
|
||
<p className="font-medium">Резервный телефон</p>
|
||
<p className="text-sm text-[#667085]">{user?.backupPhone || 'Не добавлен'}</p>
|
||
</div>
|
||
<ChevronRight className="h-5 w-5 text-[#a8adbc]" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="mt-10">
|
||
<h2 className="text-2xl font-medium">Активность</h2>
|
||
<div className="mt-4 space-y-3">
|
||
{isSecurityLoading ? (
|
||
<div className="text-[#667085]">Загружаем историю входов...</div>
|
||
) : history.length ? (
|
||
history.map((item) => (
|
||
<div key={item.id} className="flex items-center gap-4 border-b border-[#eceef4] pb-3">
|
||
<Clock3 className="h-5 w-5" />
|
||
<span className="flex-1">{item.success ? 'Успешный вход' : item.reason ?? 'Неудачная попытка входа'}</span>
|
||
<span className="text-sm text-[#667085]">{formatDate(item.createdAt)}</span>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="text-[#667085]">История входов пока пуста</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<Dialog open={dialogMode !== null} onOpenChange={(open) => {
|
||
if (!open) {
|
||
setDialogMode(null);
|
||
if (dialogMode !== 'totpSetup' || totpEnabled) {
|
||
setTotpSetup(null);
|
||
}
|
||
setTotpCode('');
|
||
}
|
||
}}>
|
||
<DialogContent>
|
||
{dialogMode === 'totpSetup' && totpSetup ? (
|
||
<>
|
||
<DialogHeader>
|
||
<DialogTitle>Подключить аутентификатор</DialogTitle>
|
||
</DialogHeader>
|
||
<p className="text-sm text-[#667085]">Отсканируйте QR-код в Google Authenticator или аналоге, затем введите 6-значный код.</p>
|
||
<div className="flex justify-center rounded-2xl bg-white p-4">
|
||
<QRCodeSVG value={totpSetup.otpauthUrl} size={180} />
|
||
</div>
|
||
<p className="break-all rounded-2xl bg-[#f4f5f8] px-4 py-3 text-sm text-[#667085]">
|
||
Ключ: <span className="font-mono text-[#111827]">{totpSetup.secret}</span>
|
||
</p>
|
||
<OtpInput variant="light" value={totpCode} onChange={setTotpCode} onComplete={(code) => void submitTotpSetup(code)} disabled={isDialogSaving} />
|
||
{isDialogSaving ? <p className="text-center text-sm text-[#667085]">Проверяем код...</p> : null}
|
||
</>
|
||
) : null}
|
||
|
||
{dialogMode === 'totpDisable' ? (
|
||
<>
|
||
<DialogHeader>
|
||
<DialogTitle>Отключить аутентификатор</DialogTitle>
|
||
</DialogHeader>
|
||
<p className="text-sm text-[#667085]">Введите код из приложения, чтобы отключить двухфакторную аутентификацию.</p>
|
||
<OtpInput variant="light" value={totpCode} onChange={setTotpCode} onComplete={(code) => void submitTotpDisable(code)} disabled={isDialogSaving} />
|
||
{isDialogSaving ? <p className="text-center text-sm text-[#667085]">Проверяем код...</p> : null}
|
||
</>
|
||
) : null}
|
||
|
||
{dialogMode && dialogMode !== 'totpSetup' && dialogMode !== 'totpDisable' ? (
|
||
<>
|
||
<DialogHeader>
|
||
<DialogTitle>{dialogConfig[dialogMode].title}</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="flex items-center gap-3 rounded-2xl bg-[#f4f5f8] px-4">
|
||
<ShieldCheck className="h-5 w-5 text-[#667085]" />
|
||
<Input
|
||
className="border-0 bg-transparent focus:ring-0"
|
||
type={dialogConfig[dialogMode].type}
|
||
placeholder={dialogConfig[dialogMode].placeholder}
|
||
value={dialogValue}
|
||
onChange={(event) => setDialogValue(event.target.value)}
|
||
/>
|
||
</div>
|
||
<Button className="mt-5 w-full" onClick={submitDialog} disabled={isDialogSaving || !dialogValue.trim()}>
|
||
{isDialogSaving ? 'Сохраняем...' : 'Сохранить'}
|
||
</Button>
|
||
</>
|
||
) : null}
|
||
</DialogContent>
|
||
</Dialog>
|
||
</IdShell>
|
||
);
|
||
}
|