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