TareaTecnica2 — Front-end de Productos y Categorías

Aplicación web hecha en Angular 17 que consume la API REST del laboratorio 1 (Spring Boot). Permite administrar Productos y Categorías, con autenticación por JWT y permisos según el rol del usuario.

Requisitos

• Node 20
• API del laboratorio 1 corriendo en http://localhost:8080

Cómo correr el proyecto

1. Instalar las dependencias:

   npm install

2. Levantar la aplicación:

   npm start

3. Abrir http://localhost:4200 en el navegador.

La dirección de la API se configura en src/environments/environment.ts.

Usuarios

El backend crea estos dos usuarios al arrancar:

Rol	Correo	Contraseña
SUPER_ADMIN	superadmin@tarea.com	superadmin123
USER	user@tarea.com	user123

También se pueden crear cuentas nuevas desde la pantalla de registro. Esas cuentas quedan con el rol USER.

Permisos

• Consultar productos y categorías: cualquier usuario autenticado.
• Registrar, actualizar y eliminar: solo el rol SUPER_ADMIN.
• Listado de usuarios: solo el rol SUPER_ADMIN. La ruta está protegida por un guard y la opción no aparece en el menú para los demás usuarios.

Pantallas

Ruta	Descripción
/login	Inicio de sesión
/registro	Registro de nuevos usuarios
/productos	Administración de productos
/categorias	Administración de categorías
/usuarios	Usuarios registrados (solo SUPER_ADMIN)

Estructura del código

src/app/
├── core/
│   ├── guards/          Protección de rutas por sesión y por rol
│   ├── interceptors/    Agrega el token JWT a cada petición
│   ├── models/          Interfaces de Producto, Categoría y Usuario
│   └── services/        Peticiones HTTP hacia la API
├── layout/navbar/       Barra de navegación
├── shared/formulario/   Formulario reutilizable para registrar y actualizar
└── pages/               Pantallas de la aplicación

El componente shared/formulario se arma a partir de una lista de campos, por lo que se reutiliza tanto para productos como para categorías, y sirve tanto para registrar como para actualizar.