Tricks zur Anpassung der Hotspot-Login-Seite des Gateway Wireless Controller

In diesem Blog-Beitrag wollen wir die Hotspot-Login-Seite des Gateway Wireless Controllers verändern, damit sie unter Mobile Devices etwas hübscher aussieht und besser bedienbar wird.

Man kann zwar ein Logo auf die WatchGuard hochladen und diverse Texte (Willkommens-Text, Terms-of-Service, Überschrift) definieren,
aber die Logon-Buttons und Eingabefelder sind weiterhin mit vorgegebenen Texten (englisch) beschriftet.

Zudem sind sie leider in der mobilen Ansicht schwer lesbar und schwer benutzbar.

Mit einigen Tricks (Stylesheets und Javascript) lassen sich die Elemente aber verändern.

Der Trick hierbei ist, das Javascript-Element in die Box für den Wilkommens-Text zu schreiben; die CSS-Elemente kommen in die Box für die Terms-of-Service:

hierbei muss man mit Tricks arbeiten, um vorhandene Elemente zu umgehen oder zu überschreiben. beispielsweise eine vorhandene textarea vor dem CSS schließen und und danach unter anderer ID wieder öffnen. Das auftrennen ist ebenfalls notwendig, da der Willkommens-Bereich auf 2048 Characters begrenzt ist.

Mit folgenden CSS und Javascript Elementen sind wir erfolgreich gewesen (Achtung: Javascript muss zwingend ins Welcome-Feld, CSS ins Terms-and-Conditions-Feld):

</textarea>
<style type="text/css">
<!--

#hsDivId {
    width:95%;
    text-align: left;
    background-color: #FFF;
    border: 5px solid gray;
    overflow: auto;
    margin:2px;
    padding: 18px 0 8px 44px;
    background-repeat: no-repeat;
    min-height: 500px;
    width: 100% !important;
    height: 100% !important;
}
#hsEulaTxtId {
    min-height:400px;
    width: 100% !important;
    height: 100% !important;
}

/* hier die Maße des Logos hinterlegen */
#hsLogoId {            
    max-width: 300px !important;          
    max-height: 300px !important;
    clear: both;
}

#hsContinueId {
    float:left !important;
}

/* hier die Größe der Checkbox */
#hsAcceptCkbId {
    width: 70px;
    height: 70px;
    margin-right: 15px;
    margin-top: 20px;
}
#hsEulaTxtId {
    display:none;
}
#hsEulaTxtId2 {
    display:none;
}

/* hier die Größe des "akzeptiert"-Textes */
#hsAcceptLabelId {
    color:white;
    font-size:80px;
}

#hsEulaDivId {
    width:80%;
}

#hsDivId {
    height:100% !important;
    max-height: 100% !important;
    overflow:auto;
}

#hsContinueId {
    display:none;
    width: 400px;
    height: 110px;
}

h3 {
    clear: both;
}

td {
    font-size:80px;
}

/* hier die Größe der User/Passwort-Eingabefelder */
input {
    height:80px;
    font-size: 80px;
    width:400px;
}

table {
    display: none;
}

--></style>
<textarea id="hsEulaTxtId2" cols="" rows="" readonly="yes">

... hier folgen die eigentlichen Terms-and-Conditions ...
<script>
setTimeout(function(){ 

    var tds = document.getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++) {
	tds[i].innerHTML=tds[i].innerHTML.replace("User Name ","Name ");
	tds[i].innerHTML=tds[i].innerHTML.replace("Passphrase ","Passwort ");
    }
    var tables = document.getElementsByTagName('table');

    for (var i = 0; i < tables.length; i++) {
	tables[i].style.display="block";
    }
		
    let newNode = document.createElement("div");
    newNode.style.width="100%";
    newNode.innerHTML=nl2br(getE("hsEulaTxtId2").innerHTML);
    getE("hsEulaDivId").appendChild(newNode);


    getE("hsContinueId").value="weiter";
    getE("hsContinueId").style.display="block";
    getE("hsAcceptLabelId").innerHTML="Ich habe die Nutzungsbedingungen gelesen";
    getE("hsAcceptLabelId").style.color="black";
    getE("hsAcceptLabelId").addEventListener("click",switchCheck,false);
}, 500);

function switchCheck()
{
    if(document.getElementById("hsAcceptCkbId").checked)
    {
	getE("hsAcceptCkbId").checked=false;
    } else {
	getE("hsAcceptCkbId").checked=true;
    }
    updateContinueBtn();
}

function getE(elem)
{
    return document.getElementById(elem);
}

function nl2br (str, is_xhtml) {
    if (typeof str === 'undefined' || str === null) {
        return '';
    }
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}</script>

Infos zum Javascript-Bereich:

  • timeout muss unbedingt vorhanden sein, da die ganze Seite zunächst geladen sein muss, bevor wir mit Javascript die Elemente darin ansprechen können. die 500ms hier sind vielleicht etwas kurz und können bei Bedarf auf 1000ms oder mehr erhöht werden, allerdings ist dann das verhalten der Seite etwas “seltsam”; weil sie erst nach 1000ms oder mehr korrekt angezeigt wird.
  • die Texte für Name/Passwort sowie “Nutzungsbedingungen akzeptiert” und “Continue” werden im Javascript ersetzt (und können dort angepasst werden).
  •  die eigentlichen Text-Area-Blöcke werden mithilfe des CSS auf “nicht darstellen” gesetzt, vom Javascript gelesen und als normaler HTML-Text mittels nl2br ausgegeben. Hier sollte man sogar mit HTML in den Terms-and-Conditions arbeiten können.

 

Das Ergebnis schaut dann wie folgt aus und ist unserer Meinung nach auf Handys wesentlich besser benutzbar; die Schriftgröße der Eingabefelder haben wir für Mobile Devices entsprechend angehoben, sie ist natürlich für den PC/Laptop vielleicht etwas zu groß geraten:

[…]

 

für Mobile Geräte ergibt sich dann folgendes Bild:

[…]

Herzlichen Dank an meinen Kollegen Martin Dörr für die Unterstützung im Bereich CSS und Javascript; sowie an Stackoverflow für eine praktikable nl2br Funktion zur besseren Darstellung des Terms-of-Service-Textes.

 

Disclaimer etc:

  • Das ganze ist nicht wirklich so vorgesehen und daher fast schon “böser hack[tm]” zu sehen. Es kann keine Garantie gegeben werden, dass dies auch mit dem nächsten Fireware Release unverändert funktioniert, oder überhaupt noch so machbar ist.  Nachbau auf eigene Gefahr! 
  • Vorlagen für Datenschutz-Bestimmungen (Terms-and-Conditions) finden Sie im Internet, z.B unter https://www.datenschutz-guru.de/mustervertrag-nutzungsbedingungen-fuer-gaeste-wlan/

Bei Fragen erreichen Sie uns unter https://www.boc.de/support/

 

2 Kommentare zu “Tricks zur Anpassung der Hotspot-Login-Seite des Gateway Wireless Controller”

  1. Mathias Thiem

    Hallo Herr Maier,

    ich habe die Captive Portal bei uns auch so angepasst, ich hoffe nicht dass nach einem Release das nicht mehr möglich ist. Im Gegenteil sollte WatchGuard diesen Part noch etwas ausbauen.

    Sehr schöner Beitrag.

    Gruß Mathias Thiem

Leave a Reply

Your email address will not be published. Required fields are marked *