Make a login web page for HumanUsers

PranilDahal commented 6 years ago

REQUIREMENTS

DISCUSS UI DESIGN WITH DERIC BEFORE YOU START CODING.
Start coding after your UI design is finalized and reviewed.

YOU DONT NEED TO HAVE SERVER RUNNING FOR THIS TASK. In fact, you can do this outside the project (or u can use some online website to design the html or just steal code from somewhere. up to you guys). Do it outside the project directory and once your'e done, put it inside frontend/pages/login folder.

Make a really nice user login vue template. (make a html file if that's easier)
For css, put in in login.css (becasue the css file we have right now is very crowded)
Users should be able to enter thier username and password.
Username shouldn't be an email (it should be something else like john123, etc). Do the check using javascript.
If user enters invalid form of username, give them an error
Have a button called "Login" that user can press after entering theirinformation (they should be able to press enter to trigger it)
The button doesn't do anything for now, we will need to wait AFTER the backend has the login/logout verification implemented. Just keep the webpage in the frontend repository.
Code must be clean, well formatted. Must be comments in the code so people can understand it.

hint https://colorlib.com/wp/html5-and-css3-login-forms/ choose one of these and customize it to fit the design we want

exelarios commented 5 years ago

All image assets are provided in the drive folder: https://drive.google.com/open?id=1EK29e4gR0pMC_nYRXHbwTYwRglnt5WTW

yellow: #f1c40f font: Oswald <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

font-family: 'Oswald', sans-serif;

PranilDahal commented 5 years ago

Good job everyone.

PranilDahal / Eagle-Post

Make a login web page for HumanUsers #2