0% found this document useful (0 votes)
32 views2 pages

675422588264d Frontend Engineer Task

Uploaded by

Piyush Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
32 views2 pages

675422588264d Frontend Engineer Task

Uploaded by

Piyush Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Requirements

Figma link →
https://www.figma.com/design/rvldhbeY0NnQlXQkxUi8EW/LoginPage-Task?node-id=12
1-272&node-type=frame&t=Fh91s016w3NZAgQh-0

1. General Features
a. The page should include "Login with Google" and "Login with
Facebook" options (no action required).
b. A login form should include:
i. Fields for Username, Email and Password with proper
placeholders and icons.
ii. The username should only accept "emilys".
iii. A "Remember Me" checkbox.
iv. A "Forgot Password?" link. (no action required)
v. A Login button, styled according to the design.
vi. A "Register" link for new users (no action required).

2. Validation & Api Integration


a. Ensure the email follows the proper format (e.g., [email protected]). Show
an appropriate validation message if the format is incorrect.
b. The password must contain a minimum of 8 characters. Display a validation
message if the password does not meet this requirement.
c. The username should accept only "emilys". Show an error message if the
username is invalid.
d. Send the validated login credentials (username/email and password) to the
following API: https://dummyjson.com/auth/login
e. Send login credentials to the API https://dummyjson.com/auth/login
{

"username": "emilys",
"password": "your password",
"email": "email id ", // optional
"expiresInMins": 30 // optional
}

f. Store the authentication token and/or user data in localStorage. Redirect


the user to the main page in a logged-in state.
g. If the user is already registered (i.e., data exists in localStorage), they should
be automatically redirected to the main page without requiring login.
h. Inside the main page click on logout button remove user data from local storage
and redirect to the login page

3. Logout Functionality:
a. When the Logout button is clicked on the main page remove the stored
authentication token and/or user data from localStorage and redirect the
user back to the login page

4. Route
a. example.com/auth/login for login page (use your domain for example.com)
b. example.com/home for main page

5. Responsiveness
a. The page should adapt to various screen sizes (desktop, tablet, mobile).

Best of Luck

You might also like