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

0 Members and 1 Guest are viewing this topic.

Offline LeoNeeson

  • Insane poster
  • *****
  • Posts: 465
  • 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 ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Follow members gave a thank to your post:


Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
Re: Alternative login form for modern browsers
« Reply #1 on: August 28, 2018, 06:38:52 AM »
Wow!  It does work! 
Instead of the usual round of hazing, I can actually log in. 
I tested it on normal mobile; and got logged into HFS, for the first time. Brilliant!

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 783
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Alternative login form for modern browsers
« Reply #2 on: August 28, 2018, 03:33:10 PM »
thank you leo, the code works fairly well.

I did attempt to add/change css and put form stuff in it as per dany request on what it might have... etc...

here is that code for refference.

Code: [Select]
[unauthorized]

<!-- I should be a EVENT Under the House - "Home icon / " Root Virtual File system!-->
<!-- include css file here-->
    <style> /* below line is write to use google font online  */
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
 
h2{
 background-color: #FEFFED;
 padding: 30px 35px;
 margin: -10px -50px;
 /*text-align:center; */
 border-radius: 10px 10px 0 0;
}
 
hr{
 margin: 10px -50px;
 border: 0;
 border-top: 1px solid #ccc;
 margin-bottom: 40px;
}
 
div.container{
 width: 900px;
 height: 610px;
 margin:35px auto;
 font-family: 'Ubuntu', sans-serif;
}
 
div.main{
 width: 300px;
 padding: 10px 50px 25px;
 /* border: 2px solid gray; */
 border-radius: 10px;
 font-family: raleway;
 float:left;
 margin-top:50px;
}
 
input[type=text],input[type=password]{
 width: 150px;
 height: 40px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: #4f4f4f;
 font-size: 16px;
 border-radius: 5px;
}

label{
 color: #464646;
 text-shadow: 0 1px 0 #fff;
 font-size: 14px;
 font-weight: bold;
}

center{
 font-size:32px;
}

.note{
 color:red;
}
 
.valid{
 color:green;
}

.back{
 text-decoration: none;
 border: 1px solid rgb(0, 143, 255);
 background-color: rgb(0, 214, 255);
 padding: 3px 20px;
 border-radius: 2px;
 color: black;
}
 
input[type=button]{
 font-size: 16px;
 background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
 border: 1px solid #e5a900;
 color: #4E4D4B;
 font-weight: bold;
 cursor: pointer;
 width: 150px;
 border-radius: 5px;
 padding: 10px 0;
 outline:none;
}
 
input[type=button]:hover{
 background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

.fugo{
 float:right;
} </style>

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

<div class="container">
  <div class="main">
  <div align="left">
<!-- <h2>Login Form</h2><hr/> -->
<!-- <form id="form_id" name="myform"> -->
<fieldset id='login'>
  <legend><img src="/~img27"> {.!Login.}</legend>
  <center>
  <label for="uname">User Name :</label></br>
    <input type='text' class="form-control" id='usr' tabindex="1" size='15' placeholder=" Username" value="" required><br>
    <span class='error-message' id='uname-error'></span>

<label>Password :</label></br>
<input type='password' class="form-control" id='psw' tabindex="2" size='15' placeholder=" Password" value="" required><br>
    <span class='error-message' id='pw-error'></span>

<input type='button' tabindex="3" class="btn btn-default" id='lognow' style="width:110px;" value="{.!Login.}" onclick="NewLogin();">
    <span class='error-message' id='submit-error'></span>

<!--    <label><input type="checkbox" checked="checked" name="remember"> Remember me </label> -->
<!-- <button type="button" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> -->
<!-- </form> -->

 </center>
</fieldset>
</div>
  </div>
</div>
<br>
</br>
<!-- Did I work? -->
<p> User: %user% @ IP: %ip% </p>
</div>

i had did a test of 2 vitural folder eacch with 1 acount acess split between 2 accounts.

the unathoruzed code will log you in 1 for that folder (it doen't keep you loged in if i leave to another area.)

also the only way i could eror was to click ont he resouce and hit cancle
thus i hit the even t created 404 login.
but you err wrong credential broungh back the default login box (had to hit cancle) before i saw the alert.

other wise, exclent code, and thank you for this.

Also looks like o need to relearn the xml httl request and HTML code :/
https://stackoverflow.com/questions/28238514/login-form-valiation-using-xmlhttprequest
« Last Edit: August 29, 2018, 11:53:56 PM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1