User Registration & Profiles

Relevant source files

The following files were used as context for generating this wiki page:

• Front/src/pages/register.jsx
• Front/src/pages/profile.jsx
• Front/src/context/AuthContext.jsx
• Front/src/services/api.ts
• Back/Alumnos/Api/Controllers/UsuariosController.cs
• Back/Alumnos/Api/Comun/Modelos/Usuarios/CrearUsuarioDto.cs
• Back/Alumnos/Api/Comun/Modelos/Usuarios/ModificarUsuarioDto.cs

Introduction

The User Registration and Profile system provides the foundational identity management for the application. It enables new users to create accounts through a structured registration process and allows existing users to manage their personal information, contact details, and authentication credentials through a dedicated profile interface.

The system follows a client-server architecture where the React-based frontend communicates with a .NET Web API backend. It handles data persistence, input validation, and secure password hashing to ensure user data integrity and security across the platform.
Sources: Front/src/pages/register.jsx, Back/Alumnos/Api/Controllers/UsuariosController.cs

System Architecture & Data Flow

Registration Flow

The registration process begins in the frontend Register component, which collects user credentials and performs initial client-side validation. Data is then passed through the AuthContext to the backend via the usuariosService. The backend controller receives a Data Transfer Object (DTO), hashes the password, and persists the new user entity to the database.

Profile Management

The profile system allows users to view and update their information. It utilizes a "slug" (a unique string identifier) to fetch and modify specific user records. The frontend maintains an "editing" state to toggle between read-only and form-input modes.

Backend Data Structures

The backend uses specific DTOs (Data Transfer Objects) to enforce strict schemas for incoming data during registration and modification.

User Creation Model

Field	Type	Required	Description
Nombre	string	Yes	First Name
ApellidoPaterno	string	Yes	Paternal Last Name
ApellidoMaterno	string	Yes	Maternal Last Name
NombreUsuario	string	Yes	Unique Username
Contraseña	string	Yes	Plaintext password (hashed before storage)
Habilitado	bool	Yes	Account status flag

Sources: Back/Alumnos/Api/Comun/Modelos/Usuarios/CrearUsuarioDto.cs:7-19

User Modification Model

Field	Type	Description
Slug	string	Unique identifier for the user to be updated
Nombre	string	Updated First Name
ApellidoPaterno	string	Updated Paternal Last Name
ApellidoMaterno	string	Updated Maternal Last Name
NombreUsuario	string	Updated Username
Contraseña	string	New password (optional, hashed if provided)

Sources: Back/Alumnos/Api/Comun/Modelos/Usuarios/ModificarUsuarioDto.cs:7-17

Implementation Details

Frontend Validation Logic

The Register component implements specific checks before attempting any API calls:

• Required Fields: Name, email, and password cannot be empty.
• Password Match: password must be identical to confirmPassword.
• Complexity: Passwords must be at least 6 characters long.

Sources: Front/src/pages/register.jsx:32-52

API Services

The usuariosService abstracts the HTTP communication using Axios (or Fetch in some implementations). It handles the construction of requests for user management.

// Example of the Update Service
modificarUsuario: async (slug: string, datos: Partial<Usuario>): Promise<Usuario> => {
    try {
        const response = await api.put(`/usuarios/${slug}`, datos);
        return response.data;
    } catch (error) {
        throw new Error('Error al modificar usuario: ' + error.message);
    }
}

Sources: Front/src/services/api.ts:89-96

Profile Image Handling

The profile system includes functionality for image previews and file size validation (capped at 5MB). Images are processed using the FileReader API for immediate UI feedback.
Sources: Front/src/pages/profile.jsx:65-80

Conclusion

The User Registration & Profiles module ensures a secure and user-friendly entry point into the application. By separating concerns between DTOs for data integrity, services for communication, and a central AuthContext for state management, the system provides a robust framework for managing user identities and their associated metadata.
Sources: Front/src/context/AuthContext.jsx, Back/Alumnos/Api/Controllers/UsuariosController.cs