feat: add region configuration to MinIO client initialization

Signed-off-by: Noste <83548733+Noooste@users.noreply.github.com>

.github/workflows/build.yml

@@ -11,11 +11,20 @@ jobs:
     permissions:
       contents: read
       packages: write
+    strategy:
+      fail-fast: false
+      matrix:
+        platform:
+          - linux/amd64
+          - linux/arm64
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
@@ -32,21 +41,74 @@ jobs:
         with:
           images: ${{ secrets.DOCKER_REGISTRY }}
           tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
+            type=semver,pattern={{raw}}
             type=raw,value=latest
 
-      - name: Build and push Docker image
+      - name: Build and push by digest
+        id: build
         uses: docker/build-push-action@v5
         with:
           context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
+          platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          platforms: linux/amd64,linux/arm64
+          cache-from: type=gha,scope=build-${{ matrix.platform }}
+          cache-to: type=gha,mode=max,scope=build-${{ matrix.platform }}
+          outputs: type=image,name=${{ secrets.DOCKER_REGISTRY }},push-by-digest=true,name-canonical=true,push=true
 
-      - name: Image digest
-        run: echo ${{ steps.meta.outputs.digest }}
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ strategy.job-index }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs: build
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKER_LOGIN }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ secrets.DOCKER_REGISTRY }}
+          tags: |
+            type=semver,pattern={{raw}}
+            type=raw,value=latest
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ secrets.DOCKER_REGISTRY }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ secrets.DOCKER_REGISTRY }}:${{ steps.meta.outputs.version }}

.gitignore

@@ -59,4 +59,5 @@ data/
 meta/
 garage.toml
 
-backend/docs/
+backend/docs/
+config.yaml

Dockerfile

@@ -4,7 +4,8 @@ WORKDIR /app/frontend
 
 COPY frontend/package.json frontend/package-lock.json* ./
 
-RUN npm ci
+RUN --mount=type=cache,target=/root/.npm \
+    npm install
 
 COPY frontend/ .
 
@@ -14,17 +15,23 @@ FROM golang:1.25.4-alpine3.22 AS backend-builder
 
 WORKDIR /app
 
-RUN go install github.com/swaggo/swag/cmd/swag@latest
+RUN --mount=type=cache,target=/go/pkg/mod \
+    --mount=type=cache,target=/root/.cache/go-build \
+    go install github.com/swaggo/swag/cmd/swag@latest
 
 COPY backend/go.mod backend/go.sum ./
 
-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+    go mod download
 
 COPY backend .
 
-RUN swag init
+RUN --mount=type=cache,target=/root/.cache/go-build \
+    swag init
 
-RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o garage-ui .
+RUN --mount=type=cache,target=/go/pkg/mod \
+    --mount=type=cache,target=/root/.cache/go-build \
+    CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o garage-ui .
 
 FROM alpine:3.22
 

README.md

@@ -0,0 +1,647 @@
+# Garage UI
+
+A modern, full-stack web interface for managing [Garage](https://garagehq.deuxfleurs.fr/) distributed object storage systems. Built with React, TypeScript, Go, and Fiber for production-ready S3-compatible storage management.
+
+[![Docker Build](https://github.com/Noooste/garage-ui/actions/workflows/build.yml/badge.svg)](https://github.com/Noooste/garage-ui/actions/workflows/build.yml)
+[![Helm Chart](https://github.com/Noooste/garage-ui/actions/workflows/release.yml/badge.svg)](https://github.com/Noooste/garage-ui/actions/workflows/release.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Go Version](https://img.shields.io/badge/Go-1.25%2B-00ADD8?logo=go)](https://go.dev/)
+[![Node Version](https://img.shields.io/badge/Node-25%2B-339933?logo=node.js)](https://nodejs.org/)
+[![Artifact Hub](https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/garage-ui)](https://artifacthub.io/packages/search?repo=garage-ui)
+
+Garage UI provides a comprehensive dashboard for managing your Garage S3 storage cluster, featuring bucket management, object operations, user access control, and real-time cluster monitoring—all through an intuitive web interface.
+
+---
+
+## Features
+
+- **Bucket Management** - Create, configure, and delete S3 buckets with visual controls
+- **Object Operations** - Upload, download, and manage objects with drag-and-drop support
+- **User & Access Control** - Manage access keys, permissions, and user credentials
+- **Cluster Monitoring** - Real-time cluster health metrics, node status, and performance statistics
+- **Multi-Auth Support** - Flexible authentication with None, Basic Auth, and OIDC/OAuth2 modes
+- **Modern UI/UX** - Responsive React interface with dark mode, built on Tailwind CSS and shadcn/ui
+- **Production Ready** - Docker/Kubernetes deployment, health checks, and Prometheus metrics
+- **API-First Design** - RESTful API with Swagger/OpenAPI documentation
+
+---
+
+## Quick Start
+
+### Prerequisites
+
+- **Garage S3** storage cluster running (v2.0.0+)
+- **Docker** & Docker Compose (recommended) OR
+- **Go** 1.25+ and **Node.js** 25+ (for development)
+
+### Using Docker Compose (Recommended)
+
+1. **Clone the repository:**
+
+```bash
+git clone https://github.com/Noooste/garage-ui.git
+cd garage-ui
+```
+
+2. **Configure the application:**
+
+```bash
+cp config.yaml.example config.yaml
+# Edit config.yaml with your Garage endpoints and credentials
+```
+
+3. **Start the services:**
+
+```bash
+docker-compose up -d
+```
+
+4. **Access the UI:**
+
+Open your browser to [http://localhost:8080](http://localhost:8080)
+
+> The Docker Compose setup includes both Garage and Garage UI services for quick local development.
+
+### Using Docker
+
+```bash
+docker run -d \
+  -p 8080:8080 \
+  -v $(pwd)/config.yaml:/app/config.yaml \
+  -e GARAGE_UI_GARAGE_ENDPOINT=http://your-garage:3900 \
+  -e GARAGE_UI_GARAGE_ADMIN_ENDPOINT=http://your-garage:3903 \
+  noooste/garage-ui:latest
+```
+
+---
+
+## Installation
+
+### Docker Deployment
+
+**Pull the latest image:**
+
+```bash
+docker pull noooste/garage-ui:latest
+```
+
+**Available tags:**
+- `latest` - Latest stable release
+- `v0.0.4` - Specific version
+- `0.0` - Minor version track
+
+The Docker image is multi-platform, supporting `linux/amd64` and `linux/arm64`.
+
+### Kubernetes Deployment with Helm
+
+```bash
+# Add the Helm repository (if available)
+helm repo add garage-ui https://helm.noste.dev/
+
+# Install the chart
+helm install garage-ui garage-ui/garage-ui \
+  --set garage.endpoint=http://garage:3900 \
+  --set garage.adminEndpoint=http://garage:3903 \
+  --set garage.adminToken=your-admin-token
+```
+
+Or use the local Helm chart:
+
+```bash
+helm install garage-ui ./helm/garage-ui -f custom-values.yaml
+```
+
+### Building from Source
+
+**Backend:**
+
+```bash
+cd backend
+go mod download
+swag init  # Generate API docs
+go build -o garage-ui .
+```
+
+**Frontend:**
+
+```bash
+cd frontend
+npm install
+npm run build
+```
+
+**Run:**
+
+```bash
+# From project root
+./backend/garage-ui --config config.yaml
+```
+
+---
+
+## Configuration
+
+Garage UI can be configured via YAML file or environment variables.
+
+### Configuration File
+
+Create a `config.yaml` based on the provided example:
+
+```yaml
+# Server configuration
+server:
+  host: "0.0.0.0"
+  port: 8080
+  environment: "production"
+
+# Garage S3 Configuration
+garage:
+  endpoint: "http://garage:3900"
+  region: "eu-west-1"
+  admin_endpoint: "http://garage:3903"
+  admin_token: "your-admin-token-here"
+
+# Authentication (none, basic, oidc)
+auth:
+  mode: "none"
+
+  # Basic auth example
+  basic:
+    username: "admin"
+    password: "secure-password"
+
+  # OIDC example (Keycloak, Auth0, etc.)
+  oidc:
+    enabled: true
+    provider_name: "Keycloak"
+    client_id: "garage-ui"
+    client_secret: "your-client-secret"
+    issuer_url: "https://auth.example.com/realms/master"
+    auth_url: "https://auth.example.com/realms/master/protocol/openid-connect/auth"
+    token_url: "https://auth.example.com/realms/master/protocol/openid-connect/token"
+```
+
+See [`config.yaml.example`](config.yaml.example) for all available options.
+
+### Environment Variables
+
+All configuration can be set via environment variables with the prefix `GARAGE_UI_`:
+
+```bash
+GARAGE_UI_SERVER_PORT=8080
+GARAGE_UI_GARAGE_ENDPOINT=http://garage:3900
+GARAGE_UI_GARAGE_ADMIN_ENDPOINT=http://garage:3903
+GARAGE_UI_GARAGE_ADMIN_TOKEN=your-token
+GARAGE_UI_AUTH_MODE=basic
+GARAGE_UI_AUTH_BASIC_USERNAME=admin
+GARAGE_UI_AUTH_BASIC_PASSWORD=password
+GARAGE_UI_LOGGING_LEVEL=info
+```
+
+**Configuration Priority:** Environment variables override YAML file settings.
+
+---
+
+## Project Structure
+
+```
+garage-ui/
+├── backend/                  # Go backend (Fiber framework)
+│   ├── internal/
+│   │   ├── auth/            # Authentication services (JWT, OIDC)
+│   │   ├── config/          # Configuration loading
+│   │   ├── handlers/        # HTTP request handlers
+│   │   ├── middleware/      # CORS, auth middleware
+│   │   ├── models/          # Data models and types
+│   │   ├── routes/          # API route definitions
+│   │   └── services/        # Business logic (S3, Garage Admin)
+│   ├── pkg/                 # Shared packages
+│   ├── main.go              # Application entry point
+│   └── go.mod               # Go dependencies
+│
+├── frontend/                 # React + TypeScript frontend
+│   ├── src/
+│   │   ├── components/      # Reusable UI components
+│   │   │   ├── buckets/     # Bucket-specific components
+│   │   │   ├── charts/      # Data visualization
+│   │   │   ├── layout/      # App layout and navigation
+│   │   │   └── ui/          # shadcn/ui component library
+│   │   ├── hooks/           # Custom React hooks
+│   │   ├── lib/             # API client and utilities
+│   │   ├── pages/           # Page components (Dashboard, Buckets, etc.)
+│   │   ├── types/           # TypeScript type definitions
+│   │   └── App.tsx          # Main application component
+│   ├── package.json         # Node dependencies
+│   └── vite.config.ts       # Vite build configuration
+│
+├── helm/                     # Kubernetes Helm chart
+│   └── garage-ui/
+│       ├── Chart.yaml       # Chart metadata
+│       ├── values.yaml      # Default values
+│       └── templates/       # K8s resource templates
+│
+├── .github/workflows/        # CI/CD pipelines
+│   ├── build.yml           # Docker build and push
+│   └── release.yml         # Helm chart releases
+│
+├── Dockerfile               # Multi-stage build
+├── docker-compose.yml       # Local development stack
+└── config.yaml.example      # Configuration template
+```
+
+**Key Directories:**
+
+- **`backend/internal/handlers/`** - REST API endpoints for buckets, objects, users, cluster, and monitoring
+- **`frontend/src/pages/`** - Main application views (Dashboard, Buckets, Cluster, Access Control)
+- **`backend/internal/services/`** - Core business logic interfacing with Garage Admin API and S3
+- **`frontend/src/lib/api.ts`** - Axios-based API client with automatic error handling
+
+---
+
+## Development
+
+### Local Development Setup
+
+**1. Start Garage (using Docker Compose):**
+
+```bash
+docker-compose up garage -d
+```
+
+**2. Run the backend:**
+
+```bash
+cd backend
+go run main.go --config ../config.yaml
+```
+
+The backend will start on `http://localhost:8080` with hot-reload (use [air](https://github.com/cosmtrek/air) for auto-reload).
+
+**3. Run the frontend:**
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+The frontend dev server starts on `http://localhost:3000` with API proxy to backend.
+
+### Available Scripts
+
+**Backend:**
+
+```bash
+go run main.go              # Start server
+go test ./...               # Run tests
+swag init                   # Regenerate API docs
+go build -o garage-ui .     # Build binary
+```
+
+**Frontend:**
+
+```bash
+npm run dev                 # Development server (Vite)
+npm run build               # Production build
+npm run lint                # ESLint checks
+npm run preview             # Preview production build
+```
+
+### Testing
+
+```bash
+# Backend tests
+cd backend && go test ./internal/...
+
+# Frontend tests (if available)
+cd frontend && npm test
+```
+
+### Building Docker Image
+
+```bash
+docker build -t garage-ui:dev .
+```
+
+The Dockerfile uses a multi-stage build:
+1. **Frontend build** - Node.js Alpine to compile React app
+2. **Backend build** - Go Alpine to compile binary
+3. **Runtime** - Minimal Alpine with ca-certificates
+
+---
+
+## API Documentation
+
+Once the backend is running, access the Swagger UI documentation at:
+
+**http://localhost:8080/api/v1/**
+
+### API Endpoints Overview
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/health` | GET | Health check endpoint |
+| `/api/v1/buckets` | GET | List all buckets |
+| `/api/v1/buckets` | POST | Create a new bucket |
+| `/api/v1/buckets/{name}` | GET | Get bucket details |
+| `/api/v1/buckets/{name}` | DELETE | Delete a bucket |
+| `/api/v1/buckets/{name}/objects` | GET | List objects in bucket |
+| `/api/v1/objects/upload` | POST | Upload object to bucket |
+| `/api/v1/objects/download` | GET | Download object |
+| `/api/v1/objects/delete` | DELETE | Delete object |
+| `/api/v1/users` | GET | List access keys |
+| `/api/v1/users` | POST | Create access key |
+| `/api/v1/users/{id}` | DELETE | Delete access key |
+| `/api/v1/cluster/status` | GET | Cluster node status |
+| `/api/v1/cluster/health` | GET | Cluster health metrics |
+| `/api/v1/cluster/statistics` | GET | Storage statistics |
+| `/api/v1/metrics` | GET | Prometheus metrics |
+
+**Authentication:** Bearer token in `Authorization` header when using OIDC or session-based auth.
+
+---
+
+## Authentication Modes
+
+Garage UI supports three authentication modes:
+
+### 1. None (Default)
+
+No authentication required - suitable for private networks or development.
+
+```yaml
+auth:
+  mode: "none"
+```
+
+### 2. Basic Authentication
+
+Simple username/password authentication.
+
+```yaml
+auth:
+  mode: "basic"
+  basic:
+    username: "admin"
+    password: "your-secure-password"
+```
+
+### 3. OIDC (OpenID Connect)
+
+Enterprise-grade authentication with providers like Keycloak, Auth0, Okta, etc.
+
+```yaml
+auth:
+  mode: "oidc"
+  oidc:
+    enabled: true
+    provider_name: "Keycloak"
+    client_id: "garage-ui"
+    client_secret: "your-client-secret"
+    issuer_url: "https://auth.example.com/realms/master"
+    auth_url: "https://auth.example.com/realms/master/protocol/openid-connect/auth"
+    token_url: "https://auth.example.com/realms/master/protocol/openid-connect/token"
+    userinfo_url: "https://auth.example.com/realms/master/protocol/openid-connect/userinfo"
+    session_max_age: 86400  # 24 hours
+    cookie_secure: true      # Enable in production with HTTPS
+```
+
+**Role-Based Access (Optional):**
+
+```yaml
+auth:
+  oidc:
+    role_attribute_path: "resource_access.garage-ui.roles"
+    admin_role: "admin"
+```
+
+---
+
+## Deployment Best Practices
+
+### Production Considerations
+
+1. **Use HTTPS** - Always enable TLS in production:
+   ```yaml
+   auth:
+     oidc:
+       cookie_secure: true
+   ```
+
+2. **Set Strong Admin Token** - Generate a secure token for Garage Admin API:
+   ```bash
+   openssl rand -base64 32
+   ```
+
+3. **Configure CORS** - Restrict allowed origins:
+   ```yaml
+   cors:
+     allowed_origins:
+       - "https://garage-ui.yourdomain.com"
+   ```
+
+4. **Enable Monitoring** - Expose metrics endpoint for Prometheus:
+   ```yaml
+   # Metrics available at /api/v1/metrics
+   ```
+
+5. **Resource Limits** - Set appropriate CPU/memory limits in Kubernetes/Docker
+
+### Health Checks
+
+The application provides a health check endpoint:
+
+```bash
+curl http://localhost:8080/health
+# Response: {"status":"ok","version":"0.1.0"}
+```
+
+Docker health check is configured automatically (every 30s).
+
+### Kubernetes Deployment
+
+The Helm chart includes:
+
+- **Deployment** with configurable replicas
+- **Service** (ClusterIP/LoadBalancer)
+- **Ingress** with TLS support
+- **ConfigMap** for configuration
+- **NetworkPolicy** for security
+- **ServiceMonitor** for Prometheus (optional)
+
+Example custom values:
+
+```yaml
+# custom-values.yaml
+replicaCount: 2
+
+image:
+  repository: noooste/garage-ui
+  tag: v0.0.4
+
+garage:
+  endpoint: "http://garage.storage.svc.cluster.local:3900"
+  adminEndpoint: "http://garage.storage.svc.cluster.local:3903"
+  adminToken: "your-secure-token"
+
+ingress:
+  enabled: true
+  className: nginx
+  hosts:
+    - host: garage-ui.example.com
+      paths:
+        - path: /
+          pathType: Prefix
+  tls:
+    - secretName: garage-ui-tls
+      hosts:
+        - garage-ui.example.com
+
+auth:
+  mode: oidc
+  oidc:
+    clientId: garage-ui
+    clientSecret: secret
+    issuerUrl: https://auth.example.com/realms/master
+```
+
+Install with:
+
+```bash
+helm install garage-ui ./helm/garage-ui -f custom-values.yaml
+```
+
+---
+
+## Technology Stack
+
+### Backend
+
+- **[Go](https://go.dev/)** 1.25+ - High-performance backend runtime
+- **[Fiber v3](https://gofiber.io/)** - Express-inspired web framework
+- **[Viper](https://github.com/spf13/viper)** - Configuration management
+- **[Minio Go SDK](https://github.com/minio/minio-go)** - S3 client library
+- **[go-oidc](https://github.com/coreos/go-oidc)** - OpenID Connect support
+- **[Zerolog](https://github.com/rs/zerolog)** - Structured logging
+- **[Swagger/Swag](https://github.com/swaggo/swag)** - API documentation
+
+### Frontend
+
+- **[React](https://react.dev/)** 19 - UI framework
+- **[TypeScript](https://www.typescriptlang.org/)** 5.9+ - Type safety
+- **[Vite](https://vitejs.dev/)** 7 - Build tool and dev server
+- **[React Router](https://reactrouter.com/)** 7 - Client-side routing
+- **[TanStack Query](https://tanstack.com/query)** - Server state management
+- **[Zustand](https://github.com/pmndrs/zustand)** - Client state management
+- **[React Hook Form](https://react-hook-form.com/)** + [Zod](https://zod.dev/) - Form validation
+- **[Tailwind CSS](https://tailwindcss.com/)** 4 - Utility-first styling
+- **[shadcn/ui](https://ui.shadcn.com/)** - Component library
+- **[Lucide Icons](https://lucide.dev/)** - Icon library
+- **[Recharts](https://recharts.org/)** - Data visualization
+- **[Axios](https://axios-http.com/)** - HTTP client
+
+---
+
+## Contributing
+
+Contributions are welcome! Whether it's bug reports, feature requests, or code contributions, your input helps improve Garage UI.
+
+### How to Contribute
+
+1. **Fork the repository**
+2. **Create a feature branch** (`git checkout -b feature/amazing-feature`)
+3. **Make your changes**
+4. **Commit your changes** (`git commit -m 'Add amazing feature'`)
+5. **Push to the branch** (`git push origin feature/amazing-feature`)
+6. **Open a Pull Request**
+
+### Development Guidelines
+
+- Follow existing code style (use `gofmt` for Go, ESLint for TypeScript)
+- Add tests for new features when possible
+- Update documentation for API changes
+- Keep commits atomic and descriptive
+- Ensure all tests pass before submitting PR
+
+### Reporting Issues
+
+Please open an issue on GitHub with:
+- Clear description of the problem
+- Steps to reproduce
+- Expected vs actual behavior
+- Environment details (OS, Docker version, etc.)
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+**Issue: "Failed to connect to Garage Admin API"**
+
+- **Solution:** Verify `garage.admin_endpoint` and `garage.admin_token` in config.yaml
+- Check Garage Admin API is accessible: `curl http://garage:3903/status -H "Authorization: Bearer your-token"`
+
+**Issue: "CORS errors in browser console"**
+
+- **Solution:** Configure CORS in config.yaml to allow frontend origin:
+  ```yaml
+  cors:
+    allowed_origins:
+      - "http://localhost:3000"  # For dev
+  ```
+
+**Issue: "401 Unauthorized with OIDC"**
+
+- **Solution:** Verify OIDC configuration, especially `issuer_url`, `client_id`, and `client_secret`
+- Check provider configuration allows the redirect URL: `http://your-app/auth/callback`
+
+**Issue: "Objects not appearing after upload"**
+
+- **Solution:** Check S3 endpoint connectivity and bucket permissions
+- Verify Garage bucket exists: `garage bucket list`
+
+### Debug Mode
+
+Enable debug logging for troubleshooting:
+
+```yaml
+logging:
+  level: "debug"
+  format: "json"
+```
+
+Or via environment variable:
+
+```bash
+GARAGE_UI_LOGGING_LEVEL=debug
+```
+
+---
+
+## License
+
+This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
+
+Copyright (c) 2025 Noste
+
+---
+
+## Acknowledgments
+
+- [Garage](https://garagehq.deuxfleurs.fr/) - The lightweight, geo-distributed S3 storage system
+- [shadcn/ui](https://ui.shadcn.com/) - Beautiful, accessible React components
+- [Fiber](https://gofiber.io/) - Fast and lightweight Go web framework
+- All open-source contributors who made this project possible
+
+---
+
+## Support
+
+- **Documentation:** [GitHub Wiki](https://github.com/Noooste/garage-ui/wiki) (coming soon)
+- **Issues:** [GitHub Issues](https://github.com/Noooste/garage-ui/issues)
+- **Discussions:** [GitHub Discussions](https://github.com/Noooste/garage-ui/discussions)
+
+---
+
+**Made with ❤️ for the Garage community**

backend/internal/handlers/buckets.go

@@ -111,25 +111,12 @@ func (h *BucketHandler) CreateBucket(c fiber.Ctx) error {
 		)
 	}
 
-	// Check if bucket already exists
-	bucketInfo, err := h.adminService.GetBucketInfoByAlias(ctx, req.Name)
-	if err != nil {
-		return c.Status(fiber.StatusInternalServerError).JSON(
-			models.ErrorResponse(models.ErrCodeInternalError, "Failed to check bucket existence: "+err.Error()),
-		)
-	}
-
-	if bucketInfo != nil {
-		return c.Status(fiber.StatusConflict).JSON(
-			models.ErrorResponse(models.ErrCodeBucketExists, "Bucket already exists"),
-		)
-	}
-
 	// Create the bucket
 	createBucketReq := models.CreateBucketAdminRequest{
 		GlobalAlias: &req.Name,
 	}
-	if bucketInfo, err = h.adminService.CreateBucket(ctx, createBucketReq); err != nil {
+
+	if _, err := h.adminService.CreateBucket(ctx, createBucketReq); err != nil {
 		return c.Status(fiber.StatusInternalServerError).JSON(
 			models.ErrorResponse(models.ErrCodeInternalError, "Failed to create bucket: "+err.Error()),
 		)

backend/internal/handlers/users.go

@@ -251,6 +251,41 @@ func (h *UserHandler) GetUser(c fiber.Ctx) error {
 	return c.JSON(models.SuccessResponse(userInfo))
 }
 
+// GetUserSecretKey retrieves the secret key for a specific user/access key
+//
+//	@Summary		Get user secret key
+//	@Description	Retrieves the secret access key for a specific user/access key
+//	@Tags			Users
+//	@Produce		json
+//	@Param			access_key	path		string										true	"Access key of the user to retrieve secret for"
+//	@Success		200			{object}	models.APIResponse{data=map[string]string}	"Secret key retrieved successfully"
+//	@Failure		400			{object}	models.APIResponse{error=models.APIError}	"Access key is required"
+//	@Failure		500			{object}	models.APIResponse{error=models.APIError}	"Failed to get secret key"
+//	@Router			/api/v1/users/{access_key}/secret [get]
+func (h *UserHandler) GetUserSecretKey(c fiber.Ctx) error {
+	ctx := c.Context()
+	accessKey := c.Params("access_key")
+
+	if accessKey == "" {
+		return c.Status(fiber.StatusBadRequest).JSON(
+			models.ErrorResponse(models.ErrCodeBadRequest, "Access key is required"),
+		)
+	}
+
+	// Get key information WITH secret key
+	keyInfo, err := h.adminService.GetKeyInfo(ctx, accessKey, true)
+	if err != nil {
+		return c.Status(fiber.StatusInternalServerError).JSON(
+			models.ErrorResponse(models.ErrCodeInternalError, "Failed to get secret key: "+err.Error()),
+		)
+	}
+
+	// Return only the secret key
+	return c.JSON(models.SuccessResponse(map[string]string{
+		"secretKey": *keyInfo.SecretAccessKey,
+	}))
+}
+
 // UpdateUserPermissions updates user permissions
 //
 //	@Summary		Update user permissions

backend/internal/models/garage_admin.go

@@ -194,7 +194,7 @@ type ClusterHealth struct {
 	KnownNodes       int    `json:"knownNodes"`
 	ConnectedNodes   int    `json:"connectedNodes"`
 	StorageNodes     int    `json:"storageNodes"`
-	StorageNodesUp   int    `json:"storageNodesUp"`
+	StorageNodesUp   int    `json:"storageNodesOk"`
 	Partitions       int    `json:"partitions"`
 	PartitionsQuorum int    `json:"partitionsQuorum"`
 	PartitionsAllOk  int    `json:"partitionsAllOk"`

backend/internal/routes/routes.go

@@ -74,6 +74,7 @@ func SetupRoutes(
 		users.Get("/", userHandler.ListUsers)                          // List all users/keys
 		users.Post("/", userHandler.CreateUser)                        // Create new user/key
 		users.Get("/:access_key", userHandler.GetUser)                 // Get user info
+		users.Get("/:access_key/secret", userHandler.GetUserSecretKey) // Get user secret key
 		users.Delete("/:access_key", userHandler.DeleteUser)           // Delete user/key
 		users.Patch("/:access_key", userHandler.UpdateUserPermissions) // Update user permissions
 	}
@@ -217,10 +218,10 @@ func SetupRoutes(
 		}
 	}
 
+	cfg.Server.FrontendPath = "./frontend/dist"
+
 	// Check if frontend path exists
 	if _, err := os.Stat(cfg.Server.FrontendPath); err == nil {
-		fmt.Println("Serving frontend from:", cfg.Server.FrontendPath)
-
 		// SPA fallback - serve index.html for all non-API routes
 		app.Use(func(c fiber.Ctx) error {
 			path := c.Path()

backend/internal/services/garage_admin.go

@@ -210,7 +210,7 @@ func (s *GarageAdminService) GetBucketInfoByAlias(ctx context.Context, globalAli
 	}
 
 	var result models.GarageBucketInfo
-	if err := decodeResponse(resp, &result); err != nil {
+	if err = decodeResponse(resp, &result); err != nil {
 		return nil, fmt.Errorf("failed to decode response: %w", err)
 	}
 

backend/internal/services/s3.go

@@ -27,6 +27,7 @@ func NewS3Service(cfg *config.GarageConfig, adminService *GarageAdminService) *S
 	client, err := minio.New(cfg.Endpoint, &minio.Options{
 		//Creds:  credentials.NewStaticV4(cfg.AccessKey, cfg.SecretKey, ""),
 		Secure: cfg.UseSSL,
+		Region: cfg.Region,
 	})
 	if err != nil {
 		panic(fmt.Errorf("failed to create MinIO client: %w", err))
@@ -99,6 +100,7 @@ func (s *S3Service) getMinioClient(ctx context.Context, bucketName string) (*min
 	client, err := minio.New(s.config.Endpoint, &minio.Options{
 		Creds:  creds,
 		Secure: s.config.UseSSL,
+		Region: s.config.Region,
 	})
 	if err != nil {
 		return nil, fmt.Errorf("failed to create MinIO client for bucket %s: %w", bucketName, err)

docker-compose.yml

@@ -26,7 +26,7 @@ services:
       - garage
     environment:
       # Garage S3 Configuration
-      GARAGE_UI_GARAGE_ENDPOINT: "http://garage:3900"
+      GARAGE_UI_GARAGE_ENDPOINT: "garage:3900"
       GARAGE_UI_GARAGE_ADMIN_ENDPOINT: "http://garage:3903"
 
       # Server Configuration

frontend/src/lib/api.ts

@@ -222,6 +222,11 @@ export const accessApi = {
     return response.data.data;
   },
 
+  getSecretKey: async (accessKey: string): Promise<string> => {
+    const response = await api.get(`/v1/users/${accessKey}/secret`);
+    return response.data.data.secretKey;
+  },
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   createKey: async (name: string, permissions?: any[]): Promise<AccessKey> => {
     const response = await api.post('/v1/users', { name, permissions });

frontend/src/pages/AccessControl.tsx

@@ -46,6 +46,7 @@ export function AccessControl() {
   const [createPermissionWrite, setCreatePermissionWrite] = useState(false);
   const [createPermissionOwner, setCreatePermissionOwner] = useState(false);
   const [createGrantPermissions, setCreateGrantPermissions] = useState(false);
+  const [newlyCreatedKey, setNewlyCreatedKey] = useState<AccessKey | null>(null);
 
   // Edit permissions state
   const [editPermissionsDialogOpen, setEditPermissionsDialogOpen] = useState(false);
@@ -69,6 +70,11 @@ export function AccessControl() {
   const [expirationDate, setExpirationDate] = useState<string>('');
   const [neverExpires, setNeverExpires] = useState(true);
 
+  // Secret key dialog state
+  const [secretKeyDialogOpen, setSecretKeyDialogOpen] = useState(false);
+  const [revealedSecretKey, setRevealedSecretKey] = useState<string>('');
+  const [isLoadingSecretKey, setIsLoadingSecretKey] = useState(false);
+
   useEffect(() => {
     const fetchKeys = async () => {
       try {
@@ -120,13 +126,8 @@ export function AccessControl() {
         }
       }
 
-      setCreateDialogOpen(false);
-      setNewKeyName('');
-      setCreateSelectedBucket('');
-      setCreatePermissionRead(false);
-      setCreatePermissionWrite(false);
-      setCreatePermissionOwner(false);
-      setCreateGrantPermissions(false);
+      // Store the newly created key to show the secret key
+      setNewlyCreatedKey(newKey);
 
       // Refresh keys list
       const data = await accessApi.listKeys();
@@ -138,6 +139,17 @@ export function AccessControl() {
     }
   };
 
+  const handleCloseCreateDialog = () => {
+    setCreateDialogOpen(false);
+    setNewKeyName('');
+    setCreateSelectedBucket('');
+    setCreatePermissionRead(false);
+    setCreatePermissionWrite(false);
+    setCreatePermissionOwner(false);
+    setCreateGrantPermissions(false);
+    setNewlyCreatedKey(null);
+  };
+
   const handleOpenCreateDialog = async () => {
     setCreateDialogOpen(true);
     setNewKeyName('');
@@ -222,6 +234,23 @@ export function AccessControl() {
     }
   };
 
+  const handleRevealSecretKey = async (key: AccessKey) => {
+    setSelectedKey(key);
+    setIsLoadingSecretKey(true);
+    setSecretKeyDialogOpen(true);
+    setRevealedSecretKey('');
+
+    try {
+      const secretKey = await accessApi.getSecretKey(key.accessKeyId);
+      setRevealedSecretKey(secretKey);
+    } catch (error) {
+      console.error('Failed to fetch secret key:', error);
+      setSecretKeyDialogOpen(false);
+    } finally {
+      setIsLoadingSecretKey(false);
+    }
+  };
+
   const handleOpenEditPermissions = async (key: AccessKey) => {
     setEditingKey(key);
     setEditPermissionsDialogOpen(true);
@@ -466,6 +495,11 @@ export function AccessControl() {
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
+                              <DropdownMenuItem onClick={() => handleRevealSecretKey(key)}>
+                                <Key className="h-4 w-4" />
+                                View Secret Key
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
                               <DropdownMenuItem onClick={() => handleOpenEditPermissions(key)}>
                                 <Edit className="h-4 w-4" />
                                 Edit Permissions
@@ -525,122 +559,200 @@ export function AccessControl() {
       </div>
 
       {/* Create Key Dialog */}
-      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+      <Dialog open={createDialogOpen} onOpenChange={handleCloseCreateDialog}>
         <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Create API Key</DialogTitle>
-            <DialogDescription>
-              Create a new API key with optional bucket permissions
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">Key Name</label>
-              <Input
-                placeholder="My Application Key"
-                value={newKeyName}
-                onChange={(e) => setNewKeyName(e.target.value)}
-              />
-              <p className="text-xs text-muted-foreground">
-                A friendly name to identify this API key
-              </p>
-            </div>
-
-            {/* Optional: Grant permissions during creation */}
-            <div className="space-y-3 border-t pt-4">
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <Checkbox
-                  id="grant-permissions-on-create"
-                  checked={createGrantPermissions}
-                  onCheckedChange={(checked) => {
-                    setCreateGrantPermissions(checked as boolean);
-                    if (!checked) {
-                      setCreateSelectedBucket('');
-                      setCreatePermissionRead(false);
-                      setCreatePermissionWrite(false);
-                      setCreatePermissionOwner(false);
-                    }
-                  }}
-                />
-                <span className="text-sm font-medium">Grant bucket permissions now</span>
-              </label>
-              <p className="text-xs text-muted-foreground">
-                You can also grant permissions later from the Edit Permissions menu
-              </p>
-
-              {createGrantPermissions && (
-                <div className="space-y-4 pl-6 pt-2">
-                  {/* Bucket Selection */}
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium">Select Bucket</label>
-                    <Select
-                      value={createSelectedBucket}
-                      onChange={(value) => setCreateSelectedBucket(value)}
+          {newlyCreatedKey ? (
+            // Success state - show the secret key
+            <>
+              <DialogHeader>
+                <DialogTitle>API Key Created Successfully</DialogTitle>
+                <DialogDescription>
+                  Save your secret access key now. You won't be able to see it again.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4 py-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Key Name</label>
+                  <div className="text-sm text-muted-foreground">{newlyCreatedKey.name}</div>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Access Key ID</label>
+                  <div className="flex items-center gap-2">
+                    <code className="text-sm bg-muted px-3 py-2 rounded flex-1">
+                      {newlyCreatedKey.accessKeyId}
+                    </code>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        navigator.clipboard.writeText(newlyCreatedKey.accessKeyId);
+                        toast.success('Access Key ID copied to clipboard');
+                      }}
                     >
-                      <SelectOption value="">-- Select a bucket --</SelectOption>
-                      {createAvailableBuckets.map((bucket) => (
-                        <SelectOption key={bucket.name} value={bucket.name}>
-                          {bucket.name}
-                        </SelectOption>
-                      ))}
-                    </Select>
+                      <Copy className="h-4 w-4" />
+                    </Button>
                   </div>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Secret Access Key</label>
+                  <div className="flex items-center gap-2">
+                    <code className="text-sm bg-muted px-3 py-2 rounded flex-1 break-all">
+                      {newlyCreatedKey.secretKey}
+                    </code>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        if (newlyCreatedKey.secretKey) {
+                          navigator.clipboard.writeText(newlyCreatedKey.secretKey);
+                          toast.success('Secret Access Key copied to clipboard');
+                        }
+                      }}
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+                <div className="border rounded-lg p-4 bg-yellow-50 dark:bg-yellow-950/20 border-yellow-200 dark:border-yellow-900">
+                  <div className="flex gap-2">
+                    <ShieldX className="h-5 w-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0" />
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                        Important: Save This Key Now
+                      </p>
+                      <p className="text-xs text-yellow-700 dark:text-yellow-300">
+                        This is the only time you'll see the secret access key. Make sure to copy and save it securely.
+                        If you lose it, you'll need to create a new key.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <DialogFooter>
+                <Button onClick={handleCloseCreateDialog}>
+                  Done
+                </Button>
+              </DialogFooter>
+            </>
+          ) : (
+            // Creation form
+            <>
+              <DialogHeader>
+                <DialogTitle>Create API Key</DialogTitle>
+                <DialogDescription>
+                  Create a new API key with optional bucket permissions
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4 py-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Key Name</label>
+                  <Input
+                    placeholder="My Application Key"
+                    value={newKeyName}
+                    onChange={(e) => setNewKeyName(e.target.value)}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    A friendly name to identify this API key
+                  </p>
+                </div>
 
-                  {/* Permissions */}
-                  {createSelectedBucket && (
-                    <div className="space-y-3">
-                      <label className="text-sm font-medium">Permissions</label>
-                      <div className="space-y-2 border rounded-lg p-3">
-                        <label className="flex items-center space-x-2 cursor-pointer">
-                          <Checkbox
-                            id="create-permission-read"
-                            checked={createPermissionRead}
-                            onCheckedChange={(checked) => setCreatePermissionRead(checked as boolean)}
-                          />
-                          <div>
-                            <span className="text-sm font-medium">Read</span>
-                            <p className="text-xs text-muted-foreground">GetObject, HeadObject, ListObjects</p>
-                          </div>
-                        </label>
+                {/* Optional: Grant permissions during creation */}
+                <div className="space-y-3 border-t pt-4">
+                  <label className="flex items-center space-x-2 cursor-pointer">
+                    <Checkbox
+                      id="grant-permissions-on-create"
+                      checked={createGrantPermissions}
+                      onCheckedChange={(checked) => {
+                        setCreateGrantPermissions(checked as boolean);
+                        if (!checked) {
+                          setCreateSelectedBucket('');
+                          setCreatePermissionRead(false);
+                          setCreatePermissionWrite(false);
+                          setCreatePermissionOwner(false);
+                        }
+                      }}
+                    />
+                    <span className="text-sm font-medium">Grant bucket permissions now</span>
+                  </label>
+                  <p className="text-xs text-muted-foreground">
+                    You can also grant permissions later from the Edit Permissions menu
+                  </p>
 
-                        <label className="flex items-center space-x-2 cursor-pointer">
-                          <Checkbox
-                            id="create-permission-write"
-                            checked={createPermissionWrite}
-                            onCheckedChange={(checked) => setCreatePermissionWrite(checked as boolean)}
-                          />
-                          <div>
-                            <span className="text-sm font-medium">Write</span>
-                            <p className="text-xs text-muted-foreground">PutObject, DeleteObject</p>
-                          </div>
-                        </label>
-
-                        <label className="flex items-center space-x-2 cursor-pointer">
-                          <Checkbox
-                            id="create-permission-owner"
-                            checked={createPermissionOwner}
-                            onCheckedChange={(checked) => setCreatePermissionOwner(checked as boolean)}
-                          />
-                          <div>
-                            <span className="text-sm font-medium">Owner</span>
-                            <p className="text-xs text-muted-foreground">DeleteBucket, PutBucketPolicy</p>
-                          </div>
-                        </label>
+                  {createGrantPermissions && (
+                    <div className="space-y-4 pl-6 pt-2">
+                      {/* Bucket Selection */}
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium">Select Bucket</label>
+                        <Select
+                          value={createSelectedBucket}
+                          onChange={(value) => setCreateSelectedBucket(value)}
+                        >
+                          <SelectOption value="">-- Select a bucket --</SelectOption>
+                          {createAvailableBuckets.map((bucket) => (
+                            <SelectOption key={bucket.name} value={bucket.name}>
+                              {bucket.name}
+                            </SelectOption>
+                          ))}
+                        </Select>
                       </div>
+
+                      {/* Permissions */}
+                      {createSelectedBucket && (
+                        <div className="space-y-3">
+                          <label className="text-sm font-medium">Permissions</label>
+                          <div className="space-y-2 border rounded-lg p-3">
+                            <label className="flex items-center space-x-2 cursor-pointer">
+                              <Checkbox
+                                id="create-permission-read"
+                                checked={createPermissionRead}
+                                onCheckedChange={(checked) => setCreatePermissionRead(checked as boolean)}
+                              />
+                              <div>
+                                <span className="text-sm font-medium">Read</span>
+                                <p className="text-xs text-muted-foreground">GetObject, HeadObject, ListObjects</p>
+                              </div>
+                            </label>
+
+                            <label className="flex items-center space-x-2 cursor-pointer">
+                              <Checkbox
+                                id="create-permission-write"
+                                checked={createPermissionWrite}
+                                onCheckedChange={(checked) => setCreatePermissionWrite(checked as boolean)}
+                              />
+                              <div>
+                                <span className="text-sm font-medium">Write</span>
+                                <p className="text-xs text-muted-foreground">PutObject, DeleteObject</p>
+                              </div>
+                            </label>
+
+                            <label className="flex items-center space-x-2 cursor-pointer">
+                              <Checkbox
+                                id="create-permission-owner"
+                                checked={createPermissionOwner}
+                                onCheckedChange={(checked) => setCreatePermissionOwner(checked as boolean)}
+                              />
+                              <div>
+                                <span className="text-sm font-medium">Owner</span>
+                                <p className="text-xs text-muted-foreground">DeleteBucket, PutBucketPolicy</p>
+                              </div>
+                            </label>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
-              )}
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>
-              Cancel
-            </Button>
-            <Button onClick={handleCreateKey} disabled={!newKeyName}>
-              Create Key
-            </Button>
-          </DialogFooter>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={handleCloseCreateDialog}>
+                  Cancel
+                </Button>
+                <Button onClick={handleCreateKey} disabled={!newKeyName}>
+                  Create Key
+                </Button>
+              </DialogFooter>
+            </>
+          )}
         </DialogContent>
       </Dialog>
 
@@ -665,6 +777,92 @@ export function AccessControl() {
         </DialogContent>
       </Dialog>
 
+      {/* Secret Key Dialog */}
+      <Dialog open={secretKeyDialogOpen} onOpenChange={setSecretKeyDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Secret Access Key</DialogTitle>
+            <DialogDescription>
+              Copy your secret access key now. For security reasons, it cannot be viewed again.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Key Name</label>
+              <div className="text-sm text-muted-foreground">{selectedKey?.name}</div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Access Key ID</label>
+              <div className="flex items-center gap-2">
+                <code className="text-sm bg-muted px-3 py-2 rounded flex-1">
+                  {selectedKey?.accessKeyId}
+                </code>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    if (selectedKey?.accessKeyId) {
+                      navigator.clipboard.writeText(selectedKey.accessKeyId);
+                      toast.success('Access Key ID copied to clipboard');
+                    }
+                  }}
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Secret Access Key</label>
+              <div className="flex items-center gap-2">
+                {isLoadingSecretKey ? (
+                  <div className="flex items-center gap-2 text-muted-foreground flex-1 bg-muted px-3 py-2 rounded">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="text-sm">Loading secret key...</span>
+                  </div>
+                ) : (
+                  <>
+                    <code className="text-sm bg-muted px-3 py-2 rounded flex-1 break-all">
+                      {revealedSecretKey}
+                    </code>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        if (revealedSecretKey) {
+                          navigator.clipboard.writeText(revealedSecretKey);
+                          toast.success('Secret Access Key copied to clipboard');
+                        }
+                      }}
+                      disabled={!revealedSecretKey}
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </>
+                )}
+              </div>
+            </div>
+            <div className="border rounded-lg p-4 bg-yellow-50 dark:bg-yellow-950/20 border-yellow-200 dark:border-yellow-900">
+              <div className="flex gap-2">
+                <ShieldX className="h-5 w-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                    Security Warning
+                  </p>
+                  <p className="text-xs text-yellow-700 dark:text-yellow-300">
+                    Keep this secret key secure. Anyone with access to it can perform operations on your behalf.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setSecretKeyDialogOpen(false)}>
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* Key Settings Dialog */}
       <Dialog open={settingsDialogOpen} onOpenChange={setSettingsDialogOpen}>
         <DialogContent className="max-w-lg">

frontend/src/types/index.ts

@@ -60,6 +60,7 @@ export interface ObjectMetadata {
 export interface AccessKey {
   accessKeyId: string;
   name: string;
+  secretKey?: string;
   createdAt: string;
   lastUsed?: string;
   status: 'active' | 'inactive';

helm/garage-ui/Chart.yaml

@@ -2,8 +2,8 @@ apiVersion: v2
 name: garage-ui
 description: A Helm chart for Garage UI - Web interface for Garage S3 object storage
 type: application
-version: 0.1.0
-appVersion: "v0.0.4"
+version: 0.1.2
+appVersion: "v0.0.6"
 keywords:
   - garage
   - s3

helm/garage-ui/templates/configmap.yaml

@@ -6,4 +6,6 @@ metadata:
     {{- include "garage-ui.labels" . | nindent 4 }}
 data:
   config.yaml: |
-{{- .Values.config | toYaml | nindent 4 }}
+{{- $config := deepCopy .Values.config }}
+{{- $_ := unset $config.garage "admin_token" }}
+{{- $config | toYaml | nindent 4 }}

helm/garage-ui/templates/deployment.yaml

@@ -35,6 +35,17 @@ spec:
         - name: http
           containerPort: 8080
           protocol: TCP
+        env:
+        - name: GARAGE_UI_GARAGE_ADMIN_TOKEN
+          valueFrom:
+            secretKeyRef:
+              {{- if .Values.config.garage.existingSecret.name }}
+              name: {{ .Values.config.garage.existingSecret.name }}
+              key: {{ .Values.config.garage.existingSecret.key }}
+              {{- else }}
+              name: {{ include "garage-ui.fullname" . }}-admin-token
+              key: admin-token
+              {{- end }}
         {{- if .Values.livenessProbe.enabled }}
         livenessProbe:
           httpGet:

helm/garage-ui/templates/secret.yaml

@@ -0,0 +1,11 @@
+{{- if and (not .Values.config.garage.existingSecret.name) .Values.config.garage.admin_token }}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: {{ include "garage-ui.fullname" . }}-admin-token
+  labels:
+    {{- include "garage-ui.labels" . | nindent 4 }}
+type: Opaque
+data:
+  admin-token: {{ .Values.config.garage.admin_token | b64enc | quote }}
+{{- end }}

helm/garage-ui/values.yaml

@@ -87,8 +87,22 @@ config:
     # REQUIRED: Obtain this from your Garage server configuration
     # This token grants administrative access - keep it secure!
     # To generate: See Garage documentation for admin token setup
+    # NOTE: If existingSecret is configured, this value will be ignored
     admin_token: ""
 
+    # Use an existing Kubernetes secret for the admin token (recommended for production)
+    # When configured, this takes precedence over the admin_token value above
+    # The secret should contain a key with the admin token value
+    existingSecret:
+      # Name of the existing secret containing the admin token
+      # Leave empty to use the admin_token value above instead
+      # Example: "garage-admin-token"
+      name: ""
+
+      # Key within the secret that contains the admin token value
+      # Default: "admin-token"
+      key: "admin-token"
+
   # ========================================
   # Authentication Configuration
   # ========================================