This project was generated with Angular CLI version 18.1.4.
I wanted to keep the login form as simple as possible. Nothing incredible here. Simply serves to login, generate a token and authorise the user to login for a certain amount of time (currently 1 hour).
Components: Username, password fields, with a login button.
The register form POSTs the user information to our database. Before the raw string password is passed into the registration operation, we hash the password using bcrypt. The hash is using a seed stored in the environment file.
Storing a password in a text file would never take place in a production codebase.
- shows different chat items in bubbles (individuals or group chats)
- navigation bar (dashboard, settings, logout)
The main interface for real time message and video communication, between two people or a group.
Components:
- header (profile name/group name)
- Message display container (where messages pop up)
- Message input box (at the bottom of screen)
- Display how many people are in room
- Send button (little paper airplane icon next to message input box)
Allow a user to change their accounts attributes, such as:
- Profile picture
- Birth-date
- Dark mode
- Notifications
A super user is a hardcoded user to be built into our framework. [user: super, pass: 123]
The Socket service provides us a service, that we can use within our framework to communicate using Socket.io. It declares signals that are used for communicating to our web server, to pass information over to another component or save certain information.
The frameworks Authentication service is more comprehensive as opposed to our other services. As it is used quite often; to retrieve the current user information,
Within the framework, there is an Angular service named AuthGuard that we ensure users are routed correctly, but only when they are correctly authenticated.
E.g. We should route to the dashboard after the login, only when the login credentials are correct.
This service provides an authorization header to the user’s outgoing HTTP requests. It is needed to authenticate users. It is written under auth.interceptor.ts, and we attach it within the providers section of our AppModule (app.module.ts).
The Navigation service was made to easily, and correctly route the user to the right web page, without unnecessary lines of code. A DRY (Don’t-Repeat-Yourself) approach that was taken during development.
It will also prompt the developer console of a successful route, or else a detailed error message.
Programmer variables, only has settings for showing debug logs currently.