I’ve created an API server that stores and retrieves user information in a database. The server allows client applications to create new user accounts, log a user into an app, and log a user out. The URL for the server is http://hap-app-api.azurewebsites.net.
The protocol for communicating with the server is described in the tables below.
In order for the client to attempt to create a new user account, the client must send a Request containing the required data to the API server using the fetch function. The fetch function will asynchronously return a Response that includes, among other data, a response code that indicates if the request was successfully processed or not.
I have added to my client code that calls fetch in order to log a user in (in Signin.vue) and log a user out (in Main.vue). Feel free to use my code.
Assignment
Add code to your client so that it utilizes the API server for creating user accounts, logging users in, and logging users out.
Modify your sign in view so that the user is required to enter an email address and password, rather than a username and password.
When a user successfully logs in or creates an account, store the user’s username and token (returned in the response) in localStorage.
When a user logs out, remove the username and token from localStorage.
Validate all required data is non-empty and all data that has defined constraints before making a call to fetch.
Use best practices when designing forms and displaying error messages.