DEV Community

Cover image for Alternative user login interaction
Arnold Velzel
Arnold Velzel

Posted on • Originally published at codepen.io

Alternative user login interaction

While working on a new project, one of the first things is often the login/authentication.
We all know the common way of doing these things, but I wanted a more engaged way of processing the login/authentication and came up with the following...

https://codepen.io/a-vision/pen/ZEEJWYY

This shows an alternative way to interact with the user on a login page.

It shows a ripple effect around the login form whenever the user interacts with the form.

Initially, a subtle ripple is shown after loading the page, then whenever the user enters a character in the input fields (username/password), the same subtle ripple is shown.

When the form is submitted, three consecutive less subtle ripples are initiated, once the authentication has taken place, either a green (success) coloured ripple or a red (error) ripple is initiated.

This assumes the form is submitted using an AJAX call.

Top comments (0)