Leonid Pershin
7dcc8889a0
- Updated `EditNodeDialog` and `RegisterNodeDialog` to prevent interaction outside the dialog, improving user experience. - Added data attributes to password fields in both dialogs for better password management. - Refactored `CreateConfigDialog` to accept inbounds as a prop, improving data handling and user feedback when no inbounds are available. - Introduced a warning banner in the root layout to inform users about the necessity of linking their Telegram account for notifications and password recovery. - Updated translations for improved clarity regarding available inbounds and Telegram linking requirements.
64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useRequireAuth } from '@/features/auth/guards'
|
|
import { ActivationGate } from '@/features/activation/ActivationGate'
|
|
import { ConfigCard } from '@/features/configs/ConfigCard'
|
|
import { CreateConfigDialog } from '@/features/configs/CreateConfigDialog'
|
|
import { SubscriptionCard } from '@/features/configs/SubscriptionCard'
|
|
import { getMyConfigs, listAvailableInbounds } from '@/features/configs/api'
|
|
|
|
export const Route = createFileRoute('/dashboard')({ component: DashboardPage })
|
|
|
|
function DashboardPage() {
|
|
const { isReady } = useRequireAuth()
|
|
|
|
if (!isReady) return null
|
|
|
|
return (
|
|
<ActivationGate>
|
|
<ConfigsList />
|
|
</ActivationGate>
|
|
)
|
|
}
|
|
|
|
function ConfigsList() {
|
|
const { t } = useTranslation()
|
|
const { data, isLoading } = useQuery({ queryKey: ['my-configs'], queryFn: getMyConfigs })
|
|
const inboundsQuery = useQuery({ queryKey: ['available-inbounds'], queryFn: listAvailableInbounds })
|
|
|
|
return (
|
|
<div className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-6 py-10">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight">{t('configs.title')}</h1>
|
|
{data && (
|
|
<p className="text-sm text-muted-foreground">
|
|
{data.maxConfigs < 0
|
|
? t('configs.quotaUnlimited', { used: data.configs.length })
|
|
: t('configs.quota', { used: data.configs.length, max: data.maxConfigs })}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{inboundsQuery.data?.length === 0 ? (
|
|
<p className="max-w-xs text-right text-sm text-muted-foreground">{t('configs.noInboundsNotice')}</p>
|
|
) : (
|
|
inboundsQuery.data && <CreateConfigDialog inbounds={inboundsQuery.data} />
|
|
)}
|
|
</div>
|
|
|
|
{!isLoading && data && data.configs.length > 0 && <SubscriptionCard />}
|
|
|
|
{isLoading && <p className="text-sm text-muted-foreground">…</p>}
|
|
|
|
{!isLoading && data && data.configs.length === 0 && (
|
|
<p className="text-sm text-muted-foreground">{t('configs.empty')}</p>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
{data?.configs.map((config) => <ConfigCard key={config.id} config={config} />)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|