mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-08 03:58:25 -04:00
33b15cdec6
We keep seeing Chrome: - autofilling the sign in form with a phone number in the email box - autofilling the register form with an email address in the phone number box This is because Chrome tries to autofill what it considers to be a _login_. It detects a login as being: - a password field - preceded by a text input field On the sign in page the password field is preceded by a field which is supposed to receive an email address. On the register page the password field is preceded by a field that’s supposed to receive a phone number. I suspect that this is why it’s missing the two up. The solution to this seems to be to defeat Chrome trying to be clever, and make it autocomplete based on the `name` of the fields instead (we name them sensibly, e.g. `email_address`, `phone_number`). The way to defeat it seems to be sticking a dummy `input` right before the password field on the register page. This dummy input is hidden from the page and from screenreaders, so a user should never know it’s there. but Chrome will autofill it anyway, with whatever wrong value it wants to.
26 lines
941 B
HTML
26 lines
941 B
HTML
{% extends "withoutnav_template.html" %}
|
||
{% from "components/textbox.html" import textbox %}
|
||
{% from "components/page-footer.html" import page_footer %}
|
||
|
||
{% block per_page_title %}
|
||
Create an account
|
||
{% endblock %}
|
||
|
||
{% block maincolumn_content %}
|
||
|
||
<div class="grid-row">
|
||
<div class="column-two-thirds">
|
||
<h1 class="heading-large">Create an account</h1>
|
||
<form method="post" novalidate>
|
||
{{ textbox(form.name, width='3-4') }}
|
||
{{ textbox(form.email_address, hint="Must be from a central government organisation", width='3-4', safe_error_message=True) }}
|
||
{{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
|
||
<input class="visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
|
||
{{ textbox(form.password, hint="At least 8 characters", width='3-4') }}
|
||
{{ page_footer("Continue") }}
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{% endblock %}
|