I have created a login form in flutter web, when I login, chrome detects the password that was entered, but offers only to save the password, while the username stays blank.
Google suggests the following HTML form so that credential manager can detect the credentials that needs to be stored.
<form id="signup" method="post">
<input name="email" type="text" autocomplete="username email">
<input name="display-name" type="text" autocomplete="name">
<input name="password" type="password" autocomplete="new-password">
<input type="submit" value="Sign Up!">
</form>
In my form I used both email and username but chrome credential manager is still not able to detect the username.
How can we create the form with autocomplete tag in flutter web?
Flutter supports now autofill (password, email, username, etc.) ☑️ The merged pull request with an example: https://github.com/flutter/flutter/pull/52126
Example:
#override
Widget build(BuildContext context) {
return AutofillGroup(
child: Column(
children: <Widget>[
TextField(controller: username, autofillHints: [AutofillHints.username]),
Checkbox(
value: isNewUser,
onChanged: (bool newValue) {
setState(() { isNewUser = newValue; });
},
),
if (isNewUser) TextField(controller: newPassword, autofillHints: [AutofillHints.newPassword]),
if (isNewUser) TextField(controller: repeatNewPassword, autofillHints: [AutofillHints.newPassword]),
if (!isNewUser) TextField(controller: password, autofillHints: [AutofillHints.password]),
],
),
);
}
You may need to switch to dev or master channel (flutter channel master).
Related
I have a form that looks like:
<form method="POST">
<label>Your name:
<input name="name" required>
</label>
<input type="submit" onclick="this.form.submit(); this.disabled=true; this.value='Sending…';">
</form>
The form's backend takes upto 10 seconds to respond (blockchain!), hence the disabled input to prevent multiple retries. However it then breaks the required validation and users can send in empty payloads.
Any tips how to prevent this using Vanilla or maybe VueJS?
Many thanks,
Using Vuejs you can try :
#submit.prevent="action" in form tag instead of onClick....
add async await with try catch
if you want you can also disable your button in submit to be sure users can't send an empty payloads
here's a gist code : https://gist.github.com/jiyuuki/e6f8f7bb67b48014223d1561119ac2fa
Try to control the button with a data property like below.
export default {
name: 'Form',
data() {
return {
isLoading: false,
}
},
methods: {
async submitForm() {
this.isLoading = true;
await this.form.submit(); // Assuming this is where you make the time taking call
this.disabled=true;
this.value='Sending…';
}
}
}
<form method="POST">
<label>Your name:
<input name="name" required>
</label>
<input
:disabled="isLoading"
type="button"
#click="submitFrom">
</form>
Reset the isLoading to false after the response reaches.
Here I am trying, while user enters a data in a form input fields. suppose like I have a category field and I have entered a category in that field as well in title field and I have entered a title in that field and so on. I have entered a value to the input fields and if user navigate to any other pages or if user logout from the session and again user login the entered data or value in an input field that should not vanish the value should as it is if user navigate to other screen or user logout the session. How can we achieve that in vue.js I am trying but failed. I want to achieve if user navigate to other screen or logout the session it should not vanish or refresh the entered data the data should as it is.
<div>
<h1>Post Ad</h1>
<p>
<input type="text" v-model.lazy="category" placeholder="Search your category"
name="category" maxlength="200" id="id_post_type">
</p>
<p>
<input placeholder="Title" type="text" v-model="title" name="title" maxlength="60">
</p>
<p>
<input type="text" placeholder="Address" v-model="address" name="address">
<input type="text" placeholder="City" v-model="city" name="city" maxlength="100">
</p>
<p>
<input type="text" placeholder="State" v-model="state" name="state">
<input type="text" placeholder="Zip" v-model="zip" name="zip" maxlength="50">
</p>
<p>
<input type="number" placeholder="Price" v-model="price" name="price" step="any">
</p>
<p>
<textarea name="description" v-model="description" placeholder="Ad description.."></textarea>
</p>
<button style="background-color:lightgray"id="buttonDemo" style="outline:none;" class="step1_next" #click.prevent="next()" >Next</button>
</div>
vue.js
<script>
new Vue({
el: '#q-vikreya',
data() {
return {
step:1,
category:'',
title:'',
address:'',
city:'',
state:'',
zip:'',
price:'',
description:'',
methods: {
submitForm: function(){
axios({
method : "POST",
url: "{% url 'PostAd' %}", //django path name
headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
data : {"category":this.category, "title":this.title,
"address":this.address,
"city": this.city,
"state": this.state,
"zip": this.zip,
"price": this.price,
"description": this.description,
"radio_price": this.radio_price,
"Job_title": this.model,
},//data
}).then(response => {
console.log("response");
console.log(response.data);
this.success_msg = response.data['msg'];
window.location.replace('{% url "classifieds" %}') // Replace home by the name of your home view
}).catch(err => {
this.err_msg = err.response.data['err'];
console.log("response1");
console.log(err.response.data);
});
},
},
})
</script>
What I think you are trying to do is when a user has not submitted the form and has left the page you want it to reload the data. For this you can use localstorage. If you want it to load the data in from the server, then you would need to make a call to the server and get the data back, then load it in with the mounted life-cycle hook.
What you would want to do is hook into the Vue instance before it is destroyed by using the beforeDestroy life-cycle hook. Then you would want to save the data to localStorage. First, you would want to grab all the data you want to save or the entire data object (by using this.$data), and convert that to JSON as localStorage cannot accept complex datatypes. Then you would commit that to localStorage like so:
beforeDestroy(){
localStorage.formSave = JSON.stringify(this.$data);
}
Next time, when the user opens the page you want to get all the data from localStorage and load it back to an object. We will need to use JSON.parse() to convert it from a string into an object. For this, we will use a loop so we can ensure that if the data object has had fields added we are not overwriting it. For this we will tap into the the mounted life-cycle hook.
mounted(){
let dataFromLocalStorage = JSON.parse(localStorage.formSave);
for(const key in dataFromLocalStorage){
this.$data[key] = dataFromLocalStorage[key];
}
}
If you want to protect against refreshes as well you can add onbeforeunload this will catch reload events before they happen. Then you can call $destroy() to manually trigger the destroy lifecycle. You would either add this to the created life-cycle hook or the mounted life-cycle hook.
window.onbeforeunload = () => this.$destroy();
Here is a working example on codesandbox
I am working on a legacy react app. There are keybindings in the project. For this example let's say when a user clicks "F", then the the app goes to full screen. The issue is that this keybinding is active for some input fields like email and password.
When I type into a non labeled input field, and i type "F", nothing happens, like:
<input
value={this.state.firstName}
placeholder="First Name"
name="firstName"
required
onChange={(event) => {return this.handleChange(event, 'firstName', event.target.value)}}/>
However if I have email or password as the label, then when i type "F", it goes full screen like
<input
value={this.state.password}
placeholder="Password"
name="password"
label="password"
required
onChange={(event) => {return this.handleChange(event, 'password', event.target.value)}}/>
private handleChange = (event: any, key: string, value: string) => {
event.preventDefault();
this.setState<never>({ [key]: value } as Partial<LoginFormState>);
}
How can i stop this behavior on password and email without undoing all of the key bindings and rebinding them?
Have you tried to use event.preventDefault() ?
<input
value={this.state.password}
placeholder="Password"
name="password"
label="password"
required
onChange={(event) => {
event.preventDefault();
return this.handleChange(event, 'password', event.target.value);
}}
/>
I'm not sure it's a clean solution though, you might want to provide more details for a better solution.
I just noticed, you should not pass event.target.value as an argument, since you already pass event. You can just access event.target.value directly into this.handleChange.
Often on a website, if I enter the wrong password by mistake, I get a page back that indicates the wrong credentials, but Chrome (Or whatever) prompts me with "Would you like to remember this password?"
Is there any way to hint to the browser that now is not the time to ask, so that it only prompts if the user enters a correct password?
You could use JQuery & Ajax to post the login form to the server and recieve a response back without ever reloading the page, thus avoiding this problem altogether.
EDIT
Something along the lines of this (untested):
<div id="error"></div>
<form id="loginForm" method="post">
<input type="username" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="Login">
</form>
<script>
$(function(){
$('#loginForm').submit(function(){
// Ajax to check username/pass
$.ajax({
type: "POST"
, url: "/login"
, data: {
username: $('#username').val()
, password: $('#password').val()
}
, success: function(response) {
if(response == 'OK'){
$('#loginForm').submit()
} else {
$('#error').html('Invalid username or password')
}
}
})
})
</script>
No. The browser displays the message at the moment the form is submitted. It doesn't wait for the server's response, so there's no way to tell wether or not the password is correct.
Slightly related:
How can I get browser to prompt to save password?
https://wiki.mozilla.org/Firefox%3aPassword_Manager_Debugging
I'm trying to make a signup form via html/django so I have 3 input boxes for the user to put in the email, username, and password that then sends them via POST to /adduser
<form action="/OmniCloud_App/adduser" method="post">
{% csrf_token %}
Email Address: <input type="text" name="email" /></br>
Username: <input type="text" name="username" maxlength=25 /></br>
Password: <input type="password" maxlength=30 /></br>
</br>
<input type="submit" value="Send" /> <input type="reset">
</form>
adducer creates a new User and saves it to the DB:
def adduser(request, email, username, password):
u = User(email=email, username=username, password=password)
u.save()
return render_to_response('adduser.html', {'email':email, 'username':username, 'password':password})
but when I click submit on /signup, it complains that I am only giving it 1 parameter when 3 were expected. How should I pass the email,username, and password fields from signup.html to the username function (located at /username)?
If you read part 3 of the tutorial, you'll see that the view function expects parts of the URL itself as arguments. If you read part 4 of the same tutorial, you'll see that POST parameters come in via request.POST. Further in the documentation, you'll learn that you can write Form classes that handle both the generation and validation of HTML forms.
they will be in request.POST, which you can query like you would a dict
email = request.POST.get('email')
username = request.POST.get('username')
password = request.POST.get('password')