Syed Jahanzaib Personal Blog to Share Knowledge !

March 10, 2014

Mikrotik Hotspot: Different login page for Mobile Users

Filed under: Mikrotik Related — Tags: — 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

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

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

Advertisements

27 Comments »

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

    Like

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

    • edit status.html like:

      if ((screen.width<=800) && (screen.height<=600)) {
      document.location="mobilestatus.html";
      }
      else {
      document.location="otherstatus.html";
      }

      Like

      Comment by roulyz — March 11, 2014 @ 4:04 PM

  2. good work

    Like

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

    • how have you done it? can user log in?

      Like

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

  3. GOOD SIR many thanks

    Like

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

  4. 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

    Like

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

    • Open Mikrotik LOG window, and try to login, then POST the error you are seeing,

      Like

      Comment by Syed Jahanzaib / Pinochio~:) — March 11, 2014 @ 8:16 AM

      • 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

        Like

        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.

      Like

      Comment by Syed Jahanzaib / Pinochio~:) — March 11, 2014 @ 8:23 AM

      • 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

        Like

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

      • cool sir it work when I uncheck HTTP CHAP and check HTTP PAP
        Thanks

        Like

        Comment by roulyz — March 11, 2014 @ 3:55 PM

  5. 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)

    Like

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

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

    Like

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

    • True, thats the way to go. Frankly this method posted above seems like from the age of Dinosaurs 🙂

      Like

      Comment by Fahd Murtaza — March 24, 2014 @ 1:24 AM

  7. 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

    Like

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

  8. 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?

    Like

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

  9. Thank you for your response

    Like

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

  10. 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

    Like

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

  11. Hi,

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

    any idea why?

    Best Greeds

    Like

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

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

    Like

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

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

    Like

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

  14. pppoe users ow to conect with microtik server ?? \

    Like

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

  15. pppoe users how to conect with microtik server ?? \

    Like

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

  16. Salam

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

    Like

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

  17. error not appear on the login page

    Like

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

  18. 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

    Like

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


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: