Добавлены новые зависимости, обновлены стили и улучшена структура проекта. Обновлен README с описанием функционала и технологий. Реализована анимация и адаптивный дизайн. Настроена авторизация с использованием Apollo Client.
This commit is contained in:
Bivekich
269
src/components/auth/auth-flow.tsx
Normal file
269
src/components/auth/auth-flow.tsx
Normal file
@ -0,0 +1,269 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { PhoneStep } from "./phone-step"
|
||||
import { SmsStep } from "./sms-step"
|
||||
import { CabinetSelectStep } from "./cabinet-select-step"
|
||||
import { InnStep } from "./inn-step"
|
||||
import { MarketplaceApiStep } from "./marketplace-api-step"
|
||||
import { ConfirmationStep } from "./confirmation-step"
|
||||
import { CheckCircle } from "lucide-react"
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
|
||||
type AuthStep = 'phone' | 'sms' | 'cabinet-select' | 'inn' | 'marketplace-api' | 'confirmation' | 'complete'
|
||||
type CabinetType = 'fulfillment' | 'seller' | 'logist' | 'wholesale'
|
||||
|
||||
interface OrganizationData {
|
||||
name?: string
|
||||
fullName?: string
|
||||
address?: string
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
interface ApiKeyValidation {
|
||||
sellerId?: string
|
||||
sellerName?: string
|
||||
isValid?: boolean
|
||||
}
|
||||
|
||||
interface AuthData {
|
||||
phone: string
|
||||
smsCode: string
|
||||
cabinetType: CabinetType | null
|
||||
inn: string
|
||||
organizationData: OrganizationData | null
|
||||
wbApiKey: string
|
||||
wbApiValidation: ApiKeyValidation | null
|
||||
ozonApiKey: string
|
||||
ozonApiValidation: ApiKeyValidation | null
|
||||
isAuthenticated: boolean
|
||||
partnerCode?: string | null
|
||||
}
|
||||
|
||||
interface AuthFlowProps {
|
||||
partnerCode?: string | null
|
||||
}
|
||||
|
||||
export function AuthFlow({ partnerCode }: AuthFlowProps = {}) {
|
||||
const [step, setStep] = useState<AuthStep>('phone')
|
||||
const [authData, setAuthData] = useState<AuthData>({
|
||||
phone: '',
|
||||
smsCode: '',
|
||||
cabinetType: null,
|
||||
inn: '',
|
||||
organizationData: null,
|
||||
wbApiKey: '',
|
||||
wbApiValidation: null,
|
||||
ozonApiKey: '',
|
||||
ozonApiValidation: null,
|
||||
isAuthenticated: false,
|
||||
partnerCode: partnerCode
|
||||
})
|
||||
|
||||
const { verifySmsCode, checkAuth } = useAuth()
|
||||
|
||||
// При завершении авторизации инициируем проверку и перенаправление
|
||||
useEffect(() => {
|
||||
if (step === 'complete') {
|
||||
const timer = setTimeout(() => {
|
||||
// Принудительно перенаправляем в дашборд
|
||||
window.location.href = '/dashboard'
|
||||
}, 2000) // Задержка для показа сообщения о завершении
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [step])
|
||||
|
||||
const handlePhoneNext = (phone: string) => {
|
||||
setAuthData(prev => ({ ...prev, phone }))
|
||||
setStep('sms')
|
||||
}
|
||||
|
||||
const handleSmsNext = async (smsCode: string) => {
|
||||
setAuthData(prev => ({ ...prev, smsCode, isAuthenticated: true }))
|
||||
|
||||
// SMS код уже проверен в SmsStep компоненте
|
||||
// Просто переходим к следующему шагу
|
||||
setStep('cabinet-select')
|
||||
}
|
||||
|
||||
const handleCabinetNext = (cabinetType: CabinetType) => {
|
||||
setAuthData(prev => ({ ...prev, cabinetType }))
|
||||
if (cabinetType === 'fulfillment' || cabinetType === 'logist' || cabinetType === 'wholesale') {
|
||||
setStep('inn')
|
||||
} else {
|
||||
setStep('marketplace-api')
|
||||
}
|
||||
}
|
||||
|
||||
const handleInnNext = (inn: string, organizationData?: OrganizationData) => {
|
||||
setAuthData(prev => ({
|
||||
...prev,
|
||||
inn,
|
||||
organizationData: organizationData || null
|
||||
}))
|
||||
setStep('confirmation')
|
||||
}
|
||||
|
||||
const handleMarketplaceApiNext = (apiData: {
|
||||
wbApiKey?: string
|
||||
wbApiValidation?: ApiKeyValidation
|
||||
ozonApiKey?: string
|
||||
ozonApiValidation?: ApiKeyValidation
|
||||
}) => {
|
||||
setAuthData(prev => ({
|
||||
...prev,
|
||||
wbApiKey: apiData.wbApiKey || '',
|
||||
wbApiValidation: apiData.wbApiValidation || null,
|
||||
ozonApiKey: apiData.ozonApiKey || '',
|
||||
ozonApiValidation: apiData.ozonApiValidation || null
|
||||
}))
|
||||
setStep('confirmation')
|
||||
}
|
||||
|
||||
const handleConfirmation = () => {
|
||||
setStep('complete')
|
||||
}
|
||||
|
||||
const handlePhoneBack = () => {
|
||||
setStep('phone')
|
||||
}
|
||||
|
||||
const handleSmsBack = () => {
|
||||
setStep('phone')
|
||||
}
|
||||
|
||||
const handleCabinetBack = () => {
|
||||
setStep('sms')
|
||||
}
|
||||
|
||||
const handleInnBack = () => {
|
||||
setStep('cabinet-select')
|
||||
}
|
||||
|
||||
const handleMarketplaceApiBack = () => {
|
||||
setStep('cabinet-select')
|
||||
}
|
||||
|
||||
const handleConfirmationBack = () => {
|
||||
if (authData.cabinetType === 'fulfillment' || authData.cabinetType === 'logist' || authData.cabinetType === 'wholesale') {
|
||||
setStep('inn')
|
||||
} else {
|
||||
setStep('marketplace-api')
|
||||
}
|
||||
}
|
||||
|
||||
if (step === 'complete') {
|
||||
return (
|
||||
<div className="min-h-screen bg-animated flex items-center justify-center p-4">
|
||||
{/* Floating Particles */}
|
||||
<div className="particles">
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-white max-w-md relative z-10">
|
||||
<div className="bg-white/10 backdrop-blur rounded-2xl p-8 border border-white/20 glow-purple">
|
||||
<CheckCircle className="h-20 w-20 mx-auto mb-6 text-green-400 animate-pulse" />
|
||||
<h1 className="text-3xl font-bold text-gradient-bright mb-4">Добро пожаловать!</h1>
|
||||
<p className="text-white/80 mb-4">Регистрация успешно завершена</p>
|
||||
<div className="bg-white/5 rounded-lg p-4 mb-6">
|
||||
<p className="text-white/60 text-sm mb-2">Тип кабинета:</p>
|
||||
<p className="text-white font-medium">
|
||||
{
|
||||
authData.cabinetType === 'fulfillment' ? 'Фулфилмент' :
|
||||
authData.cabinetType === 'logist' ? 'Логистика' :
|
||||
authData.cabinetType === 'wholesale' ? 'Оптовик' :
|
||||
'Селлер'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 text-white/60 text-sm">
|
||||
<div className="animate-spin h-4 w-4 border-2 border-white/20 border-t-white/60 rounded-full"></div>
|
||||
Переход в личный кабинет...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{step === 'phone' && <PhoneStep onNext={handlePhoneNext} />}
|
||||
{step === 'sms' && (
|
||||
<SmsStep
|
||||
phone={authData.phone}
|
||||
onNext={handleSmsNext}
|
||||
onBack={handleSmsBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'cabinet-select' && (
|
||||
<CabinetSelectStep
|
||||
onNext={handleCabinetNext}
|
||||
onBack={handleCabinetBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'inn' && (
|
||||
<InnStep
|
||||
onNext={handleInnNext}
|
||||
onBack={handleInnBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'marketplace-api' && (
|
||||
<MarketplaceApiStep
|
||||
onNext={handleMarketplaceApiNext}
|
||||
onBack={handleMarketplaceApiBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'confirmation' && (
|
||||
<ConfirmationStep
|
||||
data={{
|
||||
phone: authData.phone,
|
||||
cabinetType: authData.cabinetType!,
|
||||
inn: authData.inn || undefined,
|
||||
organizationData: authData.organizationData || undefined,
|
||||
wbApiKey: authData.wbApiKey || undefined,
|
||||
wbApiValidation: authData.wbApiValidation || undefined,
|
||||
ozonApiKey: authData.ozonApiKey || undefined,
|
||||
ozonApiValidation: authData.ozonApiValidation || undefined
|
||||
}}
|
||||
onConfirm={handleConfirmation}
|
||||
onBack={handleConfirmationBack}
|
||||
/>
|
||||
)}
|
||||
{step === 'complete' && (
|
||||
<div className="space-y-6 text-center">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<CheckCircle className="w-10 h-10 text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Регистрация завершена!
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
Ваш {authData.cabinetType === 'fulfillment' ? 'фулфилмент кабинет' :
|
||||
authData.cabinetType === 'seller' ? 'селлер кабинет' :
|
||||
authData.cabinetType === 'logist' ? 'логистический кабинет' : 'оптовый кабинет'}
|
||||
{' '}успешно создан
|
||||
</p>
|
||||
</div>
|
||||
<div className="animate-pulse">
|
||||
<p className="text-sm text-gray-500">
|
||||
Переход в личный кабинет...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
140
src/components/auth/auth-layout.tsx
Normal file
140
src/components/auth/auth-layout.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
"use client"
|
||||
|
||||
import { ReactNode } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Truck, Package, ShoppingCart } from "lucide-react"
|
||||
|
||||
interface AuthLayoutProps {
|
||||
children: ReactNode
|
||||
title: string
|
||||
description?: string
|
||||
currentStep?: number
|
||||
totalSteps?: number
|
||||
stepName?: string
|
||||
}
|
||||
|
||||
export function AuthLayout({
|
||||
children,
|
||||
title,
|
||||
description,
|
||||
currentStep = 1,
|
||||
totalSteps = 5,
|
||||
stepName = "Авторизация"
|
||||
}: AuthLayoutProps) {
|
||||
const progressValue = (currentStep / totalSteps) * 100
|
||||
const showProgress = currentStep > 1 // Показываем прогресс только после первого шага
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-animated flex items-center justify-center p-3">
|
||||
{/* Floating Particles */}
|
||||
<div className="particles">
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
<div className="particle"></div>
|
||||
</div>
|
||||
|
||||
{/* Контейнер для выравнивания левой и правой частей */}
|
||||
<div className="w-full max-w-7xl mx-auto flex items-center justify-center relative z-10">
|
||||
{/* Левая часть - Информация о продукте */}
|
||||
<div className="hidden lg:flex lg:w-1/2 items-center justify-center px-8">
|
||||
<div className="max-w-lg text-center">
|
||||
<h1 className="text-6xl font-bold text-gradient-bright glow-text mb-4 tracking-tight">
|
||||
SferaV
|
||||
</h1>
|
||||
<p className="text-white/90 text-xl font-medium mb-8">Управление бизнесом</p>
|
||||
|
||||
<div className="space-y-6 text-left">
|
||||
<div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Truck className="h-5 w-5 text-purple-400" />
|
||||
<h3 className="text-white font-semibold">Фулфилмент</h3>
|
||||
</div>
|
||||
<p className="text-white/70 text-sm">Полный цикл обработки заказов от получения до доставки клиенту</p>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Package className="h-5 w-5 text-blue-400" />
|
||||
<h3 className="text-white font-semibold">Логистика</h3>
|
||||
</div>
|
||||
<p className="text-white/70 text-sm">Управление складскими операциями и доставкой товаров</p>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur rounded-lg p-4 border border-white/20">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<ShoppingCart className="h-5 w-5 text-green-400" />
|
||||
<h3 className="text-white font-semibold">Селлер</h3>
|
||||
</div>
|
||||
<p className="text-white/70 text-sm">Интеграция с маркетплейсами и управление продажами</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правая часть - Форма авторизации */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center px-4 lg:px-8">
|
||||
<div className="max-w-md w-full">
|
||||
{/* Мобильный заголовок */}
|
||||
<div className="lg:hidden text-center mb-6">
|
||||
<h1 className="text-4xl font-bold text-gradient-bright glow-text mb-2 tracking-tight">
|
||||
SferaV
|
||||
</h1>
|
||||
<p className="text-white/90 text-sm font-medium">Управление бизнесом</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Section - показываем только после первого шага */}
|
||||
{showProgress && (
|
||||
<div className="mb-6 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="glass-secondary text-white/80 text-xs">
|
||||
Шаг {currentStep} из {totalSteps}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="glass-secondary text-white/60 border-white/20 text-xs">
|
||||
{stepName}
|
||||
</Badge>
|
||||
</div>
|
||||
<Progress
|
||||
value={progressValue}
|
||||
className="h-1.5 bg-white/10"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card className="glass-card glow-purple">
|
||||
<CardHeader className="text-center pb-4">
|
||||
<CardTitle className="text-xl font-semibold text-white">
|
||||
{title}
|
||||
</CardTitle>
|
||||
{description && (
|
||||
<>
|
||||
<Separator className="bg-white/20 my-2" />
|
||||
<CardDescription className="text-white/70 text-sm">
|
||||
{description}
|
||||
</CardDescription>
|
||||
</>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 pt-0">
|
||||
{children}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Дополнительная информация */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-white/60 text-xs">
|
||||
Регистрируясь, вы соглашаетесь с условиями использования
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
114
src/components/auth/cabinet-select-step.tsx
Normal file
114
src/components/auth/cabinet-select-step.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { Package, ShoppingCart, ArrowLeft, Truck, Building2 } from "lucide-react"
|
||||
|
||||
interface CabinetSelectStepProps {
|
||||
onNext: (cabinetType: 'fulfillment' | 'seller' | 'logist' | 'wholesale') => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function CabinetSelectStep({ onNext, onBack }: CabinetSelectStepProps) {
|
||||
const cabinets = [
|
||||
{
|
||||
id: 'fulfillment' as const,
|
||||
title: 'Фулфилмент',
|
||||
description: 'Склады и логистика',
|
||||
icon: Package,
|
||||
features: ['Склады', 'Логистика', 'ИНН'],
|
||||
color: 'blue'
|
||||
},
|
||||
{
|
||||
id: 'seller' as const,
|
||||
title: 'Селлер',
|
||||
description: 'Продажи на маркетплейсах',
|
||||
icon: ShoppingCart,
|
||||
features: ['Wildberries', 'Ozon', 'Аналитика'],
|
||||
color: 'purple'
|
||||
},
|
||||
{
|
||||
id: 'logist' as const,
|
||||
title: 'Логистика',
|
||||
description: 'Логистические решения',
|
||||
icon: Truck,
|
||||
features: ['Доставка', 'Склады', 'ИНН'],
|
||||
color: 'green'
|
||||
},
|
||||
{
|
||||
id: 'wholesale' as const,
|
||||
title: 'Оптовик',
|
||||
description: 'Оптовые продажи',
|
||||
icon: Building2,
|
||||
features: ['Опт', 'Поставки', 'ИНН'],
|
||||
color: 'orange'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Выберите тип кабинета"
|
||||
description="Выберите кабинет для управления"
|
||||
currentStep={3}
|
||||
totalSteps={5}
|
||||
stepName="Тип кабинета"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{cabinets.map((cabinet) => {
|
||||
const IconComponent = cabinet.icon
|
||||
return (
|
||||
<button
|
||||
key={cabinet.id}
|
||||
onClick={() => onNext(cabinet.id)}
|
||||
className="glass-card p-4 text-left transition-all hover:scale-[1.02] group relative h-full"
|
||||
>
|
||||
<div className="flex flex-col items-center text-center space-y-3">
|
||||
<div className={`p-3 rounded-lg ${
|
||||
cabinet.color === 'blue' ? 'bg-blue-500/20' :
|
||||
cabinet.color === 'purple' ? 'bg-purple-500/20' :
|
||||
cabinet.color === 'green' ? 'bg-green-500/20' :
|
||||
'bg-orange-500/20'
|
||||
}`}>
|
||||
<IconComponent className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-semibold text-white">{cabinet.title}</h3>
|
||||
<p className="text-white/70 text-xs">
|
||||
{cabinet.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-1 justify-center">
|
||||
{cabinet.features.slice(0, 2).map((feature, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="outline"
|
||||
className="glass-secondary text-white/60 border-white/20 text-xs px-1 py-0"
|
||||
>
|
||||
{feature}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
360
src/components/auth/confirmation-step.tsx
Normal file
360
src/components/auth/confirmation-step.tsx
Normal file
@ -0,0 +1,360 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { Package, UserCheck, Phone, FileText, Key, ArrowLeft, Check, Zap, Truck, Building2 } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
|
||||
interface OrganizationData {
|
||||
name?: string
|
||||
fullName?: string
|
||||
address?: string
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
interface ApiKeyValidation {
|
||||
sellerId?: string
|
||||
sellerName?: string
|
||||
isValid?: boolean
|
||||
}
|
||||
|
||||
interface ConfirmationStepProps {
|
||||
data: {
|
||||
phone: string
|
||||
cabinetType: 'fulfillment' | 'seller' | 'logist' | 'wholesale'
|
||||
inn?: string
|
||||
organizationData?: OrganizationData
|
||||
wbApiKey?: string
|
||||
wbApiValidation?: ApiKeyValidation
|
||||
ozonApiKey?: string
|
||||
ozonApiValidation?: ApiKeyValidation
|
||||
}
|
||||
onConfirm: () => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function ConfirmationStep({ data, onConfirm, onBack }: ConfirmationStepProps) {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const { registerFulfillmentOrganization, registerSellerOrganization } = useAuth()
|
||||
|
||||
const formatPhone = (phone: string) => {
|
||||
return phone || "+7 (___) ___-__-__"
|
||||
}
|
||||
|
||||
const formatApiKey = (key?: string) => {
|
||||
if (!key) return ""
|
||||
return key.substring(0, 4) + "•".repeat(key.length - 8) + key.substring(key.length - 4)
|
||||
}
|
||||
|
||||
const handleConfirm = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
let result
|
||||
|
||||
if ((data.cabinetType === 'fulfillment' || data.cabinetType === 'logist' || data.cabinetType === 'wholesale') && data.inn) {
|
||||
result = await registerFulfillmentOrganization(
|
||||
data.phone.replace(/\D/g, ''),
|
||||
data.inn
|
||||
)
|
||||
} else if (data.cabinetType === 'seller') {
|
||||
result = await registerSellerOrganization({
|
||||
phone: data.phone.replace(/\D/g, ''),
|
||||
wbApiKey: data.wbApiKey,
|
||||
ozonApiKey: data.ozonApiKey
|
||||
})
|
||||
}
|
||||
|
||||
if (result?.success) {
|
||||
onConfirm()
|
||||
} else {
|
||||
setError(result?.message || 'Ошибка при регистрации организации')
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('Registration error:', error)
|
||||
setError('Произошла ошибка при регистрации. Попробуйте еще раз.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Подтверждение данных"
|
||||
description="Проверьте введенные данные перед завершением"
|
||||
currentStep={5}
|
||||
totalSteps={5}
|
||||
stepName="Подтверждение"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Объединенная карточка с данными */}
|
||||
<div className="glass-card p-4 space-y-3">
|
||||
{/* Телефон */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="h-4 w-4 text-white" />
|
||||
<span className="text-white text-sm">Телефон:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/70 text-sm">{formatPhone(data.phone)}</span>
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Тип кабинета */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{data.cabinetType === 'fulfillment' ? (
|
||||
<Package className="h-4 w-4 text-white" />
|
||||
) : data.cabinetType === 'logist' ? (
|
||||
<Truck className="h-4 w-4 text-white" />
|
||||
) : data.cabinetType === 'wholesale' ? (
|
||||
<Building2 className="h-4 w-4 text-white" />
|
||||
) : (
|
||||
<UserCheck className="h-4 w-4 text-white" />
|
||||
)}
|
||||
<span className="text-white text-sm">Кабинет:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/70 text-sm">
|
||||
{data.cabinetType === 'fulfillment' ? 'Фулфилмент' :
|
||||
data.cabinetType === 'logist' ? 'Логистика' :
|
||||
data.cabinetType === 'wholesale' ? 'Оптовик' :
|
||||
'Селлер'}
|
||||
</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={`glass-secondary text-xs flex items-center gap-1 ${
|
||||
data.cabinetType === 'fulfillment'
|
||||
? "text-blue-300 border-blue-400/30"
|
||||
: data.cabinetType === 'logist'
|
||||
? "text-green-300 border-green-400/30"
|
||||
: data.cabinetType === 'wholesale'
|
||||
? "text-orange-300 border-orange-400/30"
|
||||
: "text-purple-300 border-purple-400/30"
|
||||
}`}
|
||||
>
|
||||
{data.cabinetType === 'fulfillment' ? (
|
||||
<Package className="h-3 w-3" />
|
||||
) : data.cabinetType === 'logist' ? (
|
||||
<Truck className="h-3 w-3" />
|
||||
) : data.cabinetType === 'wholesale' ? (
|
||||
<Building2 className="h-3 w-3" />
|
||||
) : (
|
||||
<UserCheck className="h-3 w-3" />
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Данные организации */}
|
||||
{(data.cabinetType === 'fulfillment' || data.cabinetType === 'logist' || data.cabinetType === 'wholesale') && data.inn && (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 text-white" />
|
||||
<span className="text-white text-sm">ИНН:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/70 text-sm font-mono">{data.inn}</span>
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Данные организации из DaData */}
|
||||
{data.organizationData && (
|
||||
<>
|
||||
{data.organizationData.name && (
|
||||
<div className="flex items-center justify-between pl-6">
|
||||
<span className="text-white/60 text-sm">Название:</span>
|
||||
<span className="text-white/90 text-sm max-w-[240px] text-right truncate">
|
||||
{data.organizationData.name}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.organizationData.fullName && data.organizationData.fullName !== data.organizationData.name && (
|
||||
<div className="flex items-center justify-between pl-6">
|
||||
<span className="text-white/60 text-sm">Полное название:</span>
|
||||
<span className="text-white/70 text-xs max-w-[200px] text-right truncate">
|
||||
{data.organizationData.fullName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.organizationData.address && (
|
||||
<div className="flex items-center justify-between pl-6">
|
||||
<span className="text-white/60 text-sm">Адрес:</span>
|
||||
<span className="text-white/70 text-xs max-w-[200px] text-right truncate">
|
||||
{data.organizationData.address}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pl-6">
|
||||
<span className="text-white/60 text-sm">Статус:</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs flex items-center gap-1 ${
|
||||
data.organizationData.isActive
|
||||
? "glass-secondary text-green-300 border-green-400/30"
|
||||
: "glass-secondary text-red-300 border-red-400/30"
|
||||
}`}
|
||||
>
|
||||
{data.organizationData.isActive ? (
|
||||
<>
|
||||
<Check className="h-3 w-3" />
|
||||
Активна
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FileText className="h-3 w-3" />
|
||||
Неактивна
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* API ключи для селлера */}
|
||||
{data.cabinetType === 'seller' && (data.wbApiKey || data.ozonApiKey) && (
|
||||
<>
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<Key className="h-4 w-4 text-white" />
|
||||
<span className="text-white text-sm">API ключи:</span>
|
||||
<Badge variant="outline" className="glass-secondary text-yellow-300 border-yellow-400/30 text-xs ml-auto flex items-center gap-1">
|
||||
<Zap className="h-3 w-3" />
|
||||
Активны
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{data.wbApiKey && (
|
||||
<div className="space-y-2 pl-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/60 text-sm">Wildberries</span>
|
||||
<Badge variant="outline" className="glass-secondary text-purple-300 border-purple-400/30 text-xs">
|
||||
WB
|
||||
</Badge>
|
||||
</div>
|
||||
{data.wbApiValidation?.sellerName ? (
|
||||
<span className="text-white/70 text-xs max-w-[120px] text-right truncate">
|
||||
{data.wbApiValidation.sellerName}
|
||||
</span>
|
||||
) : (
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
Подключен
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{data.wbApiValidation && (
|
||||
<>
|
||||
{data.wbApiValidation.sellerName && (
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<span className="text-white/50 text-xs">Магазин:</span>
|
||||
<span className="text-white/70 text-xs max-w-[160px] text-right truncate">
|
||||
{data.wbApiValidation.sellerName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{data.wbApiValidation.sellerId && (
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<span className="text-white/50 text-xs">ID продавца:</span>
|
||||
<span className="text-white/70 text-xs font-mono">
|
||||
{data.wbApiValidation.sellerId}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.ozonApiKey && (
|
||||
<div className="space-y-2 pl-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/60 text-sm">Ozon</span>
|
||||
<Badge variant="outline" className="glass-secondary text-blue-300 border-blue-400/30 text-xs">
|
||||
OZ
|
||||
</Badge>
|
||||
</div>
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
Подключен
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{data.ozonApiValidation && (
|
||||
<>
|
||||
{data.ozonApiValidation.sellerName && (
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<span className="text-white/50 text-xs">Магазин:</span>
|
||||
<span className="text-white/70 text-xs max-w-[160px] text-right truncate">
|
||||
{data.ozonApiValidation.sellerName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{data.ozonApiValidation.sellerId && (
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<span className="text-white/50 text-xs">ID продавца:</span>
|
||||
<span className="text-white/70 text-xs font-mono">
|
||||
{data.ozonApiValidation.sellerId}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="glass-card p-3 border-red-400/30">
|
||||
<p className="text-red-400 text-sm text-center">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
onClick={handleConfirm}
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12 flex items-center gap-2"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
{isLoading ? "Создание организации..." : "Подтвердить и завершить"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
219
src/components/auth/inn-step.tsx
Normal file
219
src/components/auth/inn-step.tsx
Normal file
@ -0,0 +1,219 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { GlassInput } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { FileText, ArrowLeft, Building, Check, AlertTriangle } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { VERIFY_INN } from '@/graphql/mutations'
|
||||
|
||||
interface InnStepProps {
|
||||
onNext: (inn: string, organizationData?: OrganizationData) => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
interface OrganizationData {
|
||||
name: string
|
||||
address: string
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
export function InnStep({ onNext, onBack }: InnStepProps) {
|
||||
const [inn, setInn] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [organizationData, setOrganizationData] = useState<OrganizationData | null>(null)
|
||||
|
||||
const [verifyInn] = useMutation(VERIFY_INN)
|
||||
|
||||
const formatInn = (value: string) => {
|
||||
const numbers = value.replace(/\D/g, '')
|
||||
return numbers.slice(0, 12) // Максимум 12 цифр для ИНН
|
||||
}
|
||||
|
||||
const handleInnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const formatted = formatInn(e.target.value)
|
||||
setInn(formatted)
|
||||
setError(null)
|
||||
setOrganizationData(null)
|
||||
}
|
||||
|
||||
const isValidInn = (inn: string) => {
|
||||
return inn.length === 10 || inn.length === 12
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!isValidInn(inn)) {
|
||||
setError('ИНН должен содержать 10 или 12 цифр')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
setOrganizationData(null)
|
||||
|
||||
try {
|
||||
const { data } = await verifyInn({
|
||||
variables: { inn }
|
||||
})
|
||||
|
||||
if (data.verifyInn.success && data.verifyInn.organization) {
|
||||
const org = data.verifyInn.organization
|
||||
const newOrgData = {
|
||||
name: org.name,
|
||||
address: org.address,
|
||||
isActive: org.isActive
|
||||
}
|
||||
setOrganizationData(newOrgData)
|
||||
|
||||
if (org.isActive) {
|
||||
// Автоматически переходим дальше для активных организаций
|
||||
setTimeout(() => {
|
||||
onNext(inn, newOrgData)
|
||||
}, 1500)
|
||||
}
|
||||
} else {
|
||||
setError('Организация с таким ИНН не найдена')
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('INN verification error:', error)
|
||||
setError('Ошибка проверки ИНН. Попробуйте позже.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleContinueInactive = () => {
|
||||
if (organizationData && !organizationData.isActive) {
|
||||
onNext(inn, organizationData)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="ИНН организации"
|
||||
description="Укажите ИНН для проверки организации"
|
||||
currentStep={4}
|
||||
totalSteps={5}
|
||||
stepName="ИНН"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Alert className="glass-secondary border-white/20">
|
||||
<Building className="h-4 w-4 text-white" />
|
||||
<AlertDescription className="text-white/80">
|
||||
Фулфилмент кабинет - склады и логистика
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="inn" className="text-white text-sm font-medium flex items-center gap-2">
|
||||
<FileText className="h-4 w-4" />
|
||||
ИНН организации
|
||||
</Label>
|
||||
{organizationData && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`glass-secondary flex items-center gap-1 ${
|
||||
organizationData.isActive
|
||||
? 'text-green-300 border-green-400/30'
|
||||
: 'text-yellow-300 border-yellow-400/30'
|
||||
}`}
|
||||
>
|
||||
{organizationData.isActive ? (
|
||||
<>
|
||||
<Check className="h-3 w-3" />
|
||||
Активна
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
Неактивна
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<GlassInput
|
||||
id="inn"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
placeholder="1234567890"
|
||||
value={inn}
|
||||
onChange={handleInnChange}
|
||||
className={`h-12 text-center text-lg font-mono ${error ? 'border-red-400/50' : ''}`}
|
||||
maxLength={12}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="text-red-400 text-xs text-center">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{organizationData && (
|
||||
<div className="glass-card p-4 space-y-2">
|
||||
<h4 className="text-white font-medium text-sm">{organizationData.name}</h4>
|
||||
<p className="text-white/70 text-xs">{organizationData.address}</p>
|
||||
|
||||
{organizationData.isActive ? (
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Check className="h-4 w-4 text-green-300" />
|
||||
<span className="text-green-300 text-sm">Организация активна</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-300" />
|
||||
<span className="text-yellow-300 text-sm">Организация неактивна</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{!organizationData && (
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12"
|
||||
disabled={!isValidInn(inn) || isLoading}
|
||||
>
|
||||
{isLoading ? "Проверка ИНН..." : "Проверить ИНН"}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{organizationData && !organizationData.isActive && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleContinueInactive}
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12"
|
||||
>
|
||||
Продолжить с неактивной организацией
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
367
src/components/auth/marketplace-api-step.tsx
Normal file
367
src/components/auth/marketplace-api-step.tsx
Normal file
@ -0,0 +1,367 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { GlassInput } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { Key, ArrowLeft, ShoppingCart, Check, X } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { ADD_MARKETPLACE_API_KEY } from '@/graphql/mutations'
|
||||
import { getAuthToken } from '@/lib/apollo-client'
|
||||
|
||||
interface ApiValidationData {
|
||||
sellerId?: string
|
||||
sellerName?: string
|
||||
isValid?: boolean
|
||||
}
|
||||
|
||||
interface MarketplaceApiStepProps {
|
||||
onNext: (apiData: {
|
||||
wbApiKey?: string
|
||||
wbApiValidation?: ApiValidationData
|
||||
ozonApiKey?: string
|
||||
ozonApiValidation?: ApiValidationData
|
||||
}) => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
interface ApiKeyValidation {
|
||||
[key: string]: {
|
||||
isValid: boolean | null
|
||||
isValidating: boolean
|
||||
error?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function MarketplaceApiStep({ onNext, onBack }: MarketplaceApiStepProps) {
|
||||
const [selectedMarketplaces, setSelectedMarketplaces] = useState<string[]>([])
|
||||
const [wbApiKey, setWbApiKey] = useState("")
|
||||
const [ozonApiKey, setOzonApiKey] = useState("")
|
||||
const [validationStates, setValidationStates] = useState<ApiKeyValidation>({})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [wbValidationData, setWbValidationData] = useState<ApiValidationData | null>(null)
|
||||
const [ozonValidationData, setOzonValidationData] = useState<ApiValidationData | null>(null)
|
||||
|
||||
const [addMarketplaceApiKey] = useMutation(ADD_MARKETPLACE_API_KEY)
|
||||
|
||||
const handleMarketplaceToggle = (marketplace: string) => {
|
||||
if (selectedMarketplaces.includes(marketplace)) {
|
||||
setSelectedMarketplaces(prev => prev.filter(m => m !== marketplace))
|
||||
if (marketplace === 'wildberries') setWbApiKey("")
|
||||
if (marketplace === 'ozon') setOzonApiKey("")
|
||||
// Сбрасываем состояние валидации
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: { isValid: null, isValidating: false }
|
||||
}))
|
||||
} else {
|
||||
setSelectedMarketplaces(prev => [...prev, marketplace])
|
||||
}
|
||||
}
|
||||
|
||||
const validateApiKey = async (marketplace: string, apiKey: string) => {
|
||||
if (!apiKey || !isValidApiKey(apiKey)) return
|
||||
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: { isValid: null, isValidating: true }
|
||||
}))
|
||||
|
||||
try {
|
||||
const { data } = await addMarketplaceApiKey({
|
||||
variables: {
|
||||
input: {
|
||||
marketplace: marketplace.toUpperCase(),
|
||||
apiKey,
|
||||
validateOnly: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: {
|
||||
isValid: data.addMarketplaceApiKey.success,
|
||||
isValidating: false,
|
||||
error: data.addMarketplaceApiKey.success ? undefined : data.addMarketplaceApiKey.message
|
||||
}
|
||||
}))
|
||||
|
||||
// Сохраняем данные валидации
|
||||
if (data.addMarketplaceApiKey.success && data.addMarketplaceApiKey.apiKey?.validationData) {
|
||||
const validationData = data.addMarketplaceApiKey.apiKey.validationData
|
||||
if (marketplace === 'wildberries') {
|
||||
setWbValidationData({
|
||||
sellerId: validationData.sellerId,
|
||||
sellerName: validationData.sellerName,
|
||||
isValid: true
|
||||
})
|
||||
} else if (marketplace === 'ozon') {
|
||||
setOzonValidationData({
|
||||
sellerId: validationData.sellerId,
|
||||
sellerName: validationData.sellerName,
|
||||
isValid: true
|
||||
})
|
||||
}
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: {
|
||||
isValid: false,
|
||||
isValidating: false,
|
||||
error: 'Ошибка валидации API ключа'
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
const handleApiKeyChange = (marketplace: string, value: string) => {
|
||||
if (marketplace === 'wildberries') {
|
||||
setWbApiKey(value)
|
||||
} else if (marketplace === 'ozon') {
|
||||
setOzonApiKey(value)
|
||||
}
|
||||
|
||||
// Сбрасываем состояние валидации при изменении
|
||||
setValidationStates(prev => ({
|
||||
...prev,
|
||||
[marketplace]: { isValid: null, isValidating: false }
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (selectedMarketplaces.length === 0) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
// Валидируем все выбранные маркетплейсы
|
||||
const validationPromises = []
|
||||
|
||||
if (selectedMarketplaces.includes('wildberries') && isValidApiKey(wbApiKey)) {
|
||||
validationPromises.push(validateApiKey('wildberries', wbApiKey))
|
||||
}
|
||||
|
||||
if (selectedMarketplaces.includes('ozon') && isValidApiKey(ozonApiKey)) {
|
||||
validationPromises.push(validateApiKey('ozon', ozonApiKey))
|
||||
}
|
||||
|
||||
// Ждем завершения всех валидаций
|
||||
await Promise.all(validationPromises)
|
||||
|
||||
// Небольшая задержка чтобы состояние обновилось
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
|
||||
// Проверяем результаты валидации
|
||||
let hasValidationErrors = false
|
||||
|
||||
for (const marketplace of selectedMarketplaces) {
|
||||
const validation = validationStates[marketplace]
|
||||
if (!validation || validation.isValid !== true) {
|
||||
hasValidationErrors = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasValidationErrors) {
|
||||
const apiData: {
|
||||
wbApiKey?: string
|
||||
wbApiValidation?: ApiValidationData
|
||||
ozonApiKey?: string
|
||||
ozonApiValidation?: ApiValidationData
|
||||
} = {}
|
||||
|
||||
if (selectedMarketplaces.includes('wildberries') && isValidApiKey(wbApiKey)) {
|
||||
apiData.wbApiKey = wbApiKey
|
||||
if (wbValidationData) {
|
||||
apiData.wbApiValidation = wbValidationData
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedMarketplaces.includes('ozon') && isValidApiKey(ozonApiKey)) {
|
||||
apiData.ozonApiKey = ozonApiKey
|
||||
if (ozonValidationData) {
|
||||
apiData.ozonApiValidation = ozonValidationData
|
||||
}
|
||||
}
|
||||
|
||||
onNext(apiData)
|
||||
}
|
||||
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
const isValidApiKey = (key: string) => {
|
||||
return key.length >= 10 && /^[a-zA-Z0-9-_.]+$/.test(key)
|
||||
}
|
||||
|
||||
const isFormValid = () => {
|
||||
if (selectedMarketplaces.length === 0) return false
|
||||
|
||||
for (const marketplace of selectedMarketplaces) {
|
||||
const apiKey = marketplace === 'wildberries' ? wbApiKey : ozonApiKey
|
||||
|
||||
if (!isValidApiKey(apiKey)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const getValidationBadge = (marketplace: string) => {
|
||||
const validation = validationStates[marketplace]
|
||||
|
||||
if (!validation || validation.isValid === null) return null
|
||||
|
||||
if (validation.isValidating) {
|
||||
return (
|
||||
<Badge variant="outline" className="glass-secondary text-yellow-300 border-yellow-400/30 text-xs flex items-center gap-1">
|
||||
Проверка...
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
if (validation.isValid) {
|
||||
return (
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 text-xs flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
Валидный
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Badge variant="outline" className="glass-secondary text-red-300 border-red-400/30 text-xs flex items-center gap-1">
|
||||
<X className="h-3 w-3" />
|
||||
Невалидный
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
const marketplaces = [
|
||||
{
|
||||
id: 'wildberries',
|
||||
name: 'Wildberries',
|
||||
badge: 'Популярный',
|
||||
badgeColor: 'purple',
|
||||
apiKey: wbApiKey,
|
||||
setApiKey: (value: string) => handleApiKeyChange('wildberries', value),
|
||||
placeholder: 'API ключ Wildberries'
|
||||
},
|
||||
{
|
||||
id: 'ozon',
|
||||
name: 'Ozon',
|
||||
badge: 'Быстро растёт',
|
||||
badgeColor: 'blue',
|
||||
apiKey: ozonApiKey,
|
||||
setApiKey: (value: string) => handleApiKeyChange('ozon', value),
|
||||
placeholder: 'API ключ Ozon'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="API ключи маркетплейсов"
|
||||
description="Выберите маркетплейсы и введите API ключи"
|
||||
currentStep={4}
|
||||
totalSteps={5}
|
||||
stepName="API ключи"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="glass-card p-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<ShoppingCart className="h-4 w-4 text-white" />
|
||||
<div>
|
||||
<h4 className="text-white font-medium text-sm">Кабинет селлера</h4>
|
||||
<p className="text-white/70 text-xs">Управление продажами на маркетплейсах</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{marketplaces.map((marketplace) => (
|
||||
<div key={marketplace.id} className="glass-card p-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={marketplace.id}
|
||||
checked={selectedMarketplaces.includes(marketplace.id)}
|
||||
onCheckedChange={() => handleMarketplaceToggle(marketplace.id)}
|
||||
className="border-white/30 data-[state=checked]:bg-purple-500"
|
||||
/>
|
||||
<Label htmlFor={marketplace.id} className="text-white text-sm font-medium cursor-pointer">
|
||||
{marketplace.name}
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`glass-secondary border-${marketplace.badgeColor}-400/30 text-${marketplace.badgeColor}-300 text-xs`}
|
||||
>
|
||||
{marketplace.badge}
|
||||
</Badge>
|
||||
{selectedMarketplaces.includes(marketplace.id) && getValidationBadge(marketplace.id)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedMarketplaces.includes(marketplace.id) && (
|
||||
<div className="pt-1">
|
||||
<GlassInput
|
||||
type="text"
|
||||
placeholder={marketplace.placeholder}
|
||||
value={marketplace.apiKey}
|
||||
onChange={(e) => marketplace.setApiKey(e.target.value)}
|
||||
className="h-10 text-sm"
|
||||
/>
|
||||
<p className="text-white/60 text-xs mt-1">
|
||||
{marketplace.id === 'wildberries'
|
||||
? 'Личный кабинет → Настройки → Доступ к API'
|
||||
: 'Кабинет продавца → API → Генерация ключа'
|
||||
}
|
||||
</p>
|
||||
{validationStates[marketplace.id]?.error && (
|
||||
<p className="text-red-400 text-xs mt-1">
|
||||
{validationStates[marketplace.id].error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Сохранение..." : "Продолжить"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
140
src/components/auth/phone-step.tsx
Normal file
140
src/components/auth/phone-step.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { GlassInput } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { Phone, ArrowRight } from "lucide-react"
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { SEND_SMS_CODE } from '@/graphql/mutations'
|
||||
|
||||
interface PhoneStepProps {
|
||||
onNext: (phone: string) => void
|
||||
}
|
||||
|
||||
export function PhoneStep({ onNext }: PhoneStepProps) {
|
||||
const [phone, setPhone] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const [sendSmsCode] = useMutation(SEND_SMS_CODE)
|
||||
|
||||
const formatPhoneNumber = (value: string) => {
|
||||
const numbers = value.replace(/\D/g, '')
|
||||
|
||||
if (numbers.length === 0) return ''
|
||||
if (numbers[0] === '8') {
|
||||
const withoutFirst = numbers.slice(1)
|
||||
return formatRussianNumber('7' + withoutFirst)
|
||||
}
|
||||
if (numbers[0] === '7') {
|
||||
return formatRussianNumber(numbers)
|
||||
}
|
||||
|
||||
return formatRussianNumber('7' + numbers)
|
||||
}
|
||||
|
||||
const formatRussianNumber = (numbers: string) => {
|
||||
if (numbers.length <= 1) return '+7'
|
||||
if (numbers.length <= 4) return `+7 (${numbers.slice(1)}`
|
||||
if (numbers.length <= 7) return `+7 (${numbers.slice(1, 4)}) ${numbers.slice(4)}`
|
||||
if (numbers.length <= 9) return `+7 (${numbers.slice(1, 4)}) ${numbers.slice(4, 7)}-${numbers.slice(7)}`
|
||||
return `+7 (${numbers.slice(1, 4)}) ${numbers.slice(4, 7)}-${numbers.slice(7, 9)}-${numbers.slice(9, 11)}`
|
||||
}
|
||||
|
||||
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const formatted = formatPhoneNumber(e.target.value)
|
||||
setPhone(formatted)
|
||||
setError(null)
|
||||
}
|
||||
|
||||
const isValidPhone = (phone: string) => {
|
||||
const numbers = phone.replace(/\D/g, '')
|
||||
return numbers.length === 11 && (numbers.startsWith('7') || numbers.startsWith('8'))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!isValidPhone(phone)) {
|
||||
setError('Введите корректный номер телефона')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const cleanPhone = phone.replace(/\D/g, '')
|
||||
const formattedPhone = cleanPhone.startsWith('8')
|
||||
? '7' + cleanPhone.slice(1)
|
||||
: cleanPhone
|
||||
|
||||
const { data } = await sendSmsCode({
|
||||
variables: { phone: formattedPhone }
|
||||
})
|
||||
|
||||
if (data.sendSmsCode.success) {
|
||||
onNext(phone)
|
||||
} else {
|
||||
setError('Ошибка отправки SMS. Попробуйте позже.')
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('SMS sending error:', error)
|
||||
setError(error instanceof Error ? error.message : 'Ошибка отправки SMS. Попробуйте позже.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Добро пожаловать!"
|
||||
description="Введите номер телефона для входа в систему"
|
||||
currentStep={1}
|
||||
totalSteps={5}
|
||||
stepName="Авторизация"
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone" className="text-white text-sm font-medium flex items-center gap-2">
|
||||
<Phone className="h-4 w-4" />
|
||||
Номер телефона
|
||||
</Label>
|
||||
<GlassInput
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="+7 (___) ___-__-__"
|
||||
value={phone}
|
||||
onChange={handlePhoneChange}
|
||||
className={`h-12 text-lg ${error ? 'border-red-400/50' : ''}`}
|
||||
style={{ caretColor: 'white' }}
|
||||
onFocus={(e) => {
|
||||
// Устанавливаем курсор в начало если поле пустое или содержит только +7
|
||||
if (phone === '' || phone === '+7') {
|
||||
setTimeout(() => {
|
||||
e.target.setSelectionRange(0, 0);
|
||||
}, 0);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-red-400 text-xs">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12 flex items-center gap-2"
|
||||
disabled={!isValidPhone(phone) || isLoading}
|
||||
>
|
||||
{isLoading ? "Отправка..." : "Получить SMS код"}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
225
src/components/auth/sms-step.tsx
Normal file
225
src/components/auth/sms-step.tsx
Normal file
@ -0,0 +1,225 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef, KeyboardEvent, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { GlassInput } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { AuthLayout } from "./auth-layout"
|
||||
import { MessageSquare, ArrowLeft, Clock, RefreshCw, Check } from "lucide-react"
|
||||
import { useMutation } from '@apollo/client'
|
||||
import { SEND_SMS_CODE } from '@/graphql/mutations'
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
|
||||
interface SmsStepProps {
|
||||
phone: string
|
||||
onNext: (code: string) => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function SmsStep({ phone, onNext, onBack }: SmsStepProps) {
|
||||
const [code, setCode] = useState(["", "", "", ""])
|
||||
const [timeLeft, setTimeLeft] = useState(60)
|
||||
const [canResend, setCanResend] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([])
|
||||
|
||||
const { verifySmsCode, checkAuth } = useAuth()
|
||||
const [sendSmsCode] = useMutation(SEND_SMS_CODE)
|
||||
|
||||
// Автофокус на первое поле при загрузке
|
||||
useEffect(() => {
|
||||
if (inputRefs.current[0]) {
|
||||
inputRefs.current[0].focus()
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Таймер для повторной отправки
|
||||
useEffect(() => {
|
||||
if (timeLeft > 0) {
|
||||
const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000)
|
||||
return () => clearTimeout(timer)
|
||||
} else {
|
||||
setCanResend(true)
|
||||
}
|
||||
}, [timeLeft])
|
||||
|
||||
const handleInputChange = (index: number, value: string) => {
|
||||
if (value.length > 1) return // Разрешаем только одну цифру
|
||||
if (!/^\d*$/.test(value)) return // Разрешаем только цифры
|
||||
|
||||
const newCode = [...code]
|
||||
newCode[index] = value
|
||||
setCode(newCode)
|
||||
setError(null)
|
||||
|
||||
// Автоматически переключаемся на следующее поле
|
||||
if (value && index < 3) {
|
||||
inputRefs.current[index + 1]?.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Backspace" && !code[index] && index > 0) {
|
||||
inputRefs.current[index - 1]?.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
const fullCode = code.join("")
|
||||
if (fullCode.length === 4) {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const cleanPhone = phone.replace(/\D/g, '')
|
||||
const formattedPhone = cleanPhone.startsWith('8')
|
||||
? '7' + cleanPhone.slice(1)
|
||||
: cleanPhone
|
||||
|
||||
const result = await verifySmsCode(formattedPhone, fullCode)
|
||||
|
||||
if (result.success) {
|
||||
console.log('SmsStep - SMS verification successful, user:', result.user)
|
||||
|
||||
// Проверяем есть ли у пользователя уже организация
|
||||
if (result.user?.organization) {
|
||||
console.log('SmsStep - User already has organization, redirecting to dashboard')
|
||||
// Если организация уже есть, перенаправляем прямо в кабинет
|
||||
window.location.href = '/dashboard'
|
||||
return
|
||||
}
|
||||
|
||||
// Если организации нет, продолжаем поток регистрации
|
||||
onNext(fullCode)
|
||||
} else {
|
||||
setError('Неверный код. Проверьте SMS и попробуйте еще раз.')
|
||||
setCode(["", "", "", ""])
|
||||
inputRefs.current[0]?.focus()
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('Error verifying SMS code:', error)
|
||||
setError('Ошибка проверки кода. Попробуйте еще раз.')
|
||||
setCode(["", "", "", ""])
|
||||
inputRefs.current[0]?.focus()
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleResend = async () => {
|
||||
setTimeLeft(60)
|
||||
setCanResend(false)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const cleanPhone = phone.replace(/\D/g, '')
|
||||
const formattedPhone = cleanPhone.startsWith('8')
|
||||
? '7' + cleanPhone.slice(1)
|
||||
: cleanPhone
|
||||
|
||||
await sendSmsCode({
|
||||
variables: { phone: formattedPhone }
|
||||
})
|
||||
} catch (error: unknown) {
|
||||
console.error('Error resending SMS:', error)
|
||||
setError('Ошибка отправки SMS. Попробуйте позже.')
|
||||
}
|
||||
}
|
||||
|
||||
const isValidCode = code.every(digit => digit !== "")
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Введите код"
|
||||
description={`SMS-код отправлен на номер ${phone}`}
|
||||
currentStep={2}
|
||||
totalSteps={5}
|
||||
stepName="Подтверждение"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-white text-sm font-medium flex items-center gap-2">
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
Код из SMS
|
||||
</Label>
|
||||
{isValidCode && (
|
||||
<Badge variant="outline" className="glass-secondary text-green-300 border-green-400/30 flex items-center gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
Готово
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-center">
|
||||
{code.map((digit, index) => (
|
||||
<GlassInput
|
||||
key={index}
|
||||
ref={(el) => { inputRefs.current[index] = el }}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
maxLength={1}
|
||||
value={digit}
|
||||
onChange={(e) => handleInputChange(index, e.target.value)}
|
||||
onKeyDown={(e) => handleKeyDown(index, e)}
|
||||
className={`w-12 h-12 text-center text-lg font-semibold ${error ? 'border-red-400/50' : ''}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-red-400 text-xs text-center">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glass"
|
||||
size="lg"
|
||||
className="w-full h-12"
|
||||
disabled={!isValidCode || isLoading}
|
||||
>
|
||||
{isLoading ? "Проверка кода..." : "Продолжить"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="glass-secondary"
|
||||
onClick={onBack}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Изменить номер телефона
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
{!canResend ? (
|
||||
<div className="flex items-center justify-center gap-2 text-white/60">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="text-sm">Повторная отправка через {timeLeft}с</span>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={handleResend}
|
||||
className="text-sm text-white/60 hover:text-white/80 underline hover:bg-transparent flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
Отправить код повторно
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user