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
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.
Related
I have a basic mobile login page in ColdFusion that allows the user to enter a username and password and log in. On successful login, the page redirects to the home page using a cflocation. However, while the page redirects successfully to the home page, it still displays the login page URL in the location bar. We have used cflocation many times throughout our web application and I have never come across this behavior before and can't figure out what could be causing it.
The gist of the page code:
<cfparam name="invalidLogin" default="false">
<cfif cgi.REQUEST_METHOD EQ "POST" AND isDefined("form.email") AND isDefined("form.password") and len(trim(form.email)) and len(trim(form.password))>
<!--- call the login method --->
<cfinvoke component="login" method="userlogin" returnvariable="userData">
<cfinvokeargument name="userName" value="#form.email#">
<cfinvokeargument name="password" value="#form.password#">
</cfinvoke>
<cfif userData.isLoggedIn>
<cflocation url="index.cfm" addtoken="no">
</cfif>
<cfset invalidLogin = true />
</cfif>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Log In</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div data-role="page" class="bg-color">
<div class="container">
<div data-role="content">
<div class="article">
<div class="logoDiv">
<img src="img/companyLogo.png" />
</div>
</div>
<form action="" method="post" name="frmLogin" id="frmLogin" class="margin-top" data-transition="slide">
<div>
<input type="text" name="email" id="email" placeholder="Username">
<input type="password" name="password" id="password" placeholder="Password">
</div>
<cfif invalidLogin><div>Invalid Login</div></cfif>
<div>
<input type="submit" value="Log In" data-theme="b" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>
To prevent jQuery Mobile from handling forms with redirect via Ajax, you need to turn Ajax Navigation off and handle the request through HTTP.
To do so, add data-ajax="false" attribute to form tag. This will stop Ajax Navigation on the form only.
Note that you will lose transition when moving for current form page to new page as Ajax is turned off, so data-transition="slide" will have no effect.
<form action="" data-ajax="false" method="post" name="frmLogin" id="frmLogin">
I am learning jQuery Mobile building the simplest single page template application: main page and a little form.
In this form I have a single text field that I want to be required.
Here's my link to the form page:
Form
In the form page I have all the key elements: the jquery validation plugin (and jquery before it, of course), the validation script, the mandatory field and the submit button:
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#field").validate();
});
</script>
<input type="text" id="field" name="field" class="required" required>
<input id="submit" class="submit" type="submit" value="Inserisci" data-theme="a"/>
If I get in the form page using the normal link the validation won't happen (simple page reload because my form action is not yet set).
If I change my form link to:
<a href="form.html" data-ajax=false>Form</a>
The validation works and tells me to insert my data in the mandatory field.
But, even if insert data, it'll keep on asking me to insert it without submitting the form.
I really can't understand what I'm doing wrong...
After the 1st suggestion I've kept on reading and I've updated my code with this example: http://jquery.bassistance.de/validate/demo/jquerymobile.html and the problem is now that I am forced to refresh the form page to see the validation working. If I use data-ajax=false on the link that leads me to the form then validation is always perfectly working.
Update:
to be sure that everything is "as vanilla" as possible I got the main template from jquery documentation as starting page, my index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="cruscotto">
<div data-role="header" id="header">
<h1>page</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a">
<li>
Inserimento clienti
</li>
<li>
Ricerca clienti
</li>
<li>
Gestione pagamenti
</li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<div class="ui-bar">
Torna su
</div>
</div>
</div>
</body>
</html>
And then I got a perfectly working form from a tutorial, my inserisci_clienti.html page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<style type='text/css'>
label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
#media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
#media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$( "#frmLogin" ).validate({
submitHandler: function( form ) {
alert( "Call Login Action" );
}
});
});//]]>
</script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" id="login">
<div data-role="header">
<h1>Acme Corporation</h1>
</div>
<div data-role="content">
<form id="frmLogin" class="validate">
<div data-role="fieldcontain">
<label for="email"><em>* </em> Email: </label>
<input type="text" id="email" name="email"
class="required email" />
</div>
<div data-role="fieldcontain">
<label for="password"><em>* </em>Password: </label>
<input type="password" id="password" name="password"
class="required" />
</div>
<div class="ui-body ui-body-b">
<button class="btnLogin" type="submit"
data-theme="a">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
Needless to say it's working only if I reload the form page after loading it or if I put data-ajax=false OR rel="external" on the link that leads to the form (losing jQuery animations)
I am going mad :(
This the proper use of jQuery.validate in jQuery Mobile.
$(document).on('pageinit', function () {
$(form).validate({ // or form #id
rules: {
field: "required" // field name not #id and has class="required
},
submitHandler: function (form) {
alert('data submitted');
return false;
}
});
});
The validation should be applied on the form not in the input .Try the following :
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").validate(); // applying the validation on myForm
});
</script>
<form id="myForm">
<input type="text" id="field" name="field" class="required" required>
<input id="submit" class="submit" type="submit" value="Inserisci" data-theme="a"/>
<form>
for more infos : http://docs.jquery.com/Plugins/validation
If i comment out the jquery.mobile...js file, this works fine, with it included, everytime i click the checkbox, the onclick event fires twice. Same is true for onchange event. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<script>
function tester() { alert("I get called twice on click"); }
</script>
<input id="abc" name="myCheckbox" onchange="tester()" type="checkbox" value="true" />
<label for="myCheckbox">Click me</label>
</body>
</html>
This is by design, since both events are happening. See example: http://jsfiddle.net/Twisty/T3qmG/
HTML:
<html>
<head>
<title>Checkbox Test</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Checkbox Test</h2>
</div>
<div data-role="content">
<input type="checkbox" id="checkbox-choice-1" />
<label for="checkbox-choice-1">Click me</label>
</div>
</div>
</body>
</html>
JQuery:
$(document).ready(function(){
$("#checkbox-choice-1").click(function(){
alert("Click event triggerd.");
});
$("#checkbox-choice-1").change(function(){
alert("Change event triggerd.");
});
});
I would advise separating your script code if possible. You can a function to one or both events.
Your markup is malformed. The <label> tag points to a non-existent id. It points to "myCheckbox" but the id of your input tag is "abc". This change fixes your issue and the markup is correctly enhanced.
<input id="abc" name="myCheckbox" onchange="tester()"
type="checkbox" value="true" />
<label for="abc">Click me</label>
Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
To get the value of checked radio button I use something like this
$('input:radio[name=rbutton]:checked').val()
This work well until I upgrade the version of jQuery Mobile from 1.0 to 1.1 rc1, then i could not get the value anymore, i just get "undefined"
I dont understand why something basic like this does not work for a change of JQM lib..
I paste and example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test radio button</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script>
$(document).delegate("#test", "pageinit", function(event) {
$("button.select").bind ( "click", function (e) {
// Get value of checked radio with JQM 1.0, but get "undefined" with JQM 1.1 RC
alert( $('input:radio[name=rbutton]:checked').val() );
});
$("input[type=radio]").bind ( "change", function (e) {
alert ($(this).val()); //OK
});
});
</script>
</head>
<body>
<div data-role="page" id="test" >
<div data-role="content">
<fieldset data-role="controlgroup">
<input type="radio" name="rbutton" id="rbutton1" value="1" />
<label for="rbutton1">Option 1</label>
<input type="radio" name="rbutton" id="rbutton2" value="2" />
<label for="rbutton2">Option 2</label>
</fieldset>
<button class="select">selected</button>
</div> <!-- /content -->
</div><!-- /page -->
</body>
</html>
This was a bug and is now fixed:
https://github.com/jquery/jquery-mobile/issues/3687#issuecomment-4251371