The To-Do application is a fully functional task management system built using Angular for the front-end and MariaDB for data persistence. It allows users to register, log in, and manage a list of to-do items. The application consists of several key features: a registration page for new users, a login system to authenticate returning users, and a to-do list page where authenticated users can add, edit, delete, and mark tasks as completed. User information, such as credentials and authentication tokens, is managed using localStorage, while MariaDB handles the persistent storage of the to-do items.
The application is structured into multiple Angular components, ensuring a modular and scalable architecture. The login component allows users to enter their credentials and handles navigation after successful authentication by setting a mock token in localStorage. If the user doesn’t have an account, they are directed to the register component, where they can input new credentials, which are saved to localStorage for future logins. Once authenticated, users are redirected to the todo component, which manages the core to-do functionality. This component interacts with the back-end MariaDB database through a service to retrieve, add, update, and delete to-do items. Additionally, the application uses a guard service (AuthGuard) to ensure that only authenticated users can access the to-do functionality. If a user attempts to navigate to the to-do list without being logged in, the guard redirects them to the login page.
The application also incorporates Angular services to facilitate communication between the front-end components and the MariaDB database. The todo.service.ts is responsible for interacting with the back-end, retrieving to-do items, and handling CRUD operations for tasks. This separation of concerns ensures a clean codebase where the services manage data interactions, and components focus on the user interface. The auth guard service works in conjunction with localStorage to protect routes by checking whether an authentication token is present, ensuring that users are logged in before accessing protected routes. This well-organized structure, combining Angular's component-based architecture with services and route guards, makes the application robust and easily maintainable.
Future development will focus on enhancing security by migrating user authentication to the back-end, rather than relying on localStorage. This would involve setting up secure user registration and login functionality using JWT (JSON Web Tokens) or a similar secure token-based authentication method. In this setup, when a user logs in, their credentials would be securely verified against my MariaDB database, and upon successful authentication, a JWT would be generated and sent to the client.
This token would then be stored in a secure HTTP-only cookie, which significantly reduces the risk of attacks. JWTs would be validated on the server for every protected request, ensuring that only authenticated users can interact with the to-do functionality.
Additionally, enhancing the database schema to include hashed and salted passwords, managed through robust encryption techniques like bcrypt, would further ensure user credentials are stored securely. This approach aligns with modern web security practices, providing better protection for sensitive user data and enabling scalable, secure authentication across different clients.
