How to Customize MikroTik Hotspot Login Page
MikroTik Hotspot is an awesome service that can be customized according to any organization need. MikroTik Hotspot is able to authenticate and authorize network users so easily. Besides premium Hotspot service, it can also be used as a public Hotspot network. Although public network is a free network service, it can be a better source of income by serving ads. As no user can get internet access without visiting Hotspot login page, the login page is main space for serving ads. MikroTik Hotspot is nothing but a HTML page. So, knowing simple HTML, CSS and JavaScript, we can easily customize Hotspot login page according to our demand and can also put partner’s ads in login page to increase earning.
In my previous article, I discussed how to configure MikroTik Hotspot using Winbox. Default Hotspot configuration provides a login page that we may find boring and not so perfect for our organization. So, in this article I will discuss how to customize Hotspot Login page according to our demand so easily.
3 Easy Steps to Customize MikroTik Hotspot Login Page
Customizing MikroTik Hotspot login page is not so difficult task. Knowing some basic HTML, CSS and JavaScript, we can easily customize login page according to our demand. So, if we wish to customize login page, we need to do the following three steps.
- Downloading HTML login page from MikroTik Router
- Editing login page with own HTML, CSS and JavaScript code
- Uploading edited login page to MikroTik Router
Steps 1: Downloading HTML login page from MikroTik Router
When we setup Hotspot Server, it automatically creates necessary and basic files required to authenticate and authorize Hotspot users. These files including login page are kept in Files directory in MikroTik Router. So, at first we have to download the HTML login page from Files directory because there is no way to edit files keeping in MikroTik Router. The following steps will show how to download Hotspot login page from Files directory.
- Login to MikroTik Router using Winbox software using full permission user credentials.
- Click on Files menu. File List window will appear where you will find a lot of files created by Hotspot Server.
- Search and find hotspot/login.html file and then drag and drop this file in your Desktop or in a directory where you prefer.
Step 2: Editing Login Page with own HTML, CSS and JavaScript Code
After downloading HTML login page, we will now edit the login file. So, open this file with any HTML editor. I personally use Notepad++ because it is free and easy to use. But if you have better editor, you can also use that.
Opening the login file, you will find basic HTML tags like html, head, title, body etc. are present there. You will also find CSS code in style tag and JavaScript code in script tag. Besides these, some logical codes written in MikroTik own language is present there.
We must always remember not to touch MikroTik Router’s logical code as well as JavaScript code written by MikroTik Router. But we are free to extend JavaScript according to our demand.
Hotspot login area is a HTML form which is aligned with static table element. If we wish we can remove the table element replacing with any suitable HTML tag for designing purpose but we must keep the form element and its action untouched as well as the input elements and its attributes. CSS selector like class and id can be applied to any HTML element for designing purpose.
Keeping the above restrictions in mind we are now free to customize the login page as our wish. I have rearranged the login page and applied some designs on it in my LAB Hotspot Server. The entire HTML, CSS and JavaScript code is given below for your reference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<title>System Zone Hotspot</title>
<style type="text/css">
body {
color: #737373;
font-size: 14px;
font-family: verdana;
}
.container{
width:300px;
height:auto;
margin:0 auto;
margin-top:10vh;
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc;
padding:15px 20px 25px 20px;
}
.banner{
width:100%;
text-align:center;
}
.banner img{
max-width:100%;
height:auto;
}
.banner label{
font-size:20px;
font-weight:bold;
}
.error-panel{
width:100%;
height:auto;
margin-top:20px;
color:red;
}
.login-panel{
width:290px;
margin-top:30px;
}
.login-input{
width:100%;
height:40px;
margin-top:20px;
margin-bottom:20px;
}
.login-input input{
width:100%;
height:35px;
}
#login-button{
width:102%;
text-align:right;
}
#login-button input{
width:100px;
height:38px;
background-color:#b97d00;
border-color:#b97d00;
color:#fff;
}
#login-button input:hover{
background-color:#000;
border:1px solid #000;
}
.free-trial{
width:100%;
margin-top:20px;
margin-bottom:10px;
text-align:center;
}
.free-trial a{
text-decoration:none;
color:#b97d00;
}
.free-trial a:hover{
text-decoration:underline;
}
.datetime{
width:100%;
margin-top:15px;
text-align:center;
font-size:20px;
}
</style>
</head>
<body onload="startTime()">
$(if chap-id)
<form name="sendin" action="$(link-login-only)" method="post">
<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 type="text/javascript" src="/md5.js"></script>
<script type="text/javascript">
<!--
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)
<div class="container">
<div class="banner">
<img src="/img/logo.png" />
<label>Hotspot Login</label>
</div>
<form name="login" action="$(link-login-only)" method="post"
$(if chap-id) onSubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
$(if error)
<div class="error-panel">
$(error)
</div>
$(endif)
<div class="login-panel">
<div class="login-input">
<input name="username" type="text" value="$(username)" placeholder="Login username"/>
</div>
<div class="login-input">
<input name="password" type="password" placeholder="Login password"/>
</div>
<div id="login-button"><input type="submit" value="Login" /></div>
<div class="free-trial">
$(if trial == 'yes')
Free trial available, <a href="$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)">click here</a>.
$(endif)
</div>
<div class="datetime">
<span id="date"></span> - <span id="time"></span>
</div>
</div>
</form>
</div>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
var dt = new Date();
document.getElementById("date").innerHTML = dt.toLocaleDateString();
function startTime() {
var today = new Date();
document.getElementById("time").innerHTML = today.toLocaleTimeString()
var t = setTimeout(startTime, 500);
}
</script>
</body>
</html>
The above code is written for a simple login page but it includes all required HTML, CSS and JavaScript code as example. So, if you have HTML, CSS and JavaScript experience, you can easily extend your login page functionality.
Note: if you have any image in login page, the image must upload in hotspot/img directory and add the image source as /img/logo.png where logo.png is an image file that representing company logo.
Step 3: Uploading Edited Login Page to MikroTik Router
After editing login page, we will now upload the edited file to MikroTik Router. The following steps will show how to upload the edited file in MikroTik Router.
- Login to MikroTik Router again with Winbox software.
- Click on Files menu item to open File List window.
- Remove the old login page under hotspot directory.
- Now drag and drop your edited file under hotspot directory.
Now refresh your login page and you will find the new login page designed by yourself. If you use my above code, the login page looks the following image.
How to customize MikroTik Hotspot login page with HTML, CSS and JavaScript has been discussed in this article. I hope you will now be able to customize MikroTik Hotspot login page so easily. However, if you face any confusion to customize Hotspot login page with HTML, CSS and JavaScript code, feel free to discuss in comment or contact me from Contact page. I will try my best to stay with you.
Why not a Cup of COFFEE if the solution?
