Merge branch 'develop' into ui-fix

maxun-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maxun-core",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Core package for Maxun, responsible for data extraction",
   "main": "build/index.js",
   "typings": "build/index.d.ts",

maxun-core/src/interpret.ts

@@ -490,6 +490,14 @@ export default class Interpreter extends EventEmitter {
 
     const executeAction = async (invokee: any, methodName: string, args: any) => {
       console.log("Executing action:", methodName, args);
+
+      if (methodName === 'press' || methodName === 'type') {
+        // Extract only the first two arguments for these methods
+        const limitedArgs = Array.isArray(args) ? args.slice(0, 2) : [args];
+        await (<any>invokee[methodName])(...limitedArgs);
+        return;
+      }
+
       if (!args || Array.isArray(args)) {
         await (<any>invokee[methodName])(...(args ?? []));
       } else {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maxun",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "author": "Maxun",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
@@ -47,7 +47,7 @@
     "lodash": "^4.17.21",
     "loglevel": "^1.8.0",
     "loglevel-plugin-remote": "^0.6.8",
-    "maxun-core": "^0.0.9",
+    "maxun-core": "^0.0.10",
     "minio": "^8.0.1",
     "moment-timezone": "^0.5.45",
     "node-cron": "^3.0.3",

public/locales/de.json

@@ -41,7 +41,8 @@
         "duplicate": "Duplizieren",
         "notifications": {
             "delete_warning": "Roboter kann nicht gelöscht werden, da zugehörige Ausführungen vorhanden sind",
-            "delete_success": "Roboter erfolgreich gelöscht"
+            "delete_success": "Roboter erfolgreich gelöscht",
+            "auth_success": "Roboter erfolgreich authentifiziert"
         }
     },
     "mainmenu": {
@@ -205,7 +206,8 @@
             "confirm_text_fields": "Bitte bestätigen Sie alle Textfelder",
             "unable_create_settings": "Listeneinstellungen können nicht erstellt werden. Stellen Sie sicher, dass Sie ein Feld für die Liste definiert haben.",
             "capture_text_discarded": "Texterfassung verworfen",
-            "capture_list_discarded": "Listenerfassung verworfen"
+            "capture_list_discarded": "Listenerfassung verworfen",
+            "label_required": "Beschriftung darf nicht leer sein"
         }
     },
     "save_recording": {

public/locales/en.json

@@ -32,7 +32,7 @@
       "new":"Create Robot",
       "modal":{
         "title":"Enter the URL",
-        "login_title": "Does this site require login?",
+        "login_title": "Does this website require login?",
         "label":"URL",
         "button":"Start Recording"
       },
@@ -42,7 +42,8 @@
       "search":"Search Robots...",
       "notifications": {
         "delete_warning": "Cannot delete robot as it has associated runs",
-        "delete_success": "Robot deleted successfully"
+        "delete_success": "Robot deleted successfully",
+        "auth_success": "Robot successfully authenticated"
       }
     },
     "mainmenu":{
@@ -207,7 +208,8 @@
         "confirm_text_fields": "Please confirm all text fields",
         "unable_create_settings": "Unable to create list settings. Make sure you have defined a field for the list.",
         "capture_text_discarded": "Capture Text Discarded",
-        "capture_list_discarded": "Capture List Discarded"
+        "capture_list_discarded": "Capture List Discarded",
+        "label_required": "Label cannot be empty"
       }
     },
     "save_recording": {

public/locales/es.json

@@ -42,7 +42,8 @@
     "search": "Buscar robots...",
     "notifications": {
       "delete_warning": "No se puede eliminar el robot ya que tiene ejecuciones asociadas",
-      "delete_success": "Robot eliminado exitosamente"
+      "delete_success": "Robot eliminado exitosamente",
+      "auth_success": "Robot autenticado exitosamente"
     }
   },
   "mainmenu": {
@@ -206,7 +207,8 @@
       "confirm_text_fields": "Por favor confirme todos los campos de texto",
       "unable_create_settings": "No se pueden crear las configuraciones de la lista. Asegúrese de haber definido un campo para la lista.",
       "capture_text_discarded": "Captura de texto descartada",
-      "capture_list_discarded": "Captura de lista descartada"
+      "capture_list_discarded": "Captura de lista descartada",
+      "label_required": "La etiqueta no puede estar vacía"
     }
   },
   "save_recording": {

public/locales/ja.json

@@ -42,7 +42,8 @@
         "search": "ロボットを検索...",
         "notifications": {
             "delete_warning": "関連する実行があるため、ロボットを削除できません",
-            "delete_success": "ロボットが正常に削除されました"
+            "delete_success": "ロボットが正常に削除されました",
+            "auth_success": "ロボットの認証に成功しました"
         }
   },
   "mainmenu": {
@@ -206,7 +207,8 @@
             "confirm_text_fields": "すべてのテキストフィールドを確認してください",
             "unable_create_settings": "リスト設定を作成できません。リストのフィールドを定義したことを確認してください。",
             "capture_text_discarded": "テキスト取得が破棄されました",
-            "capture_list_discarded": "リスト取得が破棄されました"
+            "capture_list_discarded": "リスト取得が破棄されました",
+            "label_required": "ラベルは空にできません"
         }
     },
     "save_recording": {

public/locales/zh.json

@@ -42,7 +42,8 @@
     "search": "搜索机器人...",
     "notifications": {
       "delete_warning": "无法删除机器人，因为它有关联的运行记录",
-      "delete_success": "机器人删除成功"
+      "delete_success": "机器人删除成功",
+      "auth_success": "机器人认证成功"
     }
   },
   "mainmenu": {
@@ -206,7 +207,8 @@
       "confirm_text_fields": "请确认所有文本字段",
       "unable_create_settings": "无法创建列表设置。请确保您已为列表定义了字段。",
       "capture_text_discarded": "文本捕获已放弃",
-      "capture_list_discarded": "列表捕获已放弃"
+      "capture_list_discarded": "列表捕获已放弃",
+      "label_required": "标签不能为空"
     }
   },
   "save_recording": {

server/Dockerfile

@@ -25,7 +25,7 @@ RUN mkdir -p /tmp/chromium-data-dir && \
 
 # Install dependencies
 RUN apt-get update && apt-get install -y \
-    libgbm-dev \
+    libgbm1 \
     libnss3 \
     libatk1.0-0 \
     libatk-bridge2.0-0 \
@@ -48,4 +48,4 @@ RUN apt-get update && apt-get install -y \
 EXPOSE ${BACKEND_PORT:-8080}
 
 # Start the backend using the start script
-CMD ["npm", "run", "server"]
+CMD ["npm", "run", "server"]

server/src/models/Robot.ts

@@ -26,7 +26,6 @@ interface RobotAttributes {
   google_access_token?: string | null;
   google_refresh_token?: string | null;
   schedule?: ScheduleConfig | null;
-  isLogin?: boolean;
 }
 
 interface ScheduleConfig {
@@ -55,7 +54,6 @@ class Robot extends Model<RobotAttributes, RobotCreationAttributes> implements R
   public google_access_token!: string | null;
   public google_refresh_token!: string | null;
   public schedule!: ScheduleConfig | null;
-  public isLogin!: boolean;
 }
 
 Robot.init(
@@ -101,11 +99,6 @@ Robot.init(
       type: DataTypes.JSONB,
       allowNull: true,
     },
-    isLogin: {              
-      type: DataTypes.BOOLEAN,
-      allowNull: false,
-      defaultValue: false,
-    },
   },
   {
     sequelize,

server/src/routes/auth.ts

@@ -380,11 +380,19 @@ router.get(
         httpOnly: false,
         maxAge: 60000,
       }); // 1-minute expiration
-      res.cookie("robot_auth_message", "Robot successfully authenticated", {
+      // res.cookie("robot_auth_message", "Robot successfully authenticated", {
+      //   httpOnly: false,
+      //   maxAge: 60000,
+      // });
+      res.cookie('robot_auth_robotId', robotId, {
         httpOnly: false,
         maxAge: 60000,
       });
-      res.redirect(`${process.env.PUBLIC_URL}/robots/${robotId}/integrate` as string || `http://localhost:5173/robots/${robotId}/integrate`);
+
+      const baseUrl = process.env.PUBLIC_URL || "http://localhost:5173";
+      const redirectUrl = `${baseUrl}/robots/`;
+
+      res.redirect(redirectUrl);
     } catch (error: any) {
       res.status(500).json({ message: `Google OAuth error: ${error.message}` });
     }

server/src/routes/storage.ts

@@ -154,48 +154,52 @@ function formatRunResponse(run: any) {
   return formattedRun;
 }
 
-interface CredentialUpdate {
+interface CredentialInfo {
-  [selector: string]: string;
+  value: string;
+  type: string;
 }
 
-function updateTypeActionsInWorkflow(workflow: any[], credentials: CredentialUpdate) {
+interface Credentials {
+  [key: string]: CredentialInfo;
+}
+
+function updateTypeActionsInWorkflow(workflow: any[], credentials: Credentials) {
   return workflow.map(step => {
       if (!step.what) return step;
 
-      // First pass: mark indices to remove
       const indicesToRemove = new Set<number>();
-      step.what.forEach((action: any, index: any) => {
+      step.what.forEach((action: any, index: number) => {
           if (!action.action || !action.args?.[0]) return;
           
-          // If it's a type/press action for a credential
           if ((action.action === 'type' || action.action === 'press') && credentials[action.args[0]]) {
               indicesToRemove.add(index);
-              // Check if next action is waitForLoadState
+
               if (step.what[index + 1]?.action === 'waitForLoadState') {
                   indicesToRemove.add(index + 1);
               }
           }
       });
 
-      // Filter out marked indices and create new what array
+      const filteredWhat = step.what.filter((_: any, index: number) => !indicesToRemove.has(index));
-      const filteredWhat = step.what.filter((_: any, index: any) => !indicesToRemove.has(index));
 
-      // Add new type actions after click actions
+      Object.entries(credentials).forEach(([selector, credentialInfo]) => {
-      Object.entries(credentials).forEach(([selector, credential]) => {
           const clickIndex = filteredWhat.findIndex((action: any) => 
               action.action === 'click' && action.args?.[0] === selector
           );
 
           if (clickIndex !== -1) {
-              const chars = credential.split('');
+              const chars = credentialInfo.value.split('');
+              
               chars.forEach((char, i) => {
-                  // Add type action
                   filteredWhat.splice(clickIndex + 1 + (i * 2), 0, {
                       action: 'type',
-                      args: [selector, encrypt(char)]  
+                      args: [
+                          selector,
+                          encrypt(char),
+                          credentialInfo.type 
+                      ]
                   });
                   
-                  // Add waitForLoadState
                   filteredWhat.splice(clickIndex + 2 + (i * 2), 0, {
                       action: 'waitForLoadState',
                       args: ['networkidle']
@@ -346,7 +350,6 @@ router.post('/recordings/:id/duplicate', requireSignIn, async (req: Authenticate
         updatedAt: currentTimestamp, 
       }, 
       recording: { ...originalRobot.recording, workflow }, 
-      isLogin: originalRobot.isLogin,
       google_sheet_email: null, 
       google_sheet_name: null,
       google_sheet_id: null,

server/src/storage/db.ts

@@ -29,7 +29,13 @@ export const connectDB = async () => {
 export const syncDB = async () => {
     try {
         //setupAssociations();
-        await sequelize.sync({ force: false });  // force: true will drop and recreate tables on every run
+        const isDevelopment = process.env.NODE_ENV === 'development';
+        // force: true will drop and recreate tables on every run
+        // Use `alter: true` only in development mode
+        await sequelize.sync({ 
+            force: false, 
+            alter: isDevelopment 
+        }); 
         console.log('Database synced successfully!');
     } catch (error) {
         console.error('Failed to sync database:', error);

server/src/workflow-management/classes/Generator.ts

@@ -39,6 +39,7 @@ interface MetaData {
   pairs: number;
   updatedAt: string;
   params: string[],
+  isLogin?: boolean;
 }
 
 /**
@@ -97,6 +98,7 @@ export class WorkflowGenerator {
     pairs: 0,
     updatedAt: '',
     params: [],
+    isLogin: false,
   }
 
   /**
@@ -425,6 +427,40 @@ export class WorkflowGenerator {
       return;
     }
 
+    if ((elementInfo?.tagName === 'INPUT' || elementInfo?.tagName === 'TEXTAREA') && selector) {
+      // Calculate the exact position within the element
+      const elementPos = await page.evaluate((selector) => {
+        const element = document.querySelector(selector);
+        if (!element) return null;
+        const rect = element.getBoundingClientRect();
+        return {
+            x: rect.left,
+            y: rect.top
+        };
+      }, selector);
+
+      if (elementPos) {
+        const relativeX = coordinates.x - elementPos.x;
+        const relativeY = coordinates.y - elementPos.y;
+
+        const pair: WhereWhatPair = {
+            where,
+            what: [{
+                action: 'click',
+                args: [selector, { position: { x: relativeX, y: relativeY } }]
+            }]
+        };
+
+        if (selector) {
+            this.generatedData.lastUsedSelector = selector;
+            this.generatedData.lastAction = 'click';
+        }
+
+        await this.addPairToWorkflowAndNotifyClient(pair, page);
+        return;
+      }
+    }
+
     //const element = await getElementMouseIsOver(page, coordinates);
     //logger.log('debug', `Element: ${JSON.stringify(element, null, 2)}`);
     if (selector) {
@@ -474,6 +510,10 @@ export class WorkflowGenerator {
   public onKeyboardInput = async (key: string, coordinates: Coordinates, page: Page) => {
     let where: WhereWhatPair["where"] = { url: this.getBestUrl(page.url()) };
     const selector = await this.generateSelector(page, coordinates, ActionType.Keydown);
+
+    const elementInfo = await getElementInformation(page, coordinates, '', false);
+    const inputType = elementInfo?.attributes?.type || "text";
+
     if (selector) {
       where.selectors = [selector];
     }
@@ -481,7 +521,7 @@ export class WorkflowGenerator {
       where,
       what: [{
         action: 'press',
-        args: [selector, encrypt(key)],
+        args: [selector, encrypt(key), inputType],
       }],
     }
     if (selector) {
@@ -670,12 +710,12 @@ export class WorkflowGenerator {
         pairs: recording.workflow.length,
         updatedAt: new Date().toLocaleString(),
         params: this.getParams() || [],
+        isLogin: isLogin,
       }
       const robot = await Robot.create({
         userId,
         recording_meta: this.recordingMeta,
         recording: recording,
-        isLogin: isLogin,
       });
       capture(
         'maxun-oss-robot-created',
@@ -992,6 +1032,7 @@ export class WorkflowGenerator {
     let input = {
       selector: '',
       value: '',
+      type: '',
       actionCounter: 0,
     };
 
@@ -1006,7 +1047,7 @@ export class WorkflowGenerator {
         // when more than one press action is present, add a type action
         pair.what.splice(index - input.actionCounter, input.actionCounter, {
           action: 'type',
-          args: [input.selector, encrypt(input.value)],
+          args: [input.selector, encrypt(input.value), input.type],
         }, {
           action: 'waitForLoadState',
           args: ['networkidle'],
@@ -1034,13 +1075,14 @@ export class WorkflowGenerator {
                   action: 'waitForLoadState',
                   args: ['networkidle'],
                 })
-                input = { selector: '', value: '', actionCounter: 0 };
+                input = { selector: '', value: '', type: '', actionCounter: 0 };
               }
             } else {
               pushTheOptimizedAction(pair, index);
               input = {
                 selector: condition.args[0],
                 value: condition.args[1],
+                type: condition.args[2],
                 actionCounter: 1,
               };
             }
@@ -1049,7 +1091,7 @@ export class WorkflowGenerator {
           if (input.value.length !== 0) {
             pushTheOptimizedAction(pair, index);
             // clear the input
-            input = { selector: '', value: '', actionCounter: 0 };
+            input = { selector: '', value: '', type: '', actionCounter: 0 };
           }
         }
       });

src/api/storage.ts

@@ -5,8 +5,13 @@ import { ScheduleSettings } from "../components/robot/ScheduleSettings";
 import { CreateRunResponse, ScheduleRunResponse } from "../pages/MainPage";
 import { apiUrl } from "../apiConfig";
 
+interface CredentialInfo {
+  value: string;
+  type: string;
+}
+
 interface Credentials {
-  [key: string]: string;
+  [key: string]: CredentialInfo;
 }
 
 export const getStoredRecordings = async (): Promise<string[] | null> => {

src/components/integration/IntegrationSettings.tsx

@@ -29,20 +29,6 @@ export interface IntegrationSettings {
   data: string;
 }
 
-// Helper functions to replace js-cookie functionality
-const getCookie = (name: string): string | null => {
-  const value = `; ${document.cookie}`;
-  const parts = value.split(`; ${name}=`);
-  if (parts.length === 2) {
-    return parts.pop()?.split(';').shift() || null;
-  }
-  return null;
-};
-
-const removeCookie = (name: string): void => {
-  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
-};
-
 export const IntegrationSettingsModal = ({
   isOpen,
   handleStart,
@@ -154,17 +140,6 @@ export const IntegrationSettingsModal = ({
   };
 
   useEffect(() => {
-    // Check if there is a success message in cookies
-    const status = getCookie("robot_auth_status");
-    const message = getCookie("robot_auth_message");
-
-    if (status === "success" && message) {
-      notify("success", message);
-      // Clear the cookies after reading
-      removeCookie("robot_auth_status");
-      removeCookie("robot_auth_message");
-    }
-
     // Check if we're on the callback URL
     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get("code");

src/components/robot/Recordings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { RecordingsTable } from "./RecordingsTable";
 import { Grid } from "@mui/material";
 import { RunSettings, RunSettingsModal } from "../run/RunSettings";
@@ -8,6 +8,8 @@ import { RobotSettingsModal } from "./RobotSettings";
 import { RobotEditModal } from "./RobotEdit";
 import { RobotDuplicationModal } from "./RobotDuplicate";
 import { useNavigate, useLocation, useParams } from "react-router-dom";
+import { useGlobalInfoStore } from "../../context/globalInfo";
+import { useTranslation } from "react-i18next";
 
 interface RecordingsProps {
   handleEditRecording: (id: string, fileName: string) => void;
@@ -26,6 +28,8 @@ export const Recordings = ({
   const location = useLocation();
   const { selectedRecordingId } = useParams();
   const [params, setParams] = useState<string[]>([]);
+  const { notify } = useGlobalInfoStore();
+  const { t } = useTranslation();
 
   const handleNavigate = (path: string, id: string, name: string, params: string[]) => {
     setParams(params);
@@ -39,6 +43,31 @@ export const Recordings = ({
     navigate("/robots"); // Navigate back to the main robots page
   };
 
+  useEffect(() => {
+    // Helper function to get and clear a cookie
+    const getAndClearCookie = (name: string) => {
+      const value = document.cookie
+        .split('; ')
+        .find(row => row.startsWith(`${name}=`))
+        ?.split('=')[1];
+      
+      if (value) {
+        document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+      }
+      
+      return value;
+    };
+
+    const authStatus = getAndClearCookie('robot_auth_status');
+    const robotId = getAndClearCookie('robot_auth_robotId');
+
+    if (authStatus === 'success' && robotId) {
+      notify(authStatus, t("recordingtable.notifications.auth_success"));
+
+      handleNavigate(`/robots/${robotId}/integrate`, robotId, "", []);''  
+    }
+  }, []);
+
   // Determine which modal to open based on the current route
   const getCurrentModal = () => {
     const currentPath = location.pathname;

src/components/robot/RecordingsTable.tsx

@@ -11,8 +11,32 @@ import TableRow from '@mui/material/TableRow';
 import { memo, useCallback, useEffect, useMemo } from "react";
 import { WorkflowFile } from "maxun-core";
 import SearchIcon from '@mui/icons-material/Search';
-import { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText, CircularProgress, RadioGroup, FormControlLabel, Radio } from "@mui/material";
+import {
-import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power, ContentCopy, MoreHoriz } from "@mui/icons-material";
+  IconButton,
+  Button,
+  Box,
+  Typography,
+  TextField,
+  MenuItem,
+  Menu,
+  ListItemIcon,
+  ListItemText,
+  CircularProgress,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+  Checkbox,
+} from "@mui/material";
+import {
+  Schedule,
+  DeleteForever,
+  Edit,
+  PlayCircle,
+  Settings,
+  Power,
+  ContentCopy,
+  MoreHoriz
+} from "@mui/icons-material";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
 import { Add } from "@mui/icons-material";
@@ -110,7 +134,14 @@ const TableRowMemoized = memo(({ row, columns, handlers }: any) => {
 });
 
 
-export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot }: RecordingsTableProps) => {
+export const RecordingsTable = ({
+  handleEditRecording,
+  handleRunRecording,
+  handleScheduleRecording,
+  handleIntegrateRecording,
+  handleSettingsRecording,
+  handleEditRobot,
+  handleDuplicateRobot }: RecordingsTableProps) => {
   const { t } = useTranslation();
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
@@ -128,7 +159,20 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     { id: 'options', label: t('recordingtable.options'), minWidth: 80 },
   ], [t]);
 
-  const { notify, setRecordings, browserId, setBrowserId, setInitialUrl, recordingUrl, setRecordingUrl, isLogin, setIsLogin, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
+  const {
+    notify,
+    setRecordings,
+    browserId,
+    setBrowserId,
+    setInitialUrl,
+    recordingUrl,
+    setRecordingUrl,
+    isLogin,
+    setIsLogin,
+    recordingName,
+    setRecordingName,
+    recordingId,
+    setRecordingId } = useGlobalInfoStore();
   const navigate = useNavigate();
 
   const handleChangePage = useCallback((event: unknown, newPage: number) => {
@@ -343,7 +387,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
         onRowsPerPageChange={handleChangeRowsPerPage}
       />
       <GenericModal isOpen={isModalOpen} onClose={() => setModalOpen(false)} modalStyle={modalStyle}>
-        <div style={{ padding: '20px' }}>
+        <div style={{ padding: '10px' }}>
           <Typography variant="h6" gutterBottom>{t('recordingtable.modal.title')}</Typography>
           <TextField
             label={t('recordingtable.modal.label')}
@@ -351,21 +395,22 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
             fullWidth
             value={recordingUrl}
             onChange={setBrowserRecordingUrl}
-            style={{ marginBottom: '20px', marginTop: '20px' }}
+            style={{ marginBottom: '10px', marginTop: '20px' }}
           />
 
-          <Typography variant="h6" gutterBottom>{t('recordingtable.modal.login_title')}</Typography>
+          <FormControlLabel
-          <RadioGroup
+            control={
-            aria-labelledby="login-requirement-radio-group"
+              <Checkbox
-            name="login-requirement"
+                checked={isLogin}
-            value={isLogin ? 'yes' : 'no'}
+                onChange={(e) => setIsLogin(e.target.checked)}
-            onChange={(e) => setIsLogin(e.target.value === 'yes')}
+                color="primary"
-            style={{ marginBottom: '20px' }}
+              />
-          >
+            }
-            <FormControlLabel value="yes" control={<Radio />} label="Yes" />
+            label={t('recordingtable.modal.login_title')}
-            <FormControlLabel value="no" control={<Radio />} label="No" />
+            style={{ marginBottom: '10px' }}
-          </RadioGroup>
+          />
 
+          <br />
           <Button
             variant="contained"
             color="primary"

src/components/robot/RobotEdit.tsx

@@ -21,19 +21,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';
@@ -57,7 +44,6 @@ export interface RobotSettings {
     google_access_token?: string | null;
     google_refresh_token?: string | null;
     schedule?: ScheduleConfig | null;
-    isLogin?: boolean;
 }
 
 interface RobotSettingsProps {
@@ -67,19 +53,60 @@ interface RobotSettingsProps {
     initialSettings?: RobotSettings | null;
 }
 
+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' => {
+        if (info.type === 'password' || selector.toLowerCase().includes('password')) {
+            return 'password';
+        }
+        if (isEmailPattern(info.value) || selector.toLowerCase().includes('email')) {
+            return 'email';
+        }
+        if (isUsernameSelector(selector)) {
+            return 'username';
+        }
+        return 'other';
     };
 
     useEffect(() => {
@@ -90,66 +117,110 @@ 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> = {};
 
+        // Helper function to check if a character is printable
         const isPrintableCharacter = (char: string): boolean => {
             return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
         };
-        
+
+        // Process each step in the workflow
         workflow.forEach(step => {
             if (!step.what) return;
-            
+
+            // Keep track of the current input field being processed
+            let currentSelector = '';
+            let currentValue = '';
+            let currentType = '';
+
+            // Process actions in sequence to maintain correct text state
             step.what.forEach((action: any) => {
                 if (
-                    (action.action === 'type' || action.action === 'press') && 
+                    (action.action === 'type' || action.action === 'press') &&
-                    action.args?.length >= 2 && 
+                    action.args?.length >= 2 &&
                     typeof action.args[1] === 'string'
                 ) {
-                    let currentSelector: string = action.args[0];
+                    const selector: 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] = '';
+                    // Detect `input[type="password"]`
+                    if (!currentType && inputType.toLowerCase() === 'password') {
+                        currentType = 'password';
                     }
-                    
+
-                    if (isPrintableCharacter(character)) {
+                    // If we're dealing with a new selector, store the previous one
-                        credentials[currentSelector] += character;
+                    if (currentSelector && selector !== currentSelector) {
+                        if (!credentials[currentSelector]) {
+                            credentials[currentSelector] = {
+                                value: currentValue,
+                                type: currentType
+                            };
+                        } else {
+                            credentials[currentSelector].value = currentValue;
+                        }
                     }
+
+                    // Update current tracking variables
+                    if (selector !== currentSelector) {
+                        currentSelector = selector;
+                        currentValue = credentials[selector]?.value || '';
+                        currentType = inputType || credentials[selector]?.type || '';
+                    }
+
+                    // Handle different types of key actions
+                    if (character === 'Backspace') {
+                        // Remove the last character when backspace is pressed
+                        currentValue = currentValue.slice(0, -1);
+                    } else if (isPrintableCharacter(character)) {
+                        // Add the character to the current value
+                        currentValue += character;
+                    }
+                    // Note: We ignore other special keys like 'Shift', 'Enter', etc.
                 }
             });
+
+            // Store the final state of the last processed selector
+            if (currentSelector) {
+                credentials[currentSelector] = {
+                    value: currentValue,
+                    type: currentType
+                };
+            }
         });
-        
+
         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 +228,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 +245,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 +258,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 +273,101 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         });
     };
 
+    const renderAllCredentialFields = () => {
+        return (
+            <>
+                {renderCredentialFields(
+                    credentialGroups.usernames,
+                    t('Username'),
+                    'text'
+                )}
+
+                {renderCredentialFields(
+                    credentialGroups.emails,
+                    t('Email'),
+                    'text'
+                )}
+
+                {renderCredentialFields(
+                    credentialGroups.passwords,
+                    t('Password'),
+                    'password'
+                )}
+
+                {renderCredentialFields(
+                    credentialGroups.others,
+                    t('Other'),
+                    '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, index) => {
+                    const isVisible = showPasswords[selector];
+
+                    return (
+                        <TextField
+                            key={selector}
+                            type={isVisible ? 'text' : 'password'}
+                            label={headerText === 'Other' ? `${`Input`} ${index + 1}` : headerText}
+                            value={credentials[selector]?.value || ''}
+                            onChange={(e) => handleCredentialChange(selector, e.target.value)}
+                            style={{ marginBottom: '20px' }}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            aria-label="Show input"
+                                            onClick={() => handleClickShowPassword(selector)}
+                                            edge="end"
+                                            disabled={!credentials[selector]?.value}
+                                        >
+                                            {isVisible ? <Visibility /> : <VisibilityOff />}
+                                        </IconButton>
+                                    </InputAdornment>
+                                ),
+                            }}
+                        />
+                    );
+                })}
+            </>
+        );
+    };
+
     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 +393,63 @@ 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) && (
+                            {(Object.keys(credentials).length > 0) && (
-                                    <>
+                                <>
-                                        <Typography variant="h6" style={{ marginBottom: '20px' }}>
+                                    <Typography variant="body1" style={{ marginBottom: '20px' }}>
-                                            {t('Login Credentials')}
+                                        {t('Input Texts')}
-                                        </Typography>
+                                    </Typography>
-                                        
+                                    {renderAllCredentialFields()}
-                                        {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>
     );
-};
+};