Merge pull request 'features/client-side-settings' (#3) from features/client-side-settings into main
Reviewed-on: #3
This commit is contained in:
commit
acda30ee33
15
.vscode/launch.json
vendored
Normal file
15
.vscode/launch.json
vendored
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
7
.vscode/settings.json
vendored
7
.vscode/settings.json
vendored
@ -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"
|
||||
}
|
||||
}
|
9
domain/consts.go
Normal file
9
domain/consts.go
Normal file
@ -0,0 +1,9 @@
|
||||
package domain
|
||||
|
||||
const (
|
||||
CookieToken = "token"
|
||||
CookieRefreshToken = "refresh"
|
||||
CookieUser = "user"
|
||||
|
||||
CookieSettingsDarkMode = "darkmode"
|
||||
)
|
@ -3,6 +3,7 @@ package handlers
|
||||
import (
|
||||
"log"
|
||||
"net/http"
|
||||
"templ-test/domain"
|
||||
"templ-test/views/auth"
|
||||
"templ-test/views/home"
|
||||
|
||||
@ -25,22 +26,22 @@ 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)
|
||||
|
||||
// render
|
||||
return Render(c, http.StatusOK, home.Home())
|
||||
return Render(c, http.StatusOK, auth.LoginPost())
|
||||
}
|
||||
|
||||
func (h *Handlers) AuthShowCookies(c echo.Context) error {
|
||||
|
@ -1,8 +1,10 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"context"
|
||||
"errors"
|
||||
"templ-test/client"
|
||||
"templ-test/domain"
|
||||
"templ-test/models"
|
||||
"templ-test/services"
|
||||
"time"
|
||||
@ -13,12 +15,6 @@ import (
|
||||
"github.com/labstack/echo/v4"
|
||||
)
|
||||
|
||||
const (
|
||||
CookieToken = "token"
|
||||
CookieRefreshToken = "refresh"
|
||||
CookieUser = "user"
|
||||
)
|
||||
|
||||
type Handlers struct {
|
||||
api client.ApiClient
|
||||
cfg services.EnvConfig
|
||||
@ -48,7 +44,16 @@ func (h *Handlers) Register(group echo.Group) {
|
||||
func Render(ctx echo.Context, statusCode int, t templ.Component) error {
|
||||
ctx.Response().Writer.WriteHeader(statusCode)
|
||||
ctx.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
|
||||
return t.Render(ctx.Request().Context(), ctx.Response().Writer)
|
||||
|
||||
// take the request context and make it a var
|
||||
request := ctx.Request().Context()
|
||||
//Check to see if we the echo context has the cookie we are looking for, if so, create a new context based on what we had and add the value
|
||||
darkMode, err := ctx.Cookie(domain.CookieSettingsDarkMode)
|
||||
if err == nil {
|
||||
request = context.WithValue(request, domain.CookieSettingsDarkMode, darkMode.Value)
|
||||
}
|
||||
|
||||
return t.Render(request, ctx.Response().Writer)
|
||||
}
|
||||
|
||||
type jwtToken struct {
|
||||
@ -91,20 +96,25 @@ 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
|
||||
}
|
||||
|
||||
darkMode, err := ctx.Cookie(domain.CookieSettingsDarkMode)
|
||||
if err == nil {
|
||||
m.DarkMode = darkMode.Value
|
||||
}
|
||||
|
||||
return m
|
||||
}
|
||||
|
@ -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,15 +14,25 @@ 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)
|
||||
}
|
||||
|
||||
//func (h *Handlers) ListHandler(c echo.Context) error {
|
||||
// return Render(c, http.StatusOK, views.List())
|
||||
//}
|
||||
return Render(c, http.StatusOK, home.SettingsUpdated())
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ type AllCookies struct {
|
||||
Username string
|
||||
Token string
|
||||
RefreshToken string
|
||||
DarkMode string
|
||||
}
|
||||
|
||||
type ShowCookie struct {
|
||||
|
5
models/home.go
Normal file
5
models/home.go
Normal file
@ -0,0 +1,5 @@
|
||||
package models
|
||||
|
||||
type SettingsViewModel struct {
|
||||
DarkMode string
|
||||
}
|
@ -4,10 +4,13 @@ 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>
|
||||
<h3>JWT Values</h3>
|
||||
<p>Username: { m.Username }</p>
|
||||
<p>JWT Token: { m.Token }</p>
|
||||
<p>RefreshToken: { m.RefreshToken }</p>
|
||||
<h3>User Settings</h3>
|
||||
<p>DarkMode: { m.DarkMode }</p>
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
7
views/auth/loginPost.templ
Normal file
7
views/auth/loginPost.templ
Normal file
@ -0,0 +1,7 @@
|
||||
package auth
|
||||
|
||||
import "templ-test/views/components/bootstrap"
|
||||
|
||||
templ LoginPost() {
|
||||
@bootstrap.BootstrapAlert("Login successful!", bootstrap.VariantSuccess)
|
||||
}
|
@ -17,7 +17,3 @@ templ BootstrapAlert(message, variant string) {
|
||||
{ message }
|
||||
</div>
|
||||
}
|
||||
|
||||
templ BootstrapButton(message, variant string) {
|
||||
<button type="button" class={ getButtonVariant(variant) }>{ message }</button>
|
||||
}
|
10
views/components/bootstrap/button.templ
Normal file
10
views/components/bootstrap/button.templ
Normal file
@ -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>
|
||||
}
|
5
views/components/bootstrap/label.templ
Normal file
5
views/components/bootstrap/label.templ
Normal file
@ -0,0 +1,5 @@
|
||||
package bootstrap
|
||||
|
||||
templ Label(cssClass, name, cssForId, message string) {
|
||||
<label class={ cssClass } name={ name } for={ cssForId }>{ message }</label>
|
||||
}
|
13
views/components/bootstrap/switch.templ
Normal file
13
views/components/bootstrap/switch.templ
Normal file
@ -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 }/>
|
||||
}
|
||||
}
|
@ -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>
|
||||
}
|
||||
|
@ -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 the darkness", bootstrap.VariantDark)
|
||||
@bootstrap.BootstrapButton("I am in danger", bootstrap.VariantDanger, bootstrap.ButtonTypeDefault)
|
||||
@bootstrap.BootstrapButton("I am the darkness", bootstrap.VariantDark, bootstrap.ButtonTypeDefault)
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -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() {
|
||||
@layout.Testing("Settings") {
|
||||
<h2>This is not ready yet</h2>
|
||||
const (
|
||||
test = "t"
|
||||
)
|
||||
|
||||
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
|
||||
}
|
5
views/home/settingsUpdated.templ
Normal file
5
views/home/settingsUpdated.templ
Normal file
@ -0,0 +1,5 @@
|
||||
package home
|
||||
|
||||
templ SettingsUpdated() {
|
||||
<p>You are now free to move about the cabin. Thank you for saving with us!</p>
|
||||
}
|
@ -1,20 +1,8 @@
|
||||
package layout
|
||||
|
||||
templ WithLayout(pageName string, useDarkMode bool) {
|
||||
<html>
|
||||
@getHtmlHead()
|
||||
<body>
|
||||
@bootstrapNavBar()
|
||||
@getBodyHeader(pageName)
|
||||
<div class="container-fluid">
|
||||
{ children... }
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
templ Testing(pageName string) {
|
||||
<html>
|
||||
templ WithLayout(pageName string) {
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme={ useLightOrDarkTheme(ctx) }>
|
||||
@getHtmlHead()
|
||||
<body>
|
||||
@bootstrapNavBar()
|
||||
|
@ -1,7 +1,7 @@
|
||||
package layout
|
||||
|
||||
templ bootstrapNavBar() {
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme={ useLightOrDarkTheme(ctx)}>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
@ -2,8 +2,14 @@ package layout
|
||||
|
||||
import (
|
||||
"context"
|
||||
"templ-test/domain"
|
||||
)
|
||||
|
||||
func useLightOrDarkTheme(ctx context.Context) string {
|
||||
value := ctx.Value(domain.CookieSettingsDarkMode)
|
||||
if value == "on" {
|
||||
return "dark"
|
||||
} else {
|
||||
return "light"
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user