vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use radio for proxy type + style improvements

Browse Source
This commit is contained in:
karishmas6
2024-09-30 23:27:59 +05:30
parent 15ac55b44a
commit 83adb99b04
1 changed files with 47 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/organisms/ProxyForm.tsx
View File

@@ -1,32 +1,24 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { TextField, Button, MenuItem, Box } from '@mui/material'; import { TextField, Button, RadioGroup, FormControlLabel, Radio, Box } from '@mui/material';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import axios from 'axios'; import axios from 'axios';
const proxyTypes = [
{ label: 'HTTP', value: 'http' },
{ label: 'HTTPS', value: 'https' },
{ label: 'SOCKS5', value: 'socks5' },
];
const FormContainer = styled(Box)({ const FormContainer = styled(Box)({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '20px', gap: '16px',
width: '400px',
margin: '0 auto',
padding: '20px', padding: '20px',
backgroundColor: '#f9f9f9', backgroundColor: '#f9f9f9',
borderRadius: '8px', borderRadius: '8px',
}); });
const FormControl = styled(Box)({ const FormControl = styled(Box)({
marginBottom: '10px', marginBottom: '16px',
}); });
const ProxyForm: React.FC = () => { const ProxyForm: React.FC = () => {
const [proxyConfig, setProxyConfig] = useState({ const [proxyConfig, setProxyConfig] = useState({
type: '', type: 'http',
server: '', server: '',
username: '', username: '',
password: '', password: '',
@@ -41,7 +33,7 @@ const ProxyForm: React.FC = () => {
e.preventDefault(); e.preventDefault();
try { try {
const response = await axios.post('/api/proxy', proxyConfig); const response = await axios.post('/api/proxy', proxyConfig);
alert(`Successfully added the proxy`); alert(`Success!`);
} catch (error) { } catch (error) {
alert('Error submitting proxy configuration'); alert('Error submitting proxy configuration');
} }
@@ -50,48 +42,51 @@ const ProxyForm: React.FC = () => {
return ( return (
<FormContainer> <FormContainer>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<TextField <FormControl>
select <RadioGroup
label="Proxy Type" name="type"
name="type" value={proxyConfig.type}
value={proxyConfig.type} onChange={handleChange}
onChange={handleChange} row
fullWidth >
required <FormControlLabel value="http" control={<Radio />} label="HTTP" />
> <FormControlLabel value="https" control={<Radio />} label="HTTPS" />
{proxyTypes.map((option) => ( <FormControlLabel value="socks5" control={<Radio />} label="SOCKS5" />
<MenuItem key={option.value} value={option.value}> </RadioGroup>
{option.label} </FormControl>
</MenuItem>
))}
</TextField>
<TextField <FormControl>
label="Proxy Server URL" <TextField
name="server" label="Proxy Server URL"
value={proxyConfig.server} name="server"
onChange={handleChange} value={proxyConfig.server}
fullWidth onChange={handleChange}
required fullWidth
helperText="e.g., http://proxy-server.com:8080" required
/> helperText="e.g., http://proxy-server.com:8080"
/>
</FormControl>
<TextField <FormControl>
label="Username (Optional)" <TextField
name="username" label="Username (Optional)"
value={proxyConfig.username} name="username"
onChange={handleChange} value={proxyConfig.username}
fullWidth onChange={handleChange}
/> fullWidth
/>
</FormControl>
<TextField <FormControl>
label="Password (Optional)" <TextField
name="password" label="Password (Optional)"
value={proxyConfig.password} name="password"
onChange={handleChange} value={proxyConfig.password}
type="password" onChange={handleChange}
fullWidth type="password"
/> fullWidth
/>
</FormControl>
<Button variant="contained" color="primary" type="submit" fullWidth> <Button variant="contained" color="primary" type="submit" fullWidth>
Submit Proxy Submit Proxy