login/logout simulation using only JS

Question:

Required to implement the behavior of login to a website and then logout from the website.

At least you need to create 2 html web pages as following :

1- Page number 1: it's the login page contains:

a. Sign in form : username and password fields, and sign in button.

b. If correct username and password entered, you direct the user to the main page which is page 2, if not, display an error message.

c. If the user logged in successfully, user should be allowed to logout, which redirect the user again to the login page and user can't access the second page unless he's logged in.

2- Page number two: it's the main website, with any basic content, this page must contains logout button.

FORM VALIDATION You should restrict data input by using validation rules on:

Empty Inputs: username and password cannot be empty

Values: password must have at least 8 characters

Display a suitable validation message beside each field if it violates the restrictions

- answer shall be simple with no complexity it's just a simulation no data base or node.js or sessions .. needed as well as no arrays needed it's only 1 user name and 1 password direct match for 1 value

- answer only with the java script code no need for html form part as the form is simple style to be created.

- answer should focus on login validation username password incorrect values should display an error message not an alert and should be beside each field of the error

- answer should simplify each step and explain to beginners/non experts how it's done and should be provided in understandable simple way with the simplest possible solution