feat: add support for different inputs

src/components/robot/RobotEdit.tsx

@@ -8,6 +8,7 @@ import { useGlobalInfoStore } from '../../context/globalInfo';
 import { getStoredRecording, updateRecording } from '../../api/storage';
 import { WhereWhatPair } from 'maxun-core';
 
+// Base interfaces for robot data structure
 interface RobotMeta {
     name: string;
     id: string;
@@ -21,19 +22,6 @@ interface RobotWorkflow {
     workflow: WhereWhatPair[];
 }
 
-interface RobotEditOptions {
-    name: string;
-    limit?: number;
-}
-
-interface Credentials {
-    [key: string]: string;
-}
-
-interface CredentialVisibility {
-    [key: string]: boolean;
-}
-
 interface ScheduleConfig {
     runEvery: number;
     runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
@@ -67,21 +55,70 @@ interface RobotSettingsProps {
     initialSettings?: RobotSettings | null;
 }
 
+// Enhanced interfaces for credential handling
+interface CredentialInfo {
+    value: string;
+    type: string;
+}
+
+interface Credentials {
+    [key: string]: CredentialInfo;
+}
+
+interface CredentialVisibility {
+    [key: string]: boolean;
+}
+
+interface GroupedCredentials {
+    passwords: string[];
+    emails: string[];
+    usernames: string[];
+    others: string[];
+}
+
 export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
     const { t } = useTranslation();
     const [robot, setRobot] = useState<RobotSettings | null>(null);
     const [credentials, setCredentials] = useState<Credentials>({});
     const { recordingId, notify } = useGlobalInfoStore();
-    const [credentialSelectors, setCredentialSelectors] = useState<string[]>([]);
+    const [credentialGroups, setCredentialGroups] = useState<GroupedCredentials>({ 
+        passwords: [], 
+        emails: [],
+        usernames: [],
+        others: [] 
+    });
     const [showPasswords, setShowPasswords] = useState<CredentialVisibility>({});
 
-    const handleClickShowPassword = (selector: string) => {
+    const isEmailPattern = (value: string): boolean => {
-        setShowPasswords(prev => ({
+        return value.includes('@');
-            ...prev,
+    };
-            [selector]: !prev[selector]
+    
-        }));
+    const isUsernameSelector = (selector: string): boolean => {
+        return selector.toLowerCase().includes('username') || 
+               selector.toLowerCase().includes('user') ||
+               selector.toLowerCase().includes('email');
     };
 
+    const determineCredentialType = (selector: string, info: CredentialInfo): 'password' | 'email' | 'username' | 'other' => {
+        // Check for password type first
+        if (info.type === 'password') {
+            return 'password';
+        }
+        
+        // Check for email patterns in the value or selector
+        if (isEmailPattern(info.value) || selector.toLowerCase().includes('email')) {
+            return 'email';
+        }
+        
+        // Check for username patterns in the selector
+        if (isUsernameSelector(selector)) {
+            return 'username';
+        }
+        
+        // If no specific pattern is matched, classify as other
+        return 'other';
+    };
+    
     useEffect(() => {
         if (isOpen) {
             getRobot();
@@ -90,35 +127,14 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
 
     useEffect(() => {
         if (robot?.recording?.workflow) {
-          const selectors = findCredentialSelectors(robot.recording.workflow);
+            const extractedCredentials = extractInitialCredentials(robot.recording.workflow);
-          setCredentialSelectors(selectors);
+            setCredentials(extractedCredentials);
-          
+            setCredentialGroups(groupCredentialsByType(extractedCredentials));
-          const initialCredentials = extractInitialCredentials(robot.recording.workflow);
-          setCredentials(initialCredentials);
         }
     }, [robot]);
 
-    const findCredentialSelectors = (workflow: WhereWhatPair[]): string[] => {
+    const extractInitialCredentials = (workflow: any[]): Credentials => {
-        const selectors = new Set<string>();
+        const credentials: Credentials = {};
-        
-        workflow?.forEach(step => {
-          step.what?.forEach(action => {
-            if (
-              (action.action === 'type' || action.action === 'press') && 
-              action.args && 
-              action.args[0] && 
-              typeof action.args[0] === 'string'
-            ) {
-              selectors.add(action.args[0]);
-            }
-          });
-        });
-        
-        return Array.from(selectors);
-    };
-
-    const extractInitialCredentials = (workflow: any[]): Record<string, string> => {
-        const credentials: Record<string, string> = {};
 
         const isPrintableCharacter = (char: string): boolean => {
             return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
@@ -133,15 +149,19 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
                     action.args?.length >= 2 && 
                     typeof action.args[1] === 'string'
                 ) {
-                    let currentSelector: string = action.args[0];
+                    const currentSelector: string = action.args[0];
-                    let character: string = action.args[1];
+                    const character: string = action.args[1];
+                    const inputType: string = action.args[2] || '';
                     
                     if (!credentials.hasOwnProperty(currentSelector)) {
-                        credentials[currentSelector] = '';
+                        credentials[currentSelector] = {
+                            value: '',
+                            type: inputType
+                        };
                     }
                     
                     if (isPrintableCharacter(character)) {
-                        credentials[currentSelector] += character;
+                        credentials[currentSelector].value += character;
                     }
                 }
             });
@@ -150,6 +170,28 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         return credentials;
     };
 
+    const groupCredentialsByType = (credentials: Credentials): GroupedCredentials => {
+        return Object.entries(credentials).reduce((acc: GroupedCredentials, [selector, info]) => {
+            const credentialType = determineCredentialType(selector, info);
+            
+            switch (credentialType) {
+                case 'password':
+                    acc.passwords.push(selector);
+                    break;
+                case 'email':
+                    acc.emails.push(selector);
+                    break;
+                case 'username':
+                    acc.usernames.push(selector);
+                    break;
+                default:
+                    acc.others.push(selector);
+            }
+            
+            return acc;
+        }, { passwords: [], emails: [], usernames: [], others: [] });
+    };
+
     const getRobot = async () => {
         if (recordingId) {
             const robot = await getStoredRecording(recordingId);
@@ -157,7 +199,14 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         } else {
             notify('error', t('robot_edit.notifications.update_failed'));
         }
-    }
+    };
+
+    const handleClickShowPassword = (selector: string) => {
+        setShowPasswords(prev => ({
+            ...prev,
+            [selector]: !prev[selector]
+        }));
+    };
 
     const handleRobotNameChange = (newName: string) => {
         setRobot((prev) =>
@@ -167,8 +216,11 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
 
     const handleCredentialChange = (selector: string, value: string) => {
         setCredentials(prev => ({
-          ...prev,
+            ...prev,
-          [selector]: value
+            [selector]: {
+                ...prev[selector],
+                value
+            }
         }));
     };
 
@@ -177,7 +229,6 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
             if (!prev) return prev;
 
             const updatedWorkflow = [...prev.recording.workflow];
-
             if (
                 updatedWorkflow.length > 0 &&
                 updatedWorkflow[0]?.what &&
@@ -193,21 +244,101 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         });
     };
 
+    const renderAllCredentialFields = () => {
+        return (
+            <>
+                {/* Render username credentials */}
+                {renderCredentialFields(
+                    credentialGroups.usernames, 
+                    t('Username Credentials'),
+                    'text'  // Always show usernames as text
+                )}
+                
+                {/* Render email credentials */}
+                {renderCredentialFields(
+                    credentialGroups.emails, 
+                    t('Email Credentials'),
+                    'text'  // Always show emails as text
+                )}
+                
+                {/* Render password credentials */}
+                {renderCredentialFields(
+                    credentialGroups.passwords, 
+                    t('Password Credentials'),
+                    'password'  // Use password masking
+                )}
+                
+                {/* Render other credentials */}
+                {renderCredentialFields(
+                    credentialGroups.others, 
+                    t('Other Credentials'),
+                    'text'  // Show other credentials as text
+                )}
+            </>
+        );
+    };
+
+    const renderCredentialFields = (selectors: string[], headerText: string, defaultType: 'text' | 'password' = 'text') => {
+        if (selectors.length === 0) return null;
+    
+        return (
+            <>
+                <Typography variant="h6" style={{ marginBottom: '20px'}}>
+                    {headerText}
+                </Typography>
+                {selectors.map((selector) => (
+                    <TextField
+                        key={selector}
+                        type={showPasswords[selector] ? 'text' : defaultType}
+                        label={`Credential for ${selector}`}
+                        value={credentials[selector]?.value || ''}
+                        onChange={(e) => handleCredentialChange(selector, e.target.value)}
+                        style={{ marginBottom: '20px' }}
+                        InputProps={{
+                            // Only show visibility toggle for password fields
+                            endAdornment: defaultType === 'password' ? (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        aria-label="toggle password visibility"
+                                        onClick={() => handleClickShowPassword(selector)}
+                                        edge="end"
+                                    >
+                                        {showPasswords[selector] ? <Visibility /> : <VisibilityOff />}
+                                    </IconButton>
+                                </InputAdornment>
+                            ) : undefined,
+                        }}
+                    />
+                ))}
+            </>
+        );
+    };
+
     const handleSave = async () => {
         if (!robot) return;
 
         try {
+            const credentialsForPayload = Object.entries(credentials).reduce((acc, [selector, info]) => {
+                const enforceType = info.type === 'password' ? 'password' : 'text';
+
+                acc[selector] = {
+                    value: info.value,
+                    type: enforceType
+                };
+                return acc;
+            }, {} as Record<string, CredentialInfo>);
+
             const payload = {
                 name: robot.recording_meta.name,
                 limit: robot.recording.workflow[0]?.what[0]?.args?.[0]?.limit,
-                credentials: credentials,
+                credentials: credentialsForPayload,
             };
 
             const success = await updateRecording(robot.recording_meta.id, payload);
 
             if (success) {
                 notify('success', t('robot_edit.notifications.update_success'));
-                handleStart(robot); // Inform parent about the updated robot
+                handleStart(robot);
                 handleClose();
 
                 setTimeout(() => {
@@ -233,87 +364,60 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
                     {t('robot_edit.title')}
                 </Typography>
                 <Box style={{ display: 'flex', flexDirection: 'column' }}>
-                    {
+                    {robot && (
-                        robot && (
+                        <>
-                            <>
+                            <TextField
+                                label={t('robot_edit.change_name')}
+                                key="Robot Name"
+                                type='text'
+                                value={robot.recording_meta.name}
+                                onChange={(e) => handleRobotNameChange(e.target.value)}
+                                style={{ marginBottom: '20px' }}
+                            />
+                            
+                            {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
                                 <TextField
-                                    label={t('robot_edit.change_name')}
+                                    label={t('robot_edit.robot_limit')}
-                                    key="Robot Name"
+                                    type="number"
-                                    type='text'
+                                    value={robot.recording.workflow[0].what[0].args[0].limit || ''}
-                                    value={robot.recording_meta.name}
+                                    onChange={(e) => {
-                                    onChange={(e) => handleRobotNameChange(e.target.value)}
+                                        const value = parseInt(e.target.value, 10);
+                                        if (value >= 1) {
+                                            handleLimitChange(value);
+                                        }
+                                    }}
+                                    inputProps={{ min: 1 }}
                                     style={{ marginBottom: '20px' }}
                                 />
-                                {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
+                            )}
-                                    <TextField
-                                        label={t('robot_edit.robot_limit')}
-                                        type="number"
-                                        value={robot.recording.workflow[0].what[0].args[0].limit || ''}
-                                        onChange={(e) => {
-                                            const value = parseInt(e.target.value, 10);
-                                            if (value >= 1) {
-                                                handleLimitChange(value);
-                                            }
-                                        }}
-                                        inputProps={{ min: 1 }}
-                                        style={{ marginBottom: '20px' }}
-                                    />
-                                )}
 
-                                {(robot.isLogin || credentialSelectors.length > 0) && (
+                            {(robot.isLogin || Object.keys(credentials).length > 0) && (
-                                    <>
+                                <>
-                                        <Typography variant="h6" style={{ marginBottom: '20px' }}>
+                                    {renderAllCredentialFields()}
-                                            {t('Login Credentials')}
+                                </>
-                                        </Typography>
+                            )}
-                                        
-                                        {credentialSelectors.map((selector) => (
-                                            <TextField
-                                                key={selector}
-                                                type={showPasswords[selector] ? 'text' : 'password'}
-                                                label={`Credential for ${selector}`}
-                                                value={credentials[selector] || ''}
-                                                onChange={(e) => handleCredentialChange(selector, e.target.value)}
-                                                style={{ marginBottom: '20px' }}
-                                                InputProps={{
-                                                    endAdornment: (
-                                                        <InputAdornment position="end">
-                                                            <IconButton
-                                                                aria-label="toggle password visibility"
-                                                                onClick={() => handleClickShowPassword(selector)}
-                                                                edge="end"
-                                                            >
-                                                                {showPasswords[selector] ? <Visibility /> : <VisibilityOff />}
-                                                            </IconButton>
-                                                        </InputAdornment>
-                                                    ),
-                                                }}
-                                            />
-                                        ))}
-                                    </>
-                                )}
 
-                                <Box mt={2} display="flex" justifyContent="flex-end">
+                            <Box mt={2} display="flex" justifyContent="flex-end">
-                                    <Button variant="contained" color="primary" onClick={handleSave}>
+                                <Button variant="contained" color="primary" onClick={handleSave}>
-                                        {t('robot_edit.save')}
+                                    {t('robot_edit.save')}
-                                    </Button>
+                                </Button>
-                                    <Button
+                                <Button
-                                        onClick={handleClose}
+                                    onClick={handleClose}
-                                        color="primary"
+                                    color="primary"
-                                        variant="outlined"
+                                    variant="outlined"
-                                        style={{ marginLeft: '10px' }}
+                                    style={{ marginLeft: '10px' }}
-                                        sx={{
+                                    sx={{
-                                            color: '#ff00c3 !important',
+                                        color: '#ff00c3 !important',
-                                            borderColor: '#ff00c3 !important',
+                                        borderColor: '#ff00c3 !important',
-                                            backgroundColor: 'whitesmoke !important',
+                                        backgroundColor: 'whitesmoke !important',
-                                        }}>
+                                    }}>
-                                        {t('robot_edit.cancel')}
+                                    {t('robot_edit.cancel')}
-                                    </Button>
+                                </Button>
-                                </Box>
+                            </Box>
-                            </>
+                        </>
-                        )
+                    )}
-                    }
                 </Box>
             </>
         </GenericModal>
     );
-};
+};