I've got a web application that uses a two page authentication process:
- Capture the username and password from the user (
login.x.com/#/login) - Capture three characters from the users "memorable word" (
login.x.com/#/login/memorable)- Submit the details to the server via the AngularJS $http service (POST)
- Process the response and either continue to step 3, or repeat step 2
- Redirect user to their home page (
app.x.com/#/dashboard)
The second step currently consists of three single character text fields (<input type="password" maxlength="1" size="1" ...... />) where the user is prompted to enter characters m, n and o from their memorable word.
The problem lies between steps 2 and 3; currently Chrome prompts the user to update their password for the site, with one of the single characters they've entered from their memorable word. I have no desire to stop the user storing their password, but I would like to work out how to stop Chrome from attempting to update their password with one of the characters from their memorable word.
Things that I've tried, without success:
- Setting
autocomplete="off"on the memorable word character inputs - Setting
autocomplete="new-password"on the memorable word character inputs - Setting
autocomplete="memorable-word-character"on the memorable word character inputs. This isn't a "well known" autocomplete "type" but was tried on an "it can't hurt and is worth a go" basis <input type="password" style="display:none"/>as suggested in answers to some other questions
I'd prefer not to change the UI significantly, e.g. Changing the input type so it's no longer password, or changing the text fields to drop-downs. The latter is because we currently permit any character, other than a space, to be used in the memorable word so it's not really viable.
Is there a standard and accepted way to tell Chrome (and other browsers) that these fields are not the users password field?
