From b7c49fc477c3a56a78bdf4eb57275487aa8e3afe Mon Sep 17 00:00:00 2001
From: Greg Holmes <iam@gregholmes.co.uk>
Date: Thu, 12 Dec 2024 15:13:35 +0000
Subject: [PATCH] fixup! Add generate JWT authentication example

---
 .../auth-generate-token/javascript/index.html | 12 +++++----
 .../javascript/src/script.ts                  | 17 +++++++-----
 .../react/src/app/page.tsx                    | 26 ++++++++++---------
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/examples/auth-generate-token/javascript/index.html b/examples/auth-generate-token/javascript/index.html
index 5858224976..38ece301ef 100644
--- a/examples/auth-generate-token/javascript/index.html
+++ b/examples/auth-generate-token/javascript/index.html
@@ -14,7 +14,7 @@
           <h1 class="text-2xl font-bold mb-4">
             Authentication with Ably
           </h1>
-          <p class="mb-8">
+          <p id="heading-message" class="mb-8">
             Press the Connect button to initialize the client:
           </p>
           <button id="connect" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
@@ -34,10 +34,12 @@ <h1 class="text-2xl font-bold mb-4">
             </span>
             Client initializes connection to Ably with generated Token
           </div>
-        </div>
-        <div class="mt-4 flex flex-col items-center justify-center h-16">
-          <h2 id="header-initialized" class="text-lg font-bold" style="display: none;">Client Initialized</h2>
-          <p id="paragraph-initialized" style="display: none;">The Ably client has been successfully initialized.</p>
+          <div class="flex items-center gap-2">
+            <span>
+              <span id="message-3" class="text-red-500">✗</span>
+            </span>
+            Client is connected
+          </div>
         </div>
       </div>
    </div>
diff --git a/examples/auth-generate-token/javascript/src/script.ts b/examples/auth-generate-token/javascript/src/script.ts
index c8dcebeb11..c7adc27b32 100644
--- a/examples/auth-generate-token/javascript/src/script.ts
+++ b/examples/auth-generate-token/javascript/src/script.ts
@@ -21,16 +21,19 @@ function handleConnect() {
     messageTwo.className = 'text-green-500';
     messageTwo.textContent = '✓';
 
-    const headerInitialized = document.getElementById('header-initialized');
-    const paragraphInitialized = document.getElementById('paragraph-initialized');
-
-    headerInitialized.style.display = 'block';
-    paragraphInitialized.style.display = 'block';
-
     const button = document.getElementById('connect') as HTMLButtonElement;
     button.disabled = true;
     button.className = 'px-4 py-2 text-white rounded bg-gray-500';
+
+    realtimeClient.connection.on('connected', (stateChange) => {
+      const messageThree = document.getElementById('message-3');
+      messageThree.className = 'text-green-500';
+      messageThree.textContent = '✓';
+
+      const headingMessage = document.getElementById('heading-message');
+      headingMessage.textContent = 'The Ably client has been successfully initialized.';
+    });
   } catch (error) {
-    console.error('Failed to initialise client:', error);
+    console.error('Failed to connect client:', error);
   }
 }
diff --git a/examples/auth-generate-token/react/src/app/page.tsx b/examples/auth-generate-token/react/src/app/page.tsx
index 3299df2ad7..9cbc422f5d 100644
--- a/examples/auth-generate-token/react/src/app/page.tsx
+++ b/examples/auth-generate-token/react/src/app/page.tsx
@@ -9,12 +9,12 @@ interface StatusMessage {
   message: string;
 }
 
-// Main Home component
 export default function Home() {
   const [client, setClient] = useState<Ably.Realtime | null>(null);
   const [messages, setMessages] = useState<StatusMessage[]>([
     { id: 1, success: false, message: "Client requests token from server" },
-    { id: 2, success: false, message: "Client initializes connection to Ably with generated Token" }
+    { id: 2, success: false, message: "Client initializes connection to Ably with generated Token" },
+    { id: 3, success: false, message: "Client is connected"}
   ]);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -37,6 +37,13 @@ export default function Home() {
         )
       );
 
+      ablyClient.connection.on('connected', (stateChange) => {
+        setMessages(prevMessages =>
+          prevMessages.map(msg =>
+            msg.id === 3 ? { ...msg, success: true } : msg
+          )
+        );
+      });
     } catch (error) {
       console.error('Failed to initialise client:', error);
     } finally {
@@ -49,7 +56,11 @@ export default function Home() {
       <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
         <div className="flex-grow text-center">
           <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
-          <p className="mb-8">Press the Connect button to initialize the client:</p>
+          {client ? (
+            <p className="mb-8">The Ably client has been successfully initialized.</p>
+          ) : (
+            <p className="mb-8">Press the Connect button to initialize the client:</p>
+          )}
           <button
             onClick={handleConnect}
             className={`px-4 py-2 text-white rounded ${isLoading || client !== null ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-600' }`}
@@ -72,15 +83,6 @@ export default function Home() {
           </div>
           ))}
         </div>
-
-        {client ? (
-          <div className="mt-4 flex flex-col items-center justify-center h-16">
-            <h2 className="text-lg font-bold">Client Initialized</h2>
-            <p>The Ably client has been successfully initialized.</p>
-          </div>
-        ) : (
-          <div className="mt-4 h-16 flex items-center justify-center"></div>
-        )}
       </div>
     </div>
   );