diff --git a/src/components/organisms/ProxyForm.tsx b/src/components/organisms/ProxyForm.tsx new file mode 100644 index 00000000..5bd4ec41 --- /dev/null +++ b/src/components/organisms/ProxyForm.tsx @@ -0,0 +1,100 @@ +import React, { useState } from 'react'; +import { TextField, Button, MenuItem, Box } from '@mui/material'; +import { styled } from '@mui/system'; +import axios from 'axios'; + +const proxyTypes = [ + { label: 'HTTP', value: 'http' }, + { label: 'HTTPS', value: 'https' }, + { label: 'SOCKS5', value: 'socks5' }, +]; + +const FormContainer = styled(Box)({ + display: 'flex', + flexDirection: 'column', + gap: '20px', + width: '400px', + margin: '0 auto', + padding: '20px', + backgroundColor: '#f9f9f9', + borderRadius: '8px', +}); + +const ProxyForm: React.FC = () => { + const [proxyConfig, setProxyConfig] = useState({ + type: '', + server: '', + username: '', + password: '', + }); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setProxyConfig({ ...proxyConfig, [name]: value }); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const response = await axios.post('/api/proxy', proxyConfig); + alert(`Successfully added the proxy`); + } catch (error) { + alert('Error submitting proxy configuration'); + } + }; + + return ( + +
+ + {proxyTypes.map((option) => ( + + {option.label} + + ))} + + + + + + + + + + +
+ ); +}; + +export default ProxyForm;