User Registration

Overview

The registration system allows new users to create accounts in Pro Stock Tool. The process includes comprehensive client-side and server-side validation to ensure data integrity and security.

Registration Form

The registration page (login.html) provides a user-friendly interface for account creation with real-time validation.

Form Fields

The registration form (login.html:20-40) collects the following information:

Field	Type	Name	Required	Placeholder	Validation
Email	`email`	`email`	Yes	[email protected]	Email format, unique
Name	`text`	`Nombre`	Yes	Juan David	Min 2 chars, max 100
ID Number	`text`	`N-identidad`	Yes	1067623487	6-20 digits
Password	`password`	`Contraseña`	Yes	************************	Min 6 characters

Registration Workflow

Fill registration form

User enters email, name, ID number, and password in the registration form.

Client-side validation

JavaScript validates all fields before submission (registro.js:34-45).

Submit to backend

Data is sent as JSON to /database/registro.php via fetch API.

Server-side validation

PHP validates and sanitizes all inputs (registro.php:21-37).

Duplicate check

System verifies email and ID number are not already registered (registro.php:42-45).

Password hashing

Password is hashed using BCrypt before storage (registro.php:48).

Database insertion

User record is created in the usuarios table (registro.php:51-52).

Success response

Confirmation message is displayed and form is reset.

Field Specifications

Email Field

<input 
  type="email" 
  name="email" 
  id="email-Registro" 
  placeholder="[email protected]" 
  autocomplete="email" 
  required
>

Validation Rules:

Client-Side
Server-Side

JavaScript regex validation (registro.js:30):

function validEmail(v){ 
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); 
}

PHP filter validation (registro.php:26-28):

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo json_encode(['success'=>false,'error'=>'Email inválido']); 
  exit;
}

Email addresses must be unique. The system checks for existing emails before creating an account.

Name Field

<input 
  type="text" 
  name="Nombre" 
  id="Nombre-Registro" 
  placeholder="Juan David" 
  autocomplete="name" 
  required
>

Validation Rules:

Minimum length: 2 characters
Maximum length: 100 characters

Client validation (registro.js:43):

if (payload.nombre.length < 2) { 
  showAlert('Nombre demasiado corto','error'); 
  return; 
}

Server validation (registro.php:29-31):

if (strlen($nombre) < 2 || strlen($nombre) > 100) {
  echo json_encode(['success'=>false,'error'=>'Nombre inválido']);
}

ID Number Field

<input 
  type="text" 
  name="N-identidad" 
  id="N-identidad-Registro" 
  placeholder="1067623487" 
  inputmode="numeric" 
  required
>

Validation Rules:

Format: Numeric only
Length: 6 to 20 digits
Uniqueness: Must not exist in database

Client-Side
Server-Side

function validIdentidad(v){ 
  return /^[0-9]{6,20}$/.test(v); 
}

Validation check (registro.js:44):

if (!validIdentidad(payload.identidad)) { 
  showAlert('N° Identidad inválido','error'); 
  return; 
}

if (!preg_match('/^[0-9]{6,20}$/', $identidad)) {
  echo json_encode(['success'=>false,'error'=>'Identidad inválida']);
  exit;
}

ID numbers must be unique. The system prevents duplicate ID registrations to maintain data integrity.

Password Field

<div class="password-field">
  <input 
    type="password" 
    name="Contraseña" 
    id="Contraseña-Registro" 
    placeholder="************************" 
    autocomplete="new-password" 
    required
  >
  <button type="button" class="toggle-password" 
    aria-label="Mostrar u ocultar contraseña">
  </button>
</div>

Features:

Show/Hide Toggle: Button to reveal password (registro.js:22-28)
Minimum Length: 6 characters
Secure Storage: BCrypt hashing

Validation:

Client-Side
Server-Side

if ((payload.contrasena||'').length < 6) { 
  showAlert('La contraseña debe tener mínimo 6 caracteres','error');
  return; 
}

if (strlen($contrasena) < 6) {
  echo json_encode(['success'=>false,'error'=>'Contraseña muy corta']);
  exit;
}

Password Toggle Implementation (registro.js:22-28):

if (togglePwd && password){
  togglePwd.addEventListener('click', () => {
    const isText = password.getAttribute('type') === 'text';
    password.setAttribute('type', isText ? 'password' : 'text');
    togglePwd.classList.toggle('active', !isText);
  });
}

Form Submission Process

Client-Side Submission

The form submission is handled via JavaScript (registro.js:34-63):

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const payload = {
    email: email.value.trim(),
    nombre: nombre.value.trim(),
    identidad: identidad.value.trim(),
    contrasena: password.value
  };
  
  // Validation checks...
  
  try{
    const resp = await fetch('/database/registro.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    const data = await resp.json();
    if (data && data.success){
      showAlert(data.message || 'Registro exitoso','success');
      form.reset();
    } else {
      showAlert((data && data.error) || 'No se pudo registrar','error');
    }
  }catch(err){
    showAlert('Error de conexión','error');
  }
});

The form uses novalidate attribute to implement custom JavaScript validation instead of default HTML5 validation.

Server-Side Processing

The backend endpoint (registro.php) processes registration requests:

Request Validation

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  echo json_encode(['success' => false, 'error' => 'Método no permitido']);
  exit;
}

$input = file_get_contents('php://input');
$data = json_decode($input, true);
if (!$data) { 
  echo json_encode(['success'=>false,'error'=>'Datos inválidos']); 
  exit; 
}

Data Sanitization

$email = isset($data['email']) ? trim($data['email']) : '';
$nombre = isset($data['nombre']) ? trim($data['nombre']) : '';
$identidad = isset($data['identidad']) ? trim($data['identidad']) : '';
$contrasena = isset($data['contrasena']) ? (string)$data['contrasena'] : '';

Duplicate Prevention

$emailEsc = $conn->real_escape_string($email);
$identidadEsc = $conn->real_escape_string($identidad);

$check = $conn->query(
  "SELECT id FROM usuarios WHERE email = '$emailEsc' OR identidad = '$identidadEsc' LIMIT 1"
);
if ($check && $check->num_rows > 0) {
  echo json_encode(['success'=>false,'error'=>'Email o Identidad ya registrados']);
  exit;
}

The system prevents duplicate registrations by checking both email and ID number against existing records.

Password Hashing & Database Insertion

$nombreEsc = $conn->real_escape_string($nombre);
$hash = password_hash($contrasena, PASSWORD_BCRYPT);
$hashEsc = $conn->real_escape_string($hash);

$sql = "INSERT INTO usuarios (email, nombre, identidad, password, creado_en) 
        VALUES ('$emailEsc', '$nombreEsc', '$identidadEsc', '$hashEsc', NOW())";
        
if ($conn->query($sql)) {
  echo json_encode(['success'=>true,'message'=>'Registro exitoso']);
} else {
  echo json_encode(['success'=>false,'error'=>'Error al registrar: ' . $conn->error]);
}

Alert System

The registration page includes a custom alert component (login.html:44-47):

<div class="alerta" id="alerta" role="alert" aria-live="polite" hidden>
  <button type="button" class="cerrar-alerta-registro" 
    aria-label="Cerrar alerta">X</button>
  <p id="alerta-mensaje">Te has registrado exitosamente</p>
</div>

Alert Function (registro.js:12-16):

function showAlert(msg, type='info'){
  alertaMsg.textContent = msg;
  alerta.removeAttribute('hidden');
  setTimeout(() => { alerta.setAttribute('hidden',''); }, 4000);
}

Alerts automatically disappear after 4 seconds and can be manually closed.

API Response Format

Success Response

{
  "success": true,
  "message": "Registro exitoso"
}

Error Responses

{
  "success": false,
  "error": "Email o Identidad ya registrados"
}

Possible error messages:

“Método no permitido”
“Datos inválidos”
“Email inválido”
“Nombre inválido”
“Identidad inválida”
“Contraseña muy corta”
“Email o Identidad ya registrados”
“Error al registrar: [database error]”
“Error del servidor: [exception message]“

Security Features

BCrypt Hashing

Passwords are hashed using BCrypt with automatic salt generation before database storage.

SQL Injection Prevention

All user inputs are escaped using real_escape_string() to prevent SQL injection attacks.

Duplicate Prevention

System checks for existing email and ID numbers before allowing registration.

CORS Headers

Appropriate CORS headers are set for secure cross-origin requests.

Database Schema

Based on the code, the usuarios table includes:

Column	Type	Description
id	INT	Auto-increment primary key
email	VARCHAR	User email (unique)
nombre	VARCHAR	User full name
identidad	VARCHAR	ID number (unique)
password	VARCHAR	BCrypt hashed password
creado_en	TIMESTAMP	Account creation timestamp

Best Practices

Strong Passwords: While the minimum is 6 characters, encourage users to create longer, complex passwords
Valid Email: Use a real email address for account recovery and notifications
Unique Credentials: Each email and ID number can only be registered once
Secure Connection: Always use HTTPS in production to protect credentials during transmission

Troubleshooting

Email inválido error

Ensure the email follows the format: [email protected]Examples of valid emails:

N° Identidad inválido error

The ID number must:

Contain only digits (0-9)
Be between 6 and 20 characters long
Not contain spaces, letters, or special characters

Email o Identidad ya registrados

This error occurs when:

The email address is already in use by another account
The ID number is already registered

Try using a different email or verify you don’t already have an account.

Contraseña muy corta error

Password must be at least 6 characters long. Consider using:

A mix of uppercase and lowercase letters
Numbers and special characters
A passphrase for better security

Error de conexión

This typically indicates:

Network connectivity issues
Server is down or unreachable
CORS configuration problems

Wait a moment and try again. If the problem persists, contact support.

Next Steps

Authentication

Learn how to log in to your account

User Accounts

Understand account structure and management

Get Started

Core Features

User Management

Reports & Analytics

Overview

Registration Form

Form Fields

Registration Workflow

Field Specifications

Email Field

Name Field

ID Number Field

Password Field

Form Submission Process

Client-Side Submission

Server-Side Processing

Request Validation

Data Sanitization

Duplicate Prevention

Password Hashing & Database Insertion

Alert System

API Response Format

Success Response

Error Responses

Security Features

BCrypt Hashing

SQL Injection Prevention

Duplicate Prevention

CORS Headers

Database Schema

Best Practices

Troubleshooting

Next Steps

Authentication

User Accounts

Build docs developers (and LLMs) love

Get Started

Core Features

User Management

Reports & Analytics

​Overview

​Registration Form

​Form Fields

​Registration Workflow

​Field Specifications

​Email Field

​Name Field

​ID Number Field

​Password Field

​Form Submission Process

​Client-Side Submission

​Server-Side Processing

​Request Validation

​Data Sanitization

​Duplicate Prevention

​Password Hashing & Database Insertion

​Alert System

​API Response Format

​Success Response

​Error Responses

​Security Features

BCrypt Hashing

SQL Injection Prevention

Duplicate Prevention

CORS Headers

​Database Schema

​Best Practices

​Troubleshooting

​Next Steps

Authentication

User Accounts

Build docs developers (and LLMs) love

Overview

Registration Form

Form Fields

Registration Workflow

Field Specifications

Email Field

Name Field

ID Number Field

Password Field

Form Submission Process

Client-Side Submission

Server-Side Processing

Request Validation

Data Sanitization

Duplicate Prevention

Password Hashing & Database Insertion

Alert System

API Response Format

Success Response

Error Responses

Security Features

Database Schema

Best Practices

Troubleshooting

Next Steps