Web Programming

Todo SPA (Authentication)

The objective of this exercise is to extend the todo single-page application so that users can login to access their individual todos.

Tasks

1. Add a postUser method to the service module which sends an AJAX request to register a new user.
2. Add setUser and getUser methods to the store module which are used to store and retrieve an authenticated user.
3. Implement the Login component:
   • The template contains a form that allows a user to enter his/her name and password.
   • The login event handler fetches the todos of the user and saves the user and his/her todos in the store.
   • The register event handler posts the user and saves the user and an empty todo list in the store.
   Appropriate error messages should be displayed, if the credentails are invalid or the user already exists.
4. In all components, use the authenticated user in the store for the service requests.
5. In the main module, register the Login component with the router and use it as the initial component.
6. (Optional) Implement a Logout component that clears the store and displays a confirmation message, and include a link in the application to invoke the component.

Solution