Author Topic: Alternative login form for modern browsers  (Read 967 times)

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 579
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
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:
Code: [Select]
[unauthorized]
<h1>{.!Unauthorized.} {.!&#47; Please login&hellip;.}</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.-
« Last Edit: August 25, 2018, 03:08:25 AM by LeoNeeson »
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
• I'm open to help and share any file you may need (just ask me) ;)

Follow members gave a thank to your post: