Guía de temas Hotspot

Cómo crear o modificar un tema para el portal web del Hotspot MikroTik (PIN y Password)

1. ¿Qué es un tema Hotspot?

Un tema Hotspot es el conjunto de archivos HTML, CSS, imágenes y scripts que el usuario ve al conectarse a la red WiFi: pantalla de login, estado de sesión, logout y mensajes de error. SnFix Manager detecta los temas en disco, muestra una vista previa y los sube al RouterBoard por FTP.

Los temas se organizan en dos directorios según el modo de autenticación:

2. Arquitectura de un tema

Cada tema es una carpeta con esta estructura mínima:

Archivo theme.json

La aplicación solo reconoce carpetas que contengan un theme.json válido y la subcarpeta hotspot/ indicada en el JSON.

{
    "id": "mi_tema_pin",
    "name": "Mi Tema PIN",
    "version": "1.0.0",
    "author": "Tu nombre",
    "description": "Portal Hotspot con login por PIN",
    "created_at": "2026-09-10",
    "updated_at": "2026-09-10",
    "routeros": {
        "min_version": "6.40"
    },
    "files": {
        "hotspot_directory": "hotspot"
    },
    "preview": [
        "imagenes/login.png",
        "imagenes/status.png"
    ]
}

3. Diferencia clave: PIN vs Password

La diferencia entre ambos tipos está casi por completo en login.html. El resto de páginas (status.html, logout.html, etc.) suele ser idéntico o muy similar entre variantes PIN y Password del mismo diseño.

4. Variables MikroTik en los HTML

Los archivos HTML usan la sintaxis de plantillas de RouterOS. MikroTik las reemplaza al servir la página. Las más usadas en login.html:

5. login.html — Tema PIN

El formulario visible tiene un solo campo (username). Antes de enviar, el script asigna password = username (el valor del PIN).

5.1 Sin CHAP (HTTP simple)

Patrón mínimo: campo oculto password sincronizado al enviar.

<form name="login" action="$(link-login-only)" method="post"
      onsubmit="return syncPin()">
    <input type="hidden" name="dst" value="$(link-orig)">
    <input type="hidden" name="popup" value="true">
    <input type="hidden" name="password" id="password">

    <input type="text" name="username" id="username"
           placeholder="Ingresa tu PIN" required autofocus>
    <button type="submit">Conectar</button>
</form>

<script>
    function syncPin() {
        var pin = document.getElementById('username').value.trim();
        document.getElementById('password').value = pin;
        return true;
    }
</script>

5.2 Con CHAP (recomendado en producción)

Cuando MikroTik envía $(chap-id), la contraseña no viaja en texto plano: se envía como MD5. Aun así, el valor lógico de la contraseña es el mismo PIN ingresado en username. Este es el patrón usado en los temas SnFix incluidos:

$(if chap-id)
<form name="sendin" action="$(link-login-only)" method="post" style="display:none">
    <input type="hidden" name="username" />
    <input type="hidden" name="password" />
    <input type="hidden" name="dst" value="$(link-orig)" />
    <input type="hidden" name="popup" value="true" />
</form>

<script src="md5.js"></script>
<script>
    function doLogin() {
        var pin = document.login.username.value.trim();
        document.sendin.username.value = pin;
        document.sendin.password.value = hexMD5('$(chap-id)' + pin + '$(chap-challenge)');
        document.sendin.submit();
        return false;
    }
</script>
$(endif)

<!-- Formulario visible: SOLO username -->
<form name="login" action="$(link-login-only)" method="post"
      $(if chap-id) onSubmit="return doLogin()" $(endif)>
    <input type="text" name="username" placeholder="Ingresa tu PIN" required>
    <!-- NO incluir campo password visible -->
    <button type="submit">Conectar</button>
</form>

6. login.html — Tema Password

El formulario visible muestra dos campos. El script CHAP toma la contraseña del campo password (no del username).

$(if chap-id)
<form name="sendin" action="$(link-login-only)" method="post" style="display:none">
    <input type="hidden" name="username" />
    <input type="hidden" name="password" />
    <input type="hidden" name="dst" value="$(link-orig)" />
    <input type="hidden" name="popup" value="true" />
</form>

<script src="md5.js"></script>
<script>
    function doLogin() {
        document.sendin.username.value = document.login.username.value;
        document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
        document.sendin.submit();
        return false;
    }
</script>
$(endif)

<form name="login" action="$(link-login-only)" method="post"
      $(if chap-id) onSubmit="return doLogin()" $(endif)>
    <input type="text" name="username" placeholder="Usuario" required autofocus>
    <input type="password" name="password" placeholder="Contraseña" required>
    <button type="submit">Conectar</button>
</form>

Resumen visual de la diferencia en el script

7. Otras páginas del portal

Además de login.html, un tema completo incluye:

8. Pasos para crear un tema nuevo

templates/hotspots/PIN/snfix_minimalista/
    →  templates/hotspots/PIN/mi-cafe/

9. Consejos de diseño

• Usa viewport meta tag para que el portal se vea bien en móviles.
• Mantén rutas relativas (css/style.css, img/logo.png) — no uses rutas absolutas del disco.
• Incluye manejo de $(error) para mostrar mensajes cuando el PIN o contraseña sean incorrectos.
• Conserva md5.js si el Hotspot tiene CHAP habilitado (habitual en RouterOS).
• El formulario debe llamarse name="login" para que el script CHAP funcione.
• Prueba en Chrome y en un teléfono Android/iOS antes de desplegar.

10. Solución de problemas

11. Resumen rápido

1. Elige PIN/ o Password/ según el tipo de ficha.
2. Copia un tema existente completo (carpeta con theme.json + hotspot/).
3. Edita theme.json con id, nombre y rutas de preview.
4. En login.html: PIN = un campo + password = username; Password = dos campos.
5. Personaliza CSS, logo e imágenes de preview.
6. Verifica en Temas Hotspot e instala en el RouterBoard por FTP.