Skip to content

pikselinweb/user-management

Repository files navigation

User Authorization Project

Welcome to User Management App! There is 3 types (Super Admin, Admin, Customer) of roles. This app has 6 pages (Login, Register, Home, User Listing, 401 and 404).

Some available accounts:

Running App

After install depencies with npm start command you can run json server and Angular development server easily.

Rules

  • All users can view Homepage when they logged in. Homepage protected by LoginGuard (Router-Guard) that allow to only authorized users. If user have not token will be redirect to Login page.
  • Navigation provided by Navbar buttons by using RouterLink. User List button will be hidden if you are not Super Admin.
  • User List page protected by AdminGuard (Router-Guard) that allow to access only users has role Super Admin. If Customer try to go User List page will be redirect to 401 - Forbidden page.
  • Edit user, add user, delete user functions available in User List page.
  • Username cannot be change because of used to login. Also changing the password is not allowed.
  • Admin can't change user roles and can't list other admins. When admin create a user, user's role will be Customer by the default. Also Admin can delete only customers.
  • Super Admin can update role and can list all users.
  • Super Admin can't delete itself, but can delete other Super Admin's accounts.
  • Everyone can login or register to application. But if logged user try to reach Login or Register page will be redirect to Home page. Login and Register pages protected by NotLoginGuard (Router-Guard).
  • This app uses JSON Server for creating fake database and JSON Server Auth to manage login - register operations. By the way auth token has 1 hour life time.

Roles

  • Super Admin (role value: 3)
  • Admin (role value: 2)
  • Customer (role value: 1)

About App

  • Created with Angular v13
  • Uses Angular Material Framework for app compoments
  • CSS template engine is SCSS
  • Bootstrap Reboot, Bootstrap Grid, Bootstrap Tables and Bootsrap Aler imported with Sass
  • Ngx Cookie Service used to handle cookies
  • User ids gererated with uuid
  • concurrently used to run multiple script commands in same time

TO DO

  • NGRX should be use to state managament
  • Usualy i use toPromise() for converting observables to promise then use in async functions with await. I think it make codes more readable and avoid problems like cold observale and unsubscribe. Now toPromise() is depraced, need to find new method instead of it.

Known Issues

  • When Super Admin change its account role to Admin still can use Super Admin privileges. To fix this issue should be disabled role input on user form if current user is same.

Screen Shoots

Login - Register And Angular Form Validation

Login Page

Register Page

Angular Form Validation Error

Angular Form Validation

Customer

Home Page

User Menu

Admin

Admin User List

Admin Create New User

Admin Edit User

Admin User List

Super Admin

Super Admin User List

Super Admin Create New User

Super Admin Edit User

Super Admin User List