Skip to content

This is an Angular-based web application that features an authorization form, a table displaying user data retrieved from JSON Placeholder using RxJS, and a user details page. The app uses Angular Material to create a responsive and intuitive user interface and written in TypeScript.

Notifications You must be signed in to change notification settings

marishka1997/users-authorization

Repository files navigation

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.

About

This is an Angular-based web application that features an authorization form, a table displaying user data retrieved from JSON Placeholder using RxJS, and a user details page. The app uses Angular Material to create a responsive and intuitive user interface and written in TypeScript.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published