Add logout

7 files changed, 88 insertions, 33 deletions

diff --git a/main.css b/main.css
index 5e817e0..3938c31 100644
--- a/main.css
+++ b/main.css
@@ -315,7 +315,7 @@ a.lcolonq-button-link :active {
 }
 
 /* auth */
-#lcolonq-auth {
+.lcolonq-auth {
     position: absolute;
     top: 0px;
     left: 0px;
@@ -326,7 +326,7 @@ a.lcolonq-button-link :active {
     grid-template-columns: 1fr 2fr 1fr;
 }
 
-#lcolonq-auth-box {
+.lcolonq-auth-box {
     grid-row: 2;
     grid-column: 2;
     display: flex;
@@ -334,6 +334,14 @@ a.lcolonq-button-link :active {
     gap: 1rem;
 }
 
-#lcolonq-auth-box h1 {
+.lcolonq-auth-box h1 {
     margin-top: 0rem;
 }
+
+#lcolonq-auth-submit {
+    display: none;
+}
+
+#lcolonq-auth-logout-link {
+    text-decoration: underline;
+}
diff --git a/src/Auth.js b/src/Auth.js
index 81ddad9..3c50658 100644
--- a/src/Auth.js
+++ b/src/Auth.js
@@ -44,3 +44,17 @@ export const _getToken = (Just) => (Nothing) => (pair) => () => {
     if (token && authnonce) return Just(pair(token)(authnonce));
     return Nothing;
 };
+
+export const _getSessionCookie = (Just) => (Nothing) => () => {
+    let cookie = null;
+    for (let c of document.cookie.split("; ")) {
+        const [k, v] = c.split("=");
+        if (k === "authelia_session") cookie = v;
+    }
+    if (cookie) return Just(cookie);
+    return Nothing;
+};
+
+export const _clearSessionCookie = () => {
+    document.cookie = "authelia_session=; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=None; Secure";
+};
diff --git a/src/Auth.purs b/src/Auth.purs
index 2a53629..2a87b6a 100644
--- a/src/Auth.purs
+++ b/src/Auth.purs
@@ -27,3 +27,11 @@ authHeader (Tuple t n) =
   , n
   , "\""
   ]
+
+foreign import _getSessionCookie :: forall a. (a -> Maybe a) -> Maybe a -> Effect (Maybe String)
+getSessionCookie :: forall m. MonadEffect m => m (Maybe String)
+getSessionCookie = liftEffect $ _getSessionCookie Just Nothing
+
+foreign import _clearSessionCookie :: Effect Unit
+clearSessionCookie :: forall m. MonadEffect m => m Unit
+clearSessionCookie = liftEffect _clearSessionCookie
diff --git a/src/Main.purs b/src/Main.purs
index 02d1b08..912a977 100644
--- a/src/Main.purs
+++ b/src/Main.purs
@@ -3,7 +3,7 @@ module Main where
 import Prelude
 
 import Audio as Audio
-import Auth (AuthInfo, authHeader, getToken, startTwitchAuth)
+import Auth (AuthInfo, authHeader, getToken, startTwitchAuth, getSessionCookie, clearSessionCookie)
 import Config as Config
 import Data.String as String
 import Data.Array (head)
@@ -232,21 +232,31 @@ mainMenu = launchAff_ do
 mainAuth :: Effect Unit
 mainAuth = launchAff_ do
   liftEffect $ log "hello from auth"
-  form <- byId "lcolonq-auth-form"
-  listen form "submit" \ev -> launchAff_ do
-    liftEffect $ Ev.preventDefault ev
-    usernameInp <- byId "lcolonq-auth-username"
-    passwordInp <- byId "lcolonq-auth-password"
-    username <- getValue usernameInp
-    password <- getValue passwordInp
-    { text: resp } <- fetch ("/api/firstfactor")
-      { method: POST
-      , headers: { "Content-Type": "application/json" }
-      , body: UI.toJSON { username, password }
-      }
-    res <- resp
-    liftEffect $ log res
-    pure unit
+  getSessionCookie >>= case _ of
+    Nothing -> do
+      container <- byId "lcolonq-auth-login"
+      removeClass "lcolonq-invisible" container
+      form <- byId "lcolonq-auth-form"
+      listen form "submit" \ev -> launchAff_ do
+        liftEffect $ Ev.preventDefault ev
+        usernameInp <- byId "lcolonq-auth-username"
+        passwordInp <- byId "lcolonq-auth-password"
+        username <- getValue usernameInp
+        password <- getValue passwordInp
+        { text: resp } <- fetch ("/api/firstfactor")
+          { method: POST
+          , headers: { "Content-Type": "application/json" }
+          , body: UI.toJSON { username, password }
+          }
+        _ <- resp
+        UI.reload
+    Just _ -> do
+      container <- byId "lcolonq-auth-logout"
+      removeClass "lcolonq-invisible" container
+      logout <- byId "lcolonq-auth-logout-link"
+      listen logout "click" \_ev -> do
+        clearSessionCookie
+        UI.reload
 
 main :: Effect Unit
 main = case Config.mode of
diff --git a/src/UI.js b/src/UI.js
index 5cdc5d0..5003e21 100644
--- a/src/UI.js
+++ b/src/UI.js
@@ -1,3 +1,6 @@
 export const _cheatLog = (a) => () => console.log(a);
 export const _setInterval = (delay) => (f) => () => setInterval(f, delay);
 export const _toJSON = (x) => JSON.stringify(x);
+export const _reload = () => {
+    window.location.reload();
+};
diff --git a/src/UI.purs b/src/UI.purs
index 17d1ca1..d9a01bc 100644
--- a/src/UI.purs
+++ b/src/UI.purs
@@ -15,3 +15,7 @@ setInterval d f = liftEffect $ _setInterval d f
 foreign import _toJSON :: forall a. a -> String
 toJSON :: forall a. a -> String
 toJSON = _toJSON
+
+foreign import _reload :: Effect Unit
+reload :: forall m. MonadEffect m => m Unit
+reload = liftEffect _reload
diff --git a/templates/auth/index.html b/templates/auth/index.html
index dfb7101..976a7a6 100644
--- a/templates/auth/index.html
+++ b/templates/auth/index.html
@@ -12,20 +12,28 @@ CONFIG_SUBST
         </script>
         <script type="module" src="./main.js"></script>
     </head>
-    <body id="lcolonq-auth">
-        <div id="lcolonq-auth-box">
-            <h1>log in</h1>
-            <form id="lcolonq-auth-form">
-                <div>
-                    <label>username:</label>
-                    <input id="lcolonq-auth-username" type="text">
-                </div>
-                <div>
-                    <label>password:</label>
-                    <input id="lcolonq-auth-password" type="password">
-                </div>
-                <input type="submit" value="log in now!!">
-            </form>
+    <body>
+        <div id="lcolonq-auth-login" class="lcolonq-auth lcolonq-invisible">
+            <div class="lcolonq-auth-box">
+                <h1>log in</h1>
+                <form id="lcolonq-auth-form">
+                    <div>
+                        <label>username:</label>
+                        <input id="lcolonq-auth-username" type="text">
+                    </div>
+                    <div>
+                        <label>password:</label>
+                        <input id="lcolonq-auth-password" type="password">
+                    </div>
+                    <input id="lcolonq-auth-submit" type="submit" value="log in now!!">
+                </form>
+            </div>
+        </div>
+        <div id="lcolonq-auth-logout" class="lcolonq-auth lcolonq-invisible">
+            <div class="lcolonq-auth-box">
+                <h1>log out?</h1>
+                <a id="lcolonq-auth-logout-link">yeah</a>
+            </div>
         </div>
     </body>
 </html>