Improving Aksesi usability – refactoring frontend

It’s been a week since the last post. In the following one, I’m going to summarize you what I’ve changed it the Aksesi since then. I decided to refactor some parts of the frontend application. Moreover, I managed to simplify installation and configuration process. The major part of integration is done “in the background” and a user does not have to care about it.

I would like to remind you that all of the sources are available in my Github repository. Moreover, in the README file, you can find short project description with its main assumptions.

Configuration

First of all, everything a user has to do is to add Aksesi JavaScript files into the head section and call initialize method. Since now, the configuration is fairly easy:

In the future, Aksesi will be configurable with only one JavaScript file. Of course, I can merge those three into one but this solution doesn’t make me feel satisfied. I’m looking for a better solution.

The initialization method takes as an argument id of a form that is used in the authentication process. Temporarily I also added an argument which is responsible for appending developers console.

Initialization process cares about:

  1. marking password input as a character area
  2. adding the gesture area
  3. setting up Aksesi event handlers
  4. appending developers console
  5. allowing Aksesis module to take control of login process, i.e. preparing message content, forwarding requests to the proxy

User Interface

One of the most important aspects when using Aksesi in the authentication process is its usability. I spent some time on trying to think out how the gesture area should behave. I had an idea about showing a modal after focusing the password input. Another one was to put the gesture area and the password input in the same line. It was nice but when I implemented this, login form looked horrible. Input with 300px of width, 100px of height, gesture area as 100px square. Those two big elements may destroy whole layout impression.

The most sensible idea was to show the gesture area below focused input. I think that implemented solution looks very nice.

As you can see I also added some styles to make it prettier. Now the login form doesn’t look like form for only development purposes.

In the next post, which I hope will be longer, I will describe how to send data from the frontend module to the proxy application.

You may also like

Comments