khairul169/garage-webui
1
0
Fork 0
mirror of https://github.com/khairul169/garage-webui.git synced 2025-04-28 14:59:31 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: khairul169:main
Branches Tags
khairul169:main
khairul169:feat/terminal
khairul169:1.0.9
khairul169:1.0.8
khairul169:1.0.7
khairul169:1.0.6
khairul169:1.0.5
khairul169:1.0.4
khairul169:1.0.3
khairul169:1.0.2
khairul169:1.0.1
khairul169:1.0.0
..
compare: khairul169:1.0.6
Branches Tags
khairul169:main
khairul169:feat/terminal
khairul169:1.0.9
khairul169:1.0.8
khairul169:1.0.7
khairul169:1.0.6
khairul169:1.0.5
khairul169:1.0.4
khairul169:1.0.3
khairul169:1.0.2
khairul169:1.0.1
khairul169:1.0.0

No commits in common. "main" and "1.0.6" have entirely different histories.
main ... 1.0.6

28 changed files with 72 additions and 525 deletions
Show Stats Expand all files Collapse all files

6
Dockerfile
View File

@ -1,7 +1,9 @@
FROM node:20-slim AS frontend
WORKDIR /app
RUN npm install -g corepack@latest && corepack use pnpm@latest
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY package.json pnpm-lock.yaml ./
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
@ -9,7 +11,7 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
COPY . .
RUN pnpm run build
FROM golang:1.23 AS backend
FROM golang:1.22.5 AS backend
WORKDIR /app
COPY backend/go.mod backend/go.sum ./

32
README.md
View File

@ -41,7 +41,7 @@ services:
ports:
- 3900:3900
- 3901:3901
- 3902:3902
- 3902:3903
- 3903:3903
webui:
@ -62,7 +62,7 @@ services:
Get the latest binary from the [release page](https://github.com/khairul169/garage-webui/releases/latest) according to your OS architecture. For example:
```sh
$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.9/garage-webui-v1.0.9-linux-amd64
$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.6/garage-webui-v1.0.6-linux-amd64
$ chmod +x garage-webui
$ sudo cp garage-webui /usr/local/bin
```
@ -136,40 +136,14 @@ admin_token = "YOUR_ADMIN_TOKEN_HERE"
metrics_token = "YOUR_METRICS_TOKEN_HERE"
```
However, if it fails to load, you can set `API_BASE_URL` & `API_ADMIN_KEY` environment variables instead.
### Environment Variables
Configurable envs:
However, if it fails to load, you can set these environment variables instead:
- `CONFIG_PATH`: Path to the Garage `config.toml` file. Defaults to `/etc/garage.toml`.
- `BASE_PATH`: Base path or prefix for Web UI.
- `API_BASE_URL`: Garage admin API endpoint URL.
- `API_ADMIN_KEY`: Admin API key.
- `S3_REGION`: S3 Region.
- `S3_ENDPOINT_URL`: S3 Endpoint url.
### Authentication
Enable authentication by setting the `AUTH_USER_PASS` environment variable in the format `username:password_hash`, where `password_hash` is a bcrypt hash of the password.
Generate the username and password hash using the following command:
```bash
htpasswd -nbBC 10 "YOUR_USERNAME" "YOUR_PASSWORD"
```
> If command 'htpasswd' is not found, install `apache2-utils` using your package manager.
Then update your `docker-compose.yml`:
```yml
webui:
....
environment:
AUTH_USER_PASS: "username:$2y$10$DSTi9o..."
```
### Running
Once your instance of Garage Web UI is started, you can open the web UI at http://your-ip:3909. You can place it behind a reverse proxy to secure it with SSL.

6
backend/.env.example
View File

@ -1,6 +0,0 @@
#
BASE_PATH=""
AUTH_USER_PASS='username:$2y$10$DSTi9o0uQPEHSNlf66xMEOgm9KgVNBP3vHxA3SK0Xha2EVMb3mTXm'
API_BASE_URL="http://garage:3903"
S3_ENDPOINT_URL="http://garage:3900"
API_ADMIN_KEY=""

6
backend/go.mod
View File

@ -1,8 +1,6 @@
module khairul169/garage-webui
go 1.23.0
toolchain go1.24.0
go 1.22.5
require (
github.com/aws/aws-sdk-go-v2 v1.30.4
@ -15,7 +13,6 @@ require (
)
require (
github.com/alexedwards/scs/v2 v2.8.0 // indirect
github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.4 // indirect
github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.16 // indirect
github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.16 // indirect
@ -24,5 +21,4 @@ require (
github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.18 // indirect
github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.18 // indirect
github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.16 // indirect
golang.org/x/crypto v0.35.0
)

4
backend/go.sum
View File

@ -1,5 +1,3 @@
github.com/alexedwards/scs/v2 v2.8.0 h1:h31yUYoycPuL0zt14c0gd+oqxfRwIj6SOjHdKRZxhEw=
github.com/alexedwards/scs/v2 v2.8.0/go.mod h1:ToaROZxyKukJKT/xLcVQAChi5k6+Pn1Gvmdl7h3RRj8=
github.com/aws/aws-sdk-go-v2 v1.30.4 h1:frhcagrVNrzmT95RJImMHgabt99vkXGslubDaDagTk8=
github.com/aws/aws-sdk-go-v2 v1.30.4/go.mod h1:CT+ZPWXbYrci8chcARI3OmI/qgd+f6WtuLOoaIA8PR0=
github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.4 h1:70PVAiL15/aBMh5LThwgXdSQorVr91L127ttckI9QQU=
@ -44,8 +42,6 @@ github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
golang.org/x/crypto v0.35.0 h1:b15kiHdrGCHrP6LvwaQ3c03kgNhhiMgvlhxHQhmg2Xs=
golang.org/x/crypto v0.35.0/go.mod h1:dy7dXNW32cAb/6/PRuTNsix8T+vJAqvuIy5Bli/x0YQ=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=

21
backend/main.go
View File

@ -7,35 +7,20 @@ import (
"khairul169/garage-webui/utils"
"log"
"net/http"
"os"
"github.com/joho/godotenv"
)
func main() {
// Initialize app
godotenv.Load()
utils.InitCacheManager()
sessionMgr := utils.InitSessionManager()
if err := utils.Garage.LoadConfig(); err != nil {
log.Println("Cannot load garage config!", err)
}
basePath := os.Getenv("BASE_PATH")
mux := http.NewServeMux()
// Serve API
apiPrefix := basePath + "/api"
mux.Handle(apiPrefix+"/", http.StripPrefix(apiPrefix, router.HandleApiRouter()))
// Static files
ui.ServeUI(mux)
// Redirect to UI if BASE_PATH is set
if basePath != "" {
mux.Handle("/", http.RedirectHandler(basePath, http.StatusMovedPermanently))
}
http.Handle("/api/", http.StripPrefix("/api", router.HandleApiRouter()))
ui.ServeUI()
host := utils.GetEnv("HOST", "0.0.0.0")
port := utils.GetEnv("PORT", "3909")
@ -43,7 +28,7 @@ func main() {
addr := fmt.Sprintf("%s:%s", host, port)
log.Printf("Starting server on http://%s", addr)
if err := http.ListenAndServe(addr, sessionMgr.LoadAndSave(mux)); err != nil {
if err := http.ListenAndServe(addr, nil); err != nil {
log.Fatal(err)
}
}

27
backend/middleware/auth.go
View File

@ -1,27 +0,0 @@
package middleware
import (
"errors"
"khairul169/garage-webui/utils"
"net/http"
)
func AuthMiddleware(next http.Handler) http.Handler {
authData := utils.GetEnv("AUTH_USER_PASS", "")
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
auth := utils.Session.Get(r, "authenticated")
if authData == "" {
next.ServeHTTP(w, r)
return
}
if auth == nil || !auth.(bool) {
utils.ResponseErrorStatus(w, errors.New("unauthorized"), http.StatusUnauthorized)
return
}
next.ServeHTTP(w, r)
})
}

64
backend/router/auth.go
View File

@ -1,64 +0,0 @@
package router
import (
"encoding/json"
"errors"
"khairul169/garage-webui/utils"
"net/http"
"strings"
"golang.org/x/crypto/bcrypt"
)
type Auth struct{}
func (c *Auth) Login(w http.ResponseWriter, r *http.Request) {
var body struct {
Username string `json:"username"`
Password string `json:"password"`
}
if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
utils.ResponseError(w, err)
return
}
userPass := strings.Split(utils.GetEnv("AUTH_USER_PASS", ""), ":")
if len(userPass) < 2 {
utils.ResponseErrorStatus(w, errors.New("AUTH_USER_PASS not set"), 500)
return
}
if strings.TrimSpace(body.Username) != userPass[0] || bcrypt.CompareHashAndPassword([]byte(userPass[1]), []byte(body.Password)) != nil {
utils.ResponseErrorStatus(w, errors.New("invalid username or password"), 401)
return
}
utils.Session.Set(r, "authenticated", true)
utils.ResponseSuccess(w, map[string]bool{
"authenticated": true,
})
}
func (c *Auth) Logout(w http.ResponseWriter, r *http.Request) {
utils.Session.Clear(r)
utils.ResponseSuccess(w, true)
}
func (c *Auth) GetStatus(w http.ResponseWriter, r *http.Request) {
isAuthenticated := true
authSession := utils.Session.Get(r, "authenticated")
enabled := false
if utils.GetEnv("AUTH_USER_PASS", "") != "" {
enabled = true
}
if authSession != nil && authSession.(bool) {
isAuthenticated = true
}
utils.ResponseSuccess(w, map[string]bool{
"enabled": enabled,
"authenticated": isAuthenticated,
})
}

15
backend/router/browse.go
View File

@ -146,20 +146,11 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
return
}
w.Header().Set("Content-Type", *object.ContentType)
w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
w.Header().Set("Cache-Control", "max-age=86400")
w.Header().Set("Last-Modified", object.LastModified.Format(time.RFC1123))
if object.ContentType != nil {
w.Header().Set("Content-Type", *object.ContentType)
} else {
w.Header().Set("Content-Type", "application/octet-stream")
}
if object.ContentLength != nil {
w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
}
if object.ETag != nil {
w.Header().Set("Etag", *object.ETag)
}
w.Header().Set("Etag", *object.ETag)
_, err = io.Copy(w, object.Body)

16
backend/router/router.go
View File

@ -1,19 +1,9 @@
package router
import (
"khairul169/garage-webui/middleware"
"net/http"
)
import "net/http"
func HandleApiRouter() *http.ServeMux {
mux := http.NewServeMux()
auth := &Auth{}
mux.HandleFunc("POST /auth/login", auth.Login)
router := http.NewServeMux()
router.HandleFunc("POST /auth/logout", auth.Logout)
router.HandleFunc("GET /auth/status", auth.GetStatus)
config := &Config{}
router.HandleFunc("GET /config", config.GetAll)
@ -27,9 +17,7 @@ func HandleApiRouter() *http.ServeMux {
router.HandleFunc("PUT /browse/{bucket}/{key...}", browse.PutObject)
router.HandleFunc("DELETE /browse/{bucket}/{key...}", browse.DeleteObject)
// Proxy request to garage api endpoint
router.HandleFunc("/", ProxyHandler)
mux.Handle("/", middleware.AuthMiddleware(router))
return mux
return router
}

4
backend/ui/ui.go
View File

@ -3,6 +3,4 @@
package ui
import "net/http"
func ServeUI(mux *http.ServeMux) {}
func ServeUI() {}

37
backend/ui/ui_prod.go
View File

@ -7,57 +7,28 @@ import (
"embed"
"io/fs"
"net/http"
"os"
"path"
"regexp"
"strings"
)
//go:embed dist
var embeddedFs embed.FS
func ServeUI(mux *http.ServeMux) {
func ServeUI() {
distFs, _ := fs.Sub(embeddedFs, "dist")
fileServer := http.FileServer(http.FS(distFs))
basePath := os.Getenv("BASE_PATH")
mux.Handle(basePath+"/", http.StripPrefix(basePath, http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
http.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
_path := path.Clean(r.URL.Path)[1:]
// Rewrite non-existing paths to index.html
if _, err := fs.Stat(distFs, _path); err != nil {
index, _ := fs.ReadFile(distFs, "index.html")
html := string(index)
// Set base path for the UI
html = strings.ReplaceAll(html, "%BASE_PATH%", basePath)
html = addBasePath(html, basePath)
w.Header().Add("Content-Type", "text/html")
w.WriteHeader(http.StatusOK)
w.Write([]byte(html))
return
}
// Add prefix to each /assets strings in js
if len(basePath) > 0 && strings.HasSuffix(_path, ".js") {
data, _ := fs.ReadFile(distFs, _path)
html := string(data)
html = strings.ReplaceAll(html, "assets/", basePath[1:]+"/assets/")
w.Header().Add("Content-Type", "text/javascript")
w.WriteHeader(http.StatusOK)
w.Write([]byte(html))
w.Write(index)
return
}
fileServer.ServeHTTP(w, r)
})))
}
func addBasePath(html string, basePath string) string {
re := regexp.MustCompile(`(href|src)=["'](/[^"'>]+)["']`)
return re.ReplaceAllStringFunc(html, func(match string) string {
return re.ReplaceAllString(match, `$1="`+basePath+`$2"`)
})
}))
}

33
backend/utils/session.go
View File

@ -1,33 +0,0 @@
package utils
import (
"net/http"
"time"
"github.com/alexedwards/scs/v2"
)
type SessionManager struct {
mgr *scs.SessionManager
}
var Session *SessionManager
func InitSessionManager() *scs.SessionManager {
sessMgr := scs.New()
sessMgr.Lifetime = 24 * time.Hour
Session = &SessionManager{mgr: sessMgr}
return sessMgr
}
func (s *SessionManager) Get(r *http.Request, key string) interface{} {
return s.mgr.Get(r.Context(), key)
}
func (s *SessionManager) Set(r *http.Request, key string, value interface{}) {
s.mgr.Put(r.Context(), key, value)
}
func (s *SessionManager) Clear(r *http.Request) error {
return s.mgr.Clear(r.Context())
}

3
index.html
View File

@ -10,9 +10,6 @@
<link rel="manifest" href="/site.webmanifest" />
<title>Garage Web UI</title>
<script>
window.__BASE_PATH = "%BASE_PATH%";
</script>
</head>
<body>
<div id="root"></div>

8
package.json
View File

@ -1,7 +1,7 @@
{
"name": "garage-webui",
"private": true,
"version": "1.0.9",
"version": "1.0.6",
"type": "module",
"scripts": {
"dev:client": "vite",
@ -47,11 +47,5 @@
"typescript": "^5.5.3",
"typescript-eslint": "^8.0.0",
"vite": "^5.4.0"
},
"pnpm": {
"onlyBuiltDependencies": [
"@swc/core",
"esbuild"
]
}
}

81
src/app/router.tsx
View File

@ -1,65 +1,48 @@
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { lazy, Suspense } from "react";
import { lazy } from "react";
import AuthLayout from "@/components/layouts/auth-layout";
import MainLayout from "@/components/layouts/main-layout";
import { BASE_PATH } from "@/lib/consts";
const LoginPage = lazy(() => import("@/pages/auth/login"));
const ClusterPage = lazy(() => import("@/pages/cluster/page"));
const HomePage = lazy(() => import("@/pages/home/page"));
const BucketsPage = lazy(() => import("@/pages/buckets/page"));
const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page"));
const KeysPage = lazy(() => import("@/pages/keys/page"));
const router = createBrowserRouter(
[
{
path: "/auth",
Component: AuthLayout,
children: [
{
path: "login",
Component: LoginPage,
},
],
},
{
path: "/",
Component: MainLayout,
children: [
{
index: true,
Component: HomePage,
},
{
path: "cluster",
Component: ClusterPage,
},
{
path: "buckets",
children: [
{ index: true, Component: BucketsPage },
{ path: ":id", Component: ManageBucketPage },
],
},
{
path: "keys",
Component: KeysPage,
},
],
},
],
const router = createBrowserRouter([
{
basename: BASE_PATH,
}
);
path: "/auth",
Component: AuthLayout,
},
{
path: "/",
Component: MainLayout,
children: [
{
index: true,
Component: HomePage,
},
{
path: "cluster",
Component: ClusterPage,
},
{
path: "buckets",
children: [
{ index: true, Component: BucketsPage },
{ path: ":id", Component: ManageBucketPage },
],
},
{
path: "keys",
Component: KeysPage,
},
],
},
]);
const Router = () => {
return (
<Suspense>
<RouterProvider router={router} />
</Suspense>
);
return <RouterProvider router={router} />;
};
export default Router;

60
src/components/containers/sidebar.tsx
View File

@ -4,7 +4,6 @@ import {
HardDrive,
KeySquare,
LayoutDashboard,
LogOut,
Palette,
} from "lucide-react";
import { Dropdown, Menu } from "react-daisyui";
@ -13,11 +12,6 @@ import Button from "../ui/button";
import { themes } from "@/app/themes";
import appStore from "@/stores/app-store";
import garageLogo from "@/assets/garage-logo.svg";
import { useMutation } from "@tanstack/react-query";
import api from "@/lib/api";
import * as utils from "@/lib/utils";
import { toast } from "sonner";
import { useAuth } from "@/hooks/useAuth";
const pages = [
{ icon: LayoutDashboard, title: "Dashboard", path: "/", exact: true },
@ -28,7 +22,6 @@ const pages = [
const Sidebar = () => {
const { pathname } = useLocation();
const auth = useAuth();
return (
<aside className="bg-base-100 border-r border-base-300/30 w-[80%] md:w-[250px] flex flex-col items-stretch overflow-hidden h-full">
@ -64,48 +57,23 @@ const Sidebar = () => {
})}
</Menu>
<div className="py-2 px-4 flex items-center gap-2">
<Dropdown vertical="top">
<Dropdown.Toggle button={false}>
<Button icon={Palette} color="ghost">
{!auth.isEnabled ? "Theme" : null}
</Button>
</Dropdown.Toggle>
<Dropdown className="my-2 mx-4" vertical="top">
<Dropdown.Toggle button={false}>
<Button icon={Palette} color="ghost">
Theme
</Button>
</Dropdown.Toggle>
<Dropdown.Menu className="max-h-[500px] overflow-y-auto">
{themes.map((theme) => (
<Dropdown.Item
key={theme}
onClick={() => appStore.setTheme(theme)}
>
{ucfirst(theme)}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
{auth.isEnabled ? <LogoutButton /> : null}
</div>
<Dropdown.Menu className="max-h-[200px] overflow-y-auto">
{themes.map((theme) => (
<Dropdown.Item key={theme} onClick={() => appStore.setTheme(theme)}>
{ucfirst(theme)}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</aside>
);
};
const LogoutButton = () => {
const logout = useMutation({
mutationFn: () => api.post("/auth/logout"),
onSuccess: () => {
window.location.href = utils.url("/auth/login");
},
onError: (err) => {
toast.error(err?.message || "Unknown error");
},
});
return (
<Button className="flex-1" icon={LogOut} onClick={() => logout.mutate()}>
Logout
</Button>
);
};
export default Sidebar;

19
src/components/layouts/auth-layout.tsx
View File

@ -1,22 +1,5 @@
import { useAuth } from "@/hooks/useAuth";
import { Navigate, Outlet } from "react-router-dom";
const AuthLayout = () => {
const auth = useAuth();
if (auth.isLoading) {
return null;
}
if (auth.isAuthenticated) {
return <Navigate to="/" replace />;
}
return (
<div className="min-h-svh flex items-center justify-center">
<Outlet />
</div>
);
return <div>AuthLayout</div>;
};
export default AuthLayout;

12
src/components/layouts/main-layout.tsx
View File

@ -1,17 +1,15 @@
import { PageContext } from "@/context/page-context";
import { Suspense, useContext, useEffect } from "react";
import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import Sidebar from "../containers/sidebar";
import { ArrowLeft, MenuIcon } from "lucide-react";
import Button from "../ui/button";
import { useDisclosure } from "@/hooks/useDisclosure";
import { Drawer } from "react-daisyui";
import { useAuth } from "@/hooks/useAuth";
const MainLayout = () => {
const sidebar = useDisclosure();
const { pathname } = useLocation();
const auth = useAuth();
useEffect(() => {
if (sidebar.isOpen) {
@ -19,14 +17,6 @@ const MainLayout = () => {
}
}, [pathname]);
if (auth.isLoading) {
return null;
}
if (!auth.isAuthenticated) {
return <Navigate to="/auth/login" />;
}
return (
<Drawer
open={sidebar.isOpen}

1
src/components/ui/button.tsx
View File

@ -4,7 +4,6 @@ import { Button as BaseButton } from "react-daisyui";
import { Link } from "react-router-dom";
type ButtonProps = ComponentPropsWithoutRef<typeof BaseButton> & {
type?: HTMLButtonElement["type"];
href?: string;
target?: "_blank" | "_self" | "_parent" | "_top";
icon?: LucideIcon;

7
src/global.d.ts vendored
View File

@ -1,7 +0,0 @@
export {};
declare global {
interface Window {
__BASE_PATH?: string;
}
}

20
src/hooks/useAuth.ts
View File

@ -1,20 +0,0 @@
import api from "@/lib/api";
import { useQuery } from "@tanstack/react-query";
type AuthResponse = {
enabled: boolean;
authenticated: boolean;
};
export const useAuth = () => {
const { data, isLoading } = useQuery({
queryKey: ["auth"],
queryFn: () => api.get<AuthResponse>("/auth/status"),
retry: false,
});
return {
isLoading,
isEnabled: data?.enabled,
isAuthenticated: data?.authenticated,
};
};

23
src/lib/api.ts
View File

@ -1,23 +1,10 @@
import * as utils from "@/lib/utils";
import { BASE_PATH } from "./consts";
type FetchOptions = Omit<RequestInit, "headers" | "body"> & {
params?: Record<string, any>;
headers?: Record<string, string>;
body?: any;
};
export const API_URL = BASE_PATH + "/api";
export class APIError extends Error {
status!: number;
constructor(message: string, status: number = 400) {
super(message);
this.name = "APIError";
this.status = status;
}
}
export const API_URL = "/api";
const api = {
async fetch<T = any>(url: string, options?: Partial<FetchOptions>) {
@ -40,7 +27,6 @@ const api = {
const res = await fetch(_url, {
...options,
credentials: "include",
headers: { ...headers, ...(options?.headers || {}) },
});
@ -49,18 +35,13 @@ const api = {
?.includes("application/json");
const data = isJson ? await res.json() : await res.text();
if (res.status === 401 && !url.startsWith("/auth")) {
window.location.href = utils.url("/auth/login");
throw new APIError("unauthorized", res.status);
}
if (!res.ok) {
const message = isJson
? data?.message
: typeof data === "string"
? data
: res.statusText;
throw new APIError(message, res.status);
throw new Error(message);
}
return data as unknown as T;

6
src/lib/consts.ts
View File

@ -1,6 +0,0 @@
// consts.ts
export const BASE_PATH =
(import.meta.env.PROD ? window.__BASE_PATH : null) ||
import.meta.env.VITE_BASE_PATH ||
"";

5
src/lib/utils.ts
View File

@ -3,7 +3,6 @@ import { toast } from "sonner";
import { twMerge } from "tailwind-merge";
import dayjsRelativeTime from "dayjs/plugin/relativeTime";
import dayjs from "dayjs";
import { BASE_PATH } from "./consts";
dayjs.extend(dayjsRelativeTime);
export { dayjs };
@ -54,7 +53,3 @@ export const copyToClipboard = async (text: string) => {
textArea?.remove();
}
};
export const url = (...paths: unknown[]) => {
return BASE_PATH + paths.join("/");
};

21
src/pages/auth/hooks.ts
View File

@ -1,21 +0,0 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { z } from "zod";
import { loginSchema } from "./schema";
import api from "@/lib/api";
import { toast } from "sonner";
export const useLogin = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (body: z.infer<typeof loginSchema>) => {
return api.post("/auth/login", { body });
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["auth"] });
},
onError: (err) => {
toast.error(err?.message || "Unknown error");
},
});
};

54
src/pages/auth/login.tsx
View File

@ -1,54 +0,0 @@
import Button from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod";
import { Card } from "react-daisyui";
import { useForm } from "react-hook-form";
import { loginSchema } from "./schema";
import { InputField } from "@/components/ui/input";
import { useLogin } from "./hooks";
export default function LoginPage() {
const form = useForm({
resolver: zodResolver(loginSchema),
defaultValues: { username: "", password: "" },
});
const login = useLogin();
return (
<form onSubmit={form.handleSubmit((v) => login.mutate(v))}>
<Card className="w-full max-w-md" bordered>
<Card.Body>
<Card.Title tag="h2">Login</Card.Title>
<p className="text-base-content/60">
Enter username and password below to log in to your account
</p>
<InputField
form={form}
name="username"
title="Username"
placeholder="Enter your username"
/>
<InputField
form={form}
name="password"
title="Password"
type="password"
placeholder="Enter your password"
/>
<Card.Actions className="mt-4">
<Button
type="submit"
color="primary"
className="w-full md:w-auto min-w-[100px]"
loading={login.isPending}
>
Login
</Button>
</Card.Actions>
</Card.Body>
</Card>
</form>
);
}

6
src/pages/auth/schema.ts
View File

@ -1,6 +0,0 @@
import { z } from "zod";
export const loginSchema = z.object({
username: z.string().min(1, "Username is required"),
password: z.string().min(1, "Password is required"),
});