feat: add 'proof of React' challenge

Signed-off-by: Xe Iaso <me@xeiaso.net>

lib/challenge/preact/js/app.jsx

@@ -0,0 +1,62 @@
+import { render, h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import { g, j, u } from "./xeact.js";
+import { Sha256 } from '@aws-crypto/sha256-js';
+
+/** @jsx h */
+
+function toHexString(arr) {
+  return Array.from(arr)
+    .map((c) => c.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+const App = () => {
+  const [state, setState] = useState(null);
+  const [imageURL, setImageURL] = useState(null);
+  const [passed, setPassed] = useState(false);
+  const [challenge, setChallenge] = useState(null);
+
+  useEffect(() => {
+    setState(j("preact_info"));
+  });
+
+  useEffect(() => {
+    setImageURL(state.pensive_url);
+    const hash = new Sha256('');
+    hash.update(state.challenge);
+    setChallenge(toHexString(hash.digestSync()));
+  }, [state]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setPassed(true);
+    }, state.difficulty * 100);
+
+    console.log(challenge);
+
+    return () => clearTimeout(timer);
+  }, [challenge]);
+
+  useEffect(() => {
+    window.location.href = u(state.redir, {
+      result: challenge,
+    });
+  }, [passed]);
+
+  return (
+    <div>
+      {imageURL !== null && (
+        <img src={imageURL} style="width:100%;max-width:256px;" />
+      )}
+      {state !== null && (
+        <div>
+          <p id="status">{state.loading_message}</p>
+          <p>{state.connection_security_message}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+render(<App />, g("app"));