Automatical Button-Less Login

I'm working on a project where we want to setup a button-less login form.

The idea is, if you enter your credentials correctly, you will get logged in automatically (don't have to press ENTER or click a "Login" button). For indication, you have an icon with two states:

  1. The icon is a key, indicating you're locked out
  2. The icon is a keyboard, indicating you're typing and the system is waiting for you to finalize typing

So the process is the following:

  1. You enter your e-mail
  2. You switch to the password field (indicator is a key icon)
  3. You start typing, indicator switches to the keyboard icon

  4. When you stop typing (after a delay of X ms) the system will attempt to login with the provided credentials

    a) If your e-mail/password combination is wrong you will get an error message saying that and indicator goes to key icon back

    b) If your combination was right, you will be logged in

The password complexity is 8 characters minimum, 1 lowercase-, 1 uppercase, and 1 special character. The system will only start attempting to log in if that complexity is given in the password field.

There will also be an icon that will expand a tooltip upon hover explaining how the system works. You can trigger the login at any time by hitting the ENTER key.

The X ms delay will be something like 500ms + the average time the user needed for 1 character (we have that time because we only start checking after the user entered at least 8 characters), so the user has enough time before the system attempts to log him in.

The maximum attempts will be set to something like 30 or 50, for people with very long passwords and an unpredictable write-styles.

Something like fail2ban will prevent brute-force attacks.

It's written in JavaScript and reacts on onKeyUp-events, so every time you press a key and release it, it will fire up an event if password complexity is reached it will trigger the login attempt. That means, if you have auto-completion in your browser enabled, you would have to enter the password field in some way (for example by pressing TAB, because the e-mail field has the focus when you load the page, which will trigger the onKeyUp event because you release it inside the password field - or by clicking inside it (and then pressing any key, of course pressing a character key will invalidate, because pressing e.g. "A" will change the password, but pressing ENTER or UP, DOWN, CTRL, etc. will work).

What do you guys think of that?

I have some code but the actual code isn't really that relevant. In pseudocode:

<Form>
   <Field 
      name="e-mail"
   />
   <Field 
      name="password"
      onKeyUp={ submitForm(); } 
   />
</Form>


attempts = 0;

function submitForm() { 
   /* set indicator icon */
   if (password == complex) {
      this.attempts = attempts;
      await setTimeout(500ms + averageKeyPressTime);
      if (this.attempts == attempts) {
         attemptLogin();
      }
   }
}
Tags: