Merge pull request #196 from getmaxun/proxy-docs

feat: byop instructions for authenticated proxies
This commit is contained in:
Karishma Shukla
2024-11-22 21:45:45 +05:30
committed by GitHub

View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import { 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';
@@ -145,22 +145,22 @@ const ProxyForm: React.FC = () => {
{tabIndex === 0 && ( {tabIndex === 0 && (
isProxyConfigured ? ( isProxyConfigured ? (
<Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}> <Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
<TableContainer component={Paper} sx={{ marginBottom: '20px' }}> <TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell><strong>Proxy URL</strong></TableCell> <TableCell><strong>Proxy URL</strong></TableCell>
<TableCell><strong>Requires Authentication</strong></TableCell> <TableCell><strong>Requires Authentication</strong></TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell>{proxy.proxy_url}</TableCell> <TableCell>{proxy.proxy_url}</TableCell>
<TableCell>{proxy.auth ? 'Yes' : 'No'}</TableCell> <TableCell>{proxy.auth ? 'Yes' : 'No'}</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
<Button variant="outlined" color="primary" onClick={testProxy}> <Button variant="outlined" color="primary" onClick={testProxy}>
Test Proxy Test Proxy
</Button> </Button>
@@ -231,18 +231,34 @@ const ProxyForm: React.FC = () => {
</Box> </Box>
))} ))}
{tabIndex === 1 && ( {tabIndex === 1 && (
<Box sx={{ maxWidth: 600, 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. 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.
</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">Join Maxun Cloud Waitlist</a>
</Button> </Button>
</> </>
</Box> </Box>
)} )}
</FormContainer> </FormContainer>
<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>
<br />
<b>The right way</b>
<br />
Proxy URL: http://proxy.com:1337
<br />
Username: myusername
<br />
Password: mypassword
<br />
<br />
<b>The wrong way</b>
<br />
Proxy URL: http://myusername:mypassword@proxy.com:1337
</Alert>
</> </>
); );
}; };