DEV Community

Cover image for Alternative user login interaction
Arnold Velzel
Arnold Velzel

Posted on • Originally published at codepen.io

1 1

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)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay