Merge branch 'develop' into ui-fix
This commit is contained in:
Rohit
@@ -22,6 +22,7 @@ import {
|
||||
import { sendProxyConfig, getProxyConfig, testProxyConfig, deleteProxyConfig } from '../../api/proxy';
|
||||
import { useGlobalInfoStore } from '../../context/globalInfo';
|
||||
import { useThemeMode } from '../../context/theme-provider';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
// Custom styled Tabs component
|
||||
const CustomTabs = styled(Tabs)(({ theme }) => ({
|
||||
@@ -44,6 +45,7 @@ const CustomTab = styled(Tab)(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
const FormContainer = styled(Box)({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -56,6 +58,7 @@ const FormControl = styled(Box)({
|
||||
});
|
||||
|
||||
const ProxyForm: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [proxyConfigForm, setProxyConfigForm] = useState({
|
||||
server_url: '',
|
||||
username: '',
|
||||
@@ -119,13 +122,13 @@ const ProxyForm: React.FC = () => {
|
||||
try {
|
||||
const response = await sendProxyConfig(proxyConfigForm);
|
||||
if (response) {
|
||||
notify('success', 'Proxy configuration submitted successfully');
|
||||
notify('success', t('proxy.notifications.config_success'));
|
||||
} else {
|
||||
notify('error', `Failed to submit proxy configuration. Try again. ${response}`);
|
||||
console.log(`Failed to submit proxy configuration. Try again. ${response}`)
|
||||
notify('error', t('proxy.notifications.config_error'));
|
||||
console.log(`${t('proxy.notifications.config_error')} ${response}`)
|
||||
}
|
||||
} catch (error: any) {
|
||||
notify('error', `${error} : Failed to submit proxy configuration`);
|
||||
notify('error', `${error} : ${t('proxy.notifications.config_error')}`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -136,9 +139,9 @@ const ProxyForm: React.FC = () => {
|
||||
const testProxy = async () => {
|
||||
await testProxyConfig().then((response) => {
|
||||
if (response.success) {
|
||||
notify('success', 'Proxy configuration is working');
|
||||
notify('success', t('proxy.notifications.test_success'));
|
||||
} else {
|
||||
notify('error', 'Failed to test proxy configuration. Try again.');
|
||||
notify('error', t('proxy.notifications.test_error'));
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -149,7 +152,7 @@ const ProxyForm: React.FC = () => {
|
||||
if (response.proxy_url) {
|
||||
setIsProxyConfigured(true);
|
||||
setProxy(response);
|
||||
notify('success', 'Proxy configuration fetched successfully');
|
||||
notify('success', t('proxy.notifications.fetch_success'));
|
||||
}
|
||||
} catch (error: any) {
|
||||
notify('error', error);
|
||||
@@ -159,11 +162,11 @@ const ProxyForm: React.FC = () => {
|
||||
const removeProxy = async () => {
|
||||
await deleteProxyConfig().then((response) => {
|
||||
if (response) {
|
||||
notify('success', 'Proxy configuration removed successfully');
|
||||
notify('success', t('proxy.notifications.remove_success'));
|
||||
setIsProxyConfigured(false);
|
||||
setProxy({ proxy_url: '', auth: false });
|
||||
} else {
|
||||
notify('error', 'Failed to remove proxy configuration. Try again.');
|
||||
notify('error', t('proxy.notifications.remove_error'));
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -179,7 +182,7 @@ const ProxyForm: React.FC = () => {
|
||||
<>
|
||||
<FormContainer>
|
||||
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
|
||||
Proxy Configuration
|
||||
{t('proxy.title')}
|
||||
</Typography>
|
||||
<CustomTabs
|
||||
value={tabIndex}
|
||||
@@ -191,18 +194,24 @@ const ProxyForm: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
<CustomTab
|
||||
label="Standard Proxy"
|
||||
label={t('proxy.tab_standard')}
|
||||
style={{
|
||||
color: tabIndex === 0 ? '#FF69B4' : (isDarkMode ? 'white' : 'black')
|
||||
}}
|
||||
/>
|
||||
<CustomTab
|
||||
label="Automatic Proxy Rotation"
|
||||
label={t('proxy.tab_rotation')}
|
||||
style={{
|
||||
color: tabIndex === 1 ? '#FF69B4' : (isDarkMode ? 'white' : 'black')
|
||||
}}
|
||||
/>
|
||||
</CustomTabs>
|
||||
|
||||
<!-- <Tabs value={tabIndex} onChange={handleTabChange}>
|
||||
<Tab label={t('proxy.tab_standard')} />
|
||||
<Tab label={t('proxy.tab_rotation')} />
|
||||
</Tabs> -->
|
||||
|
||||
{tabIndex === 0 && (
|
||||
isProxyConfigured ? (
|
||||
<Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
|
||||
@@ -210,8 +219,8 @@ const ProxyForm: React.FC = () => {
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell><strong>Proxy URL</strong></TableCell>
|
||||
<TableCell><strong>Requires Authentication</strong></TableCell>
|
||||
<TableCell><strong>{t('proxy.table.proxy_url')}</strong></TableCell>
|
||||
<TableCell><strong>{t('proxy.table.requires_auth')}</strong></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
@@ -223,39 +232,37 @@ const ProxyForm: React.FC = () => {
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<Button variant="outlined" color="primary" onClick={testProxy}>
|
||||
Test Proxy
|
||||
{t('proxy.test_proxy')}
|
||||
</Button>
|
||||
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}>
|
||||
Remove Proxy
|
||||
{t('proxy.remove_proxy')}
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}>
|
||||
<FormControl>
|
||||
<TextField
|
||||
label="Proxy Server URL"
|
||||
label={t('proxy.server_url')}
|
||||
name="server_url"
|
||||
value={proxyConfigForm.server_url}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
required
|
||||
error={!!errors.server_url}
|
||||
helperText={errors.server_url || `Proxy to be used for all robots. HTTP and SOCKS proxies are supported.
|
||||
Example http://myproxy.com:3128 or socks5://myproxy.com:3128.
|
||||
Short form myproxy.com:3128 is considered an HTTP proxy.`}
|
||||
helperText={errors.server_url || t('proxy.server_url_helper')}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormControlLabel
|
||||
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
|
||||
label="Requires Authentication?"
|
||||
label={t('proxy.requires_auth')}
|
||||
/>
|
||||
</FormControl>
|
||||
{requiresAuth && (
|
||||
<>
|
||||
<FormControl>
|
||||
<TextField
|
||||
label="Username"
|
||||
label={t('proxy.username')}
|
||||
name="username"
|
||||
value={proxyConfigForm.username}
|
||||
onChange={handleChange}
|
||||
@@ -267,7 +274,7 @@ const ProxyForm: React.FC = () => {
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<TextField
|
||||
label="Password"
|
||||
label={t('proxy.password')}
|
||||
name="password"
|
||||
value={proxyConfigForm.password}
|
||||
onChange={handleChange}
|
||||
@@ -287,7 +294,7 @@ const ProxyForm: React.FC = () => {
|
||||
fullWidth
|
||||
disabled={!proxyConfigForm.server_url || (requiresAuth && (!proxyConfigForm.username || !proxyConfigForm.password))}
|
||||
>
|
||||
Add Proxy
|
||||
{t('proxy.add_proxy')}
|
||||
</Button>
|
||||
</Box>
|
||||
))}
|
||||
@@ -295,31 +302,37 @@ const ProxyForm: React.FC = () => {
|
||||
<Box sx={{ maxWidth: 400, width: '100%', textAlign: 'center', marginTop: '20px' }}>
|
||||
<>
|
||||
<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>
|
||||
<Button variant="contained" color="primary" sx={{ marginTop: '20px',backgroundColor: '#ff00c3' }}>
|
||||
<a style={{ color: 'white', textDecoration: 'none' }} href="https://forms.gle/hXjgqDvkEhPcaBW76">Join Maxun Cloud Waitlist</a>
|
||||
|
||||
<!-- <Button variant="contained" color="primary" sx={{ marginTop: '20px',backgroundColor: '#ff00c3' }}>
|
||||
<a style={{ color: 'white', textDecoration: 'none' }} href="https://forms.gle/hXjgqDvkEhPcaBW76">Join Maxun Cloud Waitlist</a> -->
|
||||
|
||||
<Button variant="contained" color="primary" sx={{ marginTop: '20px' }}>
|
||||
<a style={{ color: 'white', textDecoration: 'none' }} href="https://forms.gle/hXjgqDvkEhPcaBW76">{t('proxy.join_waitlist')}</a>
|
||||
|
||||
</Button>
|
||||
</>
|
||||
</Box>
|
||||
)}
|
||||
</FormContainer>
|
||||
<Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '230px', width: '450px', border: '1px solid #ff00c3', bgcolor: isDarkMode ? '#3b002d' : '#ffc4f1', color: isDarkMode ? 'white' : 'black' }}>
|
||||
<AlertTitle>If your proxy requires a username and password, always provide them separately from the proxy URL. </AlertTitle>
|
||||
|
||||
<Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '230px', width: '450px', border: '1px solid #ff00c3' }}>
|
||||
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
|
||||
<br />
|
||||
<b>The right way</b>
|
||||
<b>{t('proxy.alert.right_way')}</b>
|
||||
<br />
|
||||
Proxy URL: http://proxy.com:1337
|
||||
{t('proxy.alert.proxy_url')} http://proxy.com:1337
|
||||
<br />
|
||||
Username: myusername
|
||||
{t('proxy.alert.username')} myusername
|
||||
<br />
|
||||
Password: mypassword
|
||||
{t('proxy.alert.password')} mypassword
|
||||
<br />
|
||||
<br />
|
||||
<b>The wrong way</b>
|
||||
<br />
|
||||
Proxy URL: http://myusername:mypassword@proxy.com:1337
|
||||
<b>{t('proxy.alert.wrong_way')}</b>
|
||||
<br />
|
||||
|
||||
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
|
||||
</Alert>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user