From 1c13845302a83d69699d0ed97c35c133d917be16 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 24 Oct 2024 18:26:11 +0530
Subject: [PATCH] feat: standard proxy and automatic proxy rotation tabs

---
 src/components/organisms/ProxyForm.tsx | 138 ++++++++++++++-----------
 1 file changed, 78 insertions(+), 60 deletions(-)

diff --git a/src/components/organisms/ProxyForm.tsx b/src/components/organisms/ProxyForm.tsx
index a799490d..ace84119 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, Switch, FormControlLabel, Box, Typography } from '@mui/material';
+import { TextField, Button, Switch, FormControlLabel, Box, Typography, Tabs, Tab } from '@mui/material';
 import { sendProxyConfig } from '../../api/proxy';
 import { useGlobalInfoStore } from '../../context/globalInfo';
 
@@ -27,6 +27,7 @@ const ProxyForm: React.FC = () => {
         username: '',
         password: '',
     });
+    const [tabIndex, setTabIndex] = useState(0);
 
     const { notify } = useGlobalInfoStore();
 
@@ -82,71 +83,88 @@ const ProxyForm: React.FC = () => {
         });
     };
 
+    const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+        setTabIndex(newValue);
+    };
+
     return (
         <FormContainer>
             <Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
                 Proxy Configuration
             </Typography>
-            <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}>
-                <FormControl>
-                    <TextField
-                        label="Proxy Server URL"
-                        name="server_url"
-                        value={proxyConfig.server_url}
-                        onChange={handleChange}
+            <Tabs value={tabIndex} onChange={handleTabChange}>
+                <Tab label="Standard Proxy" />
+                <Tab label="Automatic Proxy Rotation" />
+            </Tabs>
+            {tabIndex === 0 && (
+                <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}>
+                    <FormControl>
+                        <TextField
+                            label="Proxy Server URL"
+                            name="server_url"
+                            value={proxyConfig.server_url}
+                            onChange={handleChange}
+                            fullWidth
+                            required
+                            error={!!errors.server_url}
+                            helperText={errors.server_url || `Proxy to be used for all robots. HTTP and SOCKS proxies are supported. 
+                            Example http://myproxy.com:3128 or socks5://myproxy.com:3128. 
+                            Short form myproxy.com:3128 is considered an HTTP proxy.`}
+                        />
+                    </FormControl>
+                    <FormControl>
+                        <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={requiresAuth}
+                                    error={!!errors.username}
+                                    helperText={errors.username || ''}
+                                />
+                            </FormControl>
+                            <FormControl>
+                                <TextField
+                                    label="Password"
+                                    name="password"
+                                    value={proxyConfig.password}
+                                    onChange={handleChange}
+                                    type="password"
+                                    fullWidth
+                                    required={requiresAuth}
+                                    error={!!errors.password}
+                                    helperText={errors.password || ''}
+                                />
+                            </FormControl>
+                        </>
+                    )}
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        type="submit"
                         fullWidth
-                        required
-                        error={!!errors.server_url}
-                        helperText={errors.server_url || `Proxy to be used for all robots. HTTP and SOCKS proxies are supported. 
-                        Example http://myproxy.com:3128 or socks5://myproxy.com:3128. 
-                        Short form myproxy.com:3128 is considered an HTTP proxy.`}
-                    />
-                </FormControl>
-                <FormControl>
-                    <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={requiresAuth}
-                                error={!!errors.username}
-                                helperText={errors.username || ''}
-                            />
-                        </FormControl>
-                        <FormControl>
-                            <TextField
-                                label="Password"
-                                name="password"
-                                value={proxyConfig.password}
-                                onChange={handleChange}
-                                type="password"
-                                fullWidth
-                                required={requiresAuth}
-                                error={!!errors.password}
-                                helperText={errors.password || ''}
-                            />
-                        </FormControl>
-                    </>
-                )}
-                <Button
-                    variant="contained"
-                    color="primary"
-                    type="submit"
-                    fullWidth
-                    disabled={!proxyConfig.server_url || (requiresAuth && (!proxyConfig.username || !proxyConfig.password))}
-                >
-                    Add Proxy
-                </Button>
-            </Box>
+                        disabled={!proxyConfig.server_url || (requiresAuth && (!proxyConfig.username || !proxyConfig.password))}
+                    >
+                        Add Proxy
+                    </Button>
+                </Box>
+            )}
+            {tabIndex === 1 && (
+                <Box sx={{ maxWidth: 400, width: '100%', textAlign: 'center', marginTop: '20px' }}>
+                    <Button variant="contained" color="primary">
+                        Join Our Cloud Waitlist
+                    </Button>
+                </Box>
+            )}
         </FormContainer>
     );
 };