git » hoplite.git » commit 64d27e7

hntr2 WIP: firebase auth

author Alan Dipert
2021-06-12 06:27:25 UTC
committer Alan Dipert
2021-06-12 06:27:25 UTC
parent b227a470fbfa598f18fd9f93a3f4b4124f5dfdb5
hntr2 WIP: firebase auth
el.mjs +31 -4
hntr2.html +24 -0
hntr2.mjs +53 -0 
diff --git a/el.mjs b/el.mjs
index c2f9985..d534127 100644
--- a/el.mjs
+++ b/el.mjs
@@ -17,11 +17,28 @@ function el(tag, attrs, kids) {
   }
   for (const kid of kids) {
     if (kid instanceof Input || kid instanceof Formula) {
-      let textNode = document.createTextNode("");
+      let node,
+          placeholder = document.createComment("placeholder");
       watch((oldv, newv) => {
-        textNode.textContent = newv;
+        if (!newv) {
+          if (node) el.replaceChild(placeholder, node);
+          node = placeholder;
+        } else if (typeof newv !== "object") {
+          if (node && node.nodeType === Node.TEXT_NODE) {
+            node.textContent = newv;
+          } else {
+            let newNode = document.createTextNode(newv);
+            if (node) el.replaceChild(newNode, node);
+            node = newNode;
+          }
+        } else if (newv instanceof Node) {
+          if (node) el.replaceChild(newv, node);
+          node = newv;
+        } else {
+          console.log(`Unknown child cell content`);
+        }
       })(kid);
-      el.appendChild(textNode);
+      el.appendChild(node);
     } else if (kid instanceof EntityNodes) {
       // TODO error if any EntityNodes siblings for now
       kid.bind(el);
@@ -212,4 +229,14 @@ function entitiesBy(db, sortAttr, makeNode) {
   return new EntityNodes(db, makeNode, sortAttr)
 }
 
-export { $el, entities, entitiesBy };
+let nbsp = "\u00A0";
+
+function cond(...pairs) {
+  return formula((...pairs) => {
+    for (let i = 0; i < pairs.length-1; i+=2) {
+      if (pairs[i]) return pairs[i+1];
+    }
+  })(...pairs);
+}
+
+export { $el, entities, nbsp, cond, entitiesBy };
diff --git a/hntr2.html b/hntr2.html
new file mode 100644
index 0000000..adacb53
--- /dev/null
+++ b/hntr2.html
@@ -0,0 +1,24 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>hntr2</title>
+    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-firestore.js"></script>
+    <script>
+      var firebaseConfig = {
+        apiKey: "AIzaSyCxmzeJzZeuZKmb3_QClai3GzjGR7BM-gk",
+        authDomain: "hntr2-b0196.firebaseapp.com",
+        projectId: "hntr2-b0196",
+        storageBucket: "hntr2-b0196.appspot.com",
+        messagingSenderId: "78199226851",
+        appId: "1:78199226851:web:a0818c3c5ff0bd43f320d6"
+      };
+      firebase.initializeApp(firebaseConfig);
+    </script>
+    <script type="module" src="hntr2.mjs"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/hntr2.mjs b/hntr2.mjs
new file mode 100644
index 0000000..a049f25
--- /dev/null
+++ b/hntr2.mjs
@@ -0,0 +1,53 @@
+import { input, formula, database, transaction } from './reactives.mjs';
+import { $el, nbsp, cond, entities } from './el.mjs';
+
+let user = input();
+
+firebase.auth().onAuthStateChanged(result => user.set(result));
+
+function authed() {
+  return $el.p(
+    formula(s => `Signed in as ${s?.email}`)(user),
+    nbsp,
+    $el.a({href: "#", onclick: () => {
+      firebase.auth().signOut().then(() => user.set());
+    }}, "Sign out")
+  );
+}
+
+function login() {
+  let provider = new firebase.auth.GoogleAuthProvider(),
+      errorCode = input(),
+      errorMessage = input();
+  return $el.div(
+    cond(
+      errorCode,
+      formula((code, message) => {
+        return `Error ${code}: ${message}`
+      })(errorCode, errorMessage)
+    ),
+    $el.a({
+      href: "#",
+      onclick: () => firebase.auth()
+        .setPersistence(firebase.auth.Auth.Persistence.SESSION)
+        .then(() => firebase.auth().signInWithPopup(provider))
+        .then(result => user.set(result.user))
+        .catch((error) => transaction(() => {
+          errorCode.set(error.code);
+          errorMessage.set(error.message);
+        }))
+    }, "Sign in")
+  );
+}
+
+function app() {
+  return $el.div(
+    $el.h1("hntr2"),
+    cond(user, authed(), true, login()),
+  );
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.body.appendChild(app());
+});
+