main.js

const puppeteer = require('puppeteer');
const axios = require('axios');

const OPENAI_API_KEY = 'YOUR_OPENAI_API_KEY';
const LOGIN_PAGE_URL = 'http://localhost:8080/my-login-page';

async function openLoginPage() {
  const browser = await puppeteer.launch({ headless: false }); // Set to true for headless mode
  const page = await browser.newPage();

  // Open the login page
  await page.goto(LOGIN_PAGE_URL, { waitUntil: 'networkidle2' });

  // Extract the entire HTML of the page
  const pageHTML = await page.evaluate(() => document.documentElement.outerHTML);

  console.log("Page loaded. Sending HTML to OpenAI for analysis...");

  // Ask OpenAI to provide structured login component details
  const loginComponents = await analyzeLoginComponents(pageHTML);

  console.log("OpenAI response (Login Components):", loginComponents);

  // Execute login process based on OpenAI instructions
  await executeLoginFlow(page, loginComponents);

  // Keep browser open for debugging
  // await browser.close();
}

async function analyzeLoginComponents(html) {
  try {
    const response = await axios.post(
      'https://api.openai.com/v1/chat/completions',
      {
        model: "gpt-4-turbo",
        messages: [
          { role: "system", content: "You are an expert in analyzing web login pages and automating login flows." },
          {
            role: "user",
            content: `Analyze the following HTML and return a JSON object with details about the login components:\n\n
                        1. The input fields that need to be filled (e.g., username, password, OTP). 
                        2. The buttons that need to be clicked (e.g., login button).
                        3. Any additional necessary steps (e.g., handling CAPTCHA, MFA).
                        
                        Return a JSON object in the following format:

                        {
                          "inputs": [
                            {"name": "username", "selector": "input[name='username']", "type": "text"},
                            {"name": "password", "selector": "input[name='password']", "type": "password"}
                          ],
                          "buttons": [
                            {"name": "login", "selector": "button[type='submit']"}
                          ],
                          "extra_steps": ["Check if CAPTCHA is present", "Handle OTP if required"]
                        }

                        Here is the page HTML:\n${html}`
          }
        ],
        temperature: 0.3
      },
      {
        headers: {
          'Authorization': `Bearer ${OPENAI_API_KEY}`,
          'Content-Type': 'application/json'
        }
      }
    );

    return JSON.parse(response.data.choices[0].message.content);
  } catch (error) {
    console.error("Error calling OpenAI API:", error.response ? error.response.data : error.message);
    return null;
  }
}

async function executeLoginFlow(page, loginComponents) {
  if (!loginComponents || !loginComponents.inputs || !loginComponents.buttons) {
    console.log("No valid login components received. Exiting.");
    return;
  }

  console.log("Processing OpenAI instructions...");

  try {
    // Fill input fields
    for (const input of loginComponents.inputs) {
      console.log(`Filling input: ${input.name} using selector: ${input.selector}`);
      await page.waitForSelector(input.selector, { timeout: 5000 });
      await page.type(input.selector, input.name === 'username' ? 'your-username' : 'your-password');
    }

    // Click login button
    for (const button of loginComponents.buttons) {
      console.log(`Clicking button: ${button.name} using selector: ${button.selector}`);
      await page.waitForSelector(button.selector, { timeout: 5000 });
      await page.click(button.selector);
    }

    console.log("Login attempt executed. Check browser for further actions.");

    // Handle extra steps
    if (loginComponents.extra_steps) {
      console.log("Additional steps required:", loginComponents.extra_steps);
    }

  } catch (err) {
    console.error("Error executing login flow:", err.message);
  }
}

// Run the script
openLoginPage();