Files
clash-proxy/src/components/setting/mods/controller-viewer.tsx
2024-05-12 14:40:18 +08:00

77 lines
2.3 KiB
TypeScript

import { forwardRef, useImperativeHandle, useState } from "react";
import { useLockFn } from "ahooks";
import { useTranslation } from "react-i18next";
import { List, ListItem, ListItemText, TextField } from "@mui/material";
import { useClashInfo } from "@/hooks/use-clash";
import { BaseDialog, DialogRef, Notice } from "@/components/base";
export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const { clashInfo, patchInfo } = useClashInfo();
const [controller, setController] = useState(clashInfo?.server || "");
const [secret, setSecret] = useState(clashInfo?.secret || "");
useImperativeHandle(ref, () => ({
open: () => {
setOpen(true);
setController(clashInfo?.server || "");
setSecret(clashInfo?.secret || "");
},
close: () => setOpen(false),
}));
const onSave = useLockFn(async () => {
try {
await patchInfo({ "external-controller": controller, secret });
Notice.success(t("External Controller Address Modified"), 1000);
setOpen(false);
} catch (err: any) {
Notice.error(err.message || err.toString(), 4000);
}
});
return (
<BaseDialog
open={open}
title={t("External Controller")}
contentSx={{ width: 400 }}
okBtn={t("Save")}
cancelBtn={t("Cancel")}
onClose={() => setOpen(false)}
onCancel={() => setOpen(false)}
onOk={onSave}
>
<List>
<ListItem sx={{ padding: "5px 2px" }}>
<ListItemText primary={t("External Controller")} />
<TextField
size="small"
autoComplete="off"
sx={{ width: 175 }}
value={controller}
placeholder="Required"
onChange={(e) => setController(e.target.value)}
/>
</ListItem>
<ListItem sx={{ padding: "5px 2px" }}>
<ListItemText primary={t("Core Secret")} />
<TextField
size="small"
autoComplete="off"
sx={{ width: 175 }}
value={secret}
placeholder={t("Recommended")}
onChange={(e) =>
setSecret(e.target.value?.replace(/[^\x00-\x7F]/g, ""))
}
/>
</ListItem>
</List>
</BaseDialog>
);
});