Frontend Documentation

Registration page Screen

Registration form

The Registration page take user to a HTML form for registering a new user in the system which has following fields:

• First Name (String)
• Last Name (String)
• Current Location (String)
• Current Company Name (String)
• School (String)
• Years of Experience (Drop-down)
• Email (String)
• Password (String)

All the fields are compulsory and Email Address is a unique text field and each user should have a unique organizational email address.

The form response is used as a request payload for /register API when the user clicks the REGISTER button.

The form will support validation of the frontend which is used to check for empty fields and wrong input (like email address validation). User is prompted about failed validation while filling out the form.

Already a user?

If the user is already registered then, they can proceed to the login form using Back to login? which redirects to /login API.

Forgot password?

If the user forgot the password then he can use Forgot Password to reset the account password.

On successful Registration

On successful registration, the user is redirected to the user profile page. On failure, the user is redirected to the registration form.

---

Login Page Screen

Login form

The Login page will enable the user to login to their account by entering the following details :

• Email (String)
• Password (String)

All the fields are mandatory and the user has to be registered to be able to login.

The form response is used as a request payload for /login API when the user clicks the LOGIN button.

The form will support validation of the frontend which is used to check for empty fields and wrong input (like email address validation). User is prompted about failed validation while filling out the form.

Not a registered user?

If the user is not registered then, they can proceed to the registration form using Register? Button which redirects to /register API.

---

Edit Profile Screen

• The API that edit user screen uses is

http://localhost:3000/edit-profile

Edit Profile Form

• The “First Name” textbox should use the first_name field value from the GET response payload.
• The “Last Name” textbox should use the last_name field value from the GET response payload.
• The “Current Location” textbox should use the current_loaction field value from the GET response payload.
• The “Current Company Name” textbox should use the current_company_name field value from the GET response payload.
• The “Current Position Title” textbox should use the current_position field value from the GET response payload.
• The “School” textbox should use the school field value from the GET response payload.
• The “Years of Experience” textbox should use the years_of_experience_id field value from the GET response payload.
• The “Email Address” textbox should use the email field value from the GET response payload.
• The “Password” textbox should use the password_hash field value from the GET response payload.

The form response is used as a PUT response payload for /edit-profile API when the user clicks the SAVE CHANGES button.

---

Navbar

Home

• The Home in the navbar directs to the home screen using the http://localhost:3000/home API.

Requests

• in the navbar are direct to the home screen using the http://localhost:3000/posts API.

Edit Profile

• in the navbar directs to the edit profile screen using the http://localhost:3000/edit-profile API.

Posts

• in the navbar direct to the creation of posts screen using the http://localhost:3000/create-post API.

Logout

• in the navbar directs to the login screen using the http://localhost:3000/login API.

---

Home Page Screen

If the user has any previous posts requesting referral then these posts will be displayed to the user on the Home Page after the user logins.

Previous Post Form

Following information related to previous posts will be displayed on the Home Page

• Target Position with Company Name
• Name
• Email
• Current Location
• Years of Experience
• School
• Job Id
• Message from you
• Download Resume Button

The user will be able to delete the post, if the user no longer wants that referral.

---

• These are mock-up screens, and after clicking Save Changes the above fields call PUT API.
• The UI/UX aspect of the front-end will be updated in later sprints