refactor: adding base template for header & nav

2023-10-06 13:39:36 +00:00
parent 2676b87d5b
commit ffd74c4222
5 changed files with 220 additions and 126 deletions
--- a/pages/templates/base.gohtml
+++ b/pages/templates/base.gohtml
@@ -0,0 +1,100 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>{{ template "title" . }}</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!-- Place favicon.ico in the root directory -->
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"
+    ></script>
+    <script defer src="/static/static/public/htmx.min.js"></script>
+  </head>
+  <body hx-get="/" hx-trigger="auth-change-event">
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+    <![endif]-->
+    <nav>
+      <p>Using SSR and oauth with pocketbase as Go framework</p>
+      {{ if .NavInfo.IsGuest }}
+      <button id="openAuth">Authenticate</button>
+      <dialog id="authDialog">
+        <button id="closeAuth">[X]</button>
+        <p>Greetings, one and all!</p>
+        {{ range .NavInfo.EnabledOauthProviders }}
+        <button onClick="callOauth('{{ . }}')">Login with {{ . }}</button>
+        {{ else }}
+        <p>Please configure at least one oauth provider</p>
+        {{ end }}
+      </dialog>
+      <script defer type="text/javascript">
+        async function callOauth(providerName) {
+          const pb = new PocketBase("http://127.0.0.1:8090");
+
+          // This method initializes a one-off realtime subscription and will
+          // open a popup window with the OAuth2 vendor page to authenticate.
+          //
+          // Once the external OAuth2 sign-in/sign-up flow is completed, the popup
+          // window will be automatically closed and the OAuth2 data sent back
+          // to the user through the previously established realtime connection.
+          const authData = await pb
+            .collection("users")
+            .authWithOAuth2({ provider: providerName });
+
+          // after the above you can also access the auth data from the authStore
+          console.log(pb.authStore.isValid);
+          console.log(pb.authStore.token);
+          console.log(pb.authStore.model.id);
+
+          // "logout" the last authenticated model
+          pb.authStore.clear();
+          document.body.dispatchEvent(new Event("auth-change-event"));
+        }
+      </script>
+      <script defer type="text/javascript">
+        function initAuthDialog() {
+          const dialog = document.querySelector("#authDialog");
+          const showButton = document.querySelector("#openAuth");
+          // const closeButton = document.querySelector("#closeAuth");
+          // Select all buttons that are direct children of the dialog
+          var buttons = authDialog.querySelectorAll("button");
+
+          if (!dialog || !showButton) {
+            console.log("some auth elements are not present");
+            return;
+          }
+          console.log("setting up script for buttons");
+
+          // "Show the dialog" button opens the dialog modally
+          showButton.addEventListener("click", () => {
+            dialog.showModal();
+          });
+
+          buttons.forEach(function (button) {
+            button.addEventListener("click", function () {
+              authDialog.close();
+            });
+          });
+        }
+        initAuthDialog();
+        // "DOMContentLoaded" doesn't work with htmx replacing body
+        // maybe i could use htmx related event, but ok to just do asap, i guess
+        // also - i bet hyperscript would work here
+        // document.addEventListener("DOMContentLoaded", initAuthDialog);
+      </script>
+      {{ else }}
+      <p>{{ .NavInfo.Username }}</p>
+      <button hx-get="/logout">Logout</button>
+      {{ end }}
+    </nav>
+    <main hx-boost="true">{{ template "content" . }}</main>
+  </body>
+</html>