Users Authorization

Description

The project should consist of 3 main parts:

Authorization form
Retrieve users through JSON placeholder and display them in a table
Show users details

Sign In

The authorization page should consist of two mandatory fields (Username and Password).
Sign in button should be disabled until the form is valid.
In case of input focus (moving to another field), if it is not filled, an error should be displayed.
If you click on the Sign in button, it should be checked whether "admin" is entered in both fields, if it is not, it should display an alert: username or password is incorrect, if it is entered, it should be redirected to the Home page.

Home Page

A table of users should be drawn on the home page. The list of users should be retrieved via the JSON placeholder method: https://jsonplaceholder.typicode.com/users.
When clicking the left mouse button on the row of the table, a "context menu" should appear next to the cursor, from which it will be possible to delete the user or go to the details page;
Users should be deleted only in front (row should be removed from DOM) Writing "context menu" without auxiliary plugin.

Details page

On the details page, the user should be retrieved according to the id specified in the url: https://jsonplaceholder.typicode.com/users/id.
According to the picture below, a user card should be drawn, where his information will be displayed (id, name, first letter of the name, e-mail).
If the user tries to log in with a link without authorization, he should be redirected to the authorization page, either to home or to details.

Project was implemented for company Softx.

Used Technologies

HTML
SCSS
Bootstrap
TypeScript
Angular
RxJS
Angular Material

Development server

Run npm install for installation and then ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

This project was generated with Angular CLI version 15.2.1.