feat: match proxy layout w new menu layout
This commit is contained in:
@@ -156,19 +156,30 @@ const ProxyForm: React.FC = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Box sx={{
|
||||||
<FormContainer>
|
display: 'flex',
|
||||||
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
|
gap: 4,
|
||||||
|
p: 5,
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
|
}}>
|
||||||
|
<Box sx={{
|
||||||
|
flex: 1,
|
||||||
|
minWidth: 0,
|
||||||
|
maxWidth: 600
|
||||||
|
}}>
|
||||||
|
<Typography variant="h6" gutterBottom component="div">
|
||||||
{t('proxy.title')}
|
{t('proxy.title')}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Tabs value={tabIndex} onChange={handleTabChange} style={{ marginBottom: '10px' }}>
|
<Tabs value={tabIndex} onChange={handleTabChange} sx={{ mb: 2 }}>
|
||||||
<Tab label={t('proxy.tab_standard')} />
|
<Tab label={t('proxy.tab_standard')} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
{tabIndex === 0 && (
|
{tabIndex === 0 && (
|
||||||
isProxyConfigured ? (
|
isProxyConfigured ? (
|
||||||
<Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
|
<Box sx={{ width: '100%', mt: 1 }}>
|
||||||
<TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
|
<TableContainer component={Paper} sx={{ mb: 2 }}>
|
||||||
<Table>
|
<Table>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
@@ -187,13 +198,13 @@ const ProxyForm: React.FC = () => {
|
|||||||
<Button variant="outlined" color="primary" onClick={testProxy}>
|
<Button variant="outlined" color="primary" onClick={testProxy}>
|
||||||
{t('proxy.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={{ ml: 1 }}>
|
||||||
{t('proxy.remove_proxy')}
|
{t('proxy.remove_proxy')}
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
) : (
|
) : (
|
||||||
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500, width: '100%' }}>
|
<Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
|
||||||
<FormControl>
|
<Box sx={{ mb: 2 }}>
|
||||||
<TextField
|
<TextField
|
||||||
label={t('proxy.server_url')}
|
label={t('proxy.server_url')}
|
||||||
name="server_url"
|
name="server_url"
|
||||||
@@ -208,16 +219,16 @@ const ProxyForm: React.FC = () => {
|
|||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</Box>
|
||||||
<FormControl>
|
<Box sx={{ mb: 2 }}>
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
|
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
|
||||||
label={t('proxy.requires_auth')}
|
label={t('proxy.requires_auth')}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</Box>
|
||||||
{requiresAuth && (
|
{requiresAuth && (
|
||||||
<>
|
<>
|
||||||
<FormControl>
|
<Box sx={{ mb: 2 }}>
|
||||||
<TextField
|
<TextField
|
||||||
label={t('proxy.username')}
|
label={t('proxy.username')}
|
||||||
name="username"
|
name="username"
|
||||||
@@ -228,8 +239,8 @@ const ProxyForm: React.FC = () => {
|
|||||||
error={!!errors.username}
|
error={!!errors.username}
|
||||||
helperText={errors.username || ''}
|
helperText={errors.username || ''}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</Box>
|
||||||
<FormControl>
|
<Box sx={{ mb: 2 }}>
|
||||||
<TextField
|
<TextField
|
||||||
label={t('proxy.password')}
|
label={t('proxy.password')}
|
||||||
name="password"
|
name="password"
|
||||||
@@ -241,7 +252,7 @@ const ProxyForm: React.FC = () => {
|
|||||||
error={!!errors.password}
|
error={!!errors.password}
|
||||||
helperText={errors.password || ''}
|
helperText={errors.password || ''}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</Box>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
@@ -255,27 +266,34 @@ const ProxyForm: React.FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
))}
|
))}
|
||||||
</FormContainer>
|
</Box>
|
||||||
|
|
||||||
<Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '250px', width: '600px' }}>
|
{/* Instructions Section */}
|
||||||
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
|
<Box sx={{
|
||||||
<br />
|
flex: 1,
|
||||||
<b>{t('proxy.alert.right_way')}</b>
|
minWidth: 0,
|
||||||
<br />
|
maxWidth: 600
|
||||||
{t('proxy.alert.proxy_url')} http://proxy.com:1337
|
}}>
|
||||||
<br />
|
<Alert severity="info" sx={{ height: 'auto', minHeight: 250 }}>
|
||||||
{t('proxy.alert.username')} myusername
|
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
|
||||||
<br />
|
<br />
|
||||||
{t('proxy.alert.password')} mypassword
|
<b>{t('proxy.alert.right_way')}</b>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
{t('proxy.alert.proxy_url')} http://proxy.com:1337
|
||||||
<b>{t('proxy.alert.wrong_way')}</b>
|
<br />
|
||||||
<br />
|
{t('proxy.alert.username')} myusername
|
||||||
|
<br />
|
||||||
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
|
{t('proxy.alert.password')} mypassword
|
||||||
</Alert>
|
<br />
|
||||||
</>
|
<br />
|
||||||
|
<b>{t('proxy.alert.wrong_way')}</b>
|
||||||
|
<br />
|
||||||
|
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
|
||||||
|
</Alert>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export default ProxyForm;
|
export default ProxyForm;
|
||||||
Reference in New Issue
Block a user