feat: initial login page

with separate file for future util endpoints, also dummy sessions inteface
2023-10-29 08:26:35 +00:00 · 2023-10-29 08:26:35 +00:00 · bde58a0eab
parent c19eb9104e
commit bde58a0eab
9 changed files with 273 additions and 29 deletions
--- a/flake.nix
+++ b/flake.nix
@ -16,6 +16,7 @@
            pkgs.semgrep
            pkgs.gopls
            pkgs.nodePackages.tailwindcss
+            pkgs.nodePackages.prettier
            pkgs.gnumake
          ];
          shellHook = ''
--- a/main.go
+++ b/main.go
@ -5,7 +5,9 @@ import (
 	"fmt"
 	"log"
 	"net/http"
+
 	"sunshine.industries/some-automoderation/routes"
+	"sunshine.industries/some-automoderation/sessions"
 )

 func main() {
@ -15,7 +17,8 @@ func main() {

 	fmt.Printf("Server will start on port %d\n", port)

-	routes.RegisterRoutes()
+	sessions := sessions.DummySM{}
+	routes.RegisterRoutes(&sessions)

 	log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", port), nil))
 }
--- a/routes/login_page.go
+++ b/routes/login_page.go
@ -0,0 +1,52 @@
+package routes
+
+import (
+	"embed"
+	"fmt"
+	"html/template"
+	"log"
+	"net/http"
+
+	"sunshine.industries/some-automoderation/sessions"
+)
+
+func registerLoginRoutes(templateFs *embed.FS, sessions *sessions.DummySM) {
+	// login page
+	http.HandleFunc("/login", func(w http.ResponseWriter, r *http.Request) {
+		var templFile = "templates/login.gohtml"
+		tmpl := template.Must(template.ParseFS(templateFs, templFile))
+		err := tmpl.Execute(w, nil)
+		if err != nil {
+			log.Printf("my error in executing template, huh\n %s", err)
+		}
+	})
+
+	// submitting the login info : room name & pwd, personal name & pwd
+	http.HandleFunc("/login/submit", func(w http.ResponseWriter, r *http.Request) {
+		err := r.ParseForm()
+		if err != nil {
+			w.WriteHeader(http.StatusBadRequest)
+		}
+
+		rn := r.PostFormValue("roomName")
+		rp := r.PostFormValue("roomPassword")
+		pn := r.PostFormValue("personalName")
+		pp := r.PostFormValue("personalPassword")
+
+		roomId := 1 // would be taken from rooms interface from redis
+		// would be either taken from room info on correct person pass or created
+		personId := 111
+		sessions.Save(int64(roomId), int64(personId))
+
+		fmt.Fprintf(w, "room things %s & %s, personal things %s and %s", rn, rp, pn, pp)
+		// i suppose here i'll need to
+		// a) check if room password OK
+		// b) get room data
+		// c) check if such person exists,
+		// either create one, or check password
+		// d) how should i monitor sessions?
+	})
+
+	// checking whether the room name already exists - change button between Join or Create
+
+}
--- a/routes/routes.go
+++ b/routes/routes.go
@ -5,6 +5,8 @@ import (
 	"html/template"
 	"log"
 	"net/http"
+
+	"sunshine.industries/some-automoderation/sessions"
 )

 //go:embed templates
@ -13,13 +15,15 @@ var templateFs embed.FS
 //go:embed static
 var staticFilesFs embed.FS

-func RegisterRoutes() {
+func RegisterRoutes(sessions *sessions.DummySM) {
+	// login page
+	registerLoginRoutes(&templateFs, sessions)

 	// main page template
 	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
 		var templFile = "templates/index.gohtml"
 		tmpl := template.Must(template.ParseFS(templateFs, templFile))
-		err := tmpl.Execute(w, 15)
+		err := tmpl.Execute(w, nil)
 		if err != nil {
 			log.Printf("my error in executing template, huh\n %s", err)
 		}
--- a/routes/static/out.css
+++ b/routes/static/out.css
@ -534,11 +534,76 @@ video {
  --tw-backdrop-sepia:  ;
 }

+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-rows-\[auto\2c 1fr\] {
+  grid-template-rows: auto 1fr;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.place-content-center {
+  place-content: center;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity));
 }

+.bg-main-700\/25 {
+  background-color: rgb(194 65 12 / 0.25);
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
 .text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
--- a/routes/templates/index.gohtml
+++ b/routes/templates/index.gohtml
@ -1,29 +1,35 @@
 <!doctype html>
 <html class="no-js" lang="">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title>Untitled</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Untitled</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script
+      src="https://unpkg.com/htmx.org@1.9.6"
+      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="/static/out.css"
+      type="text/css"
+      media="screen"
+    />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!-- Place favicon.ico in the root directory -->
+  </head>
+  <body class="bg-amber-400 text-xl">
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+      </p>
+    <![endif]-->

-        <link rel="stylesheet" href="/static/out.css" type="text/css" media="screen" />
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-        <!-- Place favicon.ico in the root directory -->
-
-    </head>
-    <body
-        class="bg-amber-400 text-xl"
-        >
-        <!--[if lt IE 8]>
-            <p class="browserupgrade">
-            You are using an <strong>outdated</strong> browser. Please
-            <a href="http://browsehappy.com/">upgrade your browser</a> to improve
-            your experience.
-            </p>
-        <![endif]-->
-
-        <h1>Hello</h1>
-        <p>This is index</p>
-    </body>
+    <h1>Hello</h1>
+    <p>This is index</p>
+  </body>
 </html>
--- a/routes/templates/login.gohtml
+++ b/routes/templates/login.gohtml
@ -0,0 +1,80 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Untitled</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script
+      src="https://unpkg.com/htmx.org@1.9.6"
+      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="/static/out.css"
+      type="text/css"
+      media="screen"
+    />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!-- Place favicon.ico in the root directory -->
+  </head>
+  <body class="bg-main-700/25 text-xl">
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+      </p>
+    <![endif]-->
+    <main class="grid grid-rows-[auto,1fr] h-screen">
+      <header>
+        <h1>Some Automoderation: login page</h1>
+      </header>
+      <section class="h-full grid place-content-center">
+        <form
+          class="grid grid-cols-2 place-content-center border border-black rounded p-4 gap-6"
+        >
+          <div id="roomInput" class="flex flex-col gap-4">
+            <p>Please specify room</p>
+            <input
+              id="roomName"
+              type="text"
+              name="roomName"
+              value=""
+              placeholder="room name"
+            />
+            <input
+              id="roomPassword"
+              type="password"
+              name="roomPassword"
+              value=""
+              placeholder="room password"
+            />
+          </div>
+          <div id="personInput" class="flex flex-col gap-4">
+            <p>And input your personal</p>
+            <input
+              id="personalName"
+              type="text"
+              name="personalName"
+              value=""
+              placeholder="personal name"
+            />
+            <input
+              id="personalPassword"
+              type="password"
+              name="personalPassword"
+              value=""
+              placeholder="personal password"
+            />
+          </div>
+          <button class="col-span-full"
+                  hx-post="/login/submit"
+                  >Join / Create</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
--- a/sessions/sessions_manager.go
+++ b/sessions/sessions_manager.go
@ -0,0 +1,27 @@
+package sessions
+
+import (
+	"log"
+)
+
+type SessionData struct {
+	sessionId int64
+	roomId int64
+	personId int64
+}
+
+type SessionManagement interface {
+    Get(sessionId int64) SessionData
+	Save(roomId int64, personId int64) int64
+}
+
+type DummySM struct {}
+
+func (d DummySM)Get(sessionId int64) SessionData {
+	log.Printf("get dummy session by %d", sessionId)
+	return SessionData{}
+}
+func (d DummySM)Save(roomId int64, personId int64) int64 {
+	log.Printf("save dummy session with %d %d", roomId, personId)
+	return 1
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,8 +1,14 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors')
+
 module.exports = {
  content: ["./routes/templates/**/*.gohtml"],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'main': colors.orange,
+      },
+    },
  },
  plugins: [],
 }