Authentication + more

public/main.js

@@ -1,5 +1,7 @@
 const { app, BrowserWindow } = require('electron');
 const isDev = require('electron-is-dev');
+const path = require('path');
+const os = require('os');
 
 if (isDev) {
   console.log('Running in development');
@@ -15,11 +17,18 @@ function createWindow() {
     height: 600,
     webPreferences: {
       nodeIntegration: true,
+      webSecurity: false,
     },
   });
 
   mainWindow.loadURL(isDev ? 'http://localhost:8080' : `file://${__dirname}/../dist/index.html`);
 
+
+  if (isDev) {
+    BrowserWindow.addDevToolsExtension(
+      path.join(os.homedir(), './Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/3.6.0_0'),
+    );
+  }
   mainWindow.on('closed', () => {
     mainWindow = null;
   });

src/main/components/HeaderBar.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+const HeaderBar = (props) => {
+  const {
+    header, authType, handleChange,
+  } = props;
+
+  console.log(authType);
+  return (
+    <div>
+      <p>Headers</p>
+      <form>
+      <select name='Authentication' id='headerTypeInput' multiple={false} value={header}
+            onChange={handleChange} >
+            <option value='Authorization'>Authorization</option>
+            <option value='NONE'>none</option>
+          </select>
+          <select name='authType' id='typeInput' multiple={false} value={authType}
+            onChange={handleChange} >
+            <option value={authType}>{authType}</option>
+          </select>
+          <input name='headerKey' id='headerInput' type='text' onChange={handleChange}></input>
+      </form>
+    </div>
+  );
+
+};
+
+export default HeaderBar;

src/main/components/RequestBar.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import HeaderBar from './HeaderBar.jsx';
 
 const RequestBar = (props) => {
   const {
@@ -9,36 +10,50 @@ const RequestBar = (props) => {
   const [selected, setSelected] = useState(method);
   const [uri, setUri] = useState('');
 
+  // header info
+  const [headerType, setHeaderType] = useState('Authorization');
+  const [authType, setType] = useState('Bearer Token');
+  const [headerKey, setHeaderKey] = useState('');
 
   const handleChange = (e) => {
     const { name, value } = e.target;
     if (name === 'method') setSelected(value);
     else if (name === 'uri') setUri(value);
+
+    // header info
+    if (name === 'Authentication') setHeaderType(value);
+    if (name === 'headerKey') setHeaderKey(`Bearer ${value}`);
+
+  };
+
+  const runTest = (link, sendingObj, testsClone, i) => {
+    const test = testsClone;
+    fetch(link, sendingObj)
+      .then((response) => {
+        test[i].status = response.status;
+        if (i === test.length - 1) setTests(test);
+      })
+      .catch(error => console.log(error));
   };
 
   function sendFetch(e) {
     e.preventDefault();
 
     if (SourceOrDest === 'source') {
       const sendingObj = { method: selected, mode: 'cors' };
+      if (headerType !== 'NONE') sendingObj.headers = { [headerType]: headerKey };
 
       fetch(uri, sendingObj)
         .then(res => res.json())
         .then(res => setData(res));
     } else if (SourceOrDest === 'dest') {
       const testsClone = [...tests];
       const sendingObj = { method: selected, mode: 'cors' };
-      let counter = 0;
+      if (headerType !== 'NONE') sendingObj.headers = { [headerType]: headerKey };
+
       for (let i = 0; i < testsClone.length; i += 1) {
         sendingObj.body = JSON.stringify(testsClone[i].payload);
-
-        fetch(uri, sendingObj)
-          .then((response) => {
-            counter += 1;
-            testsClone[i].status = response.status;
-            if (counter === testsClone.length) setTests(testsClone);
-          })
-          .catch(error => console.log(error));
+        runTest(uri, sendingObj, testsClone, i);
       }
     }
   }
@@ -65,6 +80,7 @@ const RequestBar = (props) => {
         <input name='uri' id='urlInput' type='url' onChange={handleChange}></input>
         <button type='submit' value='Submit'>Submit</button>
       </form>
+      <HeaderBar header={headerType} authType={authType} handleChange={handleChange}/>
     </div>
   );
 };

src/main/components/ResponseComponent.jsx

@@ -10,7 +10,7 @@ const ResponseComponent = (props) => {
 
   return (
     <div>
-      <p>{`${checkmark} ' - ' ${status}`}</p>
+      <p>{`${checkmark}  -  ${status}`}</p>
       <textarea cols='50' rows='5'>
         {payload}
       </textarea>