Merge pull request #363 from RohitR311/cred-chng

feat: ability to update credentials for robots with authentication

Author: amhsirak

public/locales/de.json

@@ -32,6 +32,7 @@
         "new": "Roboter erstellen",
         "modal": {
             "title": "Geben Sie die URL ein",
+            "login_title": "Erfordert diese Seite eine Anmeldung?",
             "label": "URL",
             "button": "Aufnahme starten"
         },

public/locales/en.json

@@ -32,6 +32,7 @@
       "new":"Create Robot",
       "modal":{
         "title":"Enter the URL",
+        "login_title": "Does this site require login?",
         "label":"URL",
         "button":"Start Recording"
       },

public/locales/es.json

@@ -32,6 +32,7 @@
     "new": "Crear Robot",
     "modal": {
       "title": "Ingresa la URL",
+      "login_title": "¿Este sitio requiere inicio de sesión?",
       "label": "URL",
       "button": "Comenzar grabación"
     },

public/locales/ja.json

@@ -32,6 +32,7 @@
         "new": "ロボットを作成",
         "modal": {
             "title": "URLを入力してください",
+            "login_title": "このサイトはログインが必要ですか?",
             "label": "URL",
             "button": "録画を開始"
         },

public/locales/zh.json

@@ -32,6 +32,7 @@
     "new": "创建机器人",
     "modal": {
       "title": "输入URL",
+      "login_title": "此网站需要登录吗？",
       "label": "URL",
       "button": "开始录制"
     },

server/src/models/Robot.ts

@@ -26,6 +26,7 @@ interface RobotAttributes {
   google_access_token?: string | null;
   google_refresh_token?: string | null;
   schedule?: ScheduleConfig | null;
+  isLogin?: boolean;
 }
 
 interface ScheduleConfig {
@@ -54,6 +55,7 @@ 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(
@@ -99,6 +101,11 @@ Robot.init(
       type: DataTypes.JSONB,
       allowNull: true,
     },
+    isLogin: {              
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+      defaultValue: false,
+    },
   },
   {
     sequelize,

server/src/routes/storage.ts

@@ -18,12 +18,43 @@ import { AuthenticatedRequest } from './record';
 import { computeNextRun } from '../utils/schedule';
 import { capture } from "../utils/analytics";
 import { tryCatch } from 'bullmq';
+import { encrypt, decrypt } from '../utils/auth';
 import { WorkflowFile } from 'maxun-core';
 import { Page } from 'playwright';
 chromium.use(stealthPlugin());
 
 export const router = Router();
 
+export const decryptWorkflowActions = async (workflow: any[],): Promise<any[]> => {
+  // Create a deep copy to avoid mutating the original workflow
+  const processedWorkflow = JSON.parse(JSON.stringify(workflow));
+
+  // Process each step in the workflow
+  for (const step of processedWorkflow) {
+    if (!step.what) continue;
+
+    // Process each action in the step
+    for (const action of step.what) {
+      // Only process type and press actions
+      if ((action.action === 'type' || action.action === 'press') && Array.isArray(action.args) && action.args.length > 1) {        
+        // The second argument contains the encrypted value
+        const encryptedValue = action.args[1];
+        if (typeof encryptedValue === 'string') {
+          try {
+            // Decrypt the value and update the args array
+            action.args[1] = await decrypt(encryptedValue);
+          } catch (error) {
+            console.error('Failed to decrypt value:', error);
+            // Keep the encrypted value if decryption fails
+          }
+        }
+      }
+    }
+  }
+
+  return processedWorkflow;
+};
+
 /**
  * Logs information about recordings API.
  */
@@ -55,6 +86,13 @@ router.get('/recordings/:id', requireSignIn, async (req, res) => {
       raw: true
     }
     );
+
+    if (data?.recording?.workflow) {
+      data.recording.workflow = await decryptWorkflowActions(
+        data.recording.workflow,
+      );
+    }
+
     return res.send(data);
   } catch (e) {
     logger.log('info', 'Error while reading robots');
@@ -116,13 +154,70 @@ function formatRunResponse(run: any) {
   return formattedRun;
 }
 
+interface CredentialUpdate {
+  [selector: string]: string;
+}
+
+function updateTypeActionsInWorkflow(workflow: any[], credentials: CredentialUpdate) {
+  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) => {
+          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: any) => !indicesToRemove.has(index));
+
+      // Add new type actions after click actions
+      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('');
+              chars.forEach((char, i) => {
+                  // Add type action
+                  filteredWhat.splice(clickIndex + 1 + (i * 2), 0, {
+                      action: 'type',
+                      args: [selector, encrypt(char)]  
+                  });
+                  
+                  // Add waitForLoadState
+                  filteredWhat.splice(clickIndex + 2 + (i * 2), 0, {
+                      action: 'waitForLoadState',
+                      args: ['networkidle']
+                  });
+              });
+          }
+      });
+
+      return {
+          ...step,
+          what: filteredWhat
+      };
+  });
+}
+
 /**
  * PUT endpoint to update the name and limit of a robot.
  */
 router.put('/recordings/:id', requireSignIn, async (req: AuthenticatedRequest, res) => {
   try {
     const { id } = req.params;
-    const { name, limit } = req.body;
+    const { name, limit, credentials } = req.body;
 
     // Validate input
     if (!name && limit === undefined) {
@@ -141,17 +236,21 @@ router.put('/recordings/:id', requireSignIn, async (req: AuthenticatedRequest, r
       robot.set('recording_meta', { ...robot.recording_meta, name });
     }
 
+    let workflow = [...robot.recording.workflow]; // Create a copy of the workflow
+
+    if (credentials) {
+      workflow = updateTypeActionsInWorkflow(workflow, credentials);
+    }
+
     // Update the limit
     if (limit !== undefined) {
-      const workflow = [...robot.recording.workflow]; // Create a copy of the workflow
-
       // Ensure the workflow structure is valid before updating
       if (
         workflow.length > 0 &&
         workflow[0]?.what?.[0]
       ) {
         // Create a new workflow object with the updated limit
-        const updatedWorkflow = workflow.map((step, index) => {
+        workflow = workflow.map((step, index) => {
           if (index === 0) { // Assuming you want to update the first step
             return {
               ...step,
@@ -173,14 +272,13 @@ router.put('/recordings/:id', requireSignIn, async (req: AuthenticatedRequest, r
           }
           return step;
         });
-
-        // Replace the workflow in the recording object
-        robot.set('recording', { ...robot.recording, workflow: updatedWorkflow });
       } else {
         return res.status(400).json({ error: 'Invalid workflow structure for updating limit.' });
       }
     }
 
+    robot.set('recording', { ...robot.recording, workflow });
+
     await robot.save();
 
     const updatedRobot = await Robot.findOne({ where: { 'recording_meta.id': id } });
@@ -248,6 +346,7 @@ 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/workflow-management/classes/Generator.ts

@@ -134,9 +134,9 @@ export class WorkflowGenerator {
    */
   private registerEventHandlers = (socket: Socket) => {
     socket.on('save', (data) => {
-      const { fileName, userId } = data;
+      const { fileName, userId, isLogin } = data;
       logger.log('debug', `Saving workflow ${fileName} for user ID ${userId}`);
-      this.saveNewWorkflow(fileName, userId);
+      this.saveNewWorkflow(fileName, userId, isLogin);
   });
     socket.on('new-recording', () => this.workflowRecord = {
       workflow: [],
@@ -660,7 +660,7 @@ export class WorkflowGenerator {
    * @param fileName The name of the file.
    * @returns {Promise<void>}
    */
-  public saveNewWorkflow = async (fileName: string, userId: number) => {
+  public saveNewWorkflow = async (fileName: string, userId: number, isLogin: boolean) => {
     const recording = this.optimizeWorkflow(this.workflowRecord);
     try {
       this.recordingMeta = {
@@ -675,6 +675,7 @@ export class WorkflowGenerator {
         userId,
         recording_meta: this.recordingMeta,
         recording: recording,
+        isLogin: isLogin,
       });
       capture(
         'maxun-oss-robot-created',

src/api/storage.ts

@@ -5,6 +5,10 @@ import { ScheduleSettings } from "../components/robot/ScheduleSettings";
 import { CreateRunResponse, ScheduleRunResponse } from "../pages/MainPage";
 import { apiUrl } from "../apiConfig";
 
+interface Credentials {
+  [key: string]: string;
+}
+
 export const getStoredRecordings = async (): Promise<string[] | null> => {
   try {
     const response = await axios.get(`${apiUrl}/storage/recordings`);
@@ -19,7 +23,7 @@ export const getStoredRecordings = async (): Promise<string[] | null> => {
   }
 };
 
-export const updateRecording = async (id: string, data: { name?: string; limit?: number }): Promise<boolean> => {
+export const updateRecording = async (id: string, data: { name?: string; limit?: number, credentials?: Credentials }): Promise<boolean> => {
   try {
     const response = await axios.put(`${apiUrl}/storage/recordings/${id}`, data);
     if (response.status === 200) {

src/components/recorder/SaveRecording.tsx

@@ -22,7 +22,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
   const [recordingName, setRecordingName] = useState<string>(fileName);
   const [waitingForSave, setWaitingForSave] = useState<boolean>(false);
 
-  const { browserId, setBrowserId, notify, recordings } = useGlobalInfoStore();
+  const { browserId, setBrowserId, notify, recordings, isLogin } = useGlobalInfoStore();
   const { socket } = useSocketStore();
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
@@ -59,7 +59,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
   // releases resources and changes the view for main page by clearing the global browserId
   const saveRecording = async () => {
     if (user) {
-      const payload = { fileName: recordingName, userId: user.id };
+      const payload = { fileName: recordingName, userId: user.id, isLogin: isLogin };
       socket?.emit('save', payload);
       setWaitingForSave(true);
       console.log(`Saving the recording as ${recordingName} for userId ${user.id}`);