Enhance dialogs and configuration handling in the admin interface
CI / Backend (build + test) (push) Successful in 1m14s
CI / Frontend (lint + typecheck + build) (push) Successful in 31s

- 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:
Leonid Pershin
2026-07-02 17:06:53 +03:00
parent 0d0fc2c86b
commit 7dcc8889a0
7 changed files with 72 additions and 16 deletions
@@ -31,7 +31,7 @@ export function EditNodeDialog({ node, open, onOpenChange }: { node: NodeDto; op
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent onInteractOutside={(e) => e.preventDefault()}>
<DialogHeader> <DialogHeader>
<DialogTitle>{node.name}</DialogTitle> <DialogTitle>{node.name}</DialogTitle>
</DialogHeader> </DialogHeader>
@@ -68,6 +68,10 @@ export function EditNodeDialog({ node, open, onOpenChange }: { node: NodeDto; op
id="editPassword" id="editPassword"
type="password" type="password"
autoComplete="new-password" autoComplete="new-password"
data-lpignore="true"
data-1p-ignore
data-bwignore
data-form-type="other"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
/> />
@@ -41,7 +41,7 @@ export function RegisterNodeDialog() {
<DialogTrigger asChild> <DialogTrigger asChild>
<Button size="sm">{t('admin.nodes.create')}</Button> <Button size="sm">{t('admin.nodes.create')}</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent onInteractOutside={(e) => e.preventDefault()}>
<DialogHeader> <DialogHeader>
<DialogTitle>{t('admin.nodes.create')}</DialogTitle> <DialogTitle>{t('admin.nodes.create')}</DialogTitle>
</DialogHeader> </DialogHeader>
@@ -76,6 +76,10 @@ export function RegisterNodeDialog() {
id="nodePassword" id="nodePassword"
type="password" type="password"
autoComplete="new-password" autoComplete="new-password"
data-lpignore="true"
data-1p-ignore
data-bwignore
data-form-type="other"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
required required
@@ -1,5 +1,5 @@
import { useState } from 'react' 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 { useTranslation } from 'react-i18next'
import { Plus } from 'lucide-react' import { Plus } from 'lucide-react'
import { toast } from '@/shared/ui/toast-store' 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/shared/ui/dialog'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
import { HttpError } from '@/shared/api/client' 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 { t } = useTranslation()
const queryClient = useQueryClient() const queryClient = useQueryClient()
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
@@ -19,8 +20,6 @@ export function CreateConfigDialog() {
const [label, setLabel] = useState('') const [label, setLabel] = useState('')
const [deviceLimit, setDeviceLimit] = useState('') const [deviceLimit, setDeviceLimit] = useState('')
const inboundsQuery = useQuery({ queryKey: ['available-inbounds'], queryFn: listAvailableInbounds, enabled: open })
const createMutation = useMutation({ const createMutation = useMutation({
mutationFn: () => createConfig(inboundId, label.trim() || undefined, deviceLimit ? Number(deviceLimit) : undefined), mutationFn: () => createConfig(inboundId, label.trim() || undefined, deviceLimit ? Number(deviceLimit) : undefined),
onSuccess: async () => { onSuccess: async () => {
@@ -64,16 +63,13 @@ export function CreateConfigDialog() {
<SelectValue placeholder={t('configs.selectLocation')} /> <SelectValue placeholder={t('configs.selectLocation')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{inboundsQuery.data?.map((inbound) => ( {inbounds.map((inbound) => (
<SelectItem key={inbound.inboundId} value={inbound.inboundId}> <SelectItem key={inbound.inboundId} value={inbound.inboundId}>
{inbound.displayName} ({inbound.protocol}) {inbound.displayName} ({inbound.protocol})
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
{inboundsQuery.data?.length === 0 && (
<p className="text-xs text-muted-foreground">{t('configs.noInboundsAvailable')}</p>
)}
</div> </div>
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<Label htmlFor="label">{t('configs.label')}</Label> <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>
)
}
+3
View File
@@ -7,6 +7,7 @@ import { Toaster } from '@/shared/ui/toaster'
import { Button } from '@/shared/ui/button' import { Button } from '@/shared/ui/button'
import { useAuthStore } from '@/features/auth/store' import { useAuthStore } from '@/features/auth/store'
import { bootstrapSession, clearSession, logout } from '@/features/auth/api' import { bootstrapSession, clearSession, logout } from '@/features/auth/api'
import { TelegramLinkWarningBanner } from '@/features/telegram/TelegramLinkWarningBanner'
export const Route = createRootRoute({ component: RootLayout }) export const Route = createRootRoute({ component: RootLayout })
@@ -87,6 +88,8 @@ function RootLayout() {
</nav> </nav>
</header> </header>
<TelegramLinkWarningBanner />
<main className="flex flex-1 flex-col"> <main className="flex flex-1 flex-col">
<Outlet /> <Outlet />
</main> </main>
+8 -3
View File
@@ -6,7 +6,7 @@ import { ActivationGate } from '@/features/activation/ActivationGate'
import { ConfigCard } from '@/features/configs/ConfigCard' import { ConfigCard } from '@/features/configs/ConfigCard'
import { CreateConfigDialog } from '@/features/configs/CreateConfigDialog' import { CreateConfigDialog } from '@/features/configs/CreateConfigDialog'
import { SubscriptionCard } from '@/features/configs/SubscriptionCard' 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 }) export const Route = createFileRoute('/dashboard')({ component: DashboardPage })
@@ -25,10 +25,11 @@ function DashboardPage() {
function ConfigsList() { function ConfigsList() {
const { t } = useTranslation() const { t } = useTranslation()
const { data, isLoading } = useQuery({ queryKey: ['my-configs'], queryFn: getMyConfigs }) const { data, isLoading } = useQuery({ queryKey: ['my-configs'], queryFn: getMyConfigs })
const inboundsQuery = useQuery({ queryKey: ['available-inbounds'], queryFn: listAvailableInbounds })
return ( return (
<div className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-6 py-10"> <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> <div>
<h1 className="text-2xl font-semibold tracking-tight">{t('configs.title')}</h1> <h1 className="text-2xl font-semibold tracking-tight">{t('configs.title')}</h1>
{data && ( {data && (
@@ -39,7 +40,11 @@ function ConfigsList() {
</p> </p>
)} )}
</div> </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> </div>
{!isLoading && data && data.configs.length > 0 && <SubscriptionCard />} {!isLoading && data && data.configs.length > 0 && <SubscriptionCard />}
+14 -2
View File
@@ -36,6 +36,12 @@ const resources = {
telegramLoginExpired: 'Время ожидания истекло, попробуйте снова.', telegramLoginExpired: 'Время ожидания истекло, попробуйте снова.',
}, },
telegramLinkWarning: {
message: 'Вы не привязали Telegram — без этого вы не будете получать уведомления и не сможете самостоятельно восстановить пароль.',
action: 'Привязать Telegram',
dismiss: 'Скрыть',
},
nav: { nav: {
dashboard: 'Мои конфиги', dashboard: 'Мои конфиги',
instructions: 'Инструкции', instructions: 'Инструкции',
@@ -66,7 +72,7 @@ const resources = {
label: 'Метка (необязательно)', label: 'Метка (необязательно)',
deviceLimitLabel: 'Лимит устройств (необязательно)', deviceLimitLabel: 'Лимит устройств (необязательно)',
deviceLimitPlaceholder: 'Без лимита', deviceLimitPlaceholder: 'Без лимита',
noInboundsAvailable: 'Нет доступных локаций для вашей роли.', noInboundsNotice: 'Пока нет доступных локаций для создания конфига. Обратитесь к администратору — необходимо, чтобы он добавил сервер.',
created: 'Конфиг создан.', created: 'Конфиг создан.',
quotaExceeded: 'Достигнут лимит конфигов для вашей роли.', quotaExceeded: 'Достигнут лимит конфигов для вашей роли.',
showLink: 'Ссылка / QR', showLink: 'Ссылка / QR',
@@ -297,6 +303,12 @@ const resources = {
telegramLoginExpired: 'The request expired, please try again.', 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: { nav: {
dashboard: 'My configs', dashboard: 'My configs',
instructions: 'Instructions', instructions: 'Instructions',
@@ -327,7 +339,7 @@ const resources = {
label: 'Label (optional)', label: 'Label (optional)',
deviceLimitLabel: 'Device limit (optional)', deviceLimitLabel: 'Device limit (optional)',
deviceLimitPlaceholder: 'Unlimited', 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.', created: 'Config created.',
quotaExceeded: 'Config quota reached for your role.', quotaExceeded: 'Config quota reached for your role.',
showLink: 'Link / QR', showLink: 'Link / QR',