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

feat: add translation for proxy page

Browse Source
This commit is contained in:
RohitR311
2024-12-20 21:04:44 +05:30
parent 18f7d75ef3
commit e404b74d2c
1 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@ import { styled } from '@mui/system';
import { Alert, AlertTitle, TextField, Button, Switch, FormControlLabel, Box, Typography, Tabs, Tab, Table, TableContainer, TableHead, TableRow, TableBody, TableCell, Paper } from '@mui/material'; import { Alert, AlertTitle, TextField, Button, Switch, FormControlLabel, Box, Typography, Tabs, Tab, Table, TableContainer, TableHead, TableRow, TableBody, TableCell, Paper } from '@mui/material';
import { sendProxyConfig, getProxyConfig, testProxyConfig, deleteProxyConfig } from '../../api/proxy'; import { sendProxyConfig, getProxyConfig, testProxyConfig, deleteProxyConfig } from '../../api/proxy';
import { useGlobalInfoStore } from '../../context/globalInfo'; import { useGlobalInfoStore } from '../../context/globalInfo';
import { useTranslation } from 'react-i18next';
const FormContainer = styled(Box)({ const FormContainer = styled(Box)({
display: 'flex', display: 'flex',
@@ -16,6 +17,7 @@ const FormControl = styled(Box)({
}); });
const ProxyForm: React.FC = () => { const ProxyForm: React.FC = () => {
const { t } = useTranslation();
const [proxyConfigForm, setProxyConfigForm] = useState({ const [proxyConfigForm, setProxyConfigForm] = useState({
server_url: '', server_url: '',
username: '', username: '',
@@ -79,9 +81,9 @@ const ProxyForm: React.FC = () => {
try { try {
const response = await sendProxyConfig(proxyConfigForm); const response = await sendProxyConfig(proxyConfigForm);
if (response) { if (response) {
notify('success', 'Proxy configuration submitted successfully'); notify('success', t('proxy.notifications.config_success'));
} else { } else {
notify('error', `Failed to submit proxy configuration. Try again. ${response}`); notify('error', t('proxy.notifications.config_error'));
console.log(`Failed to submit proxy configuration. Try again. ${response}`) console.log(`Failed to submit proxy configuration. Try again. ${response}`)
} }
} catch (error: any) { } catch (error: any) {
@@ -96,9 +98,9 @@ const ProxyForm: React.FC = () => {
const testProxy = async () => { const testProxy = async () => {
await testProxyConfig().then((response) => { await testProxyConfig().then((response) => {
if (response.success) { if (response.success) {
notify('success', 'Proxy configuration is working'); notify('success', t('proxy.notifications.test_success'));
} else { } else {
notify('error', 'Failed to test proxy configuration. Try again.'); notify('error', t('proxy.notifications.test_error'));
} }
}); });
}; };
@@ -109,7 +111,7 @@ const ProxyForm: React.FC = () => {
if (response.proxy_url) { if (response.proxy_url) {
setIsProxyConfigured(true); setIsProxyConfigured(true);
setProxy(response); setProxy(response);
notify('success', 'Proxy configuration fetched successfully'); notify('success', t('proxy.notifications.fetch_success'));
} }
} catch (error: any) { } catch (error: any) {
notify('error', error); notify('error', error);
@@ -119,11 +121,11 @@ const ProxyForm: React.FC = () => {
const removeProxy = async () => { const removeProxy = async () => {
await deleteProxyConfig().then((response) => { await deleteProxyConfig().then((response) => {
if (response) { if (response) {
notify('success', 'Proxy configuration removed successfully'); notify('success', t('proxy.notifications.remove_success'));
setIsProxyConfigured(false); setIsProxyConfigured(false);
setProxy({ proxy_url: '', auth: false }); setProxy({ proxy_url: '', auth: false });
} else { } else {
notify('error', 'Failed to remove proxy configuration. Try again.'); notify('error', t('proxy.notifications.remove_error'));
} }
}); });
} }
@@ -136,11 +138,11 @@ const ProxyForm: React.FC = () => {
<> <>
<FormContainer> <FormContainer>
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}> <Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
Proxy Configuration {t('proxy.title')}
</Typography> </Typography>
<Tabs value={tabIndex} onChange={handleTabChange}> <Tabs value={tabIndex} onChange={handleTabChange}>
<Tab label="Standard Proxy" /> <Tab label={t('proxy.tab_standard')} />
<Tab label="Automatic Proxy Rotation" /> <Tab label={t('proxy.tab_rotation')} />
</Tabs> </Tabs>
{tabIndex === 0 && ( {tabIndex === 0 && (
isProxyConfigured ? ( isProxyConfigured ? (
@@ -149,8 +151,8 @@ const ProxyForm: React.FC = () => {
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell><strong>Proxy URL</strong></TableCell> <TableCell><strong>{t('proxy.table.proxy_url')}</strong></TableCell>
<TableCell><strong>Requires Authentication</strong></TableCell> <TableCell><strong>{t('proxy.table.requires_auth')}</strong></TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@@ -162,39 +164,37 @@ const ProxyForm: React.FC = () => {
</Table> </Table>
</TableContainer> </TableContainer>
<Button variant="outlined" color="primary" onClick={testProxy}> <Button variant="outlined" color="primary" onClick={testProxy}>
Test Proxy {t('proxy.test_proxy')}
</Button> </Button>
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}> <Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}>
Remove Proxy {t('proxy.remove_proxy')}
</Button> </Button>
</Box> </Box>
) : ( ) : (
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}> <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}>
<FormControl> <FormControl>
<TextField <TextField
label="Proxy Server URL" label={t('proxy.server_url')}
name="server_url" name="server_url"
value={proxyConfigForm.server_url} value={proxyConfigForm.server_url}
onChange={handleChange} onChange={handleChange}
fullWidth fullWidth
required required
error={!!errors.server_url} error={!!errors.server_url}
helperText={errors.server_url || `Proxy to be used for all robots. HTTP and SOCKS proxies are supported. helperText={errors.server_url || t('proxy.server_url_helper')}
Example http://myproxy.com:3128 or socks5://myproxy.com:3128.
Short form myproxy.com:3128 is considered an HTTP proxy.`}
/> />
</FormControl> </FormControl>
<FormControl> <FormControl>
<FormControlLabel <FormControlLabel
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />} control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
label="Requires Authentication?" label={t('proxy.requires_auth')}
/> />
</FormControl> </FormControl>
{requiresAuth && ( {requiresAuth && (
<> <>
<FormControl> <FormControl>
<TextField <TextField
label="Username" label={t('proxy.username')}
name="username" name="username"
value={proxyConfigForm.username} value={proxyConfigForm.username}
onChange={handleChange} onChange={handleChange}
@@ -206,7 +206,7 @@ const ProxyForm: React.FC = () => {
</FormControl> </FormControl>
<FormControl> <FormControl>
<TextField <TextField
label="Password" label={t('proxy.password')}
name="password" name="password"
value={proxyConfigForm.password} value={proxyConfigForm.password}
onChange={handleChange} onChange={handleChange}
@@ -226,7 +226,7 @@ const ProxyForm: React.FC = () => {
fullWidth fullWidth
disabled={!proxyConfigForm.server_url || (requiresAuth && (!proxyConfigForm.username || !proxyConfigForm.password))} disabled={!proxyConfigForm.server_url || (requiresAuth && (!proxyConfigForm.username || !proxyConfigForm.password))}
> >
Add Proxy {t('proxy.add_proxy')}
</Button> </Button>
</Box> </Box>
))} ))}
@@ -234,33 +234,33 @@ const ProxyForm: React.FC = () => {
<Box sx={{ maxWidth: 400, width: '100%', textAlign: 'center', marginTop: '20px' }}> <Box sx={{ maxWidth: 400, width: '100%', textAlign: 'center', marginTop: '20px' }}>
<> <>
<Typography variant="body1" gutterBottom component="div"> <Typography variant="body1" gutterBottom component="div">
Coming Soon - In Open Source (Basic Rotation) & Cloud (Advanced Rotation). If you don't want to manage the infrastructure, join our cloud waitlist to get early access. {t('proxy.coming_soon')}
</Typography> </Typography>
<Button variant="contained" color="primary" sx={{ marginTop: '20px' }}> <Button variant="contained" color="primary" sx={{ marginTop: '20px' }}>
<a style={{ color: 'white', textDecoration: 'none' }} href="https://forms.gle/hXjgqDvkEhPcaBW76">Join Maxun Cloud Waitlist</a> <a style={{ color: 'white', textDecoration: 'none' }} href="https://forms.gle/hXjgqDvkEhPcaBW76">{t('proxy.join_waitlist')}</a>
</Button> </Button>
</> </>
</Box> </Box>
)} )}
</FormContainer> </FormContainer>
<Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '230px', width: '450px', border: '1px solid #ff00c3' }}> <Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '230px', width: '450px', border: '1px solid #ff00c3' }}>
<AlertTitle>If your proxy requires a username and password, always provide them separately from the proxy URL. </AlertTitle> <AlertTitle>{t('proxy.alert.title')}</AlertTitle>
<br /> <br />
<b>The right way</b> <b>{t('proxy.alert.right_way')}</b>
<br /> <br />
Proxy URL: http://proxy.com:1337 {t('proxy.alert.proxy_url')} http://proxy.com:1337
<br /> <br />
Username: myusername {t('proxy.alert.username')} myusername
<br /> <br />
Password: mypassword {t('proxy.alert.password')} mypassword
<br /> <br />
<br /> <br />
<b>The wrong way</b> <b>{t('proxy.alert.wrong_way')}</b>
<br /> <br />
Proxy URL: http://myusername:mypassword@proxy.com:1337 {t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
</Alert> </Alert>
</> </>
); );
}; };
export default ProxyForm; export default ProxyForm;