2.4 template-making guide

danny · **Reply #15 on:** June 11, 2020, 10:51:02 AM

Can't log in with Chrome browser
If it is tried at root, there's a message: Login Required
If it is tried at a folder, there is a 404
No login prompt for Chrome
Except if you go to /~unauth then there is a basic-auth login prompt which doesn't log in. bug?

What is the correct way to reinstall the missing /~login functionality?

NaitLee · **Reply #16 on:** June 11, 2020, 12:51:12 PM

Quote from: danny on June 11, 2020, 10:51:02 AM

What is the correct way to reinstall the missing /~login functionality?

Now the password is dealt with sha256 on login for security, and templates should use in-page login (not browser popup).

dj's and my template are examples for in-page login. They includes how to sha256 a password and send login message.
As well as logout, now can be of use.

My template repository on GitHub have split parts of a whole template, "tkb.errorpages.tpl" also includes a full login system.

danny · **Reply #17 on:** June 11, 2020, 02:45:41 PM

Is this a good way to make a replacement /~login section?

Edit: Here's the production example.

Code: [Select]

[login|public]
{.add header|Cache-Control: no-cache, max-age=0.}<!DOCTYPE html><html lang="en"><head><meta charset=UTF-8 /><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv=CACHE-CONTROL content=no-cache><title>HFS %version%</title></head>
<body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<font size=4><center><br><br><br>
    <form method='post' onsubmit='return login()' >  <!-- return true   / -->
      <table border="0" cellspacing="20">
      <tr><td align='right'><label for="user">{.!Username.}</label><td><input name='user' size='25' required placeholder="%user%" id='user' />
      <tr ><td align='right'><label for="pw">{.!Password.}</label><td><input name='password' size='25' type='password' required id='pw' />
      <tr ><td><td><input type='submit' value='{.!Login.}' style='margin-top:13px'>
      </table>
    </form>
<font size="2">Keep me logged-in<input type="checkbox"></font><br><br></center>
<script>
const loc={}; loc.Logout='{.!Logout.}'  /*translate here*/
var sha256 = function(s) {return SHA256.hash(s)}
function logout() {fetch("/?mode=logout").then(res => location.reload()); return false;}
function login() {
    var sid = "{.cookie|HFS_SID_.}"  //getCookie('HFS_SID');
    if (!sid) return true;  //let the form act normally
    var usr = user.value;
    var pwd = pw.value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/?mode=login");  // /~login
var formData = new FormData();
formData.append("user",usr)
if (typeof SHA256 != 'undefined') formData.append("passwordSHA256",sha256(sha256(pwd).toLowerCase()+sid).toLowerCase()); else formData.append("password",pwd) 
xhr.onload=function(){if(xhr.response=='ok') {
 if(document.querySelector("input[type=checkbox]").checked) localStorage.login=JSON.stringify([usr,pwd]); else localStorage.removeItem('login');
 location.replace(document.referrer)} else {alert("user or password don't match");document.querySelector("form").reset();location.reload(true)}}
xhr.send(formData)
    return false;
}
if(localStorage.login) document.querySelector("input[type=checkbox]").checked=true  //stop keep logged-in: call /~login and disable "Keep me logged-in"
document.querySelector("input[type=checkbox]").onchange=function(){if(!this.checked) localStorage.removeItem('login')}
if('%user%') {document.querySelector("input[type=submit]").value=loc.Logout; document.querySelector("input[type=submit]").onclick=function(){logout(); return false}; document.querySelector('button').hidden=false}
if(!'%user%' && localStorage.login) {
var tmp=JSON.parse(localStorage.login)
user.value=tmp[0]
pw.value=tmp[1]
var myform=document.querySelector("form"); if (myform.requestSubmit) myform.requestSubmit(); else myForm.submit()
} </script> <script src="/~sha256.js" onerror="setTimeout(()=> this.src='/~sha256.js',200)"></script>

It is good. Many thanks to DJ for his login code.

Edit2: There was an extra step to prevent /~signin. I had to put a link <a href="/~login"></a> first, as bait/bypass. Only the first login link on the page gets changed to /~signin. So, I made that one not-clickable. Then I put the real login link after it. Signin thing happened because of a diff.tpl, not HFS.

Edit3: I installed a page refresh on bad password, so the error doesn't persist.

NaitLee · **Reply #18 on:** June 11, 2020, 04:09:21 PM

Quote from: danny on June 11, 2020, 02:45:41 PM

Is this a good way to make a replacement /~login section?

Sure! Great job!
Also consider:
Make the login page Throwback styled
Logout, it's possible now
Change password, it's mostly easy
It's already enough if you think Throwback should be lightweight & easy

danny · **Reply #19 on:** June 11, 2020, 04:31:30 PM

Thanks.

I couldn't get the Thumbnails-OnDemand feature to work because this type of section is not supported:
[file.jpg = file.jpeg = file.png = file.gif = file.tif = file.bmp = file.webp]

rejetto · **Reply #20 on:** June 11, 2020, 09:35:32 PM

Quote from: danny on June 11, 2020, 04:31:30 PM

I couldn't get the Thumbnails-OnDemand feature to work because this type of section is not supported:
[file.jpg = file.jpeg = file.png = file.gif = file.tif = file.bmp = file.webp]

that's another bug. Fixed in next release

danny · **Reply #21 on:** June 12, 2020, 06:59:52 PM

Thanks! Currently, it was possible to publish ThrowbackMP (all except thumbnails), and it is here.

Documentation:
~~update~~ the delete script
edit: or now revert the change

new location for [unauthorized] section macros is now the events file.

[error-page]
%content%

[unauth]
{.redirect|/~login.} Because /~unauth will bring up a basic-auth login box, which doesn't work. So, it is good to redirect to a working login.

[api level]
2

[mysection|public]
Add |public to sections that you link to.

danny · **Reply #22 on:** June 12, 2020, 09:10:19 PM

Quote from: rejetto on June 11, 2020, 10:03:31 PM

https://github.com/rejetto/hfs2/releases/download/v2.4-rc03/hfs.exe

The file and file=type sections are working nicely.
It is now possible to do thumbnails-ondemand, except that the script needs changed to add some small time-delay.

Code: [Select]

<script>document.addEventListener("DOMContentLoaded", function() {var lazyloadImages; if ("IntersectionObserver" in window) { lazyloadImages = document.querySelectorAll(".lazy"); var imageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) setTimeout(()=> { var image = entry.target; image.src = image.dataset.src; image.classList.remove("lazy"); imageObserver.unobserve(image); },500) }); }); lazyloadImages.forEach(function(image) { imageObserver.observe(image); }); } else {alert('Your browser needs an update');}});</script>

Is there a macro that can be used to shut off extras in case the server is too busy?

This link has timed retry to prevent blanks: <a href="%item-url%"><img class="lazy" id="imgthumbs" data-src="%item-url%" alt="" onerror="setTimeout(()=> this.src='%item-url%',500)">%item-name%</a>

NaitLee · **Reply #23 on:** June 13, 2020, 05:17:18 AM

Quote from: danny on June 12, 2020, 09:10:19 PM

How do we make it load only 4 photos at a time? Or, a small time-delay between each?

Is there a macro or symbol that can be used to shut off extras in case the server is too busy?

I used a setInterval() in Takeback to load a few images (append an img element) at a time.
Currently when server is busy, it returns a status code 429.
We can make an XHR request everytime an image-load period ends, see its status, then determine to continue or pause.

danny · **Reply #24 on:** June 13, 2020, 09:21:02 AM

For supporting single-thread server, I found out that it is best to load images one at a time (all of one before starting another).
Would img onload or object.onload be useful for this?

I wonder how to do one at a time + lazyload?

rejetto · **Reply #25 on:** June 13, 2020, 10:44:12 PM

Quote from: NaitLee on June 13, 2020, 05:17:18 AM

I used a setInterval() in Takeback to load a few images (append an img element) at a time.
Currently when server is busy, it returns a status code 429.

How come this 429?
You should not get a 429 for an image, unless you set some limits. 2.4 limits only folders. Right?

Guys, sorry but some changes are coming.
Check here https://rejetto.com/forum/index.php?topic=13060.325

danny · **Reply #26 on:** June 13, 2020, 11:47:04 PM

With image thumbnails, it is necessary to limit the number of images loaded concurrently.
One at a time is really best for single-thread server.
Also, many at a time won't work on dsl/3g, but few/one at a time is lively.

Instead of vertical lazyload list with thumbnails auto-sized so that only 4-ish fit on screen, I suggest an update (which I can't figure out) to load one at a time so that we would have:
lowest cpu load
fast-action on slow connections
no more reliance on connections limiter
ability to do a tiles/gallery layout without server overload.

rejetto · **Reply #27 on:** June 14, 2020, 08:06:45 AM

i'm just worried about the server giving 429 only for folders and not other cases, because it would be a bug.
I cannot tell exactly the case from what naitlee said.

rejetto · **Reply #28 on:** June 14, 2020, 09:21:23 AM

i just updated the first post for RC4.
Still, there is an important thing that would be good to address before 2.4 goes final.
At the moment sections are always directly requestable unless the 'private' flag is set on each of them.
I think this is not a good idea and we should invert the logic, because
- most sections don't need to be accessible via URL requests
- people can forget about declaring a section as private
- disclosing unnecessary information about your server is not good practice

This mean all the sections that needs it should set a 'public' flag (as opposite to the 'private'), and the 'private' would just be ignored.
I think this would still let you make a tpl that's backward compatible, right?

I know it's tiresome to have all these changes going on, but I think it's worth the price.
Comments?

Mars · **Reply #29 on:** June 14, 2020, 09:46:59 AM

wouldn't it be simpler to name the accessible sections by url by preceding their name with ~( except for [] ) as [~login]

this would no longer pose a problem of interpretation and unnecessary option writing

the rest of the other sections could have their name coded to access them url or form requests

2.4 template-making guide

danny

Re: 2.4 template-making guide

NaitLee

Re: 2.4 template-making guide

danny

Re: 2.4 template-making guide

NaitLee

Re: 2.4 template-making guide

danny

Re: 2.4 template-making guide

rejetto

Re: 2.4 template-making guide

danny

Re: 2.4 template-making guide

danny

Re: 2.4 template-making guide

NaitLee

Re: 2.4 template-making guide

danny

Re: 2.4 template-making guide

rejetto

Re: 2.4 template-making guide

danny

Re: 2.4 template-making guide

rejetto

Re: 2.4 template-making guide

rejetto

Re: 2.4 template-making guide

Mars

Re: 2.4 template-making guide