feat: check if proxy requires auth & accordingly show username & password fields

This commit is contained in:
karishmas6
2024-10-02 23:33:16 +05:30
parent b1115218e7
commit 992c75bf00

View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { styled } from '@mui/system';
import { TextField, Button, RadioGroup, FormControlLabel, Radio, Box, Typography } from '@mui/material';
import { TextField, Button, Switch, FormControlLabel, Box, Typography } from '@mui/material';
import { sendProxyConfig } from '../../api/proxy';
import { useGlobalInfoStore } from '../../context/globalInfo';
@@ -22,6 +22,7 @@ const ProxyForm: React.FC = () => {
username: '',
password: '',
});
const [requiresAuth, setRequiresAuth] = useState<boolean>(false);
const { notify } = useGlobalInfoStore();
@@ -30,6 +31,13 @@ const ProxyForm: React.FC = () => {
setProxyConfig({ ...proxyConfig, [name]: value });
};
const handleAuthToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
setRequiresAuth(e.target.checked);
if (!e.target.checked) {
setProxyConfig({ ...proxyConfig, username: '', password: '' });
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
await sendProxyConfig(proxyConfig).then((response) => {
@@ -44,7 +52,9 @@ const ProxyForm: React.FC = () => {
return (
<FormContainer>
<form onSubmit={handleSubmit}>
<Typography variant="subtitle1" gutterBottom style={{ marginBottom: '20px', marginTop: '20px' }}>Proxy Configuration</Typography>
<Typography variant="subtitle1" gutterBottom style={{ marginBottom: '20px', marginTop: '20px' }}>
Proxy Configuration
</Typography>
<FormControl>
<TextField
label="Proxy Server URL"
@@ -57,24 +67,36 @@ const ProxyForm: React.FC = () => {
/>
</FormControl>
<FormControl>
<TextField
label="Username (Optional)"
name="username"
value={proxyConfig.username}
onChange={handleChange}
fullWidth
/>
</FormControl>
<FormControl>
<TextField
label="Password (Optional)"
name="password"
value={proxyConfig.password}
onChange={handleChange}
type="password"
fullWidth
<FormControlLabel
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
label="Requires Authentication?"
/>
</FormControl>
{requiresAuth && (
<>
<FormControl>
<TextField
label="Username"
name="username"
value={proxyConfig.username}
onChange={handleChange}
fullWidth
required
/>
</FormControl>
<FormControl>
<TextField
label="Password"
name="password"
value={proxyConfig.password}
onChange={handleChange}
type="password"
fullWidth
required
/>
</FormControl>
</>
)}
<Button variant="contained" color="primary" type="submit" fullWidth>
Add Proxy
</Button>