From 992c75bf0000f2ed15e93cd22fb5831205cb36b7 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 2 Oct 2024 23:33:16 +0530
Subject: [PATCH] feat: check if proxy requires auth & accordingly show
 username & password fields

---
 src/components/organisms/ProxyForm.tsx | 58 ++++++++++++++++++--------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/components/organisms/ProxyForm.tsx b/src/components/organisms/ProxyForm.tsx
index c2a17b3f..b82bb86f 100644
--- a/src/components/organisms/ProxyForm.tsx
+++ b/src/components/organisms/ProxyForm.tsx
@@ -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>