feat: use alert

This commit is contained in:
amhsirak
2024-11-22 21:37:21 +05:30
parent 2813fa918a
commit 1341ac5b03

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';
@@ -243,26 +243,22 @@ const ProxyForm: React.FC = () => {
</Box> </Box>
)} )}
</FormContainer> </FormContainer>
<Box sx={{ marginLeft: '50px', padding: '20px', border: '0.2px solid #ccc', borderRadius: '5px', maxWidth: '500px', height: '350px', color: 'rgba(0, 0, 0, 0.6)' }}> <Alert severity="info" sx={{marginTop: '80px', marginLeft: '50px', height: '230px', width: '450px'}} variant='outlined'>
<Typography variant="h6" gutterBottom> <AlertTitle>If your proxy requires a username and password, always provide them separately from the proxy URL. </AlertTitle>
Proxy Instructions <br />
</Typography> <b>The right way</b>
<Typography variant="body1" gutterBottom> <br />
1. Enter the Proxy Server URL in the format: http://myproxy.com:3128 or socks5://myproxy.com:3128. Proxy URL: http://proxy.com:1337
</Typography> <br />
<Typography variant="body1" gutterBottom> Username: myusername
2. If your proxy requires authentication, toggle the "Requires Authentication?" switch and provide the username and password. <br />
</Typography> Password: mypassword
<Typography variant="body1" gutterBottom> <br />
3. Click "Add Proxy" to save the configuration. <br />
</Typography> <b>The wrong way</b>
<Typography variant="body1" gutterBottom> <br />
4. Use the "Test Proxy" button to verify if the proxy configuration is working. Proxy URL: http://myusername:mypassword@proxy.com:1337
</Typography> </Alert>
<Typography variant="body1" gutterBottom>
5. If needed, you can remove the proxy configuration using the "Remove Proxy" button.
</Typography>
</Box>
</> </>
); );
}; };