zellwk.com | Github repo for https://zellwkcom

As @jonrsharpe pointed out in the comments, I was assuming that with module.exports I export the app itself, but in fact I export an object containing the app. Therefore to fix the test error, I had to simply write in my test.js:

You are correct, you are using promises, so translate() will run asynchronously (in the background) while the rest of your code is executing. That is why you go through all the foreach() before the translate function returns, and therefore you get that output.

However, there is also a problem using a forEach loop in an async function or a promise block. The callback function is not being awaited. Therefore, the promise chain is broken, resulting in the unexpected behavior. Don't use forEach loop in a promise or async function. Instead, use a for loop to iterate through the items of the array:

To avoid these problems, change the forEach loop to a For loop and use async and await like this:

to build any login system you need several parts:

1. form where credentials will be entered, e.g. email and password
2. place where to store data. Any kind of database. To play with, you can store to browser's storage while you entered tags client-side and local-storage.

Check https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB Of course this data storage is local for client, client can view it and do whatever wants with it. If you need real auth, you must have backend. Either run yourself something like nodejs express server which would connect so some kind of data storage again to store data, or keep that 'in memory' aka some object, array or else, of course that would be lost after service restart. to keep data in file system - use the bare minimum some file, for any kind of more realistic app - database from sqlite which can run without any database installations to something crazy like AWS DynamoDB.

1. collect data from form and forward it to place where you have your data storage solution and check if credentials are correct. If database is something like MySQL which runs on server, you will have to send data to backend, use POST request.

2. check against previously saved data if your credentials are correct and return identifier for the user which would be deleted on logout. This often is session id for PHP apps, for JS some kind of authorization token which later can be used to call backend again to authorize user and list, remove, update some data in database which belongs to this user.

So when you have place where you store data of user credentials you need to accept data from form, forward it to the backend or client side function which would check against your stored data if this login data is correct if so - create session id, auth token or whatever temporary identifier which would identify the user and that's it, user can authenticate with it.

If you can not use server side, use local storage, Web SQL, IndexedDB. pick one, find some samples how to save data and get out of it. So you could register and login.

open dev tools and here are your options:

it's of course totally insecure while client has full access to the database and also it has no "internet" thing, while it runs in your browser only.

of course i talk here about absolute bare minimum to make concept of login "happen", hopefully it helps you on your way to learning how systems work :)

UPDATE: I followed these instructions and was able to fix the php.h error.

https://stackoverflow.com/a/59544311/3825421

At that point, I started getting a new error when running pecl:

A checkbox within a label is no problem. The problem arises when that checkbox is altered for the sake of accessibility instead of complete removal using display: none. When an interactive element like an input or button exists in the DOM, it will still be a factor no matter how its hidden unless display: none is applied.

In the Original Post the checkbox is almost impossible to click due to its 0px height and 1px width and yet when the div is clicked, the checkbox is clicked... sometimes not. Normally if the label was able to detect a click, that click would trigger a click event to the nested checkbox as well. In the OP code that's not happening because the label has pointer-events: none.

So the div is getting clicked and by some magical miracle this gains features that would not normally be attributed to it? Divs are not interactive they cannot affect elements that are not nested within themselves (i.e. like the checkbox that sits before the div). Nope, the div is useless, its the checkbox itself that's getting clicked due to the fact it is the only element within the inert label that gains focus by default. Gaining focus on an input doesn't necessarily guarantee a click event -- matter of fact a focus event selects an element and a click event sets an element as active. So what happens when a user double-clicks or moves the mouse quickly before the next click clears a label? Undesirable behavior as described in OP.

In the following demo, the checkboxes are hidden as per OP (also set width and height to 0) and removed pointer-events: none from the label and added it to the checkboxes. In this setup the label gains focus and click events and the click event will trigger the checkbox. The checkbox having been isolated from any extra clicks due to pointer-events: none and z-index: -1 should behave as expected.

As proof of concept I have added some JavaScript to demonstrate said code stability. The two event handlers are for demonstration purposes. The JS does not facilitate, stabilize, or modify performance of the HTML/CSS behavior.

1. On any change event on a checkbox (via label) will trigger function changeHandler() to gather all the values of the checked checkboxes and display them in an output.

   • If there's a checkmark in a box and there's a value displayed that corresponds to said checked checkbox, then it successfully passes as valid behavior.

2. Clicking button.show will trigger function clickHandler() to toggle the .reveal class to each checkbox.

   • While clicking rapidly observe that the revealed checkboxes are checked and its corresponding custom label is checked as well. Also notice that the value should also be displayed as well.

• "....target doesn't work in IE IIRC"

  event.target is the standard property to use in every modern browser. event.srcElement is a deprecated property used by IE which is almost entirely unsupported.

• pointer-events: all assigned to input and .customCheckbox

  The value all applies to SVG only. Only the values of none and auto are relevant to HTML. auto is default.

I cannot reproduce the described behavior except in the code provided in OP. If you can reproduce that behavior on my demo, please record a short video of it and post that and the machine/device, OS, and browsers (I will assume everything is reasonably up to date).

If your class component does not have any state, it is recommended to use just functional component.