rejetto forum

2.4 template-making guide

rejetto · 57 · 1784

0 Members and 1 Guest are viewing this topic.

Offline danny

  • Tireless poster
  • ****
    • Posts: 166
    • View Profile
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? 


Offline NaitLee

  • Occasional poster
  • *
    • Posts: 82
  • Computer brained boy
    • View Profile
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.
« Last Edit: June 11, 2020, 01:00:13 PM by NaitLee »
Thanks for noticing me :D , I'm just someone normal like others here :D
But don't forget to check out my template ;P


Offline danny

  • Tireless poster
  • ****
    • Posts: 166
    • View Profile
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.





Offline NaitLee

  • Occasional poster
  • *
    • Posts: 82
  • Computer brained boy
    • View Profile
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 ;)
Thanks for noticing me :D , I'm just someone normal like others here :D
But don't forget to check out my template ;P


Offline danny

  • Tireless poster
  • ****
    • Posts: 166
    • View Profile
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]



Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13275
    • View Profile
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 :)


Offline danny

  • Tireless poster
  • ****
    • Posts: 166
    • View Profile
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.



Offline danny

  • Tireless poster
  • ****
    • Posts: 166
    • View Profile
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>


Offline NaitLee

  • Occasional poster
  • *
    • Posts: 82
  • Computer brained boy
    • View Profile
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.
Thanks for noticing me :D , I'm just someone normal like others here :D
But don't forget to check out my template ;P


Offline danny

  • Tireless poster
  • ****
    • Posts: 166
    • View Profile
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? 


Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13275
    • View Profile
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
« Last Edit: June 13, 2020, 10:54:08 PM by rejetto »


Offline danny

  • Tireless poster
  • ****
    • Posts: 166
    • View Profile
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.



Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13275
    • View Profile
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.


Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13275
    • View Profile
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?
« Last Edit: June 14, 2020, 09:23:28 AM by rejetto »


Offline Mars

  • Operator
  • Tireless poster
  • *****
    • Posts: 1986
    • View Profile
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
« Last Edit: June 14, 2020, 09:53:41 AM by Mars »