feat: fileserver + logging + styling
This commit is contained in:
@ -4,10 +4,13 @@ import (
|
||||
"fmt"
|
||||
"log"
|
||||
"net/http"
|
||||
"os"
|
||||
"path/filepath"
|
||||
|
||||
"gitea.local/admin/hspguard/internal/repository"
|
||||
"gitea.local/admin/hspguard/internal/user"
|
||||
"github.com/go-chi/chi/v5"
|
||||
"github.com/go-chi/chi/v5/middleware"
|
||||
)
|
||||
|
||||
type APIServer struct {
|
||||
@ -24,6 +27,11 @@ func NewAPIServer(addr string, db *repository.Queries) *APIServer {
|
||||
|
||||
func (s *APIServer) Run() error {
|
||||
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) {
|
||||
userHandler := user.NewUserHandler()
|
||||
|
||||
28
cmd/hspguard/api/file_server.go
Normal file
28
cmd/hspguard/api/file_server.go
Normal 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)
|
||||
})
|
||||
}
|
||||
|
||||
@ -14,11 +14,11 @@ func NewUserHandler() *UserHandler {
|
||||
}
|
||||
|
||||
func (h *UserHandler) RegisterRoutes(router chi.Router) {
|
||||
router.Get("/login", h.handleLogin)
|
||||
router.Get("/register", h.handleRegister)
|
||||
router.Get("/login", h.loginPage)
|
||||
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{
|
||||
"Title": "Login",
|
||||
}
|
||||
@ -26,7 +26,7 @@ func (h *UserHandler) handleLogin(w http.ResponseWriter, r *http.Request) {
|
||||
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{
|
||||
"Title": "Register",
|
||||
}
|
||||
|
||||
80
static/css/styles.css
Normal file
80
static/css/styles.css
Normal 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
BIN
static/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
@ -4,15 +4,18 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{{ .Title }}</title>
|
||||
<link rel="stylesheet" href="/static/css/styles.css" >
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
<main>
|
||||
<!-- <header> -->
|
||||
<!-- <h1>{{ .Title }}</h1> -->
|
||||
<!-- </header> -->
|
||||
<div class="container">
|
||||
<main class="modal-box">
|
||||
{{ block "content" . }}{{ end }}
|
||||
</main>
|
||||
{{ template "footer" . }}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{ define "footer" }}
|
||||
<footer><p>© 2025 HSP Guard</p></footer>
|
||||
<footer class="footer"><p>© 2025 HSP Guard</p></footer>
|
||||
{{ end }}
|
||||
|
||||
|
||||
@ -1,19 +1,29 @@
|
||||
{{ define "content" }}
|
||||
<div class="icon-wrapper">
|
||||
<img src="/static/icon.png" alt="icon" class="icon">
|
||||
</div>
|
||||
<h1 class="modal-title">
|
||||
Create an account to enter homelab
|
||||
</h1>
|
||||
<form method="POST" action="/api/v1/register">
|
||||
<label for="email">
|
||||
Full Name:
|
||||
<input type="text" name="full_name" required>
|
||||
</label>
|
||||
<label for="email">
|
||||
Email:
|
||||
<input type="email" name="email" required>
|
||||
</label>
|
||||
<br>
|
||||
<label for="email">
|
||||
Password:
|
||||
<input type="password" name="password" required>
|
||||
</label>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<div class="input-icon">
|
||||
©
|
||||
</div>
|
||||
<input class="input-field" type="text" name="full_name" placeholder="Full Name" required>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-icon">
|
||||
@
|
||||
</div>
|
||||
<input class="input-field" type="email" name="email" placeholder="Email" required>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user