Enhance dialogs and configuration handling in the admin interface
- 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.
This commit is contained in:
@@ -31,7 +31,7 @@ export function EditNodeDialog({ node, open, onOpenChange }: { node: NodeDto; op
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogContent onInteractOutside={(e) => e.preventDefault()}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{node.name}</DialogTitle>
|
||||
</DialogHeader>
|
||||
@@ -68,6 +68,10 @@ export function EditNodeDialog({ node, open, onOpenChange }: { node: NodeDto; op
|
||||
id="editPassword"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
data-lpignore="true"
|
||||
data-1p-ignore
|
||||
data-bwignore
|
||||
data-form-type="other"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
|
||||
@@ -41,7 +41,7 @@ export function RegisterNodeDialog() {
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm">{t('admin.nodes.create')}</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogContent onInteractOutside={(e) => e.preventDefault()}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('admin.nodes.create')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
@@ -76,6 +76,10 @@ export function RegisterNodeDialog() {
|
||||
id="nodePassword"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
data-lpignore="true"
|
||||
data-1p-ignore
|
||||
data-bwignore
|
||||
data-form-type="other"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Plus } from 'lucide-react'
|
||||
import { toast } from '@/shared/ui/toast-store'
|
||||
@@ -9,9 +9,10 @@ import { Label } from '@/shared/ui/label'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/shared/ui/dialog'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
|
||||
import { HttpError } from '@/shared/api/client'
|
||||
import { createConfig, listAvailableInbounds } from './api'
|
||||
import type { AvailableInboundDto } from '@/shared/api/types'
|
||||
import { createConfig } from './api'
|
||||
|
||||
export function CreateConfigDialog() {
|
||||
export function CreateConfigDialog({ inbounds }: { inbounds: AvailableInboundDto[] }) {
|
||||
const { t } = useTranslation()
|
||||
const queryClient = useQueryClient()
|
||||
const [open, setOpen] = useState(false)
|
||||
@@ -19,8 +20,6 @@ export function CreateConfigDialog() {
|
||||
const [label, setLabel] = useState('')
|
||||
const [deviceLimit, setDeviceLimit] = useState('')
|
||||
|
||||
const inboundsQuery = useQuery({ queryKey: ['available-inbounds'], queryFn: listAvailableInbounds, enabled: open })
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: () => createConfig(inboundId, label.trim() || undefined, deviceLimit ? Number(deviceLimit) : undefined),
|
||||
onSuccess: async () => {
|
||||
@@ -64,16 +63,13 @@ export function CreateConfigDialog() {
|
||||
<SelectValue placeholder={t('configs.selectLocation')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{inboundsQuery.data?.map((inbound) => (
|
||||
{inbounds.map((inbound) => (
|
||||
<SelectItem key={inbound.inboundId} value={inbound.inboundId}>
|
||||
{inbound.displayName} ({inbound.protocol})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{inboundsQuery.data?.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">{t('configs.noInboundsAvailable')}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="label">{t('configs.label')}</Label>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { X } from 'lucide-react'
|
||||
import { useAuthStore } from '@/features/auth/store'
|
||||
|
||||
export function TelegramLinkWarningBanner() {
|
||||
const { t } = useTranslation()
|
||||
const { user, isBootstrapping } = useAuthStore()
|
||||
const [dismissed, setDismissed] = useState(false)
|
||||
|
||||
if (isBootstrapping || !user || user.telegramLinked || dismissed) return null
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-4 border-b border-border bg-amber-500/10 px-6 py-2 text-sm text-amber-700 dark:text-amber-400">
|
||||
<p>
|
||||
{t('telegramLinkWarning.message')}{' '}
|
||||
<Link to="/settings" className="font-medium underline underline-offset-2">
|
||||
{t('telegramLinkWarning.action')}
|
||||
</Link>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDismissed(true)}
|
||||
aria-label={t('telegramLinkWarning.dismiss')}
|
||||
className="shrink-0 text-amber-700/70 hover:text-amber-700 dark:text-amber-400/70 dark:hover:text-amber-400"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import { Toaster } from '@/shared/ui/toaster'
|
||||
import { Button } from '@/shared/ui/button'
|
||||
import { useAuthStore } from '@/features/auth/store'
|
||||
import { bootstrapSession, clearSession, logout } from '@/features/auth/api'
|
||||
import { TelegramLinkWarningBanner } from '@/features/telegram/TelegramLinkWarningBanner'
|
||||
|
||||
export const Route = createRootRoute({ component: RootLayout })
|
||||
|
||||
@@ -87,6 +88,8 @@ function RootLayout() {
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<TelegramLinkWarningBanner />
|
||||
|
||||
<main className="flex flex-1 flex-col">
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
@@ -6,7 +6,7 @@ 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 } from '@/features/configs/api'
|
||||
import { getMyConfigs, listAvailableInbounds } from '@/features/configs/api'
|
||||
|
||||
export const Route = createFileRoute('/dashboard')({ component: DashboardPage })
|
||||
|
||||
@@ -25,10 +25,11 @@ function DashboardPage() {
|
||||
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">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('configs.title')}</h1>
|
||||
{data && (
|
||||
@@ -39,7 +40,11 @@ function ConfigsList() {
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<CreateConfigDialog />
|
||||
{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 />}
|
||||
|
||||
@@ -36,6 +36,12 @@ const resources = {
|
||||
telegramLoginExpired: 'Время ожидания истекло, попробуйте снова.',
|
||||
},
|
||||
|
||||
telegramLinkWarning: {
|
||||
message: 'Вы не привязали Telegram — без этого вы не будете получать уведомления и не сможете самостоятельно восстановить пароль.',
|
||||
action: 'Привязать Telegram',
|
||||
dismiss: 'Скрыть',
|
||||
},
|
||||
|
||||
nav: {
|
||||
dashboard: 'Мои конфиги',
|
||||
instructions: 'Инструкции',
|
||||
@@ -66,7 +72,7 @@ const resources = {
|
||||
label: 'Метка (необязательно)',
|
||||
deviceLimitLabel: 'Лимит устройств (необязательно)',
|
||||
deviceLimitPlaceholder: 'Без лимита',
|
||||
noInboundsAvailable: 'Нет доступных локаций для вашей роли.',
|
||||
noInboundsNotice: 'Пока нет доступных локаций для создания конфига. Обратитесь к администратору — необходимо, чтобы он добавил сервер.',
|
||||
created: 'Конфиг создан.',
|
||||
quotaExceeded: 'Достигнут лимит конфигов для вашей роли.',
|
||||
showLink: 'Ссылка / QR',
|
||||
@@ -297,6 +303,12 @@ const resources = {
|
||||
telegramLoginExpired: 'The request expired, please try again.',
|
||||
},
|
||||
|
||||
telegramLinkWarning: {
|
||||
message: "You haven't linked Telegram — without it you won't receive notifications and won't be able to recover your password yourself.",
|
||||
action: 'Link Telegram',
|
||||
dismiss: 'Dismiss',
|
||||
},
|
||||
|
||||
nav: {
|
||||
dashboard: 'My configs',
|
||||
instructions: 'Instructions',
|
||||
@@ -327,7 +339,7 @@ const resources = {
|
||||
label: 'Label (optional)',
|
||||
deviceLimitLabel: 'Device limit (optional)',
|
||||
deviceLimitPlaceholder: 'Unlimited',
|
||||
noInboundsAvailable: 'No locations available for your role.',
|
||||
noInboundsNotice: 'No locations are available for creating a config yet. Please contact the administrator — a server needs to be added.',
|
||||
created: 'Config created.',
|
||||
quotaExceeded: 'Config quota reached for your role.',
|
||||
showLink: 'Link / QR',
|
||||
|
||||
Reference in New Issue
Block a user