Control Panel Login Form

[DietBepis1]

Description

In this issue, we will work on creating a login form for the control panel.

We can use Vuetify's built in components to offload most of the heavy styling work. Look at those docs, here. Make sure you are looking at Vuetify V2's docs and not V3 (that's for Vue 3).

Spec

The form should do the following:

• Collect a user's credentials
• Make a POST request to /api/v1/auth/login with those credentials and get a response
• Store the session cookie that was returned in the browser's cookie jar.
• Redirect the user to the dashboard view.
• Be Responsive! This component should look good on small, medium, and large screens. What this means in practice is up to the developer's interpretation, but there should not be overflowing or very mismatched proportions on any subcomponents in the form 😉

Testing this will be challenging because we do not currently have automated testing for front-end components. Adding that is outside the scope of this cohort. We will have to rely on multi-user testing and the browser dev tools for now. If the login routes are not completed yet, we can stub them out for testing.

Copilot Prompts

How do I redirect to a different page with Vue 2's router?
How does the browser store cookies?
What are some tips for making a webpage as responsive as possible to different screen sizes?

Target Date: 12/31/2023 📆

[briansegura15]

Hey Glenn, I'm going to get after this one.

[CodingLady22]

Hi @briansegura15 can I work on this one with you? @DietBepis1 Is this ok for more than 1 person to work on?

[briansegura15]

I'm always down to team up Maye! 👍