rejetto forum

[Help] Making old template run entirely on Ajax

0 Members and 1 Guest are viewing this topic.

Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 700
  • Status: On hiatus (unspecified time)
    • View Profile
    • twitter.com/LeoNeeson
Hi people! :) I'm experimenting on making the old legacy template work entirely using Ajax/XHR requests, to avoid reload/refreshing/loading a new page. Here is my current work (download the old template here, or use the default template of HFS v2.3m, and replace the 'body' with the following code):

Quote
<body>
<!--{.comment|--><h1 style='margin-bottom:100em'>WARNING: this template is only to be used with HFS 2.3 (and macros enabled)</h1> <!--.} -->
{.$box panel.}
<div id="list-panel"></div>

<script type="text/javascript">
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/~list");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onload = function() {document.getElementById("list-panel").innerHTML = xhr.responseText};
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      alert("XHR request OK");
    }
    if (xhr.readyState == 4 && xhr.status == 401) {
      alert("XHR request fail");
    }
  }
  xhr.send();
</script>


</body>

And here is a shorter version:

Quote
<body>
<!--{.comment|--><h1 style='margin-bottom:100em'>WARNING: this template is only to be used with HFS 2.3 (and macros enabled)</h1> <!--.} -->
{.$box panel.}
<div id="list-panel"></div>

<script type="text/javascript">
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("list-panel").innerHTML = this.responseText;
      alert("XHR request OK");
    }
  };
  xhr.open("GET", "/~list", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send();
</script>


</body>

The XHR request work (I'm temporally using an 'alert' to be sure), but the files are not show. I'm sure my code is wrong. The %list% variable fails (doesn't get executed, since, if I'm not mistaken, %list% is meant to run on the server side, but the XHR is run on the client side). I don't know what to change to make this work, but I'm open to listen your suggestions...

This was requested and discussed a long time ago (here), and there Rejetto suggested a way more elegant (shorter) Ajax code. So, feel free to suggest a more pure Ajax-jQuery code, as long it work on old browsers (to support the same old browsers that this old template supported). Please avoid using ES6 (like 'promises', or anything not supported by legacy browsers). My objective is to use JavaScript code compatible with jQuery v1.4.2 (or the most "pure" plain vanilla JavaScript as possible).

I don't want to redesign the old template, only to make it entirely run on Ajax, so the changes must be as minimal as possible. Anyone feel free to collaborate, this post is open to everyone. ;)

Cheers,
Leo.-
« Last Edit: April 16, 2020, 05:24:16 PM by LeoNeeson »
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline dj

  • Tireless poster
  • ****
    • Posts: 211
  • 👣 🐾
    • View Profile
    • PWAs
Don't forget, there's already a template doing it.
It's called mobil-light
It never reloads the page.

There's also a older version without ES6 (based on your suggestion).

The "legacy" template is not mobil-friendly. why invest work?
besides, jquery is not my thing.

P.S.:
http://localhost/~list  not found
http://localhost/~files.lst used in my template


« Last Edit: April 16, 2020, 06:05:41 PM by dj »


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 700
  • Status: On hiatus (unspecified time)
    • View Profile
    • twitter.com/LeoNeeson
Don't forget, there's already a template doing it.
It's called mobil-light
It never reloads the page.

There's also a older version without ES6 (based on your suggestion).
:) Yes, mobil-light is excellent, but it is a completely different template (I appreciate you point me to mobil-light_V4.4oldbrowsers.zip since it could be a good start point to adapt the old template). I'll check it out, but I still leave my question open...

http://localhost/~list  not found
I use it to call the [ list ] section.

why invest work?
Because the old default template is still used by users on desktop PCs. It has a nice interface that was used over 10 years and has a lot of users that are comfortable with it (I'm mostly talking about elderly people with old hardware, and besides that, the old default template has a broad wide legacy browser support).

Anyway, it has no point to discuss the "why" reasons, since "I do this as a challenge". If this can be done, then I take the effort to try to complete the challenge. It shouldn't be "that" hard to do it, right?... ??? ;)
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 700
  • Status: On hiatus (unspecified time)
    • View Profile
    • twitter.com/LeoNeeson
:) I would like to thank DJ for having the patience of explaining me that it's not as easy as sounds to convert this template to Ajax. I would leave this question open, just in case someone would like to contribute with something...

I would like to also explain that my final objective was to bring the form-based login found in the 'login.tpl' template (done in 2010 by rejetto, which you can found the latest source code files, or as a attachment in this post), into the latest version of the old default template. I was amazed on how well it works (everything but the logout, which by design can't work perfect). :D

To tell the true, IMHO, I think that HFS v2.4 should have a form-based login by default, even with a 'Remember password' checkbox option, allowing to save credentials in a cookie (to avoid the hassle of having to re-login every time we close the browser). Well, it's only a suggestion, since in the near future, most browsers could remove the 'Basic Auth Popup' (some browsers are already deprecating it). I was planning to add a 'form-based login' to the old legacy template. And using only Ajax would 'somewhat' solve the logout issue, since it would disable going back to a previous page (which would automatically re-login the user).

Cheers,
Leo.-
« Last Edit: April 17, 2020, 05:02:18 PM by LeoNeeson »
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline dj

  • Tireless poster
  • ****
    • Posts: 211
  • 👣 🐾
    • View Profile
    • PWAs
Remember:

form-based login (similiar to this template)
'Remember password' checkbox option is possible, but you can also use the browsers Save Password function
logout (var ref=document.querySelector('button[onclick*=user]') for V2.4)



Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 700
  • Status: On hiatus (unspecified time)
    • View Profile
    • twitter.com/LeoNeeson
Remember: form-based login (similiar to this template)
Yes, but my form-based login is flawed (it works worst than rejetto implementation). Do this: use my form-based login, and insert user/pass in my form (not in the internal browser popup), then open several password protected tabs in your browser, then on HFS click on 'Kick all connections', then on the browser try to open any password protected file, BANG! it asks for user and password again! But if you do the same using rejetto form-based login this doesn't happen (and everything works as expected without asking user/pass again). That's why I've stopped developing or enhancing my form-based login, because it was not good enough.

'Remember password' checkbox option is possible, but you can also use the browsers Save Password function
I know, but my idea is not having to rely on browsers functionality. For example, see how this forum works, it has a form-based login (it never opens a browser popup), and you can set an 'Always stay logged in' (stored in a cookie), or even set how many minutes you want to stay logged in. That's a cool feature you will not find in the internal browser functionality. I'm not saying to add this to rejetto's template, only having a 'Remember password' checkbox is enough (but it's not a request, I'm only saying).
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline dj

  • Tireless poster
  • ****
    • Posts: 211
  • 👣 🐾
    • View Profile
    • PWAs
To add remember username to your login is simply:
Add name='username' to the first input field
Also replace center with form , last input type with submit and add ;return false

can confirm that it logs out more often  :(
« Last Edit: April 20, 2020, 03:54:47 AM by dj »


Offline dj

  • Tireless poster
  • ****
    • Posts: 211
  • 👣 🐾
    • View Profile
    • PWAs
rejetto's login-form seems also to work in newer templates (hfs2.4rc, mobil-light,...)

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>
            <form method='post' onsubmit='return login()' action="/">  <!-- return true  -->
                <table>
                <tr><td align='right'>{.!Username.}<td><input name='__USER' size='15' /><p>
                <tr class='hideThis'><td align='right'>{.!Password.}<td><input name='__PASSWORD' size='15' type='password' />
                <tr class='hideThis'><td><td><input type='submit' value='{.!Login.}'>
                </table>
            </form>
</fieldset>
<br>


<script>
function login() {
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "/");
request.onload=function(){ window.location.replace('/')}
request.send(new FormData(formElement));
    return false;
}

</script>
« Last Edit: April 26, 2020, 08:01:02 AM by dj »


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 700
  • Status: On hiatus (unspecified time)
    • View Profile
    • twitter.com/LeoNeeson
I'm currently working on a 2.0 version of 'Alternative login form for modern browsers', and it's almost finished (I'm polishing some details). :D It should be finished (hopefully) between today and tomorrow (sunday). Don't expect to be perfect yet, since logout is still buggy.

rejetto's login-form seems also to work in newer templates (hfs2.4rc, mobil-light,...)

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>
            <form method='post' onsubmit='return login()' action="/">  <!-- return true  -->
                <table>
                <tr><td align='right'>{.!Username.}<td><input name='__USER' size='15' /><p>
                <tr class='hideThis'><td align='right'>{.!Password.}<td><input name='__PASSWORD' size='15' type='password' />
                <tr class='hideThis'><td><td><input type='submit' value='{.!Login.}'>
                </table>
            </form>
</fieldset>
<br>


<script>
function login() {
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "/");
request.onload=function(){ window.location.replace('/')}
request.send(new FormData(formElement));
    return false;
}

</script>
Yes, I already know, but there are some technical differences (thanks anyway for commenting it). I'll explain this better, on another post later (and I've also found a possible bug on the login/logout system). Stay tuned for news... ;)
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 700
  • Status: On hiatus (unspecified time)
    • View Profile
    • twitter.com/LeoNeeson
can confirm that it logs out more often  :(
'Alternative login form for modern browsers' v2.0 released! :D It's based on the original work of Rejetto (back in 2010), and it makes use of much more secure login implementation (Digest scheme), so, now the password is hashed (MD5) and is NOT base64 encoded (that's like almost the same as plain text). Although Digest scheme it's not 100% bullet-proof secure, it's much more secure than using the internal browser login popup (browser pop-up window example), since the browser login uses the Base64 login (Basic Auth). When I was doing this, I've also discovered a bug, that is preventing HFS to have a perfect logout system (based on a form-based login). When this is fixed, an ajax template is not needed anymore, at least not for having a working logout (that was the main purpose of this thread).

Cheers,
Leo.-
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline dj

  • Tireless poster
  • ****
    • Posts: 211
  • 👣 🐾
    • View Profile
    • PWAs
auto login beta

Thanks Leo for 'Alternative login form for modern browsers' v2.0
« Last Edit: May 01, 2020, 12:35:06 PM by dj »