How to load a specific html file in the BrowserWindow
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">© 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
electron
asked Nov 14 '18 at 14:28
ClearbryanClearbryan
134
|
show 7 more comments
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">© 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
electron
asked Nov 14 '18 at 14:28
ClearbryanClearbryan
134
Can you post your HTML please?
– GrahamMc
Nov 14 '18 at 14:39
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
Nov 14 '18 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
Nov 14 '18 at 15:08
I made a small example from the quick start here: github.com/grahammcallister/electron-quick-start-logindemo
– GrahamMc
Nov 14 '18 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
Nov 14 '18 at 15:18
|
show 7 more comments
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">© 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
electron
asked Nov 14 '18 at 14:28
ClearbryanClearbryan
134
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">© 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
electron
electron
asked Nov 14 '18 at 14:28
ClearbryanClearbryan
134
asked Nov 14 '18 at 14:28
ClearbryanClearbryan
134
edited Nov 14 '18 at 14:55
Clearbryan
asked Nov 14 '18 at 14:28
ClearbryanClearbryan
134
asked Nov 14 '18 at 14:28
ClearbryanClearbryan
134
asked Nov 14 '18 at 14:28
ClearbryanClearbryan
134
134
Can you post your HTML please?
– GrahamMc
Nov 14 '18 at 14:39
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
Nov 14 '18 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
Nov 14 '18 at 15:08
I made a small example from the quick start here: github.com/grahammcallister/electron-quick-start-logindemo
– GrahamMc
Nov 14 '18 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
Nov 14 '18 at 15:18
|
show 7 more comments
Can you post your HTML please?
– GrahamMc
Nov 14 '18 at 14:39
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
Nov 14 '18 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
Nov 14 '18 at 15:08
I made a small example from the quick start here: github.com/grahammcallister/electron-quick-start-logindemo
– GrahamMc
Nov 14 '18 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
Nov 14 '18 at 15:18
Can you post your HTML please?
– GrahamMc
Nov 14 '18 at 14:39
Can you post your HTML please?
– GrahamMc
Nov 14 '18 at 14:39
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
Nov 14 '18 at 15:07
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
Nov 14 '18 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
Nov 14 '18 at 15:08
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
Nov 14 '18 at 15:08
I made a small example from the quick start here: github.com/grahammcallister/electron-quick-start-logindemo
– GrahamMc
Nov 14 '18 at 15:16
I made a small example from the quick start here: github.com/grahammcallister/electron-quick-start-logindemo
– GrahamMc
Nov 14 '18 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
Nov 14 '18 at 15:18
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
Nov 14 '18 at 15:18
|
show 7 more comments
1 Answer
1
active
oldest
votes
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 '18 at 23:46
MikeMike
1,4091923
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53302518%2fhow-to-load-a-specific-html-file-in-the-browserwindow%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 23:46
MikeMike
1,4091923
add a comment |
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 '18 at 23:46
MikeMike
1,4091923
add a comment |
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 '18 at 23:46
MikeMike
1,4091923
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 '18 at 23:46
MikeMike
1,4091923
answered Nov 14 '18 at 23:46
MikeMike
1,4091923
answered Nov 14 '18 at 23:46
MikeMike
1,4091923
answered Nov 14 '18 at 23:46
MikeMike
1,4091923
1,4091923
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53302518%2fhow-to-load-a-specific-html-file-in-the-browserwindow%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you post your HTML please?
– GrahamMc
Nov 14 '18 at 14:39
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
Nov 14 '18 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
Nov 14 '18 at 15:08
I made a small example from the quick start here: github.com/grahammcallister/electron-quick-start-logindemo
– GrahamMc
Nov 14 '18 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
Nov 14 '18 at 15:18