chore: update

layouts/partials/footer.html

@@ -13,5 +13,4 @@
     </div>
 
     <script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
-    <script src="/js/app.js"></script>
 </footer>

layouts/partials/head.html

@@ -24,4 +24,7 @@
 {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
 <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" />
 {{ end }}
-<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
+<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
+<script src="/js/auth.js"></script>
+<script src="/js/app.js"></script>
+<script src="/js/purchase-tokens.js"></script>

layouts/partials/nav.html

@@ -26,6 +26,7 @@
             class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row">
             <!-- <a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href="/about/">About</a> -->
             <!-- <a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href="/prose/">Prose</a> -->
+            <button id="purchase-tokens" style="display: none;">Purchase Tokens</button>
             <button id="login" onclick="login()">Login</button>
             <button id="logout" onclick="logout()" style="display: none;">Logout</button>
             <button id="theme-toggle" type="button"

static/js/app.js

@@ -1,11 +1,15 @@
+// app.js
+
 document.addEventListener("DOMContentLoaded", async () => {
     const auth0Client = await handleAuthentication(); 
     const logoutButton = document.getElementById("logout");
+    const purchaseTokensButton = document.getElementById("purchase-tokens");
 
     if (logoutButton) {
         logoutButton.addEventListener("click", (e) => {
             e.preventDefault();
             auth0Client.logout({ returnTo: window.location.origin });
+            sessionStorage.removeItem('userProfile'); // Add this line
         });
     } else {
         console.error('Logout button not found');
@@ -25,4 +29,13 @@ document.addEventListener("DOMContentLoaded", async () => {
             // localStorage.setItem('userProfile', JSON.stringify(userProfile));
         }
     }
+
+    if (purchaseTokensButton) {
+        purchaseTokensButton.addEventListener("click", () => {
+            const quantity = 10;  // Set this to the quantity of tokens the user wants to purchase
+            purchaseTokens(quantity);
+        });
+    } else {
+        console.error('Purchase Tokens button not found');
+    }
 });

static/js/auth.js

@@ -1,3 +1,5 @@
+// auth.js
+
 const auth0Client = auth0.createAuth0Client({
     domain: "dev-g4e7bfpbacem6e8d.au.auth0.com",
     clientId: "PaFcTx3jOQffBEMJaD6d3xnmgSmzmTzq",
@@ -16,6 +18,11 @@ async function handleAuthentication() {
     if (window.location.pathname === "/callback" && window.location.search.includes("code=")) {
         await auth0Client.handleRedirectCallback();
         window.history.replaceState({}, document.title, "/");
+
+        const user = await getUser();
+        if (user) {
+            registerUserWithWorker(user.sub);  // User's Auth0 ID is stored in the 'sub' field
+        }
     }
 }
 
@@ -25,4 +32,20 @@ async function isAuthenticated() {
 
 async function getUser() {
     return await auth0Client.getUser();
-}
+}
+
+async function registerUserWithWorker(auth0Id) {
+    const response = await fetch("/register", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ auth0Id })
+    });
+
+    if (response.ok) {
+        console.log("User registered successfully with worker");
+    } else {
+        console.error("Failed to register user with worker", response);
+    }
+}

static/js/purchase-tokens.js

@@ -0,0 +1,25 @@
+// purchase-tokens.js
+
+// Set this to the route of your Cloudflare worker
+const PURCHASE_TOKENS_WORKER_URL = 'https://token-purchase-worker.cloudflare463.workers.dev';
+
+async function purchaseTokens(quantity) {
+  const response = await fetch(PURCHASE_TOKENS_WORKER_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ quantity })
+  });
+
+  if (!response.ok) {
+    // Handle error
+    console.error('Failed to create Stripe checkout session');
+    return;
+  }
+
+  const { id } = await response.json();
+
+  const stripe = Stripe('pk_test_51NArmHHnGXkGzfHoKp0e4XtomrTcml9LUbe8eFTl8uPFe5fZWes6cSyL3WYUKUquNt4LCPRRQUMVzlcFcTHiAqt700hbcsIe4r');
+  stripe.redirectToCheckout({ sessionId: id });
+}