16
HTML & templates / Alternative login form for modern browsers
« on: August 25, 2018, 03:05:25 AM »
Thanks to danny and his idea (in this post), and after spending several hours finding a solution and doing lot of tests, I think we finally have a working workaround solution for login from mobile browsers (that it even work on desktop browsers too).
1. In the "Virtual File System" box, right click on the first element (Home)
2. Properties
3. Diff template
4. Enter this text:
Please test it and report the results (remember to create an account first on HFS). I've literally wasted all my free afternoon, but I'm happy with the results!. It may not be perfect, so, feel free to adapt/correct/enhance the code...
Cheers,
Leo.-
1. In the "Virtual File System" box, right click on the first element (Home)
2. Properties
3. Diff template
4. Enter this text:
Code: [Select]
[unauthorized]
<h1>{.!Unauthorized.} {.!/ Please login….}</h1>
{.!Either your user name and password do not match, or you are not permitted to access this resource..}<br>
{.!Please login to access to your account, and check if you have the correct permissions to continue..}<br>
<br>
<fieldset id='login'>
<legend><img src="/~img27"> {.!Login.}</legend>
<center>
<input type='text' id='usr' size='15' placeholder=" Username" value=""><br>
<input type='password' id='psw' size='15' placeholder=" Password" value=""><br>
<input type='button' id='lognow' style="width:110px;" value="{.!Login.}" onclick="NewLogin();">
</center>
</fieldset>
<br>
<script>
function NewLogin() {
var xhr = new XMLHttpRequest();
var ThisFolder = window.location;
var ThisUser = document.getElementById("usr").value;
var ThisPass = document.getElementById("psw").value;
var LoginToken = ThisUser+':'+ThisPass;
xhr.open("GET", "/~login", true);
xhr.withCredentials = true;
xhr.setRequestHeader("Authorization", 'Basic ' + btoa(LoginToken));
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (window.location.href.indexOf("~login") != -1) {
window.location.replace('/?success');
} else {
window.location.replace(ThisFolder);
};
}
if (xhr.readyState == 4 && xhr.status == 401) {
alert("Invalid credentials! \(Wrong username or password\)");
}
}
xhr.send();
}
</script>
Please test it and report the results (remember to create an account first on HFS). I've literally wasted all my free afternoon, but I'm happy with the results!. It may not be perfect, so, feel free to adapt/correct/enhance the code...
Cheers,
Leo.-