Mikrotik Hotspot: Different login page for Mobile Users

March 10, 2014

Mikrotik Hotspot: Different login page for Mobile Users

Filed under: Mikrotik Related — Tags: ogin failed: password is not chap encrypted — Syed Jahanzaib / Pinochio~:) @ 1:27 PM

Recently a Nigerian friend asked about how we can configure different login page for Mobile users , which could be a light weight and customized for mobile/pda screen size with customized welcome message. Following is a quick method on how you can display different login page if user is login from mobile or device, & default login page for desktop users.

This is quick method, but if you want more sophisticated method like detect client by device, then you can use variable functions and act accordingly.

First the logic: You have to create 3 html pages,

1-     login.html
2-    mobilelogin.html
3-    otherlogin.html

1- login.html [Re directer which check user device/screen size]

login.html page is a kind of re directer which will actually check the screen size of client device/screen. If it found it less then 800/600 , it will assume its a mobile device and will redirect to mobilelogin.html,
otherwise it will display another login page otherlogin.html which could be default login page for all.

First create login.html

<script type="text/javascript">
if ((screen.width<=800) && (screen.height<=600)) {
document.location="mobilelogin.html";
}
else {
document.location="otherlogin.html";
}
</script>

♦♦♦

2- mobilelogin.html [lightweight login page for mobile users]

mobilelogin.html is displayed if the client device/screen size is under 800/600. You can modify it as per requirements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>internet hotspot > login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<style type="text/css">
body {color: #737373; font-size: 10px; font-family: verdana;}

textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}

a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
</style>

</head>

<html>
<body>

<div align="center">
<a href="$(link-login-only)?target=lv&amp;dst=$(link-orig-esc)">Latviski</a>
</div>
<div align="center">
<b><font size="4">mobile user</font></b></div>

<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<div style="color: #c1c1c1; font-size: 9px">Please log on to use the internet hotspot service<br />$(if trial == 'yes')Free trial available, <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">click here</a>.$(endif)</div><br />
<table width="280" height="280" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<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" />

<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="$(username)"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td>&nbsp;</td>
<td><input type="submit" value="OK" /></td>
</tr>
</table>
</form>
</td>
</tr>
<tr><td align="center"><a href="http://www.mikrotik.com" target="_blank" style="border: none;"><img src="img/logobottom.png" alt="mikrotik" /></a></td></tr>
</table>

<br /><div style="color: #c1c1c1; font-size: 9px">Powered by MikroTik RouterOS</div>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
</td>
</tr>
</table>

<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>

♦♦♦

3- otherlogin.html [standard login page for ALL]

otherlogin.html / This is standard login.html page which is default mikrotik login page. You can use your old default login.html and rename it as to otherlogin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>internet hotspot > login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<style type="text/css">
body {color: #737373; font-size: 10px; font-family: verdana;}

textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}

a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
</style>

</head>

<html>
<body>

<div align="center">
<a href="$(link-login-only)?target=lv&amp;dst=$(link-orig-esc)">Latviski</a>
</div>
<div align="center">
<font size="4"><b>DESKTOP </b></font><b><font size="4">&nbsp;user</font></b></div>

<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<div style="color: #c1c1c1; font-size: 9px">Please log on to use the internet hotspot service<br />$(if trial == 'yes')Free trial available, <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">click here</a>.$(endif)</div><br />
<table width="280" height="280" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<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" />

<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="$(username)"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td>&nbsp;</td>
<td><input type="submit" value="OK" /></td>
</tr>
</table>
</form>
</td>
</tr>
<tr><td align="center"><a href="http://www.mikrotik.com" target="_blank" style="border: none;"><img src="img/logobottom.png" alt="mikrotik" /></a></td></tr>
</table>

<br /><div style="color: #c1c1c1; font-size: 9px">Powered by MikroTik RouterOS/zaib</div>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
</td>
</tr>
</table>

<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>

↓

After three files have been created, Upload them to MIKROTIK / Files > Hotspot folders.

TEST DRIVE …

First, From your mobile device try to connect to web and you should see yout mobilelogin.html page ,
Something like below …

Mikrotik HOTSPOT Mobile User Login Page

↓

Now, try to login from DESKTOP PC, and you should see otherlogin.html page.

Mikrotik HOTSPOT Desktop User Login Page

↓

TIPS:

If user is unable to login, and you are seeing following error in LOG window

login failed: password is not chap encrypted

Then Go to IP > Hotspot > Server Profiles and edit the relevant profile, go to the Login tab and uncheck HTTP CHAP and check HTTP PAP. Then try again.

↓

☻

Regard’s
Syed Jahanzaib

Comments (27)

27 Comments »

how if i want to show different login status pages based on their hotspot user profiles

LikeLike

Comment by Asri Rachman — March 10, 2014 @ 2:16 PM

Reply
- edit status.html like:
  
  if ((screen.width<=800) && (screen.height<=600)) {
  document.location="mobilestatus.html";
  }
  else {
  document.location="otherstatus.html";
  }
  
  LikeLike
  
  Comment by roulyz — March 11, 2014 @ 4:04 PM
  
  Reply
good work

LikeLike

Comment by monarech — March 10, 2014 @ 3:34 PM

Reply
- how have you done it? can user log in?
  
  LikeLike
  
  Comment by roulyz — March 10, 2014 @ 10:56 PM
  
  Reply
GOOD SIR many thanks

LikeLike

Comment by roulyz — March 10, 2014 @ 8:52 PM

Reply
HELLO sir, I have test this tutorial But there are some problems. Login page is redirect always on otherlogin.html when user want to log in; user can’t be connected

LikeLike

Comment by roulyz — March 10, 2014 @ 10:53 PM

Reply
- Open Mikrotik LOG window, and try to login, then POST the error you are seeing,
  
  LikeLike
  
  Comment by Syed Jahanzaib / Pinochio~:) — March 11, 2014 @ 8:16 AM
  
  Reply
  - salam, how make this Different login page for Mobile Users on other port
    eg: port 1——->>> wan
    Port 1 ——->>> hotspot1 ———————–>>>> Different login page for Mobile Users
    Port 2 ——->>> hotspot2 ———————–>>>> Different login page for Mobile Users
    
    LikeLike
    
    Comment by zakky — March 25, 2014 @ 6:19 PM
- If user is unable to login, and you are seeing following error in LOG window
  login failed: password is not chap encrypted
  
  Then Go to IP > Hotspot > Server Profiles and edit the relevant profile, go to the Login tab and uncheck HTTP CHAP and check HTTP PAP. Then try again.
  
  LikeLike
  
  Comment by Syed Jahanzaib / Pinochio~:) — March 11, 2014 @ 8:23 AM
  
  Reply
  - i have 5 user i need to give 1 hour facebook access without time schedule (when user login to facebook counter start for 60 minute)
    
    can u help me
    
    LikeLike
    
    Comment by mctnetwork — March 11, 2014 @ 2:46 PM
  - cool sir it work when I uncheck HTTP CHAP and check HTTP PAP
    Thanks
    
    LikeLike
    
    Comment by roulyz — March 11, 2014 @ 3:55 PM
salam

i have 5 user i need to give 1 hour facebook access without time schedule (when user login to facebook counter start for 60 minute)

LikeLike

Comment by mctnetwork — March 11, 2014 @ 2:45 PM

Reply
it’s also can make one page by using MEDIA QUERIES and make the login pag responsive

LikeLike

Comment by yousef mohamed — March 12, 2014 @ 3:53 AM

Reply
- True, thats the way to go. Frankly this method posted above seems like from the age of Dinosaurs 🙂
  
  LikeLike
  
  Comment by Fahd Murtaza — March 24, 2014 @ 1:24 AM
  
  Reply
The Honorable Mr. Greetings tried so hard to reach your Alamil you where you professor of Maikarotik I hope you help in a way to activate the Cache Almikrotik Farshen 6.11 ccr 15g ram and be thankful and knowledge of God Madk
Brother Hani Mansour
Arab Republic of Egypt
dsl065@yahoo.com

LikeLike

Comment by Hany Mansor — April 7, 2014 @ 5:31 AM

Reply
Hello mr.Syed Jahanzaib / Pinochio~:), I need to as you a question. I work in ISP and have a proxy direction for nonpayment reminder for my client. It work good when my clients search with http but downt work with https. Is there any thing for this?

LikeLike

Comment by Ilir Daka — April 14, 2014 @ 9:18 PM

Reply
- https not supported.
  
  LikeLike
  
  Comment by Syed Jahanzaib / Pinochio~:) — April 15, 2014 @ 8:36 AM
  
  Reply
Thank you for your response

LikeLike

Comment by Hany Mansor — May 1, 2014 @ 3:51 AM

Reply
Dear Sir,

I checked it on android phone but its not going to mobile login its redirecting to otherlogin. Please guide me.

Thank you.

Muhammad Fawad

LikeLike

Comment by Muhammad Fawad — May 5, 2014 @ 12:49 PM

Reply
Hi,

i have the same problem, the script always redirect to the otherlogin.html

any idea why?

Best Greeds

LikeLike

Comment by rutzki — June 18, 2014 @ 4:42 PM

Reply
hi, thanks it’s work but the error not appear! like :”invalid password, invalid username” why?

LikeLike

Comment by khaled — June 21, 2014 @ 2:51 PM

Reply
error not appear! like :”invalid password, invalid username” why? in log , and did not connected

LikeLike

Comment by Ali — July 10, 2014 @ 12:11 AM

Reply
pppoe users ow to conect with microtik server ?? \

LikeLike

Comment by alybaba — July 27, 2014 @ 4:29 PM

Reply
pppoe users how to conect with microtik server ?? \

LikeLike

Comment by alybaba — July 27, 2014 @ 4:29 PM

Reply
Salam

Error not appear! like :”invalid password, invalid username” and User not exists why?

LikeLike

Comment by atifziaq — February 12, 2015 @ 4:45 PM

Reply
error not appear on the login page

LikeLike

Comment by Idowu — February 17, 2015 @ 12:30 PM

Reply
Need your help sir, after implementing this tutorial , I could not be able to see error message again on hotspot. Your urgent response will be highly appreciated sir.Thank
From Nigeria

LikeLike

Comment by Ogedengbe — March 2, 2015 @ 1:29 PM

Reply