MVP 1 - User Authentication

jmkaneshiro / stayontrack

StayOnTrack is a clone of Pivotal Tracker -- an agile project management tool.

https://stay-on-track-app.herokuapp.com/

5 stars 0 forks source link

MVP 1 - User Authentication #17

Open jmkaneshiro opened 4 years ago

jmkaneshiro commented 4 years ago

Overview of changes

The home page

When a user visits the home page at /, they are greeted with several advertisements about the application. They have links to resources and to sign up and login.

Sign up and log in

The home page, sign up, and login can only be visited by a user who is not currently logged in. A logged in user is redirected to the dashboard.

Dashboard

This page only has log out functionality at this time. Once a user is logged out, they are automatically redirected to the log in page. /dashboard is a protected routed that is only accessible to logged in users.

To Dos

Build hamburger menu for home page nav bar
Build dropdowns to info links on home page
Fix styling of flexboxes on home page
On sign up, dispatch action that automatically assigns a user with a username, a name, and initials
Allow a user to log in with either their username or email

jmkaneshiro commented 4 years ago

All changes are visible on: https://stay-on-track-app.herokuapp.com/#/

jmeyer90 commented 4 years ago

Tasks to be completed:

Add a footer to your website. This is where you'll have links to your github, linkedIn, etc.
Add a demo login which will automatically log someone in.
This is not a well known site. On the Navbar, instead of "Blog", have it be a link to the Pivotal Tracker an name it appropriately. The link should be named something like "Cloned Site". Your website looks amazing and you should show it off.

Bonus:

Make your signup form look more like the one on the site (but still include your header when you make these changes).

Note:

Your errors are different than Pivotal Tracker's, but I actually like what you did better. They have the most basic style of displaying errors.

jmkaneshiro commented 4 years ago

@jmeyer90 Ready to go! I made the changes we discussed. I also added a phon-ey google-sign/signup on homepage link (which I will make usable if time permits), cleaned up more of the CSS styling, and generally made the page more pixel perfect (particularly with responsiveness for smaller screens).

Things to note:

Demo Login is at the bottom of the page and uses mapStateToDispatch to obscure the actual credentials from the html viewable by the user
Ordering of info+image combo on homepage utilizes the order property of flex to ensure that text is always above related image when viewing home page on small screen
Footer uses fontawesome icons in place of hyper link text to redirect user to contact entry points
mailto for email in footer includes a default email subject

jmeyer90 commented 4 years ago

Everything looks great. One last addition then feel free to move on:

Please include a demo login button on both the login and signup forms. It provides a cleaner user interface for people trying to navigate through the website.

jmkaneshiro commented 4 years ago

@jmeyer90 I added demo login to the nav bar on both login and signup. I also adjusted my app so that the footer with my contact information appears on all pages :)