diff --git a/dashboard/public/locales/en.json b/dashboard/public/locales/en.json
@@ -151,6 +151,41 @@
}
},
"hosts": {
+ "popover-guide": {
+ "title": "Using this setting, you are able to assign specific address for each inbound.",
+ "desc": "Use these variables to make it dynamic",
+ "username": "The username of the user",
+ "dataUsage": "The current usage of the user",
+ "remainingData": "Remaining data of the user",
+ "dataLimit": "The usage limit of the user",
+ "remainingDays": "Remaining days of the user",
+ "expireDate": "Expiry date of the user",
+ "jalaliExpireDate": "Expiry date of the user in solar calendar",
+ "remainingTime": "Remaining time of the user",
+ "statusEmoji": "User status as an emoji (✅,⌛️,🪫,❌,🔌)",
+ "proxyProtocol": "Proxy protocol (e.g. VMess)",
+ "proxyMethod": "Proxy transport method (e.g. ws)",
+ "currentServer": "Current server ip address",
+ "security": "Security Layer",
+ "host": "Request Host",
+ "port": "Port",
+ "path": "Path",
+ "sni": "SNI",
+ "advancedOptions": "Advanced options",
+ "addHost": "Add host",
+ "savedSuccess": "Hosts saved successfully",
+ "loading": "loading...",
+ "apply": "Apply",
+ "port.info": "By default, a host uses the default port of the inbound. You can set a custom port in case this host is a server that forwards traffic from a port that differs from your server's port. For example, the server may forward traffic from port 8443 to the default port of your inbound server.",
+ "path.info": "Set a path for host users, useful behind a reverse proxy.",
+ "sni.info": "By default, a host uses the default SNI of the inbound. You can set a custom SNI in case this host is a server that has a different SNI. For example, the server may receive traffic with a different SSL certificate, perform SSL termination, and forward it to your inbound server.",
+ "host.info": "By default, if a request host is set in the Xray config, this host is used. However, you can set a custom request host here if needed.",
+ "security.info": "If the middleware server of this host uses a different security layer than the inbound's default, you can set a custom security layer here.",
+ "alpn": "ALPN",
+ "fingerprint": "Fingerprint",
+ "host.multiHost": "To set multiple addresses, separate them with <badge>,</badge> Each time an address is chosen randomly.",
+ "host.wildcard": "Use <badge>*</badge> to generate a random string (works for wildcard domain names)"
+ },
"no-inbound-selection-alert": {
"title": "No inbound is selected",
"desc": "You must select an inbound inorder to create host."
diff --git a/dashboard/src/features/hosts/dialogs/mutation/fields/popover-guide.tsx b/dashboard/src/features/hosts/dialogs/mutation/fields/popover-guide.tsx
@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next';
+import { Badge, Separator } from '@marzneshin/components';
+
+const CommandGuide = ({ command, desc }: { command: string, desc: string }) => {
+ return (<div className="m-1">
+ <Badge variant="disabled" className='font-mono rounded-sm p-[2px]'>
+ {"{" + command + "}"}
+ </Badge>{" "}
+ {desc}
+ </div>)
+}
+
+export function PopoverGuide() {
+ const { t } = useTranslation()
+ return (
+ <div className="text-xs">
+ <h3 className="font-bold text-[1rem] my-2">{t("page.hosts.popover-guide.desc")}</h3>
+ <CommandGuide
+ command="SERVER_IP"
+ desc={t("page.hosts.popover-guide.currentServer")}
+ />
+ <Separator />
+ <CommandGuide
+ command="USERNAME"
+ desc={t("page.hosts.popover-guide.username")}
+ />
+ <Separator />
+ <CommandGuide
+ command="DATA_USAGE"
+ desc={t("page.hosts.popover-guide.dataUsage")}
+ />
+ <Separator />
+ <CommandGuide
+ command="DATA_LEFT"
+ desc={t("page.hosts.popover-guide.remainingData")}
+ />
+ <Separator />
+ <CommandGuide
+ command="DATA_LIMIT"
+ desc={t("page.hosts.popover-guide.dataLimit")}
+ />
+ <Separator />
+ <CommandGuide
+ command="DAYS_LEFT"
+ desc={t("page.hosts.popover-guide.remainingDays")}
+ />
+ <Separator />
+ <CommandGuide
+ command="EXPIRE_DATE"
+ desc={t("page.hosts.popover-guide.expireDate")}
+ />
+ <Separator />
+ <CommandGuide
+ command="JALALI_EXPIRE_DATE"
+ desc={t("page.hosts.popover-guide.jalaliExpireDate")}
+ />
+ <Separator />
+ <CommandGuide
+ command="TIME_LEFT"
+ desc={t("page.hosts.popover-guide.remainingTime")}
+ />
+ <Separator />
+ <CommandGuide
+ command="STATUS_EMOJI"
+ desc={t("page.hosts.popover-guide.statusEmoji")}
+ />
+ <Separator />
+ <CommandGuide
+ command="PROTOCOL"
+ desc={t("page.hosts.popover-guide.proxyProtocol")}
+ />
+ <Separator />
+ <CommandGuide
+ command="TRANSPORT"
+ desc={t("page.hosts.popover-guide.proxyMethod")}
+ />
+ </div>
+ )
+}
diff --git a/dashboard/src/features/hosts/dialogs/mutation/fields/remark.tsx b/dashboard/src/features/hosts/dialogs/mutation/fields/remark.tsx
@@ -4,10 +4,15 @@ import {
FormItem,
FormLabel,
FormMessage,
- Input
+ Input,
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
} from "@marzneshin/components";
+import { PopoverGuide } from './popover-guide'
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
+import { InfoIcon } from 'lucide-react';
export const RemarkField = () => {
const { t } = useTranslation()
@@ -18,7 +23,17 @@ export const RemarkField = () => {
name="remark"
render={({ field }) => (
<FormItem>
- <FormLabel>{t('name')}</FormLabel>
+ <FormLabel className="flex flex-row items-center gap-2">
+ {t('name')}
+ <Popover>
+ <PopoverTrigger>
+ <InfoIcon className="size-5" />
+ </PopoverTrigger>
+ <PopoverContent className="w-80">
+ <PopoverGuide />
+ </PopoverContent>
+ </Popover>
+ </FormLabel>
<FormControl>
<Input {...field} />
</FormControl>