Web Programming

Todo SPA (Sessions)

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 the setUser and getUser methods to the store object which are used to store and retrieve an authenticated user.
2. Implement the UserLogin web 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 him/her and an empty todo list in the store.
   Display appropriate error messages, if the credentails are invalid or the user already exists.
3. Add a postUser method to the service object which sends an AJAX request to register a new user, and use the stored user to send an appropriate authorization header with each other request.
4. In the main module, register UserLogin as a custom web component and use it as the initial component.
5. (Optional) Implement the UserLogout web component that clears the store and displays a confirmation message, and include a link in the application to invoke the component.

Solution