From 6dcf0d455b4cd27e80290a1d4f184fd3d18cb086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?c=C4=83t=C4=83lin?= <catalin@roboces.dev>
Date: Thu, 19 Dec 2024 18:49:14 +0100
Subject: [PATCH] fix: fix logout flow which wasn't being triggered, remove
 useless html code

---
 src/huesoporro/api/routes/api.py        |  2 +-
 src/huesoporro/static/js/utils.js       | 33 -------------
 src/huesoporro/templates/index.html     | 12 ++---
 src/huesoporro/templates/login.html     | 62 +------------------------
 src/huesoporro/templates/logout.html    | 13 ++++++
 src/huesoporro/templates/sentences.html | 15 +++---
 src/huesoporro/templates/tts.html       |  7 +--
 7 files changed, 30 insertions(+), 114 deletions(-)
 create mode 100644 src/huesoporro/templates/logout.html

diff --git a/src/huesoporro/api/routes/api.py b/src/huesoporro/api/routes/api.py
index d427cde..9412598 100644
--- a/src/huesoporro/api/routes/api.py
+++ b/src/huesoporro/api/routes/api.py
@@ -19,7 +19,7 @@ class ManageBotDTO(BaseModel):
     "/tts",
     media_type=MediaType.HTML,
 )
-async def get_tts_overlay() -> Template:
+async def get_tts_overlay(user: User) -> Template:
     return Template(template_name="tts.html")
 
 
diff --git a/src/huesoporro/static/js/utils.js b/src/huesoporro/static/js/utils.js
index e014ab2..9bb1116 100644
--- a/src/huesoporro/static/js/utils.js
+++ b/src/huesoporro/static/js/utils.js
@@ -7,36 +7,3 @@ function getWebsocketProtocol() {
         return "wss://";
     }
 }
-
-function addLogoutEvent() {
-    const logoutButton = document.getElementById("logoutButton");
-    logoutButton.addEventListener("click", () => {
-        document.cookie = "twitchLoginData=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
-        window.location.href = "/";
-    });
-
-}
-
-function setCookie(name, value, days) {
-    const date = new Date();
-    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-    const expires = `expires=${date.toUTCString()}`;
-    document.cookie = `${name}=${value};${expires};path=/;SameSite=Strict`;
-}
-
-function getCookie(name) {
-    const cookieName = `${name}=`;
-    const decodedCookie = decodeURIComponent(document.cookie);
-    const cookieArray = decodedCookie.split(';');
-
-    for (let i = 0; i < cookieArray.length; i++) {
-        let cookie = cookieArray[i];
-        while (cookie.charAt(0) === ' ') {
-            cookie = cookie.substring(1);
-        }
-        if (cookie.indexOf(cookieName) === 0) {
-            return cookie.substring(cookieName.length, cookie.length);
-        }
-    }
-    return null;
-}
diff --git a/src/huesoporro/templates/index.html b/src/huesoporro/templates/index.html
index bdf08ee..b17419f 100644
--- a/src/huesoporro/templates/index.html
+++ b/src/huesoporro/templates/index.html
@@ -5,12 +5,10 @@
     <nav>
         <ul>
             <li>Chatbot</li>
-            <li><a href="/tts">TTS</a></li>
-            <li><a href="/lefunny">Le Funny</a></li>
-        </ul>
-        <ul>
-            <li><a id="logoutButton" href="#" style="color: #aa0000;">Logout</a></li>
+            <li><a href="#" disabled>TTS</a></li>
+            <li><a href="#" disabled="true">Le Funny</a></li>
         </ul>
+        {% include 'logout.html' %}
     </nav>
 </header>
 <main>
@@ -178,7 +176,7 @@
                 })
                 const data = await response.json()
                 console.log(data);
-                if (response.ok){
+                if (response.ok) {
                     alert("Settings saved successfully")
                 }
             }
@@ -186,8 +184,6 @@
 
         const chatbotManager = new ChatbotManager();
         chatbotManager.setEvents();
-
-        addLogoutEvent()
     });
 </script>
 </body>
diff --git a/src/huesoporro/templates/login.html b/src/huesoporro/templates/login.html
index 00e0a38..3a3181a 100644
--- a/src/huesoporro/templates/login.html
+++ b/src/huesoporro/templates/login.html
@@ -6,7 +6,8 @@
 <main>
     <section>
         <form>
-            <a role="button" href="{{ twitch_login_url }}" id="loginButton" type="button" style="background-color: #B645CD; border-color: #B645CD">Login
+            <a role="button" href="{{ twitch_login_url }}" id="loginButton" type="button"
+               style="background-color: #B645CD; border-color: #B645CD">Login
                 with
                 Twitch
             </a>
@@ -14,66 +15,7 @@
     </section>
 </main>
 <script>
-    document.addEventListener("DOMContentLoaded", () => {
-        class LoginManager {
-            constructor() {
-                this.loginData = null;
-            }
 
-            async readLoginData() {
-                const loginData = getCookie("twitchLoginData");
-
-                try {
-                    this.loginData = loginData ? JSON.parse(loginData) : null;
-                    return this.loginData;
-                } catch (error) {
-                    console.error("Error reading login data:", error);
-                    return null;
-                }
-            }
-
-            async saveSettings() {
-                // Check if access_token is present in the URL hash
-                const hashParams = new URLSearchParams(window.location.hash.substring(1));
-                const accessToken = hashParams.get('access_token');
-
-                if (accessToken) {
-                    const loginData = {
-                        access_token: accessToken,
-                        timestamp: new Date().toISOString()
-                    };
-
-                    try {
-                        setCookie("twitchLoginData", JSON.stringify(loginData), 30);
-                        this.loginData = loginData;
-
-                        const loginButton = document.getElementById("loginButton");
-                        if (loginButton) {
-                            loginButton.style.display = 'none';
-                        }
-
-                        history.replaceState(null, document.title, window.location.pathname);
-
-                        window.location.href = '/';
-                    } catch (error) {
-                        console.error("Error saving login data:", error);
-                    }
-                }
-            }
-        }
-
-        const loginManager = new LoginManager();
-
-        loginManager.readLoginData().then(loginData => {
-            const loginButton = document.getElementById("loginButton");
-
-            if (loginData) {
-                window.location.href = '/';
-            } else {
-                loginManager.saveSettings();
-            }
-        });
-    });
 </script>
 </body>
 
diff --git a/src/huesoporro/templates/logout.html b/src/huesoporro/templates/logout.html
new file mode 100644
index 0000000..61f189c
--- /dev/null
+++ b/src/huesoporro/templates/logout.html
@@ -0,0 +1,13 @@
+<ul>
+    <li><a id="logoutButton" href="#" style="color: #aa0000;">Logout</a></li>
+</ul>
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const logoutButton = document.getElementById("logoutButton");
+        logoutButton.addEventListener("click", () => {
+            console.log("Logging out...");
+            document.cookie = "huesoporroAuth=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+            window.location.href = "/";
+        });
+    });
+</script>
diff --git a/src/huesoporro/templates/sentences.html b/src/huesoporro/templates/sentences.html
index 7a0b611..e390f79 100644
--- a/src/huesoporro/templates/sentences.html
+++ b/src/huesoporro/templates/sentences.html
@@ -1,17 +1,14 @@
-
 {% include 'header.html' %}
 
 <body>
 <header>
     <nav>
         <ul>
-            <li><a href="/">Chatbot</a> </li>
+            <li><a href="/">Chatbot</a></li>
             <li><a href="/tts">TTS</a></li>
             <li>Le Funny</li>
         </ul>
-        <ul>
-            <li><a id="logoutButton" href="#" style="color: #aa0000;">Logout</a></li>
-        </ul>
+        {% include 'logout.html' %}
     </nav>
     <h1>Huesoporro🦴🍃</h1>
 </header>
@@ -20,14 +17,18 @@
         <table>
             <thead style="background-color: white; color: black">
             <tr>
-                <th >Sentence</th>
+                <th>Sentence</th>
                 <th>Action</th>
             </tr>
             </thead>
             {% for sentence in sentences %}
             <tr>
                 <td>{{ sentence.sentence }}</td>
-                <td><button id="delete-{{ sentence.id }}" style="border-color: #aa0000; background-color: #aa0000">Delete</button></td>
+                <td>
+                    <button id="delete-{{ sentence.id }}" style="border-color: #aa0000; background-color: #aa0000">
+                        Delete
+                    </button>
+                </td>
             </tr>
             {% endfor %}
         </table>
diff --git a/src/huesoporro/templates/tts.html b/src/huesoporro/templates/tts.html
index a0f3266..5a7843e 100644
--- a/src/huesoporro/templates/tts.html
+++ b/src/huesoporro/templates/tts.html
@@ -8,10 +8,7 @@
             <li>TTS</li>
             <li><a href="/lefunny">Le Funny</a></li>
         </ul>
-        <ul>
-            <li><a id="logoutButton" href="#" style="color: #aa0000;">Logout</a></li>
-        </ul>
-
+                {% include 'logout.html' %}
     </nav>
     <h1>Huesoporro🦴🍃</h1>
 </header>
@@ -186,7 +183,7 @@
             // generate <ur>/tts/permalink?access_token=<access_token>
             // the access token is available in the twitchLoginData cookie
 
-            const cookie = JSON.parse(getCookie("twitchLoginData"))
+            const cookie = JSON.parse(getCookie("huesoporroAuth"))
             const permalinkUrl = `${window.location.origin}/tts/permalink?access_token=${cookie.access_token}`;
             navigator.clipboard.writeText(permalinkUrl);
             alert('OBS link copied to clipboard ' + permalinkUrl);