I am trying to create a webpage with a login page. When the user logs in for the first time the username and password will be saved by the browser, if he checks "Stay logged in". When he logs in the second time the browser will autofill the form and I can log him in without any need for him to interact with the page.
The problem is, that I can't get the password from the login form. Take a look at my code:
$(document).ready(setTimeout(function() {
loginForm.form.submit(function(e) { // I don't have a onsubmit action defined on the login form
console.log("Submit");
checkLogin(); // This function should get the username and password value and makes a credential check but I cant get the password here
});
var username = $(".login-form__username").val();
var password = $(".login-form__password").val(); // This always is "", an empty string!
if (username) { // If the username is set we assume its an autofill
console.log("autofilled");
loginForm.form.submit(); // I manually fire the submit event when the browser autofills the username and password field
}
}, 100));
I can clearly see, that the username and password are filled in to the form, but somehow I cant get the password. Everything goes well If I manually click on the submit button of the form. This will of course trigger checkLogin(); and I can get the password here. But it wont work, if I trigger the event manually after the document ready event.
Does anyone know how to fix this, or why this happens?
Thanks, David
EDIT
I just figured out, that this issue only appears on Chrome for Mac, it works like a charm on Chrome for Windows and on Firefox. This don't works on Safari, because you need to select the user you want to login.
In addition I also figured out, that the focus needs to be set to the Webpage itselfe, not on the URL-Bar or on the refreshButton
"Stay logged in" and the browsers Autofill are two pair of shoes. "Stay logged in" is normally implemented by a cookie or a local store which contains the current user information. A script running on your page checks that and logs the user in or sends him to the login form.
The autofill is a browser feature where the user is asked to store the credentials in the browser. You don't know via javascript if the is something stored.
But you could try to check the length of the content of you input and blindly submit it. If it works the credentials were right.
You Can Store Form USername And Password In Local Storage Of Browser
localStorage.setItem("username", "Danyial.com");
localStorage.setItem("password", "1234567901");
And Get The Value And Put In Form
var username =localStorage.getItem("username");
var password =localStorage.getItem("password");
$(".login-form__username").val(username);
$(".login-form__password").val(password);
Related
I use some server-side email obfuscation and do not want to put the full email address in a mailto: . Within the element, I call a js function that fetches the email address from the server, and calls (another) mailto: link from without the js function.
I first kept the href empty (and I think it's the same when putting #), but when hoovering over the link, the status bar of the browser shows a link to the current page, and it looks just neater (and expected behavior) to show a mailto: link in the status bar, but just with the firstname of the person, and not with a valid email address.
HTML:
<a href="mailto:johny" onclick= "sendmail('jj'); return false;" title="Send email">
JS:
function sendmail(dest) {
var link = "";
fetch('/returnmailstring.php?dec='+code+'&input='+dest)
.then(function(response) {
response.text()
.then(function(text) {
link = text;
if (link.length > 2) {
if(window.confirm('Send email to \n'+link+' ?')) {
window.location.href = link;
}
}
})
})
}
So my question is whether it is acceptable to have a double/identical functionality, but using two different methods ?
I would have expected that maybe two "new mail" windows would be opened, or some other weird behavior, but everything actually works fine. But I cannot imagine that this is standards compliant, and that it would work fine in all browsers/devices?
A related question is about what should happen when user clicks on the link. I currently implemented a confirmation box, so user can choose OK to actually proceed with sending the email (using the default email client), or just copy the email address from the box (and paste into another mail client, e.g. gmail), and Cancel to return to the page. The alternative would be to skip the confirmation box and directly open the mail client after the click. Are there UX rules / standards to follow, or is it acceptable to use such confirmation box?
There is this web page: https://www.comed.com/Pages/default.aspx
with a "Sign In" button in the top right corner. I am displaying this page from a UWP app (this is actually a JavaScript question) in a WebView control, and run a dynamic JavaScript script on this page (via a call to InvokeScriptAsync()) to automatically insert the login or password in the currently selected field. The script that runs is simply this:
document.activeElement.value='" + value + #"';
This works in the sense that the login or password shows correctly on the screen BUT when I click on the "Sign In" button the page is telling me "Username (Email Address) is required." and "Password is required.".
If instead I manually type in the SAME value (or use copy/paste) then I get no errors!
I get the same type of error on the MS Channel 9 login page, but most other login web pages do NOT have that issue.
Use this code $(document.activeElement).trigger('change') after setting the value.
In addition to the above answer, and to support different web pages, I ended up using some Javascript from Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript:
if ("createEvent" in document)
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.activeElement.dispatchEvent(evt);
}
else
{
document.activeElement.fireEvent("onchange");
}
I am trying to invoke an alert box after a form is fully submitted AND the page is redirected, but don't exactly know how to go about it.
After a user registers with the site, it redirects them to their profile page.
What I want to do is, IF the request came from the from with ID of new_user, AND after the user gets redirected to their profile page, invoke an alert.
So on the profile page, after coming from the new_user form, invoke an alert.
Right now I am doing this:
$('form#new_user').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
alert("Testing page load.");
});
But that invokes the pop up after the form is submitted, before the user gets to the profile page.
How can I accomplish this?
Thanks.
hi i think you can do this easily using AJAX
pass the variables to the ajax page and on SUCCESS show the alert box which you want to show.
i think it is better to use AJAX to Jquery for your scenario.
Here's an idea on how you could do it:
#inside your RegistrationsController
def create
user = User.new(user_params)
if user.save
redirect_to user_profile_path(user, from: 'registration), notice: "Successful registration."
else
# code for handling error in registration
end
end
Now that you have a param :from passed to the user_profile_path every time a user is just registered, you can do something like this in your JS for your profile page
if(window.location.search == 'from=registration') {
alert("Redirected from registration!");
}
Let me know if that works.
Where you need this alert message? in your registration page or profile page?
If you want to invoke alert in your registration page, better you should us ajax post method for submitting the form.
If you want to display alert message in your profile page, pass a value as query string and write jquery alert function based on that query string value.
Everytime I have to access the net I first have to login to my university login page, how can I bypass that, I managed to write a chrome extension which automatically fills my username and password on the page but how can I make the browser click the login button for me? Any resources/ ideas/ suggested readings on this?
Use Chrome's "save username and password" feature? OK, you don't want to do that.
Find the form and submit it.
If the form has an ID, then find it by ID:
var form = document.getElementById('id');
form.submit();
If not, perhaps there is only one form on the page, so you can find it as follows:
var form = document.getElementsByTagName('form')[0];
form.submit();
If that doesn't work either, then you can use the username input to find its containing form. I'm assuming you have a reference to the username input, since you said you are able to fill in a value for it:
// Assume variable 'usernameInput' points to the username input element.
var form;
var p = usernameInput.parentNode;
while (p) {
if (p.nodeName.toLowerCase() == 'form') {
form = p;
break;
}
}
if (form) {
form.submit();
}
ETC.
You can also look for the Submit button and click it instead.
var myButton = document.getElementById('submitButton');
myButton.click();
I've had mixed success with clicking or submitting from a content script. Perhaps importing jQuery messes things up - I don't know for sure. So I found myself explicitly sending mouse events with this gem (adapt it for other event types as needed):
function clickElement(el) {
el.css('background-color', '#FFFF00');
el = $(el).get(0);
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, document, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
Use the .click() method on the button element, or the .submit() method on the form element.
Use the "password box" addon.
You can download it of the Chrome web App Store.
The addon adds another button in the top right corner and if you click on it you can click on add new page or something like that and then you simply enter your username and password done!
What I then did is in the settings of chrome I added the login page as a page that automatically opens when I open chrome ,so then password box automatically enters username and passcode ,and you're logged in!
So after you set it all up you just need to open your browser and you're logged in!
I have a hyper link like this :
<A Href=My_Java_Servlet?User_Action=Admin_Download_Records&User_Id=Admin onClick=\"Check_Password();\" target=_blank>Download Records</A>
When a user clicks on it, a password window will open, the user can try 3 times for the right password.
The Javascript looks like this :
<Script Language="JavaScript">
function Check_Password()
{
var testV=1;
var pass1=prompt('Password','');
while (testV<3)
{
if (!pass1) history.go(-1);
if (pass1=="password") { return true; }
testV+=1;
var pass1=prompt('Access Denied - Password Incorrect.','');
}
return "false";
}
</Script>
If user enters the wrong password 3 times, it's supposed to not do anything, but it still opens a new window and displays the protected info, how to fix the javascript or my html hyper link so only the right password will open a new target window, a wrong password will make it do nothing ?
Clientside JavaScript is perhaps the worst possible way to provide "security". Users can just view the source to see all of your passwords, or just disable JavaScript altogether. Do not do this.
Other people have answered your question with the true/false return value but here's some of the problems with the whole idea of checking the password in javascript on the client:
Your javascript source is freely readable by anyone downloading the page - thus showing them the password needed to view the page.
If they don't have javascript enabled then they'll just go straight to the page without getting the javascript prompt.
They could always just copy the link and paste it into their address bar to bypass the password protection. They could also just middle-click the link (which should open it in a new tab/window depending on their browser.)
Even on a private/intranet-only application this would be a laughable security method. :) Please consider re-desinging it so that the password is checked on the server-side portion (like when someone attempts to access the servlet it would render a password box and then post that password back to the server and then allow/deny access.)
You might to try returning false rather than "false"
However, you might be better off doing this kind of thing on the server, as I'd image all but novice users will know how to "copy link address" and paste this into their address bar.
Why are you returning "false" instead of false ?