Add filters and sort to mvlempyr (#1310)

* Add filters and sort to mvlempyr

* Update version number

* Add filters and sort to mvlempyr

* Update version number

* Faster parsing by reducing amount of html cheerio is given

* Lint rules

* Add dropdown in UI to change fetch mode

* Requested changes

* Small fixes i noticed

* Use program files from env

* Requested changes

proxy_server.js

@@ -1,9 +1,10 @@
 import http from 'http';
 import httpProxy from 'http-proxy';
+import { exec } from 'child_process';
 
 const CLIENT_HOST = 'http://localhost:3000';
 const proxy = httpProxy.createProxyServer({});
-const temp_cookie_fix = false; //NOTE: this may break other things, but better than nothing
+let request_mode = 'proxy';
 
 const disAllowedRequestHeaders = [
   'sec-ch-ua',
@@ -30,7 +31,45 @@ headers:`,
     console.log('\t', '\x1b[32m', name + ':', '\x1b[37m', value);
   });
   console.log('\x1b[36m', '----------------');
-  if (temp_cookie_fix) {
+  if (request_mode === 'curl') {
+    //i mean if it works it works i guess, better than nothing
+    let curl = `curl '${_url.href}' -H 'User-Agent: ${req.headers['user-agent']}'`;
+    if (temp_cookies) curl += ` -H 'Cookie: ${temp_cookies}'`;
+    if (req.headers.origin2) curl += ` -H 'Origin: ${req.headers.origin2}'`;
+
+    console.log('Running curl command:', curl);
+
+    const isWindows = process.platform === 'win32';
+    const options = isWindows
+      ? {
+          shell:
+            process.env.BASH_LOCATION ||
+            process.env.ProgramFiles + '\\git\\usr\\bin\\bash.exe',
+        }
+      : {};
+
+    exec(curl, options, (error, stdout, stderr) => {
+      if (error) {
+        console.error(`exec error: ${error}`);
+        res.writeHead(500, {
+          'Access-Control-Allow-Origin': CLIENT_HOST,
+          'Access-Control-Allow-Credentials': true,
+        });
+        res.write(`exec error: ${error}`);
+        res.end();
+        return;
+      }
+      if (stderr) {
+        console.error(`stderr: ${stderr}`);
+      }
+      res.writeHead(200, {
+        'Access-Control-Allow-Origin': CLIENT_HOST,
+        'Access-Control-Allow-Credentials': true,
+      });
+      res.write(stdout);
+      res.end();
+    });
+  } else if (request_mode === 'node-fetch') {
     fetch(_url.href, {
       'headers': {
         'cookie': temp_cookies,
@@ -41,7 +80,7 @@ headers:`,
       .then(res2 => res2.text())
       .then(res2 => {
         res.writeHead(200, {
-          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Origin': CLIENT_HOST,
           'Access-Control-Allow-Credentials': true,
         });
         res.write(res2);
@@ -52,7 +91,7 @@ headers:`,
         res.statusCode = 500;
         res.end();
       });
-  } else {
+  } else if (request_mode === 'proxy') {
     proxy.web(req, res, {
       target: _url.origin,
       selfHandleResponse: true,
@@ -121,6 +160,19 @@ const cookiesHandler = (req, res) => {
   });
 };
 
+const fetchModeHandler = (req, res) => {
+  let fetchMode = '';
+  res.setHeader('Access-Control-Allow-Origin', CLIENT_HOST);
+  res.setHeader('Access-Control-Allow-Credentials', true);
+  req.on('data', chunk => {
+    fetchMode += chunk;
+  });
+  req.on('end', () => {
+    request_mode = fetchMode;
+    res.end();
+  });
+};
+
 http
   .createServer(function (req, res) {
     const path = req.url.charAt(0) === '/' ? req.url.slice(1) : req.url;
@@ -140,6 +192,8 @@ http
     }
     if (path === 'cookies') {
       cookiesHandler(req, res);
+    } else if (path === 'fetchMode') {
+      fetchModeHandler(req, res);
     } else {
       try {
         const _url = new URL(path);
@@ -160,7 +214,7 @@ http
         res.statusCode = 200;
         if (req.method === 'OPTIONS') {
           res.writeHead(200, {
-            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Origin': CLIENT_HOST,
             'Access-Control-Allow-Credentials': true,
           });
           res.end();

src/components/accordions/Headers/index.tsx

@@ -1,16 +1,25 @@
 import React, { useEffect, useState } from 'react';
 import AccordionContainer from '../components/AccordionContainer';
-import { Alert, Box, InputAdornment, TextField } from '@mui/material';
+import {
+  Alert,
+  Box,
+  InputAdornment,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material';
 import useDebounce from '@hooks/useDebounce';
 
 export default function HeadersSection() {
   const [loading, setLoading] = useState(false);
   const [cookies, setCookies] = useState('');
   const debounceCookies = useDebounce(cookies, 500);
-  const [alertVisible, setAlertVisble] = useState(false);
+  const [fetchMode, setFetchMode] = useState('proxy');
+  const [alertVisible, setAlertVisble] = useState('');
   useEffect(() => {
     if (alertVisible) {
-      setTimeout(() => setAlertVisble(false), 1000);
+      const id = setTimeout(() => setAlertVisble(''), 1000);
+      return () => clearTimeout(id);
     }
   }, [alertVisible]);
 
@@ -20,9 +29,20 @@ export default function HeadersSection() {
       method: 'POST',
       body: debounceCookies,
     })
-      .then(() => setAlertVisble(true))
+      .then(() => setAlertVisble('Cookies updated'))
       .finally(() => setLoading(false));
   }, [debounceCookies]);
+
+  useEffect(() => {
+    setLoading(true);
+    fetch('fetchMode', {
+      method: 'POST',
+      body: fetchMode,
+    })
+      .then(() => setAlertVisble('Fetch mode updated'))
+      .finally(() => setLoading(false));
+  }, [fetchMode]);
+
   return (
     <AccordionContainer title="Headers" loading={loading}>
       {alertVisible ? (
@@ -34,7 +54,7 @@ export default function HeadersSection() {
             right: 0,
           }}
         >
-          Cookies updated
+          {alertVisible}
         </Alert>
       ) : null}
       <TextField
@@ -62,6 +82,27 @@ export default function HeadersSection() {
         }}
         sx={{ width: '100%' }}
       />
+      <Box sx={{ height: 10 }} />
+      <div
+        style={{
+          alignContent: 'flex-start',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+        }}
+      >
+        Fetch Mode:
+        <Select
+          variant="outlined"
+          label="Fetcher"
+          value={fetchMode}
+          onChange={e => setFetchMode(e.target.value)}
+        >
+          <MenuItem value="proxy">Proxy</MenuItem>
+          <MenuItem value="node-fetch">Node fetch</MenuItem>
+          <MenuItem value="curl">Curl</MenuItem>
+        </Select>
+      </div>
     </AccordionContainer>
   );
 }