User-management frontend

This code implements a user management feature for an Angular web application. Here's what each part does in plain English:

Data Structure

The application defines what a "user" looks like in the system — each user has properties like a customer ID, name, email, mobile number, address, password, role (either regular user or admin), and optional preferences. There's also a standard wrapper format for responses coming back from the backend server, which includes a status, a message, and the actual data.

User Service (The Communication Layer)

This is the part that talks to the backend server running at localhost on port 8080. It handles five main operations: fetching all users, getting a single user by their ID, updating a user's information, deleting a user, and searching for users by a keyword. Each operation sends an HTTP request to the appropriate endpoint and unwraps the response to give back clean user data.

User List Page

This page displays all users in a table showing their name, email, mobile number, and role. It includes a search bar at the top that filters the user list as you type. Each row has Edit and Delete buttons. When you click delete, it asks for confirmation before removing the user. The styling gives it a clean look with bordered tables, a light gray header, and properly spaced buttons.

User Edit Form

This is the page that opens when you click "Edit" on a user. It pre-fills a form with that user's existing details, including fields for name, email, mobile number, address, password, role (chosen from a dropdown of User or Admin), and a text area for preferences in JSON format. When you click Save, it sends the updates to the server and takes you back to the user list. There's also a Cancel button to go back without saving.

Routing (Navigation Setup)

The app defines several routes — a landing page, login and register pages, a customer dashboard, a profile update page, and the two new user management routes (the list page at /users and the edit page at /users/edit/:id). The user management routes are protected by an authentication guard, meaning only logged-in users can access them. Anything else falls back to a "page not found" screen.

Authentication Interceptor

This is a behind-the-scenes piece that automatically attaches a security token to every outgoing HTTP request. It checks an authentication store for a token, and if one exists, it adds it to the request's Authorization header in the standard "Bearer token" format. This way, the backend knows the user is logged in without each service having to manage that manually.

App Configuration

Finally, the app's main configuration ties everything together — it registers the routes for navigation and sets up the HTTP client with the authentication interceptor so all API calls automatically include login credentials.