[Help] Making old template run entirely on Ajax

LeoNeeson · **on:** April 16, 2020, 05:22:36 PM

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

dj · **Reply #1 on:** April 16, 2020, 05:56:10 PM

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

LeoNeeson · **Reply #2 on:** April 16, 2020, 07:48:26 PM

Quote from: dj on April 16, 2020, 05:56:10 PM

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

Quote from: dj on April 16, 2020, 05:56:10 PM

http://localhost/~list not found

I use it to call the [ list ] section.

Quote from: dj on April 16, 2020, 05:56:10 PM

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

LeoNeeson · **Reply #3 on:** April 17, 2020, 04:50:04 PM

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

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

dj · **Reply #4 on:** April 19, 2020, 04:39:47 AM

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)

LeoNeeson · **Reply #5 on:** April 19, 2020, 03:08:07 PM

Quote from: dj on April 19, 2020, 04:39:47 AM

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.

Quote from: dj on April 19, 2020, 04:39:47 AM

'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).

dj · **Reply #6 on:** April 19, 2020, 05:30:20 PM

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

dj · **Reply #7 on:** April 25, 2020, 03:50:59 AM

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>

LeoNeeson · **Reply #8 on:** April 25, 2020, 04:58:46 PM

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

It should be finished (hopefully) between today and tomorrow (sunday). Don't expect to be perfect yet, since logout is still buggy.

Quote from: dj on April 25, 2020, 03:50:59 AM

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

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> <form method='post' onsubmit='return login()' action="/">  <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...

LeoNeeson · **Reply #9 on:** April 25, 2020, 10:54:36 PM

Quote from: dj on April 19, 2020, 05:30:20 PM

can confirm that it logs out more often

'Alternative login form for modern browsers' v2.0 released!

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

dj · **Reply #10 on:** April 26, 2020, 04:03:29 PM

auto login beta

Thanks Leo for 'Alternative login form for modern browsers' v2.0

[Help] Making old template run entirely on Ajax

LeoNeeson

[Help] Making old template run entirely on Ajax

dj

Re: [Help] Making old template run entirely on Ajax

LeoNeeson

Re: [Help] Making old template run entirely on Ajax

LeoNeeson

Re: [Help] Making old template run entirely on Ajax

dj

Re: [Help] Making old template run entirely on Ajax

LeoNeeson

Talking about a form-based login...

dj

Re: Talking about a form-based login...

dj

Re: Talking about a form-based login...

LeoNeeson

Re: Talking about a form-based login...

LeoNeeson

Re: Alternative login form v2.0 released!

dj

Re: Talking about a form-based login... - Keep me loggedin