What defines a login form for the purposes of autocomplete? - html

I have a typical login form with username and password. When a user enters this information, their web browser will save the username and password for them (assuming their browser is configured to allow this). Suppose the username is "User01" and the password is "Password01".
Now suppose the user changes/resets their password to "Password02". The web browser doesn't recognize my password reset form as a login form, so it doesn't update/change/save the password in the user's web browser.
So when the user leaves my website and comes back at a later date, they come to my login page. They enter their username "User01" and it autocompletes the wrong password of "Password01" but the user doesn't know this because they just see ****. The user eventually locks their account then calls up our customer service to yell at us.
<form action="updatePassword.php" name="frmPasswordChange" method="POST">
<label>Old Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="oldPassword"></span>
<br />
<input type="hidden" name="username" value="User01">
<label>New Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="newPassword"></span>
<br />
<label>Re-enter New Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="newPasswordReEntered"></span>
<br />
<span class="buttonHolder">
<button type="submit" class="styledButton updateButton">Save Password</button>
</span>
</form>

I think that the way a browser handles inputs is largely from semantical reading of the login form. That is to say, if a text field is named "username" and a password field is named "password", that tends to carry over.
Problem in your case is that it sounds like you have two different pages through which one can login. It is a known issue/feature that web browsers associate login info on a page-to-page basis. For example, one of the sites I regularly login to stores different login credentials between the homepage and the forgot password page (with the "forgot password" page, somewhat ironically, having the correct credentials).
Until some sort of standard is developed that allows linking of forms by something like the ID attribute, I'm going to posit that there's not much you can do about this, apart from maybe doing a quick IP read and giving the username. But that would be stunningly bad practice.

Related

Login Form that sends login info from one website to another and logs the user in

My Client wants a login form on his website (domain1.com) that can send users to their ShareFile site (domain2.com) and log them in automatically.
They have this on their old website but when I look at the code for the form it is pretty simple and doesn't transfer the data and submit the login info when I try it on the new site. Here is what they had as code:
<div class="portal_form">
<form method="post" action="https://domain2.com" target="_blank">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input id="email" type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
<button class="elementor-button">SUBMIT</button><br/>
<p class="forgot-password"><u>Forgot Your password?</u> </p>
</form>
</div>
I told them that I thought the idea behind this wasn't very secure and that we should just link via buttons and/or navigation items to the login page on domain2.com.
They don't want to just link to the other website and have the user login there, they want the user to login on their domain1.com and just show up on domain2.com already logged in.
Can anyone help me do this?
Basically it is:
User fills out the Username and Password in a form on domain1.com and clicks Sumbit
That data is transferred to the Username and Password input boxes on domain2.com and the Submit button is automatically activated.
User is automatically logged in to domain2.com.
I am sure this probably can't be done purely via CSS and HTML and needs some JavaScript. I would be happy if you could just point me in the right direction and I can go from there.
What you want to achieve is called SSO (Single Sign On) and there are various way which you can implement this.
[Also your present solution is wrong and not secure | not proper way.]
You can refer to multiple ways to implement this with the combination of authentication protocols as well.
You have not mentioned the inside of architecture (if it is centralized DB OR two different DB)
Assuming it as single DB or even if it is 2 different DB then also you will have to match the user information.
So here you can implement the Hook/API calls in between sharing the data on two domain.
What you can do is:
Domain1: Check if user is valid or not.
If user is valid then create the session for that user on Domain1
At the same time call the API/Hook which you created on Domain2. This is to send the user information to Domain2 and check if its valid or not.
If API/Hook returns the validation true then create the same user session on Domain2 with gathered information.
In between you can implement some authentication protocol as well as per your need or project architecture.
Do refer this below doc for more information about Single-Sign-On (SSO):
Single-Sign-On-Wikipedia

Few different login forms on one domain - diffrent passwords from browser

I have two login forms. Each of them enables logging in into diffrent account. These accounts can use the same email and other passwords. That creates a problem with suggesting wrong password.
I would like to know if there is some kind of possibility to associate 'account in browser password manager' with one from several login forms within one domain? Is there any possibility to have two accounts with the same e-mail and diffrent password? One would be prompt as a suggest only in first login form, ale the other only in the second login form?
My suggestion would be to use a username instead of the email address to login in with and have the email link to the unique username name of which multiple accounts can have the same email address. If I understood you correctly. but try making the question clearer.
what you can do is add the following
<form>
<input id = "f1_username" name="username" />
<input id = "f1_password" name="password" type="password" />
</form>
<form>
<input id = "f2_username" name="username" />
<input id = "f2_password" name="password" type="password" />
</form>
you can try some thing like that.
the answer on this post can help More Info

Saved username/password appear in the wrong fields on Firefox

I have this strange bug on Firefox, not Chrome (both updated).
On the login page of my website, the fields are :
<div class="input text required">
<label for="ArchUtilisateurUsername">Identifiant :</label>
<input name="data[ArchUtilisateur][username]" id="ArchUtilisateurUsername" type="text">
</div>
<div class="input password">
<label for="ArchUtilisateurPassword">Mot de passe :</label>
<input name="data[ArchUtilisateur][password]" id="ArchUtilisateurPassword" type="password">
</div>
Then on another page, I have a form to create "readers" accounts, which are different than users accounts. It uses read ID and password as login informations, but in this form, both aren't next to each others.
So I have this :
<div class="group-content">
<div id="DivFieldLecteurFormCompteActif" class="input checkbox ">
<input name="data[LecteurForm][compte_actif]" value="" type="hidden">
<input name="data[LecteurForm][compte_actif]" id="FieldLecteurFormCompteActif" value="1" type="checkbox">
<label for="FieldLecteurFormCompteActif">Compte actif</label>
</div>
<div id="DivFieldLecteurFormPassword" class="input password ">
<label for="FieldLecteurFormPassword">Mot de passe</label>
<input name="data[LecteurForm][password]" id="FieldLecteurFormPassword" autocomplete="off" type="password">
</div>
<div id="DivFieldLecteurFormPasswordConfirm" class="input password ">
<label for="FieldLecteurFormPasswordConfirm">Confirmation</label>
<input name="data[LecteurForm][password_confirm]" id="FieldLecteurFormPasswordConfirm" autocomplete="off" type="password">
</div>
</div>
The strange problem is, if a user validates the Firefox's "save my login datas" popup when he logs in the website, when he opens the "reader" form,
the "password" field is filled with the user's password
the first previous text input field to the password field is filled with the user's username
Starting to the password field : if the previous one is a checkbox, select, radio, it's ignored and go further. If I remove the input field with the username from my source, when I reload the page it's the next previous input field that get the username.
All seems to be linked to the password field :
Login form and Reader form have different password field names, but it's still doing this
If I delete this password field in the code, after reloading the "password confirm" field is filled with the user password
If I delete both, the user password appear nowhere, so do the username.
If I change the password field type from "password" to "text" and reload, the password doesn't appear in this field but in "confirm password". And no longer appear (nor the username) if I do this to both.
The last point seems to confirm that (in my case at least), when Firefox has a saved username/password for a website, it tries to fill the infos to the first password-type field he finds, then fills the first previous text-type field.
As you can see in the code, it does this even if I put an autocomplete="off" on the field.
So Firefox auto-filled the wrong form, which even have different field names (and differents fields id), with saved login informations. Is it a known-behavior ? is there a way to prevent it (as the autocomplete doesn't seems to do the job) ?
Just to prevent another answer, I removed multiple times all datas from Firefox's password manager, it's not about old stored fields names.
Finally, I found a working answer here : https://stackoverflow.com/a/29852908/1459054
While searching, this "bug"... sorry, "feature", exists for more than 10 years in Firefox, I saw multiple bugs reports about this tagged "WONTFIX" because it's the expected behavior ("Password manager shouldn't rely on field names") that makes the login informations popin anywhere it can fit, and because "it doesn't concern many users, so its not important to fix".

How does Google Chrome recognize a login form?

I faced an issue recently where Google Chrome offers to save username and password for a login form, but took a different field value than the username-field to store as username.
Does anyone know which criteria are used by chrome to determine the username and password in a login form?
My guess (but cannot find documentation to proof it):
take first text-field as username
take first password field as password
When a website developer creates a login form on their website, they usually add specific HTML tags to the form to identify it as a login form. When a user visits the website and clicks on the form, the browser recognizes the HTML tags and knows that the form is a login form. The browser may then offer to save the user's login information, so that the user doesn't have to enter it every time they visit the website.
Here is an example of a login form with HTML tags:
<form action="/login" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
In this example, the form tag specifies that this is a form, and the input tags with the type attribute set to "text" or "password" specify that this is a login form.

Encrypting a textfield in HTML

I have a text field in my HTML project that I want to encrypt as a password.
So basicaslly instead of this being displayed in the text field:
mypassword
I want it to say:
*********
or something close to that.
So basically just making the text that the user inputs not to be visible.
How do I do this?
Use <input type="password" />
You're looking for <input type="password" />.
Note that this has nothing to do with encryption.
This has nothing to do with encryption, it's just a form field type, you can use the following:
<input type="password" name="password"/>
However, uploading whatever is entered in here when the user submits will send it plainly across the internet unless you're using HTTPS with a valid SSL certificate, which will encrypt all communications between the user and your site and is recommended for anything with a login.
You can use < input type="password" > like this to hide your password with stars.but it is not enough when you upload your password .you should use PHP or something else
Just put this in your existing code where you put your textbox
<input type="password" name="password"/>
This will not let you see what you enter and code it with stars, as default.