feat: basic setup for web with tailwind and routing

.gitignore

@@ -28,3 +28,5 @@ go.work.sum
 
 # key files
 *.pem
+
+dist/

cmd/hspguard/api/api.go

@@ -5,7 +5,6 @@ import (
 	"log"
 	"net/http"
 	"os"
-	"path/filepath"
 
 	"gitea.local/admin/hspguard/internal/auth"
 	imiddleware "gitea.local/admin/hspguard/internal/middleware"
@@ -31,18 +30,27 @@ func (s *APIServer) Run() error {
 	router := chi.NewRouter()
 	router.Use(middleware.Logger)
 
-	workDir, _ := os.Getwd()
+	// workDir, _ := os.Getwd()
-	staticDir := http.Dir(filepath.Join(workDir, "static"))
+	// staticDir := http.Dir(filepath.Join(workDir, "static"))
-	FileServer(router, "/static", staticDir)
+	// FileServer(router, "/static", staticDir)
 
 	router.Route("/api/v1", func(r chi.Router) {
 		r.Use(imiddleware.WithSkipper(imiddleware.AuthMiddleware, "/api/v1/login", "/api/v1/register"))
 
 		userHandler := user.NewUserHandler(s.repo)
-		userHandler.RegisterRoutes(router, r)
+		userHandler.RegisterRoutes(r)
 
 		authHandler := auth.NewAuthHandler(s.repo)
-		authHandler.RegisterRoutes(router, r)
+		authHandler.RegisterRoutes(r)
+	})
+
+	router.Get("/*", func(w http.ResponseWriter, r *http.Request) {
+		path := "./dist" + r.URL.Path
+		if _, err := os.Stat(path); os.IsNotExist(err) {
+			http.ServeFile(w, r, "./dist/index.html")
+			return
+		}
+		http.FileServer(http.Dir("./dist")).ServeHTTP(w, r)
 	})
 
 	// Handle unknown routes

internal/auth/routes.go

@@ -25,7 +25,7 @@ func NewAuthHandler(repo *repository.Queries) *AuthHandler {
 	}
 }
 
-func (h *AuthHandler) RegisterRoutes(router chi.Router, api chi.Router) {
+func (h *AuthHandler) RegisterRoutes(api chi.Router) {
 	api.Get("/profile", h.getProfile)
 	api.Post("/login", h.login)
 }
@@ -109,4 +109,3 @@ func (h *AuthHandler) login(w http.ResponseWriter, r *http.Request) {
 		web.Error(w, "failed to encode response", http.StatusInternalServerError)
 	}
 }
-

internal/user/routes.go

@@ -20,9 +20,7 @@ func NewUserHandler(repo *repository.Queries) *UserHandler {
 	}
 }
 
-func (h *UserHandler) RegisterRoutes(router chi.Router, api chi.Router) {
+func (h *UserHandler) RegisterRoutes(api chi.Router) {
-	router.Get("/login", h.loginPage)
-	router.Get("/register", h.registerPage)
 	api.Post("/register", h.register)
 }
 
@@ -92,4 +90,3 @@ func (h *UserHandler) register(w http.ResponseWriter, r *http.Request) {
 		web.Error(w, "failed to encode response", http.StatusInternalServerError)
 	}
 }
-

web/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

web/README.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

web/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Home Guard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build --watch",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@tailwindcss/vite": "^4.1.7",
+    "lucide-react": "^0.511.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
+    "react-router": "^7.6.0",
+    "tailwindcss": "^4.1.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@types/node": "^22.15.19",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "path": "^0.12.7",
+    "sass": "^1.89.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5"
+  }
+}

web/src/App.tsx

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+
+const App: FC = () => {
+  return <div>Hello</div>;
+};
+
+export default App;

web/src/components/ui/button.tsx

@@ -0,0 +1,19 @@
+import type { ButtonHTMLAttributes, FC, ReactNode } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  className?: string;
+}
+
+export const Button: FC<ButtonProps> = ({ children, className, ...props }) => {
+  return (
+    <button
+      className={`bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors ${
+        className || ""
+      }`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

web/src/components/ui/card.tsx

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from "react";
+
+interface ComponentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const Card: FC<ComponentProps> = ({ children, className }) => {
+  return (
+    <div className={`bg-white rounded-lg shadow-md ${className || ""}`}>
+      {children}
+    </div>
+  );
+};
+
+export function CardContent({ children, className }: ComponentProps) {
+  return <div className={`p-4 ${className || ""}`}>{children}</div>;
+}

web/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import type { FC } from "react";
+
+interface InputProps {
+  id: string;
+  type: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export const Input: FC<InputProps> = ({ id, type, placeholder, className }) => {
+  return (
+    <input
+      id={id}
+      type={type}
+      placeholder={placeholder}
+      className={`w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+        className || ""
+      }`}
+    />
+  );
+};

web/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

web/src/main.tsx

@@ -0,0 +1,25 @@
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import App from "./App";
+
+import "./index.css";
+import LoginPage from "./pages/Login";
+
+const root = document.getElementById("root")!;
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+  {
+    path: "/login",
+    element: <LoginPage />,
+  },
+  {
+    path: "/register",
+    element: <div>Hello from /register!</div>,
+  },
+]);
+
+createRoot(root).render(<RouterProvider router={router} />);

web/src/pages/Login/index.tsx

@@ -0,0 +1,72 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Mail, Lock, LogIn } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import overlay from "@/assets/overlay.jpg";
+
+export default function LoginPage() {
+  return (
+    <div
+      className="relative min-h-screen bg-cover bg-center"
+      style={{ backgroundImage: overlay }}
+    >
+      <div className="absolute inset-0 bg-black bg-opacity-60"></div>
+
+      <div className="relative z-10 flex items-center justify-center min-h-screen p-4">
+        <Card className="w-full max-w-md sm:max-w-full sm:h-full sm:rounded-none p-6 shadow-lg bg-white/90 backdrop-blur-md">
+          <div className="flex flex-col items-center">
+            <LogIn className="w-8 h-8 text-gray-700 mb-4" />
+            <h2 className="text-2xl font-bold mb-6 text-gray-800">Login</h2>
+
+            <CardContent className="w-full space-y-4">
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Email
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="you@example.com"
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="••••••••"
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+
+              <Button className="w-full mt-2">Log In</Button>
+              <div className="text-sm text-center text-gray-600">
+                Don’t have an account?{" "}
+                <Link to="/register" className="text-blue-600 hover:underline">
+                  Register
+                </Link>
+              </div>
+            </CardContent>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

web/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

web/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

web/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

web/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { resolve } from "path";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  build: {
+    outDir: "../dist",
+    emptyOutDir: true,
+  },
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
+  base: "/",
+});