Prestashop Authentication Window

Description

This page allows any authorized user to connect to the PrestaShop back-office.

Prestashop Authentication Window User Interface

Flipped send reset link

QA

Link to the test

Components description

Top UI Section

• The top section represents the Prestashop main title name and the Prestashop version, that the administrator is accessing.

• Prestashop version .

Middle UI Section

• Logo - PrestaShop's logo.

• Shop name - the shop name, that was defined during the installation process of Prestashop application.

• Email address - email input - Email from a SuperAdmin or Employees acount must be used to log-in.

• Password input - Password of the email account above from a SuperAdmin or Employees must be used to log-in.

• Login button - Allows access to the back office after verifying that the user is authorized to log-in.
• Stay logged in checkbox - The browser will remember the logging-in status, and the administrator will not be required to input email and password in the next attempt of logging-in. The administrator will be authenticated and redirected to the dashboard instantly .

• I forgot my password - specific link, in case administrator forgets the PrestaShop authentication password. Once clicked, the UI instantly flips to the new UI which contains the email input.

If the email, that is being typed in the main login form, is incorrect, the UI will be prompted with the instant error message Please enter a valid email address.

If the email or password, that is being typed in the main login form, is incorrect, the UI will be prompted with the error message There is one error. The employee does not exist, or the password provided is incorrect.

If the password, that is being typed in the main login form, is incorrect, the UI will be prompted with the error message There is one error. Invalid password.

Flipped send reset link form UI Section

• Logo - PrestaShop's logo.

• Prestashp version - numeric value of the Prestashop version.

• Forgot your password? - question title.

• Email address - title of the input, for password resetting.

• Cancel - back-flips the UI to the main administration UI form.

• Send reset link - Call-to-action button that initiates the password resetting.

Input

Description	Value	Error message
Mandatory	YES	This field is required.
Allowed/Forbidden values	Only letters, numbers and @	Please enter a valid email address.
Default value	Empty field	-
Help text	-	-
Tool tips	-	-
Lower limit	0	-
Upper limit	Unlimited	This account does not exist.
Behavior	link to the behavior	-

Bottom UI Section

The Bottom UI elements remain the same for main login form and flipped send reset link form:

• Back to Front-Office - the link, navigating to the Prestashop Front-Office parent home page.

• Copyright - Prestashop all rights declaration text.

• Social networking - official social networks of Prestashop: Twitter, Facebook, Github and their links.

Behaviors description

Send reset link CTA behavior

After typing the email into the input, clicking the button Send reset link, a link will be generated and sent to the defined email. The email message will contain unique URL. Clicking that unique URL from email, will redirect to Reset your password form. The form will contain New password and Confirm new password inputs, and those fields are mandatory to fill. After filling new password and retyping new password again in required fields, Reset password button should be clicked. Cancel button will back-flip the UI into the main login screen.

If the email reset attempt is successful, the message will appear Please, check your mailbox. A link to reset your password has been sent to you.

Input field in Flipped UI behavior

The place where the email is typed in. There is a placeholder defined in the input - email icon and example email variable [e-mail]. The component is from Forms Normal UI Kit.

Login CTA

After successful login to the webshop, the user will be redirected to the Dashboard page, by default. The main page redirection can be set separately in administration options.

Error messages

If users' email link clicking attempt is successful, there will be a redirection back to the Prestashop administration UI with the success message Your password has been successfully changed. You will be redirected to the login page in a few seconds. Then administrator will be able to log in using the new password, in the main login form.

If the email that is typed, doesn't exist, there will be an error notification message There is one error. This account does not exist.

If there is no email input text submitted, the Email address title becomes in red color, red notification message appears below the email input This field is required. and the input becomes with red background.