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,
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
♦♦♦
mobilelogin.html is displayed if the client device/screen size is under 800/600. You can modify it as per requirements.
♦♦♦
↓
↓
After three files have been created, Upload them to MIKROTIK / Files > Hotspot folders.
Something like below …
↓
Now, try to login from DESKTOP PC, and you should see otherlogin.html page.
↓
TIPS:
If user is unable to login, and you are seeing following error in LOG window
↓
☻
Regard’s
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
1
2
3
4
5
6
7
8
| <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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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&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)&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> </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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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&dst=$(link-orig-esc)">Latviski</a></div><div align="center"><font
size="4"><b>DESKTOP </b></font><b><font
size="4"> 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)&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> </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 encryptedThen 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
Post a Comment