Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Niurka77/tf-app/llms.txt

Use this file to discover all available pages before exploring further.

TF-App’s login system identifies users by their DNI (national identity number) rather than a generic username, reflecting the real estate industry’s reliance on formal identification. The login form performs client-side validation before processing credentials and surfaces all feedback — success or failure — through a custom modal dialog that replaces the browser’s native alert() for a polished mobile experience on Android.

​
Login Flow

1

App opens — login screen is displayed

When the app launches, dist/index.html is presented. It renders the DNI input field, a password field, a “Recuérdame” checkbox, and the submit button inside a Tailwind-styled form. Note: src/views/login.html is currently empty — dist/index.html is the authoritative login template.
2

User enters DNI and password

The DNI field (id="username") accepts the user’s national ID number as plain text. The password field (id="password") uses type="password" to mask the entry. Both fields carry green-themed styling via Tailwind CSS and Font Awesome icons for visual cues.
3

Client-side validation checks for empty fields

On form submission, main.js trims whitespace from both values. If either field is empty after trimming, showMessage is called immediately and the submit handler returns early — no network request is made.
4

Credentials are checked against the demo values

The current release compares the trimmed inputs against the hardcoded demo credentials: username usuario and password contraseña. This simulates a real authentication check and will be replaced by a backend API call in production.
5

Successful login — welcome modal is shown

When the credentials match, showMessage('Inicio de Sesión Exitoso', '¡Bienvenido! Has iniciado sesión correctamente.') is called and the modal appears. A redirect to dashboard.html would follow in a production build.
6

Failed login — error modal is shown

When the credentials do not match, showMessage('Error de Credenciales', 'Nombre de usuario o contraseña incorrectos. Inténtalo de nuevo.') is called, prompting the user to try again.
The current dist/index.html does not yet include id attributes on the form, inputs, or the forgot-password link. Before the main.js event listeners can attach, you must add id="loginForm" to the <form>, id="username" to the DNI input, id="password" to the password input, and id="forgotPasswordLink" to the recovery anchor. Without these IDs, getElementById returns null and the submit handler will throw at runtime.
Below is the full loginForm submit event listener from src/main.js: 
loginForm.addEventListener('submit', (event) => {
  event.preventDefault(); // Previene el comportamiento predeterminado del formulario (recargar la página)

  // Obtiene los valores de los campos de usuario y contraseña, eliminando espacios en blanco al inicio/final
  const username = usernameInput.value.trim();
  const password = passwordInput.value.trim();

  // Valida que los campos no estén vacíos
  if (username === '' || password === '') {
    showMessage('Error de Inicio de Sesión', 'Por favor, ingresa tu nombre de usuario y contraseña.');
    return; // Detiene la ejecución si los campos están vacíos
  }

  // --- Lógica de autenticación simulada ---
  // En una aplicación real, aquí harías una llamada a tu servidor (API) para autenticar al usuario.
  // Ejemplo: fetch('/api/login', { method: 'POST', body: JSON.stringify({ username, password }) })
  //          .then(response => response.json())
  //          .then(data => { /* manejar respuesta */ })
  //          .catch(error => { /* manejar error */ });

  if (username === 'usuario' && password === 'contraseña') {
    showMessage('Inicio de Sesión Exitoso', '¡Bienvenido! Has iniciado sesión correctamente.');
    // Si el inicio de sesión es exitoso, aquí podrías redirigir al usuario a otra página, por ejemplo:
    // window.location.href = '/dashboard.html';
  } else {
    showMessage('Error de Credenciales', 'Nombre de usuario o contraseña incorrectos. Inténtalo de nuevo.');
  }
});
The credentials usuario / contraseña are hardcoded for demonstration purposes only. Never ship hardcoded credentials in a production application. Replace this block with a real API call before deploying to end users.

​
The showMessage Modal

showMessage(title, message) is a lightweight custom dialog defined at the top of src/main.js. It was created to replace the browser’s built-in alert(), which renders inconsistently across Android WebViews and breaks the app’s visual design. The function targets three elements in the DOM by ID — messageModal, messageModalTitle, and messageModalBody — sets their text content, and toggles a hidden Tailwind class to show or hide the overlay. 
function showMessage(title, message) {
  const modal = document.getElementById('messageModal');
  const modalTitle = document.getElementById('messageModalTitle');
  const modalBody = document.getElementById('messageModalBody');
  const closeButton = document.getElementById('messageModalCloseButton');

  modalTitle.textContent = title;
  modalBody.textContent = message;
  modal.classList.remove('hidden');

  closeButton.onclick = () => {
    modal.classList.add('hidden');
  };

  modal.onclick = (event) => {
    if (event.target === modal) {
      modal.classList.add('hidden');
    }
  };
}
Function signature: showMessage(title: string, message: string): void Call this function anywhere in the app to surface user feedback without disrupting the native Android UI.
The modal closes when the user clicks the close button or taps anywhere on the semi-transparent backdrop behind the dialog. This is handled by the modal.onclick listener that checks event.target === modal, ensuring a tap on the modal content itself does not dismiss it.

​
Remember Me

The login form includes a “Recuérdame” (Remember Me) checkbox rendered below the password field: 
<label class="flex items-center space-x-2 cursor-pointer select-none">
  <input
    type="checkbox"
    class="form-checkbox h-4 w-4 text-green-700 rounded"
  />
  <span>Recuérdame</span>
</label>
The checkbox is present in the UI scaffold and styled with Tailwind’s form-checkbox utility. To activate its persistence behaviour in a production build, read the checkbox value after a successful login and store an auth token in localStorage or a secure cookie so the user is not prompted again on subsequent app launches.

​
Password Recovery

The “¿Olvidaste tu contraseña?” (Forgot your password?) link beneath the submit button has its own event handler in main.js: 
forgotPasswordLink.addEventListener('click', (event) => {
  event.preventDefault();
  showMessage('Recuperar Contraseña', 'Se ha enviado un enlace de recuperación a tu correo electrónico.');
  // En una aplicación real, aquí podrías iniciar un flujo de recuperación de contraseña,
  // como redirigir a una página específica o abrir un modal más complejo para ingresar el correo.
});
event.preventDefault() stops the browser from following the href="#" anchor. In the current release the handler simply shows a confirmation modal. For production, replace the showMessage call with a redirect to a dedicated password-reset view or an API request that triggers a recovery email to the user’s registered address.

​
Connecting to a Real Backend

To replace the hardcoded credential check with a real authentication API, substitute the simulated if block in the submit handler with a fetch() call: 
fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username, password })
})
  .then(response => response.json())
  .then(data => {
    if (data.token) {
      localStorage.setItem('authToken', data.token);
      window.location.href = '/dashboard.html';
    } else {
      showMessage('Error de Credenciales', data.message || 'Credenciales incorrectas.');
    }
  })
  .catch(error => {
    showMessage('Error de Conexión', 'No se pudo conectar al servidor. Intenta más tarde.');
  });
This pattern aligns with the comment already present in main.js and follows the same showMessage convention for error feedback. Store the returned token in localStorage to authorize subsequent API calls from the dashboard.

Build docs developers (and LLMs) love

Get started for freeTalk to us