added login

public/index.html

@@ -12,17 +12,44 @@
     <nav class="navbar" role="navigation" aria-label="main navigation">
         <div class="navbar-menu">
             <div class="navbar-start">
-                <a class="navbar-item" href="https://bulma.io">
+                <a class="navbar-item" href="#" hx-post="/api/v1/logout">
                     <img src="images/js_logo.svg" alt="js logo" style="height: 100%">
                     <h2 class="title is-3 ml-1">Reading Exercices</h2>
                 </a>
             </div>
         </div>
     </nav>
-    <div hx-get="/api/v1/random-questions/dsdsddsf/4"
+    <div hx-get="/api/v1/random-questions/:seed/:defaultIndex"
          hx-trigger="load"
          id="question-body">
     </div>
 
+    <script>
+        function getDefaultIndex(){
+            if(document.location.hash.length > 1){
+                return document.location.hash.substr(1)
+            }
+            return localStorage.getItem("defaultIndex") || '0'; 
+        }
+        document.body.addEventListener('htmx:configRequest', function(evt) {
+            evt.detail.headers.session = localStorage.getItem("seed"); 
+            evt.detail.path = evt.detail.path.replace(":seed", localStorage.getItem("seed"));
+            
+            evt.detail.path = evt.detail.path.replace(":defaultIndex", getDefaultIndex());
+        });
+        document.body.addEventListener('logout', function (evt) {
+          window.localStorage.clear();
+          document.location.href = "/login.html";     
+        });
+
+        document.body.addEventListener('set-question-id', function (evt) {
+            if(isNaN(evt.detail.value)){
+                return;
+            }
+            document.location.hash = evt.detail.value
+            localStorage.setItem("defaultIndex", evt.detail.value);
+        });
+
+    </script>
   </body>
 </html>

public/login.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>JS Reading App</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <script src="https://unpkg.com/htmx.org@1.9.9"></script>
+  </head>
+  <body>
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        <div class="navbar-menu">
+            <div class="navbar-start">
+                <a class="navbar-item" href="#">
+                    <img src="images/js_logo.svg" alt="js logo" style="height: 100%">
+                    <h2 class="title is-3 ml-1">Reading Exercices</h2>
+                </a>
+            </div>
+        </div>
+    </nav>
+    <div class="columns is-centered">
+      <div class="column is-half">
+        <form hx-post="/api/v1/login" hx-swap="none">
+        
+          <div class="field has-addons">
+            <div class="control">
+              <input class="input" id="username" type="text" placeholder="bob.l.eponge@ocean.com" name="username" required>
+            </div>
+            <div class="control">
+              <input type="submit" class="button" value="Login">
+              </a>
+            </div>
+          </div>
+        </form>
+      </div>      
+    </div>
+
+    <script>
+      document.body.addEventListener('set-seed', function (evt) {
+          const seed = document.getElementById("username").value;
+          window.localStorage.setItem("seed", seed);
+          document.location.href = "/";     
+      });
+
+    </script>
+
+  </body>
+</html>