chore: improved handler and improved login

handler.go

@@ -82,7 +82,7 @@ type Error struct {
 type AnswerType int
 
 const (
-	NORMAL AnswerType = iota
+	NORMAL AnswerType = 1 << iota
 	HTML
 	JSON
 	HTMLFULL
@@ -113,19 +113,29 @@ func LoadBasedOnAnswer(ans AnswerType, w http.ResponseWriter, path string, data
 
 }
 
+type HandleFunc struct {
+	path string
+	mode AnswerType
+	fn   func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error
+}
+
 type Handler interface {
 	New()
 	Startup()
 	Get(fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error)
+	Post(fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error)
 }
 
-type Handle struct{}
+type Handle struct {
+	gets  []HandleFunc
+	posts []HandleFunc
+}
 
 func handleError(err *Error, answerType AnswerType, w http.ResponseWriter) {
 	if err != nil {
 		w.WriteHeader(err.code)
 		if err.code == 404 {
-            LoadBasedOnAnswer(answerType, w, "404.html", nil)
+			LoadBasedOnAnswer(answerType, w, "404.html", nil)
 			return
 		}
 		if err.msg != nil {
@@ -134,39 +144,129 @@ func handleError(err *Error, answerType AnswerType, w http.ResponseWriter) {
 	}
 }
 
-func (x Handle) Get(path string, fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error) {
+func (x *Handle) Get(path string, fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error) {
-	http.HandleFunc("/"+path, func(w http.ResponseWriter, r *http.Request) {
+	nhandler :=
-		if r.Method != "Get" {
+		HandleFunc{
-			header := r.Header.Get("REQUEST-TYPE")
+			fn:   fn,
-			if header == "html" {
+			path: path,
-				handleError(fn(HTMLFULL, w, r), HTMLFULL, w)
+			mode: NORMAL | HTML | HTMLFULL | JSON,
-				return
-			}
-			handleError(fn(NORMAL, w, r), NORMAL, w)
 		}
-	})
+
-	http.HandleFunc("/api/html/"+path, func(w http.ResponseWriter, r *http.Request) {
+	x.gets = append(x.gets, nhandler)
-		if r.Method != "Get" {
-			handleError(fn(HTML, w, r), HTML, w)
-		}
-	})
-	http.HandleFunc("/api/json/"+path, func(w http.ResponseWriter, r *http.Request) {
-		if r.Method != "Get" {
-			handleError(fn(JSON, w, r), JSON, w)
-		}
-	})
 }
 
-func (x Handle) New() {
+func (x *Handle) GetHTML(path string, fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error) {
-	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+	nhandler :=
-		if r.URL.Path != "/" {
+		HandleFunc{
-			w.WriteHeader(http.StatusNotFound)
+			fn:   fn,
-			LoadView(w, "404.html", nil)
+			path: path,
+			mode: NORMAL | HTML | HTMLFULL,
+		}
+
+	x.gets = append(x.gets, nhandler)
+}
+
+func (x *Handle) GetJSON(path string, fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error) {
+	nhandler :=
+		HandleFunc{
+			fn:   fn,
+			path: path,
+			mode: JSON,
+		}
+
+	x.gets = append(x.gets, nhandler)
+}
+
+func (x *Handle) Post(path string, fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error) {
+	nhandler :=
+		HandleFunc{
+			fn:   fn,
+			path: path,
+			mode: NORMAL | HTML | HTMLFULL | JSON,
+		}
+
+	x.posts = append(x.posts, nhandler)
+}
+
+func (x *Handle) PostHTML(path string, fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error) {
+	nhandler :=
+		HandleFunc{
+			fn:   fn,
+			path: path,
+			mode: NORMAL | HTML | HTMLFULL,
+		}
+
+	x.posts = append(x.posts, nhandler)
+}
+
+func (x *Handle) PostJSON(path string, fn func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error) {
+	nhandler :=
+		HandleFunc{
+			fn:   fn,
+			path: path,
+			mode: JSON,
+		}
+
+	x.posts = append(x.posts, nhandler)
+}
+
+func (x *Handle) handleGets(ans AnswerType, w http.ResponseWriter, r *http.Request) {
+	for _, s := range x.gets {
+		fmt.Printf("target: %s, paths: %s\n", s.path, r.URL.Path)
+		if s.path == r.URL.Path && ans&s.mode != 0 {
+			s.fn(ans, w, r)
 			return
 		}
-		LoadView(w, "index.html", nil)
+	}
+	w.WriteHeader(http.StatusNotFound)
+	LoadBasedOnAnswer(ans, w, "404.html", nil)
+}
+
+func (x *Handle) handlePosts(ans AnswerType, w http.ResponseWriter, r *http.Request) {
+	for _, s := range x.posts {
+		if s.path == r.URL.Path && ans&s.mode != 0 {
+			s.fn(ans, w, r)
+			return
+		}
+	}
+	w.WriteHeader(http.StatusNotFound)
+	LoadBasedOnAnswer(ans, w, "404.html", nil)
+}
+
+func AnswerTemplate(path string, data interface{}) func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error {
+	return func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error {
+		LoadBasedOnAnswer(mode, w, path, nil)
+		return nil
+	}
+}
+
+func NewHandler() *Handle {
+
+	x := &Handle{}
+
+	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		ans := NORMAL
+
+		if r.Header.Get("Request-Type") == "htmlfull" {
+			ans = HTMLFULL
+		}
+		if r.Header.Get("Request-Type") == "html" {
+			ans = HTML
+		}
+		//TODO JSON
+
+		if r.Method == "GET" {
+			x.handleGets(ans, w, r)
+			return
+		}
+		if r.Method == "POST" {
+			x.handlePosts(ans, w, r)
+			return
+		}
+		panic("TODO handle: " + r.Method)
 	})
 
+	// TODO Handle this in other way
 	http.HandleFunc("/styles/", func(w http.ResponseWriter, r *http.Request) {
 		path := r.URL.Path[len("/styles/"):]
 		if !strings.HasSuffix(path, ".css") {
@@ -188,6 +288,31 @@ func (x Handle) New() {
 		w.Header().Set("Content-Type", "text/css; charset=utf-8")
 		t.Execute(w, nil)
 	})
+
+	// TODO Handle this in other way
+	http.HandleFunc("/js/", func(w http.ResponseWriter, r *http.Request) {
+		path := r.URL.Path[len("/js/"):]
+		if !strings.HasSuffix(path, ".js") {
+			w.WriteHeader(http.StatusNotFound)
+			w.Write([]byte("File not found"))
+			return
+		}
+
+		t, err := template.ParseFiles("./views/js/" + path)
+
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			w.Write([]byte("Failed to load template"))
+			fmt.Println("Error:")
+			fmt.Println(err)
+			return
+		}
+
+		w.Header().Set("Content-Type", "text/javascript; charset=utf-8")
+		t.Execute(w, nil)
+	})
+
+	return x
 }
 
 func (x Handle) Startup() {

main.go

@@ -8,19 +8,19 @@ import (
 func main() {
 	fmt.Println("Starting server on :8000!")
 
-    handle := Handle{}
+	handle := NewHandler()
 
-    handle.New()
+	handle.GetHTML("/", AnswerTemplate("index.html", nil))
+	handle.GetHTML("/login", AnswerTemplate("login.html", nil))
+	handle.Post("/login", func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error {
+		if mode == JSON {
+			return &Error{code: 404}
+		}
 
-    handle.Get("login", func(mode AnswerType, w http.ResponseWriter, r *http.Request) *Error {
+		w.Header().Set("Location", "/")
-        if mode == JSON {
+		w.WriteHeader(http.StatusSeeOther)
-            return &Error{
+		return nil
-                code: 404,
+	})
-            };
-        }
-        LoadBasedOnAnswer(mode, w, "login.html", nil)
-        return nil;
-    })
 
-    handle.Startup()
+	handle.Startup()
 }

views/js/main.js

@@ -0,0 +1,10 @@
+function load() {
+  for (const elm of document.querySelectorAll("form > button")) {
+    elm.addEventListener('click', (e) => {
+      e.target.parentElement.classList.add("submitted");
+    });
+  }
+}
+
+window.onload = load;
+htmx.on('htmx:afterSwap', load);

views/layout.html

@@ -16,6 +16,8 @@
     </head>
     <body>
         <script src="https://unpkg.com/htmx.org@1.9.5"></script>
+        <script src="/js/main.js"></script>
+        {{ block "js_imports" . }} {{end}}
         {{ block "body" . }}
             {{ block "header.html" . }} {{end}}
             <div class="app">

views/login.html

@@ -1,15 +1,25 @@
 {{ define "title"}} Home : AI Stuff {{ end }}
 
 {{ define "mainbody" }}
-    <form>
+    <div class="login-page">
         <div>
-            <label for="email">Email</label>
+            <h1>
-            <input name="email" required />
+                Login
+            </h1>
+            <form method="post" action="/login" >
+                <fieldset>
+                    <label for="email">Email</label>
+                    <input type="email" required name="email" />
+                </fieldset>
+                <fieldset>
+                    <label for="password">Password</label>
+                    <input required name="password" type="password" />
+                </fieldset>
+                <button>
+                    Login
+                </button>
+            </form>
         </div>
-        <div>
+    </div>
-            <label for="password">Password</label>
-            <input name="password" required type="password" />
-        </div>
-    </form>
 {{ end }}
 

views/partials/header.html

@@ -2,7 +2,7 @@
     <ul>
         <div class="expand"></div>
         <li> 
-            <a hx-get="/login" hx-headers='{"REQUEST-TYPE": "html"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
+            <a hx-get="/login" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
                 Login
             </a>
         </li> 

views/styles/main.css

@@ -3,6 +3,16 @@
     font-family: 'Roboto', sans-serif;
 }
 
+:root {
+    --white: #ffffff;
+    --grey: #ffffff;
+    --main: #fca311;
+    --sec: #14213d;
+    --black: #000000;
+    --red: 212, 38, 38;
+    --green: 92, 199, 30;
+}
+
 body {
     margin: 0;
     padding: 0;
@@ -55,3 +65,66 @@ nav ul li a {
 .page404 div.description {
     font-size: 1.5em;
 }
+
+/* Login Page */
+.login-page {
+    display: grid;
+    place-items: center;
+}
+.login-page > div {
+    width: 40vw;
+}
+.login-page h1 {
+    text-align: center;
+}
+
+
+/* forms */
+
+form {
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 2px 5px 8px 2px #66666655;
+}
+
+form label {
+    display: block;
+    padding-bottom: 5px;
+    font-size: 1.2rem;
+}
+
+form input {
+    border: none;
+    box-shadow: 0 2px 5px 1px #66666655;
+    border-radius: 5px;
+    padding: 10px;
+    width: 100%;
+}
+
+form input:invalid:focus,
+form.submitted input:invalid {
+    box-shadow: 0 2px 5px 1px rgba(var(--red), 0.2);
+}
+form.submitted input:valid {
+    box-shadow: 0 2px 5px 1px rgba(var(--green), 0.2);
+}
+
+form fieldset {
+    padding-bottom: 15px;
+    border: none;
+}
+
+form button {
+    border-radius: 9px 10px;
+    text-align: center;
+    padding: 10px;
+    background: none;
+    border: none;
+    box-shadow: 0 2px 8px 1px #66666655;
+    margin-left: 50%;
+    width: 50%;
+    transform: translateX(-50%);
+    background: var(--main);
+    color: var(--black);
+    font-size: 1.2rem;
+}