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:
[x] Collect a user's credentials
[x] Make a POST request to /api/v1/auth/login with those credentials and get a response
[x] Store the session cookie that was returned in the browser's cookie jar.
[x] Redirect the user to the dashboard view.
[x] 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 :wink:
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?
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:
/api/v1/auth/login
with those credentials and get a responseTesting 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 📆