Vue js : can't change saved password in Chrome - javascript

i have an issue, i have a login page to my website, and when i'm connecting and click on "Save password" on Google Chrome, i can't change my password anymore:
My password field auto fill with the password of the mail, and when i try to enter another one (with the email still in the email field), but it keeps re auto fill with the old password (every second or so), here is my password input:
<input class="form-control" required name="password" :placeholder="$gettext('Password')" type="password" v-model="password">
I don't have any code or function that change the password model.
If someone have an idea from where it can come, i'll be really thankful.

Related

Why not ask to save password in IE 11

IE 11 version : 11.0.115
if add eventListner to username or password element,
Do not ask me about saving password in IE11
How do i fix it ?
<form id="logintest" action="./test.html" method="POST">
<input id="username" type="text" name="username" onblur="this.value=this.value.toUpperCase()" />
<input id="password" type="password" name="password" />
<button type="submit">Go</button>
</form>
Open Internet Explorer.
Select the gear on the right side of the main toolbar and choose “Internet Options“.
Select the “Content” tab, then select “Settings” in the “AutoComplete” section.
In the “Use AutoComplete for” pane, do one of the following:
Uncheck the “Ask me before saving passwords” box to stop IE from prompting you to save passwords. Passwords will still be saved on some occasions. Check the box if you wish to be prompted for saving passwords.
Uncheck the “User names and passwords on forms” to completely prevent IE from saving usernames and passwords. Check the box to enable it. You may also want to select “Delete AutoComplete history…” if you wish to clear any passwords IE has already saved.
Select “OK“. Close and restart Internet Explorer for the changes to take effect.

Setting correct autofill username and password

In my angular application I have a registration form which has the following fields in the same order
1) email id
2) otp
when the otp is entered the below fields becomes visible
3) full name
4) password
The last element is the submit button.
When we click on submit button the browser prompts the user to save the username and password.
I want the Autofill to save email as the username but its taking the fullname as the username. I tried adding a hidden field with Email filled but it worked on Firefox and dint work on Chrome
Is there any other way to achieve this by not editing the order of the form elements?
Adding html for the inputs
<input type="email" [(ngModel)]="email" name="userName" required />
<input type="text" [(ngModel)]="fullName" name="fullName" id="fullName" #fullName="ngModel" dirname="fullName" />
<input [(ngModel)]="password" id="pwd" type="password" name="password" #password="ngModel" required />
Please guide
Thanks!

Password field outputs in plain text using console.log()

I discovered something interesting today while messing around with the password fields in Google Chrome.
Interestingly, outputting the value of an input of type 'password' to console using console.log(password); totally negates the idea of obscuring the password fields by printing the password in plain text in the console.
var password = $('#password').val();
console.log(password);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control text-box single-line input-validation-valid" id="password" name="password" type="password" value="test">
Would this cause any security issues at all?
The value of all textual input controls is the text that was typed in it, irrelevant if it is a password input or not. The only difference that type="password" makes is that it obscures the text in the web view.
You can even call up the Dev Tools to inspect a password textbox, change type="password" to type="text" and BAM you suddenly see the plain text that you typed.

Prevent angular validation from occurring while entering data

I have a form with an email field. I would like to prevent the user from submitting unless the email address exists and is valid. However, I only want these errors to appear when toggling out of the email field or clicking sumbit. My "invalid email" message is appearing WHILE the user is typing the email and remains visible until they've finished entering a valid email. How can I prevent this behavior?
<div ng-show="emailMeForm.Email.$error.required" class="errorMessage">
You must enter an email
</div>
<div ng-show="emailMeForm.Email.$error.email" class="errorMessage">
Email address invalid
</div>
<form name="emailMeForm" novalidate="">
Email Address
<input ng-model="vm.emailAddress" type="email" name="Email" />
<button ng-click="emailMeForm.$valid">Continue</button>
</form>
Must be sufficient:
ng-show="emailMeForm.Email.$touched && emailMeForm.Email.$error.required"

Is there a way for a form to identify only one required field

For instance in this example;
<form>
<input type="email" name="email" id="useremail" placeholder="Email Address" required> <br>
<input type="tel" name="phone" id="userphone" placeholder="Phone Number" maxlength="10" required> <br>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
Reword: Can at least one of the form inputs be mandatory, both is allowed as is one or the other but not none. In the above example, the user needs to have at least one form of communication whether that be phone number or email. They can have both however, but not none.
If so, how would you go about this?
You can easily capture the change events from the inputs and set the required attribute accordingly.
Like this:
var email = document.getElementById('useremail'),
phone = document.getElementById('userphone');
function onchange(){
email[phone.value?'removeAttribute':'setAttribute']('required','required');
phone[email.value?'removeAttribute':'setAttribute']('required','required');
}
email.addEventListener('change',onchange);
phone.addEventListener('change',onchange);
jsfiddle
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
1) No. If you use HTML5 required on a field then that field is required. There is no way to specify interdependence.
2) Yes. You can use client-side javascript validation, generally hooked to a form submit event to do as-complex-as-you-like validation. Prevent the submit by returning false from the event handler if you don't pass validation.
3) Yes. You can do validation that can be as complex as necessary on the server when you have received the submitted form, and return directly to the form if something is wrong.
3b) You Must do validation on the server, even if you have great client-side javascript validation, otherwise I will buy things from your site for one penny. You must not trust the client.

Categories

Resources