Merge pull request #30 from Retr0-01/fix-layout-confirmations

fix: improve layout confirmation messages

.gitignore

@@ -26,3 +26,7 @@ dist-ssr
 .env*
 !.env.example
 docker-compose.*.yml
+
+data/
+meta/
+garage.toml

Dockerfile

@@ -1,9 +1,7 @@
 FROM node:20-slim AS frontend
 WORKDIR /app
 
-ENV PNPM_HOME="/pnpm"
+RUN npm install -g corepack@latest && corepack use pnpm@latest
-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
@@ -11,7 +9,7 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 COPY . .
 RUN pnpm run build
 
-FROM golang:1.22.5 AS backend
+FROM golang:1.23 AS backend
 WORKDIR /app
 
 COPY backend/go.mod backend/go.sum ./
@@ -23,6 +21,12 @@ RUN make
 
 FROM scratch
 
+COPY --from=alpine /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/
+COPY --from=ghcr.io/tarampampam/curl:8.6.0 /bin/curl /bin/curl
 COPY --from=backend /app/main /bin/main
 
-CMD [ "/bin/main" ]
+HEALTHCHECK --interval=5m --timeout=2s --retries=3 --start-period=15s CMD [ \
+    "curl", "--fail", "http://127.0.0.1:3909" \
+]
+
+ENTRYPOINT [ "main" ]

README.md

@@ -31,7 +31,7 @@ If you install Garage using Docker, you can install this web UI alongside Garage
 ```yml
 services:
   garage:
-    image: dxflrs/garage:v1.0.1
+    image: dxflrs/garage:v2.0.0
     container_name: garage
     volumes:
       - ./garage.toml:/etc/garage.toml
@@ -41,7 +41,7 @@ services:
     ports:
       - 3900:3900
       - 3901:3901
-      - 3902:3903
+      - 3902:3902
       - 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.6/garage-webui-v1.0.6-linux-amd64
+$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.1.0/garage-webui-v1.1.0-linux-amd64
 $ chmod +x garage-webui
 $ sudo cp garage-webui /usr/local/bin
 ```
@@ -136,14 +136,40 @@ admin_token = "YOUR_ADMIN_TOKEN_HERE"
 metrics_token = "YOUR_METRICS_TOKEN_HERE"
 ```
 
-However, if it fails to load, you can set these environment variables instead:
+However, if it fails to load, you can set `API_BASE_URL` & `API_ADMIN_KEY` environment variables instead.
+
+### Environment Variables
+
+Configurable envs:
 
 - `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.

backend/.env.example

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

backend/go.mod

@@ -1,6 +1,8 @@
 module khairul169/garage-webui
 
-go 1.22.5
+go 1.23.0
+
+toolchain go1.24.0
 
 require (
 	github.com/aws/aws-sdk-go-v2 v1.30.4
@@ -13,6 +15,7 @@ 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
@@ -21,4 +24,5 @@ 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
 )

backend/go.sum

@@ -1,3 +1,5 @@
+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=
@@ -42,6 +44,8 @@ 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=

backend/main.go

@@ -7,20 +7,35 @@ 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)
 	}
 
-	http.Handle("/api/", http.StripPrefix("/api", router.HandleApiRouter()))
+	basePath := os.Getenv("BASE_PATH")
-	ui.ServeUI()
+	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))
+	}
 
 	host := utils.GetEnv("HOST", "0.0.0.0")
 	port := utils.GetEnv("PORT", "3909")
@@ -28,7 +43,7 @@ func main() {
 	addr := fmt.Sprintf("%s:%s", host, port)
 	log.Printf("Starting server on http://%s", addr)
 
-	if err := http.ListenAndServe(addr, nil); err != nil {
+	if err := http.ListenAndServe(addr, sessionMgr.LoadAndSave(mux)); err != nil {
 		log.Fatal(err)
 	}
 }

backend/middleware/auth.go

@@ -0,0 +1,27 @@
+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)
+	})
+}

backend/router/auth.go

@@ -0,0 +1,64 @@
+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,
+	})
+}

backend/router/browse.go

@@ -146,11 +146,20 @@ 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)
+	}
 
 	_, err = io.Copy(w, object.Body)
 
@@ -283,7 +292,7 @@ func getBucketCredentials(bucket string) (aws.CredentialsProvider, error) {
 		return cacheData.(aws.CredentialsProvider), nil
 	}
 
-	body, err := utils.Garage.Fetch("/v1/bucket?globalAlias="+bucket, &utils.FetchOptions{})
+	body, err := utils.Garage.Fetch("/v2/GetBucketInfo?globalAlias="+bucket, &utils.FetchOptions{})
 	if err != nil {
 		return nil, err
 	}
@@ -300,7 +309,7 @@ func getBucketCredentials(bucket string) (aws.CredentialsProvider, error) {
 			continue
 		}
 
-		body, err := utils.Garage.Fetch(fmt.Sprintf("/v1/key?id=%s&showSecretKey=true", k.AccessKeyID), &utils.FetchOptions{})
+		body, err := utils.Garage.Fetch(fmt.Sprintf("/v2/GetKeyInfo?id=%s&showSecretKey=true", k.AccessKeyID), &utils.FetchOptions{})
 		if err != nil {
 			return nil, err
 		}
@@ -322,15 +331,26 @@ func getS3Client(bucket string) (*s3.Client, error) {
 		return nil, fmt.Errorf("cannot get credentials for bucket %s: %w", bucket, err)
 	}
 
+	// Determine endpoint and whether to disable HTTPS
+	endpoint := utils.Garage.GetS3Endpoint()
+	disableHTTPS := !strings.HasPrefix(endpoint, "https://")
+
+	// AWS config without BaseEndpoint
 	awsConfig := aws.Config{
 		Credentials: creds,
 		Region:      utils.Garage.GetS3Region(),
-		BaseEndpoint: aws.String(utils.Garage.GetS3Endpoint()),
 	}
 
+	// Build S3 client with custom endpoint resolver for proper signing
 	client := s3.NewFromConfig(awsConfig, func(o *s3.Options) {
 		o.UsePathStyle = true
-		o.EndpointOptions.DisableHTTPS = true
+		o.EndpointOptions.DisableHTTPS = disableHTTPS
+		o.EndpointResolver = s3.EndpointResolverFunc(func(region string, opts s3.EndpointResolverOptions) (aws.Endpoint, error) {
+			return aws.Endpoint{
+				URL:           endpoint,
+				SigningRegion: utils.Garage.GetS3Region(),
+			}, nil
+		})
 	})
 
 	return client, nil

backend/router/buckets.go

@@ -11,7 +11,7 @@ import (
 type Buckets struct{}
 
 func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
-	body, err := utils.Garage.Fetch("/v1/bucket?list", &utils.FetchOptions{})
+	body, err := utils.Garage.Fetch("/v2/ListBuckets", &utils.FetchOptions{})
 	if err != nil {
 		utils.ResponseError(w, err)
 		return
@@ -27,7 +27,7 @@ func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
 
 	for _, bucket := range buckets {
 		go func() {
-			body, err := utils.Garage.Fetch(fmt.Sprintf("/v1/bucket?id=%s", bucket.ID), &utils.FetchOptions{})
+			body, err := utils.Garage.Fetch(fmt.Sprintf("/v2/GetBucketInfo?id=%s", bucket.ID), &utils.FetchOptions{})
 
 			if err != nil {
 				ch <- schema.Bucket{ID: bucket.ID, GlobalAliases: bucket.GlobalAliases}

backend/router/router.go

@@ -1,9 +1,19 @@
 package router
 
-import "net/http"
+import (
+	"khairul169/garage-webui/middleware"
+	"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)
@@ -17,7 +27,9 @@ 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)
 
-	return router
+	mux.Handle("/", middleware.AuthMiddleware(router))
+	return mux
 }

backend/schema/bucket.go

@@ -4,6 +4,7 @@ type GetBucketsRes struct {
 	ID            string       `json:"id"`
 	GlobalAliases []string     `json:"globalAliases"`
 	LocalAliases  []LocalAlias `json:"localAliases"`
+	Created       string       `json:"created"`
 }
 
 type Bucket struct {
@@ -20,6 +21,7 @@ type Bucket struct {
 	UnfinishedMultipartUploadParts int64         `json:"unfinishedMultipartUploadParts"`
 	UnfinishedMultipartUploadBytes int64         `json:"unfinishedMultipartUploadBytes"`
 	Quotas                         Quotas        `json:"quotas"`
+	Created                        string        `json:"created"`
 }
 
 type LocalAlias struct {

backend/ui/ui.go

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

backend/ui/ui_prod.go

@@ -7,28 +7,57 @@ import (
 	"embed"
 	"io/fs"
 	"net/http"
+	"os"
 	"path"
+	"regexp"
+	"strings"
 )
 
 //go:embed dist
 var embeddedFs embed.FS
 
-func ServeUI() {
+func ServeUI(mux *http.ServeMux) {
 	distFs, _ := fs.Sub(embeddedFs, "dist")
 	fileServer := http.FileServer(http.FS(distFs))
+	basePath := os.Getenv("BASE_PATH")
 
-	http.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+	mux.Handle(basePath+"/", http.StripPrefix(basePath, 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(index)
+			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))
 			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"`)
+	})
 }

backend/utils/session.go

@@ -0,0 +1,33 @@
+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())
+}

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   garage:
-    image: dxflrs/garage:v1.0.1
+    image: dxflrs/garage:v2.0.0
     container_name: garage
     volumes:
       - ./garage.toml:/etc/garage.toml
@@ -24,4 +24,3 @@ services:
     environment:
       API_BASE_URL: "http://garage:3903"
       S3_ENDPOINT_URL: "http://garage:3900"
-

index.html

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

package.json

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

src/app/router.tsx

@@ -1,18 +1,27 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { lazy } from "react";
+import { lazy, Suspense } 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([
+const router = createBrowserRouter(
+  [
     {
       path: "/auth",
       Component: AuthLayout,
+      children: [
+        {
+          path: "login",
+          Component: LoginPage,
+        },
+      ],
     },
     {
       path: "/",
@@ -39,10 +48,18 @@ const router = createBrowserRouter([
         },
       ],
     },
-]);
+  ],
+  {
+    basename: BASE_PATH,
+  }
+);
 
 const Router = () => {
-  return <RouterProvider router={router} />;
+  return (
+    <Suspense>
+      <RouterProvider router={router} />
+    </Suspense>
+  );
 };
 
 export default Router;

src/components/containers/sidebar.tsx

@@ -4,6 +4,7 @@ import {
   HardDrive,
   KeySquare,
   LayoutDashboard,
+  LogOut,
   Palette,
 } from "lucide-react";
 import { Dropdown, Menu } from "react-daisyui";
@@ -12,6 +13,11 @@ 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 },
@@ -22,6 +28,7 @@ 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">
@@ -57,23 +64,48 @@ const Sidebar = () => {
         })}
       </Menu>
 
-      <Dropdown className="my-2 mx-4" vertical="top">
+      <div className="py-2 px-4 flex items-center gap-2">
+        <Dropdown vertical="top">
           <Dropdown.Toggle button={false}>
             <Button icon={Palette} color="ghost">
-            Theme
+              {!auth.isEnabled ? "Theme" : null}
             </Button>
           </Dropdown.Toggle>
 
-        <Dropdown.Menu className="max-h-[200px] overflow-y-auto">
+          <Dropdown.Menu className="max-h-[500px] overflow-y-auto">
             {themes.map((theme) => (
-            <Dropdown.Item key={theme} onClick={() => appStore.setTheme(theme)}>
+              <Dropdown.Item
+                key={theme}
+                onClick={() => appStore.setTheme(theme)}
+              >
                 {ucfirst(theme)}
               </Dropdown.Item>
             ))}
           </Dropdown.Menu>
         </Dropdown>
+
+        {auth.isEnabled ? <LogoutButton /> : null}
+      </div>
     </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;

src/components/layouts/auth-layout.tsx

@@ -1,5 +1,22 @@
+import { useAuth } from "@/hooks/useAuth";
+import { Navigate, Outlet } from "react-router-dom";
+
 const AuthLayout = () => {
-  return <div>AuthLayout</div>;
+  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>
+  );
 };
 
 export default AuthLayout;

src/components/layouts/main-layout.tsx

@@ -1,15 +1,17 @@
 import { PageContext } from "@/context/page-context";
 import { Suspense, useContext, useEffect } from "react";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Navigate, 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) {
@@ -17,6 +19,14 @@ const MainLayout = () => {
     }
   }, [pathname]);
 
+  if (auth.isLoading) {
+    return null;
+  }
+
+  if (!auth.isAuthenticated) {
+    return <Navigate to="/auth/login" />;
+  }
+
   return (
     <Drawer
       open={sidebar.isOpen}

src/components/ui/button.tsx

@@ -4,6 +4,7 @@ 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;

src/global.d.ts

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

src/hooks/useAuth.ts

@@ -0,0 +1,20 @@
+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,
+  };
+};

src/lib/api.ts

@@ -1,10 +1,23 @@
+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 = "/api";
+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;
+  }
+}
 
 const api = {
   async fetch<T = any>(url: string, options?: Partial<FetchOptions>) {
@@ -27,6 +40,7 @@ const api = {
 
     const res = await fetch(_url, {
       ...options,
+      credentials: "include",
       headers: { ...headers, ...(options?.headers || {}) },
     });
 
@@ -35,13 +49,18 @@ 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 Error(message);
+      throw new APIError(message, res.status);
     }
 
     return data as unknown as T;

src/lib/consts.ts

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

src/lib/utils.ts

@@ -3,6 +3,7 @@ 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 };
@@ -53,3 +54,7 @@ export const copyToClipboard = async (text: string) => {
     textArea?.remove();
   }
 };
+
+export const url = (...paths: unknown[]) => {
+  return BASE_PATH + paths.join("/");
+};

src/pages/auth/hooks.ts

@@ -0,0 +1,21 @@
+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");
+    },
+  });
+};

src/pages/auth/login.tsx

@@ -0,0 +1,54 @@
+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>
+  );
+}

src/pages/auth/schema.ts

@@ -0,0 +1,6 @@
+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"),
+});

src/pages/buckets/hooks.ts

@@ -18,7 +18,7 @@ export const useCreateBucket = (
   options?: UseMutationOptions<any, Error, CreateBucketSchema>
 ) => {
   return useMutation({
-    mutationFn: (body) => api.post("/v1/bucket", { body }),
+    mutationFn: (body) => api.post("/v2/CreateBucket", { body }),
     ...options,
   });
 };

src/pages/buckets/manage/hooks.ts

@@ -10,7 +10,7 @@ import { Bucket, Permissions } from "../types";
 export const useBucket = (id?: string | null) => {
   return useQuery({
     queryKey: ["bucket", id],
-    queryFn: () => api.get<Bucket>("/v1/bucket", { params: { id } }),
+    queryFn: () => api.get<Bucket>("/v2/GetBucketInfo", { params: { id } }),
     enabled: !!id,
   });
 };
@@ -18,7 +18,10 @@ export const useBucket = (id?: string | null) => {
 export const useUpdateBucket = (id?: string | null) => {
   return useMutation({
     mutationFn: (values: any) => {
-      return api.put<any>("/v1/bucket", { params: { id }, body: values });
+      return api.post<any>("/v2/UpdateBucket", {
+        params: { id },
+        body: values,
+      });
     },
   });
 };
@@ -29,8 +32,8 @@ export const useAddAlias = (
 ) => {
   return useMutation({
     mutationFn: (alias: string) => {
-      return api.put("/v1/bucket/alias/global", {
+      return api.post("/v2/AddBucketAlias", {
-        params: { id: bucketId, alias },
+        body: { bucketId, globalAlias: alias },
       });
     },
     ...options,
@@ -43,8 +46,8 @@ export const useRemoveAlias = (
 ) => {
   return useMutation({
     mutationFn: (alias: string) => {
-      return api.delete("/v1/bucket/alias/global", {
+      return api.post("/v2/RemoveBucketAlias", {
-        params: { id: bucketId, alias },
+        body: { bucketId, globalAlias: alias },
       });
     },
     ...options,
@@ -62,8 +65,7 @@ export const useAllowKey = (
   return useMutation({
     mutationFn: async (payload) => {
       const promises = payload.map(async (key) => {
-        console.log("test", key);
+        return api.post("/v2/AllowBucketKey", {
-        return api.post("/v1/bucket/allow", {
           body: {
             bucketId,
             accessKeyId: key.keyId,
@@ -88,7 +90,7 @@ export const useDenyKey = (
 ) => {
   return useMutation({
     mutationFn: (payload) => {
-      return api.post("/v1/bucket/deny", {
+      return api.post("/v2/DenyBucketKey", {
         body: {
           bucketId,
           accessKeyId: payload.keyId,
@@ -104,7 +106,7 @@ export const useRemoveBucket = (
   options?: MutationOptions<any, Error, string>
 ) => {
   return useMutation({
-    mutationFn: (id) => api.delete("/v1/bucket", { params: { id } }),
+    mutationFn: (id) => api.post("/v2/DeleteBucket", { params: { id } }),
     ...options,
   });
 };

src/pages/cluster/components/nodes-list.tsx

@@ -108,7 +108,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
 
   const onRevert = () => {
     if (
-      window.confirm("Are you sure you want to revert layout changes?") &&
+      window.confirm("Are you sure you want to revert any changes made?") &&
       data?.version != null
     ) {
       revertChanges.mutate(data?.version + 1);
@@ -117,7 +117,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
 
   const onApply = () => {
     if (
-      window.confirm("Are you sure you want to revert layout changes?") &&
+      window.confirm("Are you sure you want to apply your layout changes?") &&
       data?.version != null
     ) {
       applyChanges.mutate(data?.version + 1);

src/pages/cluster/hooks.ts

@@ -3,6 +3,7 @@ import {
   ApplyLayoutResult,
   AssignNodeBody,
   GetClusterLayoutResult,
+  GetNodeInfoResult,
   GetStatusResult,
 } from "./types";
 import {
@@ -11,24 +12,37 @@ import {
   useQuery,
 } from "@tanstack/react-query";
 
+export const useNodeInfo = () => {
+  return useQuery({
+    queryKey: ["node-info"],
+    queryFn: () =>
+      api.get<GetNodeInfoResult>("/v2/GetNodeInfo", {
+        params: { node: "self" },
+      }),
+    select: (data) => Object.values(data?.success || {})?.[0],
+  });
+};
+
 export const useClusterStatus = () => {
   return useQuery({
     queryKey: ["status"],
-    queryFn: () => api.get<GetStatusResult>("/v1/status"),
+    queryFn: () => api.get<GetStatusResult>("/v2/GetClusterStatus"),
   });
 };
 
 export const useClusterLayout = () => {
   return useQuery({
     queryKey: ["layout"],
-    queryFn: () => api.get<GetClusterLayoutResult>("/v1/layout"),
+    queryFn: () => api.get<GetClusterLayoutResult>("/v2/GetClusterLayout"),
   });
 };
 
 export const useConnectNode = (options?: Partial<UseMutationOptions>) => {
   return useMutation<any, Error, string>({
     mutationFn: async (nodeId) => {
-      const [res] = await api.post("/v1/connect", { body: [nodeId] });
+      const [res] = await api.post("/v2/ConnectClusterNodes", {
+        body: [nodeId],
+      });
       if (!res.success) {
         throw new Error(res.error || "Unknown error");
       }
@@ -40,7 +54,10 @@ export const useConnectNode = (options?: Partial<UseMutationOptions>) => {
 
 export const useAssignNode = (options?: Partial<UseMutationOptions>) => {
   return useMutation<any, Error, AssignNodeBody>({
-    mutationFn: (data) => api.post("/v1/layout", { body: [data] }),
+    mutationFn: (data) =>
+      api.post("/v2/UpdateClusterLayout", {
+        body: { parameters: null, roles: [data] },
+      }),
     ...(options as any),
   });
 };
@@ -48,15 +65,16 @@ export const useAssignNode = (options?: Partial<UseMutationOptions>) => {
 export const useUnassignNode = (options?: Partial<UseMutationOptions>) => {
   return useMutation<any, Error, string>({
     mutationFn: (nodeId) =>
-      api.post("/v1/layout", { body: [{ id: nodeId, remove: true }] }),
+      api.post("/v2/UpdateClusterLayout", {
+        body: { parameters: null, roles: [{ id: nodeId, remove: true }] },
+      }),
     ...(options as any),
   });
 };
 
 export const useRevertChanges = (options?: Partial<UseMutationOptions>) => {
   return useMutation<any, Error, number>({
-    mutationFn: (version) =>
+    mutationFn: () => api.post("/v2/RevertClusterLayout"),
-      api.post("/v1/layout/revert", { body: { version } }),
     ...(options as any),
   });
 };
@@ -64,7 +82,7 @@ export const useRevertChanges = (options?: Partial<UseMutationOptions>) => {
 export const useApplyChanges = (options?: Partial<UseMutationOptions>) => {
   return useMutation<ApplyLayoutResult, Error, number>({
     mutationFn: (version) =>
-      api.post("/v1/layout/apply", { body: { version } }),
+      api.post("/v2/ApplyClusterLayout", { body: { version } }),
     ...(options as any),
   });
 };

src/pages/cluster/page.tsx

@@ -1,11 +1,13 @@
 import Page from "@/context/page-context";
-import { useClusterStatus } from "./hooks";
+import { useClusterStatus, useNodeInfo } from "./hooks";
 import { Card } from "react-daisyui";
 import NodesList from "./components/nodes-list";
 import { useMemo } from "react";
 
 const ClusterPage = () => {
   const { data } = useClusterStatus();
+  const { data: node } = useNodeInfo();
+
   const nodes = useMemo(() => {
     if (!data) return [];
 
@@ -27,13 +29,13 @@ const ClusterPage = () => {
         <Card.Body className="gap-1">
           <Card.Title className="mb-2">Details</Card.Title>
 
-          <DetailItem title="Node ID" value={data?.node} />
+          {/* <DetailItem title="Node ID" value={node?.nodeId} /> */}
-          <DetailItem title="Version" value={data?.garageVersion} />
+          <DetailItem title="Garage Version" value={node?.garageVersion} />
           {/* <DetailItem title="Rust version" value={data?.rustVersion} /> */}
-          <DetailItem title="DB engine" value={data?.dbEngine} />
+          <DetailItem title="DB engine" value={node?.dbEngine} />
           <DetailItem
             title="Layout version"
-            value={data?.layoutVersion || data?.layout?.version}
+            value={data?.layoutVersion || data?.layout?.version || "-"}
           />
         </Card.Body>
       </Card>

src/pages/cluster/types.ts

@@ -1,5 +1,19 @@
 //
 
+export type GetNodeInfoResult = {
+  success: {
+    [key: string]: {
+      nodeId:         string;
+      garageVersion:  string;
+      garageFeatures: string[];
+      rustVersion:    string;
+      dbEngine:       string;
+    };
+  };
+  error:   Error;
+}
+
+
 export type GetStatusResult = {
   node: string;
   garageVersion: string;

src/pages/home/hooks.ts

@@ -5,6 +5,6 @@ import { useQuery } from "@tanstack/react-query";
 export const useNodesHealth = () => {
   return useQuery({
     queryKey: ["health"],
-    queryFn: () => api.get<GetHealthResult>("/v1/health"),
+    queryFn: () => api.get<GetHealthResult>("/v2/GetClusterHealth"),
   });
 };

src/pages/home/page.tsx

@@ -56,7 +56,7 @@ const HomePage = () => {
         <StatsCard
           title="Active Storage Nodes"
           icon={DatabaseZap}
-          value={health?.storageNodesOk}
+          value={health?.storageNodesUp}
         />
         <StatsCard
           title="Partitions"

src/pages/home/types.ts

@@ -5,7 +5,7 @@ export type GetHealthResult = {
   knownNodes: number;
   connectedNodes: number;
   storageNodes: number;
-  storageNodesOk: number;
+  storageNodesUp: number;
   partitions: number;
   partitionsQuorum: number;
   partitionsAllOk: number;

src/pages/keys/hooks.ts

@@ -10,7 +10,7 @@ import { CreateKeySchema } from "./schema";
 export const useKeys = () => {
   return useQuery({
     queryKey: ["keys"],
-    queryFn: () => api.get<Key[]>("/v1/key?list"),
+    queryFn: () => api.get<Key[]>("/v2/ListKeys"),
   });
 };
 
@@ -20,9 +20,9 @@ export const useCreateKey = (
   return useMutation({
     mutationFn: async (body) => {
       if (body.isImport) {
-        return api.post("/v1/key/import", { body });
+        return api.post("/v2/ImportKey", { body });
       }
-      return api.post("/v1/key", { body });
+      return api.post("/v2/CreateKey", { body });
     },
     ...options,
   });
@@ -32,7 +32,7 @@ export const useRemoveKey = (
   options?: UseMutationOptions<any, Error, string>
 ) => {
   return useMutation({
-    mutationFn: (id) => api.delete("/v1/key", { params: { id } }),
+    mutationFn: (id) => api.post("/v2/DeleteKey", { params: { id } }),
     ...options,
   });
 };

src/pages/keys/page.tsx

@@ -24,7 +24,7 @@ const KeysPage = () => {
 
   const fetchSecretKey = useCallback(async (id: string) => {
     try {
-      const result = await api.get("/v1/key", {
+      const result = await api.get("/v2/GetKeyInfo", {
         params: { id, showSecretKey: "true" },
       });
       if (!result?.secretAccessKey) {