How to load a specific html file in the BrowserWindow

Question

I am creating an app in Electron. I am still new to the framework however I did some reading around how to communicate between the main and renderer processes using ipcMain and ipcRenderer. I have a simple html page with a login form that gets load when the app is ready and in the renderer process I listen to the click event of the submit button on the form(For testing purposes I have hard coded the username and password) and I run a simple check to see if the password and username matches the one I have hard coded. The aim is to then load a specific html file in the browser window based on the result of the check. My render.js looks like this:

const ipc = require('electron').ipcRenderer;
document.querySelector('#btn').addEventListener('click', function (event){
event.preventDefault();
const username = 'Belinda';
const password = 'admin';

const inputUsername = document.querySelector('#username').value;
const  inputPassword = document.querySelector('#password').value;

if(inputUsername != username || inputPassword != password){
    ipc.send('errortest', function (){
        alert('Error')

    });
}else{
    ipc.send('successtest', function (){ 
        alert('Success')
    });
 };
});

In main.js I listen to the events like this:

ipc.on('successtest', function (){
    mainWindow.loadFile('admin.html');
});
ipc.on('errortest', function(){
   console.log('error');
   mainWindow.loadFile('error.html');
});

My index.html page looks like this:

<!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8" />
  <link rel="stylesheet" 
  href="assets/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/fonts/@fortawesome/fontawesome- 
  free/css/all.css">
  <link rel="stylesheet" href="assets/stylesheets/main.css">

  <!-- <link rel="import" href="./admin.html"> -->
 <link rel="import" href="./admin.html">
 <link rel="import" href="./error.html">
 </head>
 <body id="body">
 <form class="form-signin" method="POST">
    <div class="text-center mb-4">
      <img class="mb-4" src="./assets/icons/logo4.jpg" alt="" width="80" 
     height="40">
    </div>
    <div class="form-group">
      <input type="text" value="" autofocus class="form-control form- 
    control-sm" id="username" placeholder="Username">
    </div>
    <div class="form-group">
      <input type="password" autofocus value="" class="form-control form- 
    control-sm success" id="password" placeholder="Password">
    </div>
    <button class="btn btn-lg btn-success btn-block btn-sm" id="btn" 
    type="submit">Log in</button>
    <p class="mt-5 mb-3 text-muted text-center">&copy; Save Money 
   Solutions 2018-19</p>
 </form>

 <script>
 require('./renderer');
 </script>
 </body>
 </html>

Running the app works only for the 'errortest' event. Any advice on how I get around this. Or any Ideas on how to do basic login and redirect paths in electron. I did try some research but I haven't come across anything useful. Thank you

Thanks for the html update. I cloned the "electron quickstart" repository, and changed index.html as follows: <input type="text" id="username"><br> <input type="password" id="password"><br> <button id="btn">Click</button> and used your js files. This works for me (I go to admin page). Some tips: remember you can use "normal" Chrome dev tools in Electron, which can help you debug. Also try "alerting" the values from your selector query to confirm they are what you expect. — GrahamMc
– GrahamMc, Commented Nov 14, 2018 at 15:07
Perhaps try similarly get it working on the electron quickstart repo here: github.com/electron/electron-quick-start in a minimal way, then transfer knowledge into your actual app — GrahamMc
– GrahamMc, Commented Nov 14, 2018 at 15:08
I made a small example from the quick start here: github.com/grahammcallister/electron-quick-start-logindemo — GrahamMc
– GrahamMc, Commented Nov 14, 2018 at 15:16
Your broader question about doing login: it depends on the needs of your application and users :-) For example maybe you need to use the Windows credentials of the signed in user, or maybe you're signing in to a back end API. Electron doesn't recommend or constrain you to a specific way of doing things. — GrahamMc
– GrahamMc, Commented Nov 14, 2018 at 15:18

Joshua · Accepted Answer · 2018-11-14 23:46:22Z

0

I believe your problem is how you're getting the value of the username and password inputs.

Since both of your inputs has ids I think you should be getting their value like this:

const inputUsername = document.getElementById('username').value;
const inputPassword = document.getElementById('password').value;

Using the getElementById function.

answered Nov 14, 2018 at 23:46

Joshua

5,3622 gold badges33 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

How to load a specific html file in the BrowserWindow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related