working on getting the clientside settings in place

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch file",
+            "type": "go",
+            "request": "launch",
+            "mode": "debug",
+            "program": "cmd/main.go"
+        }
+    ]
+}

.vscode/settings.json

@@ -1,6 +1,13 @@
 {
+    "editor.formatOnSave": true,
+    "[templ]": {
+        "editor.defaultFormatter": "a-h.templ"
+    },
     "files.exclude": {
         "**/*_templ.go": true,
         "**/*_templ.txt": true
+    },
+    "emmet.includeLanguages": {
+        "templ": "html"
     }
 }

domain/consts.go

@@ -0,0 +1,9 @@
+package domain
+
+const (
+	CookieToken        = "token"
+	CookieRefreshToken = "refresh"
+	CookieUser         = "user"
+
+	CookieSettingsDarkMode = "darkmode"
+)

handlers/auth.go

@@ -3,6 +3,7 @@ package handlers
 import (
 	"log"
 	"net/http"
+	"templ-test/domain"
 	"templ-test/views/auth"
 	"templ-test/views/home"
 
@@ -25,17 +26,17 @@ func (h *Handlers) AuthLoginPost(c echo.Context) error {
 	}
 
 	cookie := new(http.Cookie)
-	cookie.Name = CookieToken
+	cookie.Name = domain.CookieToken
 	cookie.Value = resp.Token
 	c.SetCookie(cookie)
 
 	cookie = new(http.Cookie)
-	cookie.Name = CookieRefreshToken
+	cookie.Name = domain.CookieRefreshToken
 	cookie.Value = resp.RefreshToken
 	c.SetCookie(cookie)
 
 	cookie = new(http.Cookie)
-	cookie.Name = CookieUser
+	cookie.Name = domain.CookieUser
 	cookie.Value = user
 	c.SetCookie(cookie)
 

handlers/handler.go

@@ -3,6 +3,7 @@ package handlers
 import (
 	"errors"
 	"templ-test/client"
+	"templ-test/domain"
 	"templ-test/models"
 	"templ-test/services"
 	"time"
@@ -13,12 +14,6 @@ import (
 	"github.com/labstack/echo/v4"
 )
 
-const (
-	CookieToken        = "token"
-	CookieRefreshToken = "refresh"
-	CookieUser         = "user"
-)
-
 type Handlers struct {
 	api client.ApiClient
 	cfg services.EnvConfig
@@ -91,17 +86,17 @@ func ValidateJwt(ctx echo.Context, sharedSecret, issuer string) (jwtToken, error
 func GetCookieValues(ctx echo.Context) models.AllCookies {
 	m := models.AllCookies{}
 
-	token, err := ctx.Cookie(CookieToken)
+	token, err := ctx.Cookie(domain.CookieToken)
 	if err == nil {
 		m.Token = token.Value
 	}
 
-	user, err := ctx.Cookie(CookieUser)
+	user, err := ctx.Cookie(domain.CookieUser)
 	if err == nil {
 		m.Username = user.Value
 	}
 
-	refresh, err := ctx.Cookie(CookieRefreshToken)
+	refresh, err := ctx.Cookie(domain.CookieRefreshToken)
 	if err == nil {
 		m.RefreshToken = refresh.Value
 	}

handlers/home.go

@@ -2,6 +2,8 @@ package handlers
 
 import (
 	"net/http"
+	"templ-test/domain"
+	"templ-test/models"
 	"templ-test/views/home"
 
 	"github.com/labstack/echo/v4"
@@ -12,13 +14,27 @@ func (h *Handlers) HomeHandler(c echo.Context) error {
 }
 
 func (h *Handlers) Settings(c echo.Context) error {
-	return Render(c, http.StatusOK, home.UserSettings())
+	m := models.SettingsViewModel{}
+	darkMode, err := c.Cookie(domain.CookieSettingsDarkMode)
+	if err == nil {
+		m.DarkMode = darkMode.Value
+	}
+
+	return Render(c, http.StatusOK, home.UserSettings(m))
 }
 
 func (h *Handlers) SettingsPost(c echo.Context) error {
 	// take in the updated values from he user and write the cookies... tbd
+	useDarkMode := c.FormValue(domain.CookieSettingsDarkMode)
+	if useDarkMode != "" {
+		darkModeCookie := new(http.Cookie)
+		darkModeCookie.Name = domain.CookieSettingsDarkMode
+		darkModeCookie.Value = useDarkMode
 
-	return Render(c, http.StatusOK, home.UserSettings())
+		c.SetCookie(darkModeCookie)
+	}
+
+	return Render(c, http.StatusOK, home.SettingsUpdated())
 }
 
 //func (h *Handlers) ListHandler(c echo.Context) error {

models/home.go

@@ -0,0 +1,5 @@
+package models
+
+type SettingsViewModel struct {
+	DarkMode string
+}

views/auth/cookie.templ

@@ -4,7 +4,7 @@ import "templ-test/models"
 import "templ-test/views/layout"
 
 templ ShowCookie(m models.AllCookies) {
-	@layout.Testing("Cookie Explorer") {
+	@layout.WithLayout("Cookie Explorer") {
 		<h2>These are stored as cookies</h2>
 		<p>Username: { m.Username }</p>
 		<p>JWT Token: { m.Token }</p>

views/auth/login.templ

@@ -3,7 +3,7 @@ package auth
 import "templ-test/views/layout"
 
 templ AuthLogin() {
-	@layout.WithLayout("Login", true) {
+	@layout.WithLayout("Login") {
 		<form hx-post="/auth/login">
 			<div class="mb-3">
 				<label for="username" class="form-label">Username</label>

views/components/bootstrap/alert.templ

@@ -17,7 +17,3 @@ templ BootstrapAlert(message, variant string) {
 		{ message }
 	</div>
 }
-
-templ BootstrapButton(message, variant string) {
-	<button type="button" class={ getButtonVariant(variant) }>{ message }</button>
-}

views/components/bootstrap/button.templ

@@ -0,0 +1,10 @@
+package bootstrap
+
+const (
+	ButtonTypeSubmit  = "submit"
+	ButtonTypeDefault = "button"
+)
+
+templ BootstrapButton(message, variant, buttonType string) {
+	<button type={ buttonType } class={ getButtonVariant(variant) }>{ message }</button>
+}

views/components/bootstrap/label.templ

@@ -0,0 +1,5 @@
+package bootstrap
+
+templ Label(cssClass, name, cssForId, message string) {
+    <label class={ cssClass } name={ name } for={ cssForId }>{ message }</label>
+}

views/components/bootstrap/switch.templ

@@ -0,0 +1,13 @@
+package bootstrap
+
+const (
+	SwitchTypeCheckbox = "checkbox"
+)
+
+templ Switch(name, switchType, cssId string, enabled bool) {
+	if enabled == true {
+		<input class="form-check-input" name={ name } type={ switchType } role="switch" id={ cssId } checked/>
+	} else {
+		<input class="form-check-input" name={ name } type={ switchType } role="switch" id={ cssId }/>
+	}
+}

views/home/error.templ

@@ -3,7 +3,7 @@ package home
 import "templ-test/views/layout"
 
 templ Error(message error) {
-	@layout.Testing("Error") {
+	@layout.WithLayout("Error") {
 		<h1>Oops... :(</h1>
 		<h3>{ message.Error() } </h3>
 	}

views/home/home.templ

@@ -4,14 +4,14 @@ import "templ-test/views/components/bootstrap"
 import "templ-test/views/layout"
 
 templ Home() {
-	@layout.WithLayout("Home", true) {
+	@layout.WithLayout("Home") {
 		<p>
 			this should be above the alert
 		</p>
 		@bootstrap.BootstrapAlert("Testing!", bootstrap.VariantDark)
 		<p>you should now see this under the Alert </p>
-		@bootstrap.BootstrapButton("I am in danger", bootstrap.VariantDanger)
+		@bootstrap.BootstrapButton("I am in danger", bootstrap.VariantDanger, bootstrap.ButtonTypeDefault)
-		@bootstrap.BootstrapButton("I am the darkness", bootstrap.VariantDark)
+		@bootstrap.BootstrapButton("I am the darkness", bootstrap.VariantDark, bootstrap.ButtonTypeDefault)
 
 	}
 }

views/home/settings.templ

@@ -1,9 +1,33 @@
 package home
 
 import "templ-test/views/layout"
+import "templ-test/views/components/bootstrap"
+import "templ-test/models"
+import "templ-test/domain"
 
-templ UserSettings() {
+const (
-	@layout.Testing("Settings") {
+	test = "t"
-		<h2>This is not ready yet</h2>
+)
+
+templ UserSettings(model models.SettingsViewModel) {
+	@layout.WithLayout("Settings") {
+		<form hx-post="/settings">
+			<div class="mb-3">
+				if useDarkMode(model.DarkMode) {
+					@bootstrap.Switch("darkmode", bootstrap.SwitchTypeCheckbox, test, true)
+				} else {
+					@bootstrap.Switch("darkmode", bootstrap.SwitchTypeCheckbox, "flexSwitchCheckDefault", true)
+				}
+				@bootstrap.Label("form-check-label", domain.CookieSettingsDarkMode, "flexSwitchCheckDefault", "Use Dark Mode")
+			</div>
+			@bootstrap.BootstrapButton("Submit", bootstrap.VariantInfo, bootstrap.ButtonTypeSubmit)
+		</form>
 	}
 }
+
+func useDarkMode(value string) bool {
+	if value == "on" {
+		return true
+	}
+	return false
+}

views/home/settingsUpdated.templ

@@ -0,0 +1,9 @@
+package home
+
+import "templ-test/views/layout"
+
+templ SettingsUpdated() {
+    @layout.WithLayout("Settings Updated") {
+        <p>You are now free to move about the cabin.  Thank you for saving with us!</p>
+    }
+}

views/layout/body.templ

@@ -1,6 +1,6 @@
 package layout
 
-templ WithLayout(pageName string, useDarkMode bool) {
+templ WithLayout(pageName string) {
 	<html>
 		@getHtmlHead()
 		<body>

views/layout/util.go

@@ -2,8 +2,14 @@ package layout
 
 import (
 	"context"
+	"templ-test/domain"
 )
 
 func useLightOrDarkTheme(ctx context.Context) string {
-	return "dark"
+	cookie := ctx.Value(domain.CookieSettingsDarkMode)
+	if cookie == "on" {
+		return "dark"
+	} else {
+		return "light"
+	}
 }