Depending on the used technology, assume an Authentication service, facade or end point. It has a method to authenticate a user based on the user's phone, email or user name and her password. The call returns an AuthenticationResult which indicates success and an optional message. From now on the combination of a user's phone, email or user name is called the user's lookup.
- There is a user name field, which is limited to 20 characters.
- The label "Phone, email or username" is left, next to the input field.
- There is a password field, which is limited to 20 characters.
- The password is either visible as asterisk or bullet signs.
- The label "Password" is left, next to the input field.
- There is a label in a red box above the button(s). It is only visible if there was an error.
- There is a "Log in" button in the bottom right corner of the window.
The logic uses the Authentication backend described above. Calls to the backend might take some time (i.e. might block), so these calls must done asynchronously.
- User name and password given, button "Log in" clicked, backend reports success, then the form is closed.
- User name and password given, button "Log in" clicked, backend reports an error, show message in error line, form stays open.
- While the backend is working, the "Log in" button stays disabled.
- While the backend is working, the mouse cursor is indicating busy.
- While the backend is working, a dedicated "Cancel" button is displayed, which cancels the backend.
- Username is blank, "Log in" button is inactive.
- Password is blank, "Log in" button is inactive.
- Window title or page title or border title is "Login to Clean Code Center"
- The Code Cop logo is displayed on top of the window, centred. See ApplicationLogo.
- The message "Welcome to Clean Code Center!" is displayed, centred below the logo.
- Background color is white.
- Border around everything is 1px dashed, with colour #cccccc.
- Welcome text is 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif, with colour #cc6600 (orange), size 15 pt.
- All other text is Georgia, Serif, with colour #333333, size 12 pt.
- Error messages are prefixed with little red error icon, form of an (X).
An icon
icon-library.net_error-image-icon-21is provided. Taken from Error Image Icon #95181. - The "Log in" button is dark blue.
- When it opens, user name field is focused. The focus is shown by a yellow rectangle around the field.
- Tab moves focus through fields: user name, password, ..., Log in button.
- There is a link or button "Forgot Password" in bottom, left corner.
- There is a check box "Remember Me". If it is enabled, the backend is notified after a successful login.
- Enter on user name field triggers log in.
- Enter on password field triggers log in.
- There is a check box "Show Password" below the password input field, initially off.
- If Show Password is enabled, the password is visible. If it is disabled, the password is invisible again. This happens during typing.
- While typing in user name field, if Caps Lock is on, display a warning next to field "Caps Lock is on".
- While typing in password field, if Caps Lock is on, display a warning next to field "Caps Lock is on".
- Warning texts are prefixed with little orange warning icon (!)
An icon
icon-library.net_error-image-icon-11is provided. Taken from Error Image Icon #95188.
- A Captcha is displayed on 10+ try to login unsuccessfully. Refresh Captcha on each try.
