diff --git a/src/components/organisms/ProxyForm.tsx b/src/components/organisms/ProxyForm.tsx index 5f856038..5d10b793 100644 --- a/src/components/organisms/ProxyForm.tsx +++ b/src/components/organisms/ProxyForm.tsx @@ -16,7 +16,7 @@ const FormControl = styled(Box)({ }); const ProxyForm: React.FC = () => { - const [proxyConfig, setProxyConfig] = useState({ + const [proxyConfigForm, setProxyConfigForm] = useState({ server_url: '', username: '', password: '', @@ -29,6 +29,7 @@ const ProxyForm: React.FC = () => { }); const [tabIndex, setTabIndex] = useState(0); const [isProxyConfigured, setIsProxyConfigured] = useState(false); + const [proxy, setProxy] = useState({ proxy_url: '', auth: false }); const { notify } = useGlobalInfoStore(); @@ -36,17 +37,17 @@ const ProxyForm: React.FC = () => { let valid = true; let errorMessages = { server_url: '', username: '', password: '' }; - if (!proxyConfig.server_url) { + if (!proxyConfigForm.server_url) { errorMessages.server_url = 'Server URL is required'; valid = false; } if (requiresAuth) { - if (!proxyConfig.username) { + if (!proxyConfigForm.username) { errorMessages.username = 'Username is required for authenticated proxies'; valid = false; } - if (!proxyConfig.password) { + if (!proxyConfigForm.password) { errorMessages.password = 'Password is required for authenticated proxies'; valid = false; } @@ -58,13 +59,13 @@ const ProxyForm: React.FC = () => { const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; - setProxyConfig({ ...proxyConfig, [name]: value }); + setProxyConfigForm({ ...proxyConfigForm, [name]: value }); }; const handleAuthToggle = (e: React.ChangeEvent) => { setRequiresAuth(e.target.checked); if (!e.target.checked) { - setProxyConfig({ ...proxyConfig, username: '', password: '' }); + setProxyConfigForm({ ...proxyConfigForm, username: '', password: '' }); setErrors({ ...errors, username: '', password: '' }); } }; @@ -75,13 +76,14 @@ const ProxyForm: React.FC = () => { return; } - await sendProxyConfig(proxyConfig).then((response) => { + try { + const response = await sendProxyConfig(proxyConfigForm); if (response) { - notify('success', 'Proxy configuration submitted successfully'); - } else { - notify('error', 'Failed to submit proxy configuration. Try again.'); + notify('success', 'Proxy configuration submitted successfully'); } - }); + } catch (error: any) { + notify('error', error); + } }; const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { @@ -99,14 +101,16 @@ const ProxyForm: React.FC = () => { }; const fetchProxyConfig = async () => { - await getProxyConfig().then((response) => { + try { + const response = await getProxyConfig(); if (response.proxy_url) { - setIsProxyConfigured(true); - notify('success', 'Proxy configuration fetched successfully'); - } else { - notify('error', 'Failed to fetch proxy configuration. Try again.'); + setIsProxyConfigured(true); + setProxy(response); + notify('success', 'Proxy configuration fetched successfully'); } - }); + } catch (error:any) { + notify('error', error); + } }; const removeProxy = async () => { @@ -114,6 +118,7 @@ const ProxyForm: React.FC = () => { if (response) { notify('success', 'Proxy configuration removed successfully'); setIsProxyConfigured(false); + setProxy({ proxy_url: '', auth: false }); } else { notify('error', 'Failed to remove proxy configuration. Try again.'); } @@ -132,10 +137,31 @@ const ProxyForm: React.FC = () => { Proxy is already configured. You can test the configuration below. -
+ + + Current Proxy Configuration + + + + + + + + + + + + + + +
Proxy URLRequires Authentication
{proxy.proxy_url}{proxy.auth ? 'Yes' : 'No'}
+
+ ) : ( @@ -152,7 +178,7 @@ const ProxyForm: React.FC = () => { { { { color="primary" type="submit" fullWidth - disabled={!proxyConfig.server_url || (requiresAuth && (!proxyConfig.username || !proxyConfig.password))} + disabled={!proxyConfigForm.server_url || (requiresAuth && (!proxyConfigForm.username || !proxyConfigForm.password))} > Add Proxy