Passing input variable between 2 HTML files using Electron with a login system

Question

I am currently creating an app using Electron which will allow users to communicate with each other via socket.io. I have made a login screen which users input their email and password that they've registered with in order to access the main menu. In this case I have used a dummy account for testing purposes.

Here is the code for login.html along with the login_scripts.js file:

login.html:

<html>
  <!--Required JQuery script-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

  <head>
    <!--Required meta tags-->
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Required CSS-->
    <link rel="stylesheet" href="loginstyles.css">
  </head>

  <body>
    <!--Main login box with appropriate classes-->
    <div id="Lbox" class="loginBox">
      <div class="loginTitle">Welcome!</div>
      <h5 id="Etext" class="emailText">EMAIL</h5>
      <div id="Einptwrap" class="emailInputWrapper">
        <input id="Einput" class="emailInput" type="email" 
        aria-label="Email" autocomplete="off" 
        spellcheck="false" maxlength="999">
      </div>
      <h5 id="Ptext" class="passwordText">PASSWORD</h5>
      <div id="Pinptwrap" class="passwordInputWrapper">
        <input id="Pinput" class="passwordInput" type="password" 
        aria-label="Password" autocomplete="off" 
        spellcheck="false" maxlength="999">
      </div>
      <button id="Lbutton" type="submit" class="loginButton" onclick="verify()">Login</button>
      <h5 class="registerText">Don't have an account?</h5>
      <a class="registerLink" href="Register.html">Register</a>
    </div>

    <!--SQL database connection scripts-->
    <script src="./sql_scripts.js"></script>

    <!--Login verification scripts-->
    <script src="./login_scripts.js"></script>

  </body>
</html>

And login_scripts.js:

function verify() {
  const electron = require('electron').remote;
  const { app, BrowserWindow, ipcMain } = require('electron').remote;
  const { ipcRenderer } = require('electron');

  //Variable declarations
  var EinputFalse = document.getElementById("Einput").value == "";
  var EinputTrue = document.getElementById("Einput") &&
  document.getElementById("Einput").value;

  var PinputFalse = document.getElementById("Pinput").value == "";
  var PinputTrue = document.getElementById("Pinput") &&
  document.getElementById("Pinput").value;

  //Input field checks
  if (EinputFalse) {
    document.getElementById("Einptwrap").style.cssText =
    "border-color: red";
    document.getElementById("Etext").innerHTML = 
    "EMAIL - <small><i>This field is required<i><small>";
    document.getElementById("Etext").style.cssText = 
    "color: red";
  }
  if (EinputTrue) {
    document.getElementById("Einptwrap").style.cssText =
    "border-color: #282e2e";
    document.getElementById("Etext").innerHTML = 
    "EMAIL";
    document.getElementById("Etext").style.cssText =
    "color: #636d6d";
  }
  if (PinputFalse) {
    document.getElementById("Pinptwrap").style.cssText = 
    "border-color: red";
    document.getElementById("Ptext").innerHTML = 
    "PASSWORD - <small><i>This field is required<i><small>";
    document.getElementById("Ptext").style.cssText = 
    "color: red";
  }
  if (PinputTrue) {
    document.getElementById("Pinptwrap").style.cssText =
    "border-color: #282e2e";
    document.getElementById("Ptext").innerHTML = 
    "PASSWORD";
    document.getElementById("Ptext").style.cssText =
    "color: #636d6d";
  }

  //Check if both input fields are filled
  if (EinputTrue && PinputTrue) {
    var einput = document.getElementById("Einput").value;
    var einputquery = "SELECT u_email FROM userdetails WHERE u_email = ?";
    var pinput = document.getElementById("Pinput").value;
    var pinputquery = "SELECT u_password FROM userdetails WHERE u_password = ?";

    //SQL database queries
    con.query(einputquery, [einput], function(err, result, fields) {
      var eResString = JSON.stringify(result);
      var eResStringRep = eResString.replace(/[{}":]/g, "").replace("[", "").replace("]", "");
      var eResStringVar = eResStringRep.slice(7);

      if (eResStringVar == einput) {
        console.log("Query success. Result: " + eResStringVar);

      }
      else {
        console.log("Error, query unsuccessful");
      }

      con.query(pinputquery, [pinput], function(err, result, fields) {
        var pResString = JSON.stringify(result);
        var pResStringRep = pResString.replace(/[{}";]/g, "").replace("[", "").replace("]", "");
        var pResStringVar = pResStringRep.slice(11);

        if (pResStringVar == pinput) {
          console.log("Query success. Result: " + pResStringVar);

        }
        else {
          console.log("Error, query unsuccessful");
        }

        //Child window (renderer process) creation in accordance with IF statement
        if (eResStringVar == einput
        && pResStringVar == pinput) {

          child = new BrowserWindow({ 
            parent: Window, 
            modal: true, 
            show: false,
            width: 400,
            height: 600,
            title: "Messaging Service",
            center: true,
            webPreferences: {
              nodeIntegration: true,
              defaultEncoding: "UTF-8",
            } 
          })
          child.loadFile('menu.html')
          child.once('ready-to-show', () => {
            child.show()
          })

          ipcMain.on('einput-send-req', (event, arg) => {
            console.log(arg);
            child.webContents.send('einput-send-act', arg);
          });

          ipcRenderer.send('einput-send-act', eResStringVar);


        }
        else if (eResStringVar != einput) {
          document.getElementById("Einptwrap").style.cssText =
          "border-color: red";
          document.getElementById("Etext").innerHTML = 
          "EMAIL - <small><i>Email does not exist<i><small>";
          document.getElementById("Etext").style.cssText = 
          "color: red";
        }
        else if (pResStringVar != pinput) {
          document.getElementById("Pinptwrap").style.cssText = 
          "border-color: red";
          document.getElementById("Ptext").innerHTML = 
          "PASSWORD - <small><i>Password does not match<i><small>";
          document.getElementById("Ptext").style.cssText = 
          "color: red";
        }
      })
    })
  }
}

//Event listener for ENTER key
var lgnbox = document.getElementById("Lbox");
lgnbox.addEventListener("keyup", function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    verify();
  }
});

And menu.html which is the renderer process which will be receiving the desired variable:

<html>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="menustyles.css">
  </head>


  <body>
    <script src="./node_modules/socket.io-client/dist/socket.io.js"></script>
    <script src="./sql_scripts.js"></script>

    <script>
      const { ipcRenderer } = require('electron');

      ipcRenderer.on('einput-send-act', (event, arg) => {
        console.log(arg);
      });

    </script>

    <script>
      $(function () {
        var socket = io('http://localhost:3000');


      });
    </script>

    <div class="menuHeader">
      <button class="settingsButton">Settings</button>
    </div>
    <ul id="users"></ul>

  </body>

</html>

The program compares the input variable to the variable in my SQL database (using phpMyAdmin) via a query and returns the edited and "sliced" variable. In this case, I am testing to see whether the email variable will be passed on using ipcMain and ipcRenderer.

However, this has not worked but there also doesn't seem to be any errors when running the program. I have tried putting the ipcMain function inside of main.js which is the main startup file for Electron and declaring the child window within main.js, but this causes a plethora of errors to crop up.

The code for main.js is here:

//Initialising modules
const electron = require('electron');
const { app, BrowserWindow, ipcMain } = require('electron');

//Server setup and initialisation
const server = require('./serversetup.js').server;
const port = process.env.port || 3000;
server.run(port);

//Creating application window
function createWindow() {
  win = new BrowserWindow({
    width: 700,
    height: 800,
    backgroundColor: "#343c3c",
    center: true,
    title: "Messaging Service",
    webPreferences: {
      nodeIntegration: true,
      defaultEncoding: "UTF-8",
    }
  })
  win.once('ready-to-show', () => {
    win.show()
  })
  win.loadFile('login.html')
  win.on('closed', () => {
    win = null
  })
}

//Application startup processes
app.on('ready', () => {
  createWindow()
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

I would like to know what I am doing wrong and whether there is a way to fix this issue.

TL;DR I am trying to pass a variable from a process which uses a login system (login.html) to another process (menu.html), using Electron.

Aron B. · Accepted Answer · 2020-02-29 18:55:12Z

1

You can use electron's ipc API to communicate between multiple windows.

answered Feb 29, 2020 at 18:55

Aron B.

2811 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

disclosed_vector Over a year ago

I did, however I can't figure out how you could use the ipc API to pass a variable from one renderer process to another after logging on.

Collectives™ on Stack Overflow

Passing input variable between 2 HTML files using Electron with a login system

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related