From e93760f75f872596cbcf526565d8d0dc76585c1e Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Thu, 19 Dec 2024 23:41:45 +0000
Subject: [PATCH] ExperimentalAuth: wire up signOut() to dev server

---
 packages/lib-panoptes-js/dev/index.html |  1 +
 packages/lib-panoptes-js/dev/index.js   | 26 +++++++++++++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/lib-panoptes-js/dev/index.html b/packages/lib-panoptes-js/dev/index.html
index c68d4e3f29..9fd7ae331a 100644
--- a/packages/lib-panoptes-js/dev/index.html
+++ b/packages/lib-panoptes-js/dev/index.html
@@ -24,6 +24,7 @@ <h1>Panoptes.js dev app</h1>
     <section>
       <h2>Functions</h2>
       <button id="check-current-user-button">checkCurrentUser()</button>
+      <button id="sign-out-button">signOut()</button>
     </section>
     <form
       id="login-form"
diff --git a/packages/lib-panoptes-js/dev/index.js b/packages/lib-panoptes-js/dev/index.js
index a656b6f08b..526d001fb2 100644
--- a/packages/lib-panoptes-js/dev/index.js
+++ b/packages/lib-panoptes-js/dev/index.js
@@ -2,6 +2,7 @@ import {
   checkBearerToken,
   checkCurrentUser,
   signIn,
+  signOut,
   addEventListener,
 } from '@src/experimental-auth.js'
 
@@ -9,11 +10,13 @@ class App {
   constructor () {
     this.html = {
       checkCurrentUserButton: document.getElementById('check-current-user-button'),
+      signOutButton: document.getElementById('sign-out-button'),
       loginForm: document.getElementById('login-form'),
       message: document.getElementById('message'),
     }
 
     this.html.checkCurrentUserButton.addEventListener('click', this.checkCurrentUserButton_onClick.bind(this))
+    this.html.signOutButton.addEventListener('click', this.signOutButton_onClick.bind(this))
     this.html.loginForm.addEventListener('submit', this.loginForm_onSubmit.bind(this))
     addEventListener('change', this.onAuthChange)
   }
@@ -22,13 +25,28 @@ class App {
     try {
       const user = await checkCurrentUser()
       if (user) {
-        this.html.message.innerHTML += `> Current user: ${user.login}\n`
+        this.html.message.innerHTML += `> Current user: ${user.login} \n`
       } else {
         this.html.message.innerHTML += `> Current user: [nobody] \n`
       }
     } catch (err) {
       console.error(err)
-      this.html.message.innerHTML += `> [ERROR] ${err.toString()}\n`
+      this.html.message.innerHTML += `> [ERROR] ${err.toString()} \n`
+    }
+    return false
+  }
+
+  async signOutButton_onClick (e) {
+    try {
+      const success = await signOut()
+      if (success) {
+        this.html.message.innerHTML += `> Successfully signed out \n`
+      } else {
+        this.html.message.innerHTML += `> There's no user to sign out \n`
+      }
+    } catch (err) {
+      console.error(err)
+      this.html.message.innerHTML += `> [ERROR] ${err.toString()} \n`
     }
     return false
   }
@@ -41,13 +59,13 @@ class App {
       // Note: await is necessary to catch sign in errors.
       const user = await signIn(formData.get('login'), formData.get('password'))
       if (user) {
-        this.html.message.innerHTML += `> Logged in as ${user.login}\n`
+        this.html.message.innerHTML += `> Logged in as ${user.login} \n`
       } else {
         throw new Error('No user?')
       }
     } catch (err) {
       console.error(err)
-      this.html.message.innerHTML += `> [ERROR] ${err.toString()}\n`
+      this.html.message.innerHTML += `> [ERROR] ${err.toString()} \n`
     }
     return false
   }