{"id":10990,"date":"2020-08-11T17:23:04","date_gmt":"2020-08-11T15:23:04","guid":{"rendered":"https:\/\/www.boc.de\/watchguard-info-portal\/?p=10990"},"modified":"2024-07-23T15:07:49","modified_gmt":"2024-07-23T13:07:49","slug":"tricks-zur-anpassung-der-hotspot-login-seite-des-gateway-wireless-controller","status":"publish","type":"post","link":"https:\/\/wordpress.boc.de\/watchguard-info-portal\/2020\/08\/tricks-zur-anpassung-der-hotspot-login-seite-des-gateway-wireless-controller\/","title":{"rendered":"Tricks zur Anpassung der Hotspot-Login-Seite des Gateway Wireless Controller"},"content":{"rendered":"

In diesem Blog-Beitrag wollen wir die Hotspot-Login-Seite des Gateway Wireless Controllers ver\u00e4ndern, damit sie unter Mobile Devices etwas h\u00fcbscher aussieht und besser bedienbar wird.<\/p>\n

<\/p>\n

Man kann zwar ein Logo auf die WatchGuard hochladen und diverse Texte (Willkommens-Text, Terms-of-Service, \u00dcberschrift) definieren,
\naber die Logon-Buttons und Eingabefelder sind weiterhin mit vorgegebenen Texten (englisch) beschriftet.<\/p>\n

\"\"<\/a><\/p>\n

Zudem sind sie leider in der mobilen Ansicht schwer lesbar und schwer benutzbar.<\/p>\n

\"\"<\/a><\/p>\n

Mit einigen Tricks (Stylesheets und Javascript) lassen sich die Elemente aber ver\u00e4ndern.<\/p>\n

Der Trick hierbei ist, das Javascript-Element in die Box f\u00fcr den Wilkommens-Text zu schreiben; die CSS-Elemente kommen in die Box f\u00fcr die Terms-of-Service:<\/p>\n

\"\"<\/a><\/p>\n

Hierbei muss man mit Tricks arbeiten, um vorhandene Elemente zu umgehen oder zu \u00fcberschreiben. beispielsweise eine vorhandene textarea vor dem CSS schlie\u00dfen und und danach unter anderer ID wieder \u00f6ffnen. Das auftrennen ist ebenfalls notwendig, da der Willkommens-Bereich auf 2048 Characters begrenzt ist.<\/p>\n

Mit folgenden CSS und Javascript Elementen sind wir erfolgreich gewesen (Achtung: Javascript muss zwingend ins Welcome-Feld, CSS ins Terms-and-Conditions-Feld<\/strong>):<\/p>\n

<\/textarea>\r\n<style type=\"text\/css\">\r\n<!--\r\n\r\n#hsDivId {\r\n    width:95%;\r\n    text-align: left;\r\n    background-color: #FFF;\r\n    border: 5px solid gray;\r\n    overflow: auto;\r\n    margin:2px;\r\n    padding: 18px 0 8px 44px;\r\n    background-repeat: no-repeat;\r\n    min-height: 500px;\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n}\r\n#hsEulaTxtId {\r\n    min-height:400px;\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n}\r\n\r\n\/* hier die Ma\u00dfe des Logos hinterlegen *\/\r\n#hsLogoId {            \r\n    max-width: 300px !important;          \r\n    max-height: 300px !important;\r\n    clear: both;\r\n}\r\n\r\n#hsContinueId {\r\n    float:left !important;\r\n}\r\n\r\n\/* hier die Gr\u00f6\u00dfe der Checkbox *\/\r\n#hsAcceptCkbId {\r\n    width: 70px;\r\n    height: 70px;\r\n    margin-right: 15px;\r\n    margin-top: 20px;\r\n}\r\n#hsEulaTxtId {\r\n    display:none;\r\n}\r\n#hsEulaTxtId2 {\r\n    display:none;\r\n}\r\n\r\n\/* hier die Gr\u00f6\u00dfe des \"akzeptiert\"-Textes *\/\r\n#hsAcceptLabelId {\r\n    color:white;\r\n    font-size:80px;\r\n}\r\n\r\n#hsEulaDivId {\r\n    width:80%;\r\n}\r\n\r\n#hsDivId {\r\n    height:100% !important;\r\n    max-height: 100% !important;\r\n    overflow:auto;\r\n}\r\n\r\n#hsContinueId {\r\n    display:none;\r\n    width: 400px;\r\n    height: 110px;\r\n}\r\n\r\nh3 {\r\n    clear: both;\r\n}\r\n\r\ntd {\r\n    font-size:80px;\r\n}\r\n\r\n\/* hier die Gr\u00f6\u00dfe der User\/Passwort-Eingabefelder *\/\r\ninput {\r\n    height:80px;\r\n    font-size: 80px;\r\n    width:400px;\r\n}\r\n\r\ntable {\r\n    display: none;\r\n}\r\n\r\n--><\/style>\r\n<textarea id=\"hsEulaTxtId2\" cols=\"\" rows=\"\" readonly=\"yes\">\r\n\r\n... hier folgen die eigentlichen Terms-and-Conditions ...<\/pre>\n
<script>\r\nsetTimeout(function(){ \r\n\r\n    var tds = document.getElementsByTagName('td');\r\n    for (var i = 0; i < tds.length; i++) {\r\n    tds[i].innerHTML=tds[i].innerHTML.replace(\"User&nbsp;Name&nbsp;\",\"Name&nbsp;\");\r\n    tds[i].innerHTML=tds[i].innerHTML.replace(\"Passphrase&nbsp;\",\"Passwort&nbsp;\");\r\n    }\r\n    var tables = document.getElementsByTagName('table');\r\n\r\n    for (var i = 0; i < tables.length; i++) {\r\n    tables[i].style.display=\"block\";\r\n    }\r\n        \r\n    let newNode = document.createElement(\"div\");\r\n    newNode.style.width=\"100%\";\r\n    newNode.innerHTML=nl2br(getE(\"hsEulaTxtId2\").innerHTML);\r\n    getE(\"hsEulaDivId\").appendChild(newNode);\r\n\r\n\r\n    getE(\"hsContinueId\").value=\"weiter\";\r\n    getE(\"hsContinueId\").style.display=\"block\";\r\n    getE(\"hsAcceptLabelId\").innerHTML=\"Ich habe die Nutzungsbedingungen gelesen\";\r\n    getE(\"hsAcceptLabelId\").style.color=\"black\";\r\n    getE(\"hsAcceptLabelId\").addEventListener(\"click\",switchCheck,false);\r\n}, 500);\r\n\r\nfunction switchCheck()\r\n{\r\n    if(document.getElementById(\"hsAcceptCkbId\").checked)\r\n    {\r\n    getE(\"hsAcceptCkbId\").checked=false;\r\n    } else {\r\n    getE(\"hsAcceptCkbId\").checked=true;\r\n    }\r\n    updateContinueBtn();\r\n}\r\n\r\nfunction getE(elem)\r\n{\r\n    return document.getElementById(elem);\r\n}\r\n\r\nfunction nl2br (str, is_xhtml) {\r\n    if (typeof str === 'undefined' || str === null) {\r\n        return '';\r\n    }\r\n    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br \/>' : '<br>';\r\n    return (str + '').replace(\/([^>\\r\\n]?)(\\r\\n|\\n\\r|\\r|\\n)\/g, '$1' + breakTag + '$2');\r\n}<\/script>\r\n<\/pre>\n
Infos zum Javascript-Bereich:<\/p>\n