feat: fileserver + logging + styling

This commit is contained in:
2025-05-18 17:00:07 +02:00
parent f382ccc008
commit fa30f66b6b
8 changed files with 160 additions and 31 deletions

View File

@ -4,10 +4,13 @@ import (
"fmt" "fmt"
"log" "log"
"net/http" "net/http"
"os"
"path/filepath"
"gitea.local/admin/hspguard/internal/repository" "gitea.local/admin/hspguard/internal/repository"
"gitea.local/admin/hspguard/internal/user" "gitea.local/admin/hspguard/internal/user"
"github.com/go-chi/chi/v5" "github.com/go-chi/chi/v5"
"github.com/go-chi/chi/v5/middleware"
) )
type APIServer struct { type APIServer struct {
@ -24,6 +27,11 @@ func NewAPIServer(addr string, db *repository.Queries) *APIServer {
func (s *APIServer) Run() error { func (s *APIServer) Run() error {
router := chi.NewRouter() router := chi.NewRouter()
router.Use(middleware.Logger)
workDir, _ := os.Getwd()
staticDir := http.Dir(filepath.Join(workDir, "static"))
FileServer(router, "/static", staticDir)
router.Route("/api/v1", func(r chi.Router) { router.Route("/api/v1", func(r chi.Router) {
userHandler := user.NewUserHandler() userHandler := user.NewUserHandler()

View File

@ -0,0 +1,28 @@
package api
import (
"net/http"
"strings"
"github.com/go-chi/chi/v5"
)
func FileServer(r chi.Router, path string, root http.FileSystem) {
if strings.ContainsAny(path, "{}*") {
panic("FileServer does not permit any URL parameters.")
}
if path != "/" && path[len(path)-1] != '/' {
r.Get(path, http.RedirectHandler(path+"/", 301).ServeHTTP)
path += "/"
}
path += "*"
r.Get(path, func(w http.ResponseWriter, r *http.Request) {
rctx := chi.RouteContext(r.Context())
pathPrefix := strings.TrimSuffix(rctx.RoutePattern(), "/*")
fs := http.StripPrefix(pathPrefix, http.FileServer(root))
fs.ServeHTTP(w, r)
})
}

View File

@ -14,11 +14,11 @@ func NewUserHandler() *UserHandler {
} }
func (h *UserHandler) RegisterRoutes(router chi.Router) { func (h *UserHandler) RegisterRoutes(router chi.Router) {
router.Get("/login", h.handleLogin) router.Get("/login", h.loginPage)
router.Get("/register", h.handleRegister) router.Get("/register", h.registerPage)
} }
func (h *UserHandler) handleLogin(w http.ResponseWriter, r *http.Request) { func (h *UserHandler) loginPage(w http.ResponseWriter, r *http.Request) {
data := map[string]any{ data := map[string]any{
"Title": "Login", "Title": "Login",
} }
@ -26,7 +26,7 @@ func (h *UserHandler) handleLogin(w http.ResponseWriter, r *http.Request) {
web.RenderTemplate(w, "login", data) web.RenderTemplate(w, "login", data)
} }
func (h *UserHandler) handleRegister(w http.ResponseWriter, r *http.Request) { func (h *UserHandler) registerPage(w http.ResponseWriter, r *http.Request) {
data := map[string]any{ data := map[string]any{
"Title": "Register", "Title": "Register",
} }

80
static/css/styles.css Normal file
View File

@ -0,0 +1,80 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: Inter, Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
padding: 2rem;
position: relative;
background: #ffffff;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 90%, rgba(30, 144, 255, 1) 100%);
}
.modal-box {
background-color: white;
padding: 2rem;
border-radius: 8px;
border: 1px solid #ddd;
max-width: 400px;
width: 100%;
z-index: 1;
}
.modal-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 15px;
}
.input-group {
display: flex;
flex-direction: row;
align-items: stretch;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
.input-icon {
padding: 10px;
}
.input-field {
flex: 1;
border: none;
}
.icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.icon {
width: 64px;
height: 64px;
}
.footer {
position: absolute;
bottom: 1rem;
text-align: center;
color: #999;
font-size: 0.9rem;
}

BIN
static/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

@ -4,15 +4,18 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
<link rel="stylesheet" href="/static/css/styles.css" >
</head> </head>
<body> <body>
<header> <!-- <header> -->
<h1>{{ .Title }}</h1> <!-- <h1>{{ .Title }}</h1> -->
</header> <!-- </header> -->
<main> <div class="container">
{{ block "content" . }}{{ end }} <main class="modal-box">
</main> {{ block "content" . }}{{ end }}
{{ template "footer" . }} </main>
{{ template "footer" . }}
</div>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View File

@ -1,4 +1,4 @@
{{ define "footer" }} {{ define "footer" }}
<footer><p>© 2025 HSP Guard</p></footer> <footer class="footer"><p>&copy; 2025 HSP Guard</p></footer>
{{ end }} {{ end }}

View File

@ -1,21 +1,31 @@
{{ define "content" }} {{ define "content" }}
<form method="POST" action="/api/v1/register"> <div class="icon-wrapper">
<label for="email"> <img src="/static/icon.png" alt="icon" class="icon">
Full Name: </div>
<input type="text" name="full_name" required> <h1 class="modal-title">
</label> Create an account to enter homelab
<label for="email"> </h1>
Email: <form method="POST" action="/api/v1/register">
<input type="email" name="email" required> <div class="input-group">
</label> <div class="input-icon">
<br> &copy;
<label for="email"> </div>
Password: <input class="input-field" type="text" name="full_name" placeholder="Full Name" required>
<input type="password" name="password" required> </div>
</label> <div class="input-group">
<br> <div class="input-icon">
<button type="submit"> @
Register </div>
</button> <input class="input-field" type="email" name="email" placeholder="Email" required>
</form> </div>
<div class="input-group">
<div class="input-icon">
P
</div>
<input class="input-field" type="password" name="password" placeholder="Password" required>
</div>
<button type="submit">
Register
</button>
</form>
{{ end }} {{ end }}