Merge branch 'main' into breaking/v2

Co-authored-by: stonith404 <58886915+stonith404@users.noreply.github.com>

.env.example

@@ -15,4 +15,4 @@ ENCRYPTION_KEY=
 TRUST_PROXY=false
 MAXMIND_LICENSE_KEY=
 PUID=1000
-PGID=1000
+PGID=1000

.github/workflows/e2e-tests.yml

@@ -59,9 +59,9 @@ jobs:
       matrix:
         include:
           - db: sqlite
-            storage: fs
+            storage: filesystem
           - db: postgres
-            storage: fs
+            storage: filesystem
           - db: sqlite
             storage: s3
           - db: sqlite

.version

@@ -1 +1 @@
-1.15.0
+1.16.0

.vscode/launch.json

@@ -5,12 +5,14 @@
       "name": "Backend",
       "type": "go",
       "request": "launch",
-      "envFile": "${workspaceFolder}/backend/cmd/.env",
+      "envFile": "${workspaceFolder}/backend/.env",
       "env": {
         "APP_ENV": "development"
       },
       "mode": "debug",
       "program": "${workspaceFolder}/backend/cmd/main.go",
+      "buildFlags": "-tags=exclude_frontend",
+      "cwd": "${workspaceFolder}/backend",
     },
     {
       "name": "Frontend",

CHANGELOG.md

@@ -1,3 +1,44 @@
+## v1.16.0
+
+### Bug Fixes
+
+- use `quoted-printable` encoding for mails to prevent line limitation ([5cf73e9](https://github.com/pocket-id/pocket-id/commit/5cf73e9309640d097ba94d97851cf502b7b2e063) by @stonith404)
+- automatically create parent directory of Sqlite db ([cfc9e46](https://github.com/pocket-id/pocket-id/commit/cfc9e464d983b051e7ed4da1620fae61dc73cff2) by @stonith404)
+- global audit log user filter not working ([d98c0a3](https://github.com/pocket-id/pocket-id/commit/d98c0a391a747f9eea70ea01c3f984264a4a7a19) by @stonith404)
+- theme mode not correctly applied if selected manually ([a1cd325](https://github.com/pocket-id/pocket-id/commit/a1cd3251cd2b7d7aca610696ef338c5d01fdce2e) by @stonith404)
+- hide theme switcher on auth pages because of dynamic background ([5d6a7fd](https://github.com/pocket-id/pocket-id/commit/5d6a7fdb58b6b82894dcb9be3b9fe6ca3e53f5fa) by @stonith404)
+
+### Documentation
+
+- add `ENCRYPTION_KEY` to `.env.example` for breaking change preparation ([4eeb06f](https://github.com/pocket-id/pocket-id/commit/4eeb06f29d984164939bf66299075efead87ee19) by @stonith404)
+
+### Features
+
+- light/dark/system mode switcher ([#1081](https://github.com/pocket-id/pocket-id/pull/1081) by @kmendell)
+- add support for S3 storage backend ([#1080](https://github.com/pocket-id/pocket-id/pull/1080) by @stonith404)
+- add support for WEBP profile pictures ([#1090](https://github.com/pocket-id/pocket-id/pull/1090) by @stonith404)
+- add database storage backend ([#1091](https://github.com/pocket-id/pocket-id/pull/1091) by @ItalyPaleAle)
+- adding/removing passkeys creates an entry in audit logs ([#1099](https://github.com/pocket-id/pocket-id/pull/1099) by @ItalyPaleAle)
+- add option to disable S3 integrity check ([a3c9687](https://github.com/pocket-id/pocket-id/commit/a3c968758a17e95b2e55ae179d6601d8ec2cf052) by @stonith404)
+- add `Cache-Control: private, no-store` to all API routes per default ([#1126](https://github.com/pocket-id/pocket-id/pull/1126) by @stonith404)
+
+### Other
+
+- update pnpm to 10.20 ([#1082](https://github.com/pocket-id/pocket-id/pull/1082) by @kmendell)
+- run checks on PR to `breaking/**` branches ([ab9c0f9](https://github.com/pocket-id/pocket-id/commit/ab9c0f9ac092725c70ec3a963f57bc739f425d4f) by @stonith404)
+- use constants for AppEnv values ([#1098](https://github.com/pocket-id/pocket-id/pull/1098) by @ItalyPaleAle)
+- bump golang.org/x/crypto from 0.43.0 to 0.45.0 in /backend in the go_modules group across 1 directory ([#1107](https://github.com/pocket-id/pocket-id/pull/1107) by @dependabot[bot])
+- add Finish files ([ca888b3](https://github.com/pocket-id/pocket-id/commit/ca888b3dd221a209df5e7beb749156f7ea21e1c0) by @stonith404)
+- upgrade dependencies ([4bde271](https://github.com/pocket-id/pocket-id/commit/4bde271b4715f59bd2ed1f7c18a867daf0f26b8b) by @stonith404)
+- fix Dutch validation message ([f523f39](https://github.com/pocket-id/pocket-id/commit/f523f39483a06256892d17dc02528ea009c87a9f) by @stonith404)
+- fix package vulnerabilities ([3d46bad](https://github.com/pocket-id/pocket-id/commit/3d46badb3cecc1ee8eb8bfc9b377108be32d4ffc) by @stonith404)
+- update vscode launch.json ([#1117](https://github.com/pocket-id/pocket-id/pull/1117) by @mnestor)
+- rename file backend value `fs` to `filesystem` ([8d30346](https://github.com/pocket-id/pocket-id/commit/8d30346f642b483653f7a3dec006cb0273927afb) by @stonith404)
+- fix wrong storage value ([b2c718d](https://github.com/pocket-id/pocket-id/commit/b2c718d13d12b6c152e19974d3490c2ed7f5d51d) by @stonith404)
+- run formatter ([14c7471](https://github.com/pocket-id/pocket-id/commit/14c7471b5272cdaf42751701d842348d0d60cd0e) by @stonith404)
+
+**Full Changelog**: https://github.com/pocket-id/pocket-id/compare/v1.15.0...v1.16.0
+
 ## v1.15.0
 
 ### Bug Fixes

backend/internal/bootstrap/db_bootstrap.go

@@ -59,6 +59,12 @@ func ConnectDatabase() (db *gorm.DB, err error) {
 			return nil, err
 		}
 
+		if !isMemoryDB {
+			if err := ensureSqliteDatabaseDir(dbPath); err != nil {
+				return nil, err
+			}
+		}
+
 		// Before we connect, also make sure that there's a temporary folder for SQLite to write its data
 		err = ensureSqliteTempDir(filepath.Dir(dbPath))
 		if err != nil {
@@ -292,6 +298,27 @@ func isSqliteInMemory(connString string) bool {
 	return len(qs["mode"]) > 0 && qs["mode"][0] == "memory"
 }
 
+// ensureSqliteDatabaseDir creates the parent directory for the SQLite database file if it doesn't exist yet
+func ensureSqliteDatabaseDir(dbPath string) error {
+	dir := filepath.Dir(dbPath)
+
+	info, err := os.Stat(dir)
+	switch {
+	case err == nil:
+		if !info.IsDir() {
+			return fmt.Errorf("SQLite database directory '%s' is not a directory", dir)
+		}
+		return nil
+	case os.IsNotExist(err):
+		if err := os.MkdirAll(dir, 0700); err != nil {
+			return fmt.Errorf("failed to create SQLite database directory '%s': %w", dir, err)
+		}
+		return nil
+	default:
+		return fmt.Errorf("failed to check SQLite database directory '%s': %w", dir, err)
+	}
+}
+
 // ensureSqliteTempDir ensures that SQLite has a directory where it can write temporary files if needed
 // The default directory may not be writable when using a container with a read-only root file system
 // See: https://www.sqlite.org/tempfiles.html

backend/internal/bootstrap/db_bootstrap_test.go

@@ -2,6 +2,8 @@ package bootstrap
 
 import (
 	"net/url"
+	"os"
+	"path/filepath"
 	"testing"
 
 	"github.com/stretchr/testify/assert"
@@ -84,6 +86,29 @@ func TestIsSqliteInMemory(t *testing.T) {
 	}
 }
 
+func TestEnsureSqliteDatabaseDir(t *testing.T) {
+	t.Run("creates missing directory", func(t *testing.T) {
+		tempDir := t.TempDir()
+		dbPath := filepath.Join(tempDir, "nested", "pocket-id.db")
+
+		err := ensureSqliteDatabaseDir(dbPath)
+		require.NoError(t, err)
+
+		info, err := os.Stat(filepath.Dir(dbPath))
+		require.NoError(t, err)
+		assert.True(t, info.IsDir())
+	})
+
+	t.Run("fails when parent is file", func(t *testing.T) {
+		tempDir := t.TempDir()
+		filePath := filepath.Join(tempDir, "file.txt")
+		require.NoError(t, os.WriteFile(filePath, []byte("test"), 0o600))
+
+		err := ensureSqliteDatabaseDir(filepath.Join(filePath, "data.db"))
+		require.Error(t, err)
+	})
+}
+
 func TestConvertSqlitePragmaArgs(t *testing.T) {
 	tests := []struct {
 		name     string

backend/internal/bootstrap/router_bootstrap.go

@@ -54,6 +54,8 @@ func initRouter(db *gorm.DB, svc *services) (utils.Service, error) {
 	rateLimitMiddleware := middleware.NewRateLimitMiddleware().Add(rate.Every(time.Second), 60)
 
 	// Setup global middleware
+	r.Use(middleware.HeadMiddleware())
+	r.Use(middleware.NewCacheControlMiddleware().Add())
 	r.Use(middleware.NewCorsMiddleware().Add())
 	r.Use(middleware.NewCspMiddleware().Add())
 	r.Use(middleware.NewErrorHandlerMiddleware().Add())
@@ -101,7 +103,17 @@ func initRouter(db *gorm.DB, svc *services) (utils.Service, error) {
 	srv := &http.Server{
 		MaxHeaderBytes:    1 << 20,
 		ReadHeaderTimeout: 10 * time.Second,
-		Handler:           r,
+		Handler: http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			// HEAD requests don't get matched by Gin routes, so we convert them to GET
+			// middleware.HeadMiddleware will convert them back to HEAD later
+			if req.Method == http.MethodHead {
+				req.Method = http.MethodGet
+				ctx := context.WithValue(req.Context(), middleware.IsHeadRequestCtxKey{}, true)
+				req = req.WithContext(ctx)
+			}
+
+			r.ServeHTTP(w, req)
+		}),
 	}
 
 	// Set up the listener

backend/internal/common/env_config.go

@@ -38,25 +38,25 @@ const (
 )
 
 type EnvConfigSchema struct {
-	AppEnv             AppEnv     `env:"APP_ENV" options:"toLower"`
-	LogLevel           string     `env:"LOG_LEVEL" options:"toLower"`
-	LogJSON            bool       `env:"LOG_JSON"`
-	AppURL             string     `env:"APP_URL" options:"toLower,trimTrailingSlash"`
-	DbProvider         DbProvider `env:"DB_PROVIDER" options:"toLower"`
-	DbConnectionString string     `env:"DB_CONNECTION_STRING" options:"file"`
-	EncryptionKey      []byte     `env:"ENCRYPTION_KEY" options:"file"`
-	Port               string     `env:"PORT"`
-	Host               string     `env:"HOST" options:"toLower"`
-	UnixSocket         string     `env:"UNIX_SOCKET"`
-	UnixSocketMode     string     `env:"UNIX_SOCKET_MODE"`
-	LocalIPv6Ranges    string     `env:"LOCAL_IPV6_RANGES"`
-	UiConfigDisabled   bool       `env:"UI_CONFIG_DISABLED"`
-	MetricsEnabled     bool       `env:"METRICS_ENABLED"`
-	TracingEnabled     bool       `env:"TRACING_ENABLED"`
-	TrustProxy         bool       `env:"TRUST_PROXY"`
-	AnalyticsDisabled  bool       `env:"ANALYTICS_DISABLED"`
-	AllowDowngrade     bool       `env:"ALLOW_DOWNGRADE"`
-	InternalAppURL     string     `env:"INTERNAL_APP_URL"`
+	AppEnv             AppEnv `env:"APP_ENV" options:"toLower"`
+	LogLevel           string `env:"LOG_LEVEL" options:"toLower"`
+	LogJSON            bool   `env:"LOG_JSON"`
+	AppURL             string `env:"APP_URL" options:"toLower,trimTrailingSlash"`
+	DbProvider         DbProvider
+	DbConnectionString string `env:"DB_CONNECTION_STRING" options:"file"`
+	EncryptionKey      []byte `env:"ENCRYPTION_KEY" options:"file"`
+	Port               string `env:"PORT"`
+	Host               string `env:"HOST" options:"toLower"`
+	UnixSocket         string `env:"UNIX_SOCKET"`
+	UnixSocketMode     string `env:"UNIX_SOCKET_MODE"`
+	LocalIPv6Ranges    string `env:"LOCAL_IPV6_RANGES"`
+	UiConfigDisabled   bool   `env:"UI_CONFIG_DISABLED"`
+	MetricsEnabled     bool   `env:"METRICS_ENABLED"`
+	TracingEnabled     bool   `env:"TRACING_ENABLED"`
+	TrustProxy         bool   `env:"TRUST_PROXY"`
+	AnalyticsDisabled  bool   `env:"ANALYTICS_DISABLED"`
+	AllowDowngrade     bool   `env:"ALLOW_DOWNGRADE"`
+	InternalAppURL     string `env:"INTERNAL_APP_URL"`
 
 	MaxMindLicenseKey string `env:"MAXMIND_LICENSE_KEY" options:"file"`
 	GeoLiteDBPath     string `env:"GEOLITE_DB_PATH"`
@@ -89,7 +89,7 @@ func defaultConfig() EnvConfigSchema {
 		AppEnv:        AppEnvProduction,
 		LogLevel:      "info",
 		DbProvider:    "sqlite",
-		FileBackend:   "fs",
+		FileBackend:   "filesystem",
 		AppURL:        AppUrl,
 		Port:          "1411",
 		Host:          "0.0.0.0",
@@ -131,17 +131,14 @@ func ValidateEnvConfig(config *EnvConfigSchema) error {
 		return errors.New("ENCRYPTION_KEY must be at least 16 bytes long")
 	}
 
-	switch config.DbProvider {
-	case DbProviderSqlite:
-		if config.DbConnectionString == "" {
-			config.DbConnectionString = defaultSqliteConnString
-		}
-	case DbProviderPostgres:
-		if config.DbConnectionString == "" {
-			return errors.New("missing required env var 'DB_CONNECTION_STRING' for Postgres database")
-		}
+	switch {
+	case config.DbConnectionString == "":
+		config.DbProvider = DbProviderSqlite
+		config.DbConnectionString = defaultSqliteConnString
+	case strings.HasPrefix(config.DbConnectionString, "postgres://") || strings.HasPrefix(config.DbConnectionString, "postgresql://"):
+		config.DbProvider = DbProviderPostgres
 	default:
-		return errors.New("invalid DB_PROVIDER value. Must be 'sqlite' or 'postgres'")
+		config.DbProvider = DbProviderSqlite
 	}
 
 	parsedAppUrl, err := url.Parse(config.AppURL)
@@ -167,12 +164,12 @@ func ValidateEnvConfig(config *EnvConfigSchema) error {
 
 	switch config.FileBackend {
 	case "s3", "database":
-	case "", "fs":
+	case "", "filesystem":
 		if config.UploadPath == "" {
 			config.UploadPath = defaultFsUploadPath
 		}
 	default:
-		return errors.New("invalid FILE_BACKEND value. Must be 'fs', 'database', or 's3'")
+		return errors.New("invalid FILE_BACKEND value. Must be 'filesystem', 'database', or 's3'")
 	}
 
 	// Validate LOCAL_IPV6_RANGES

backend/internal/common/env_config_test.go

@@ -31,7 +31,6 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should parse valid SQLite config correctly", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "SQLITE") // should be lowercased automatically
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("APP_URL", "HTTP://LOCALHOST:3000")
 
@@ -43,7 +42,6 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should parse valid Postgres config correctly", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "POSTGRES")
 		t.Setenv("DB_CONNECTION_STRING", "postgres://user:pass@localhost/db")
 		t.Setenv("APP_URL", "https://example.com")
 
@@ -52,20 +50,8 @@ func TestParseEnvConfig(t *testing.T) {
 		assert.Equal(t, DbProviderPostgres, EnvConfig.DbProvider)
 	})
 
-	t.Run("should fail with invalid DB_PROVIDER", func(t *testing.T) {
-		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "invalid")
-		t.Setenv("DB_CONNECTION_STRING", "test")
-		t.Setenv("APP_URL", "http://localhost:3000")
-
-		err := parseAndValidateEnvConfig(t)
-		require.Error(t, err)
-		assert.ErrorContains(t, err, "invalid DB_PROVIDER value")
-	})
-
 	t.Run("should fail when ENCRYPTION_KEY is too short", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("APP_URL", "http://localhost:3000")
 		t.Setenv("ENCRYPTION_KEY", "short")
@@ -77,7 +63,6 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should set default SQLite connection string when DB_CONNECTION_STRING is empty", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("APP_URL", "http://localhost:3000")
 
 		err := parseAndValidateEnvConfig(t)
@@ -85,19 +70,8 @@ func TestParseEnvConfig(t *testing.T) {
 		assert.Equal(t, defaultSqliteConnString, EnvConfig.DbConnectionString)
 	})
 
-	t.Run("should fail when Postgres DB_CONNECTION_STRING is missing", func(t *testing.T) {
-		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "postgres")
-		t.Setenv("APP_URL", "http://localhost:3000")
-
-		err := parseAndValidateEnvConfig(t)
-		require.Error(t, err)
-		assert.ErrorContains(t, err, "missing required env var 'DB_CONNECTION_STRING' for Postgres")
-	})
-
 	t.Run("should fail with invalid APP_URL", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("APP_URL", "€://not-a-valid-url")
 
@@ -108,7 +82,6 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should fail when APP_URL contains path", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("APP_URL", "http://localhost:3000/path")
 
@@ -119,7 +92,6 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should fail with invalid INTERNAL_APP_URL", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("INTERNAL_APP_URL", "€://not-a-valid-url")
 
@@ -130,7 +102,6 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should fail when INTERNAL_APP_URL contains path", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("INTERNAL_APP_URL", "http://localhost:3000/path")
 
@@ -141,7 +112,6 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should parse boolean environment variables correctly", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("APP_URL", "http://localhost:3000")
 		t.Setenv("UI_CONFIG_DISABLED", "true")
@@ -161,7 +131,6 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should parse string environment variables correctly", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "postgres")
 		t.Setenv("DB_CONNECTION_STRING", "postgres://test")
 		t.Setenv("APP_URL", "https://prod.example.com")
 		t.Setenv("APP_ENV", "PRODUCTION")
@@ -182,21 +151,19 @@ func TestParseEnvConfig(t *testing.T) {
 
 	t.Run("should normalize file backend and default upload path", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("APP_URL", "http://localhost:3000")
-		t.Setenv("FILE_BACKEND", "FS")
+		t.Setenv("FILE_BACKEND", "FILESYSTEM")
 		t.Setenv("UPLOAD_PATH", "")
 
 		err := parseAndValidateEnvConfig(t)
 		require.NoError(t, err)
-		assert.Equal(t, "fs", EnvConfig.FileBackend)
+		assert.Equal(t, "filesystem", EnvConfig.FileBackend)
 		assert.Equal(t, defaultFsUploadPath, EnvConfig.UploadPath)
 	})
 
 	t.Run("should fail with invalid FILE_BACKEND value", func(t *testing.T) {
 		EnvConfig = defaultConfig()
-		t.Setenv("DB_PROVIDER", "sqlite")
 		t.Setenv("DB_CONNECTION_STRING", "file:test.db")
 		t.Setenv("APP_URL", "http://localhost:3000")
 		t.Setenv("FILE_BACKEND", "invalid")

backend/internal/middleware/cache_control.go

@@ -0,0 +1,26 @@
+package middleware
+
+import "github.com/gin-gonic/gin"
+
+// CacheControlMiddleware sets a safe default Cache-Control header on responses
+// that do not already specify one. This prevents proxies from caching
+// authenticated responses that might contain private data.
+type CacheControlMiddleware struct {
+	headerValue string
+}
+
+func NewCacheControlMiddleware() *CacheControlMiddleware {
+	return &CacheControlMiddleware{
+		headerValue: "private, no-store",
+	}
+}
+
+func (m *CacheControlMiddleware) Add() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		if c.Writer.Header().Get("Cache-Control") == "" {
+			c.Header("Cache-Control", m.headerValue)
+		}
+
+		c.Next()
+	}
+}

backend/internal/middleware/cache_control_test.go

@@ -0,0 +1,45 @@
+package middleware
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"github.com/gin-gonic/gin"
+	"github.com/stretchr/testify/require"
+)
+
+func TestCacheControlMiddlewareSetsDefault(t *testing.T) {
+	gin.SetMode(gin.TestMode)
+	router := gin.New()
+	router.Use(NewCacheControlMiddleware().Add())
+
+	router.GET("/test", func(c *gin.Context) {
+		c.Status(http.StatusOK)
+	})
+
+	req := httptest.NewRequest(http.MethodGet, "/test", http.NoBody)
+	w := httptest.NewRecorder()
+
+	router.ServeHTTP(w, req)
+
+	require.Equal(t, "private, no-store", w.Header().Get("Cache-Control"))
+}
+
+func TestCacheControlMiddlewarePreservesExistingHeader(t *testing.T) {
+	gin.SetMode(gin.TestMode)
+	router := gin.New()
+	router.Use(NewCacheControlMiddleware().Add())
+
+	router.GET("/custom", func(c *gin.Context) {
+		c.Header("Cache-Control", "public, max-age=60")
+		c.Status(http.StatusOK)
+	})
+
+	req := httptest.NewRequest(http.MethodGet, "/custom", http.NoBody)
+	w := httptest.NewRecorder()
+
+	router.ServeHTTP(w, req)
+
+	require.Equal(t, "public, max-age=60", w.Header().Get("Cache-Control"))
+}

backend/internal/middleware/head_middleware.go

@@ -0,0 +1,40 @@
+package middleware
+
+import (
+	"net/http"
+	"strconv"
+
+	"github.com/gin-gonic/gin"
+)
+
+type IsHeadRequestCtxKey struct{}
+
+type headWriter struct {
+	gin.ResponseWriter
+	size int
+}
+
+func (w *headWriter) Write(b []byte) (int, error) {
+	w.size += len(b)
+	return w.size, nil
+}
+
+func HeadMiddleware() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		// Only process if it's a HEAD request
+		if c.Request.Context().Value(IsHeadRequestCtxKey{}) != true {
+			c.Next()
+			return
+		}
+
+		// Replace the ResponseWriter with our headWriter to swallow the body
+		hw := &headWriter{ResponseWriter: c.Writer}
+		c.Writer = hw
+
+		c.Next()
+
+		c.Writer.Header().Set("Content-Length", strconv.Itoa(hw.size))
+		c.Request.Method = http.MethodHead
+
+	}
+}

backend/internal/storage/storage.go

@@ -8,7 +8,7 @@ import (
 )
 
 var (
-	TypeFileSystem = "fs"
+	TypeFileSystem = "filesystem"
 	TypeS3         = "s3"
 )
 

frontend/.prettierrc

@@ -3,6 +3,6 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

frontend/messages/cs.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Profilový obrázek",
 	"profile_picture_is_managed_by_ldap_server": "Profilový obrázek je spravován LDAP serverem a nelze jej zde změnit.",
 	"click_profile_picture_to_upload_custom": "Klikněte na profilový obrázek pro nahrání vlastního ze souborů.",
-	"image_should_be_in_format": "Obrázek by měl být ve formátu PNG nebo JPEG.",
+	"image_should_be_in_format": "Obrázek by měl být ve formátu PNG, JPEG nebo WEBP.",
 	"items_per_page": "Položek na stránku",
 	"no_items_found": "Nenalezeny žádné položky",
 	"select_items": "Vyberte položky...",

frontend/messages/da.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Profilbillede",
 	"profile_picture_is_managed_by_ldap_server": "Profilbilledet administreres af LDAP-serveren og kan ikke ændres her.",
 	"click_profile_picture_to_upload_custom": "Klik på profilbilledet for at uploade et brugerdefineret billede fra dine filer.",
-	"image_should_be_in_format": "Billedet skal være i PNG eller JPEG-format.",
+	"image_should_be_in_format": "Billedet skal være i PNG, JPEG eller WEBP-format.",
 	"items_per_page": "Emner pr. side",
 	"no_items_found": "Ingen emner fundet",
 	"select_items": "Vælg emner...",

frontend/messages/de.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Profilbild",
 	"profile_picture_is_managed_by_ldap_server": "Das Profilbild wird vom LDAP-Server verwaltet und kann hier nicht geändert werden.",
 	"click_profile_picture_to_upload_custom": "Klicke auf das Profilbild, um ein benutzerdefiniertes Bild aus deinen Dateien hochzuladen.",
-	"image_should_be_in_format": "Das Bild sollte im PNG- oder JPEG-Format vorliegen.",
+	"image_should_be_in_format": "Das Bild sollte im PNG-, JPEG- oder WEBP-Format vorliegen.",
 	"items_per_page": "Einträge pro Seite",
 	"no_items_found": "Keine Einträge gefunden",
 	"select_items": "Elemente auswählen...",
@@ -443,7 +443,7 @@
 	"client_launch_url_description": "Die URL, die geöffnet wird, wenn jemand die App von der Seite „Meine Apps“ startet.",
 	"client_name_description": "Der Name des Clients, der in der Pocket ID-Benutzeroberfläche angezeigt wird.",
 	"revoke_access": "Zugriff widerrufen",
-	"revoke_access_description": "Zugriff widerrufen <b>{clientName}</b>. <b>{clientName}</b> kann nicht mehr auf deine Kontoinfos zugreifen.",
+	"revoke_access_description": "Zugriff auf <b>{clientName}</b> widerrufen. <b>{clientName}</b> kann nicht mehr auf deine Kontoinformationen zugreifen.",
 	"revoke_access_successful": "Der Zugriff auf „ {clientName} “ wurde erfolgreich gesperrt.",
 	"last_signed_in_ago": "Zuletzt angemeldet vor {time} Stunden",
 	"invalid_client_id": "Die Kunden-ID darf nur Buchstaben, Zahlen, Unterstriche und Bindestriche haben.",

frontend/messages/en.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Profile Picture",
 	"profile_picture_is_managed_by_ldap_server": "The profile picture is managed by the LDAP server and cannot be changed here.",
 	"click_profile_picture_to_upload_custom": "Click on the profile picture to upload a custom one from your files.",
-	"image_should_be_in_format": "The image should be in PNG or JPEG format.",
+	"image_should_be_in_format": "The image should be in PNG, JPEG or WEBP format.",
 	"items_per_page": "Items per page",
 	"no_items_found": "No items found",
 	"select_items": "Select items...",
@@ -469,6 +469,5 @@
 	"default_profile_picture": "Default Profile Picture",
 	"light": "Light",
 	"dark": "Dark",
-	"system": "System",
-	"scopes": "Scopes"
+	"system": "System"
 }

frontend/messages/es.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Foto de perfil",
 	"profile_picture_is_managed_by_ldap_server": "La imagen de perfil es administrada por el servidor LDAP y no puede ser cambiada aquí.",
 	"click_profile_picture_to_upload_custom": "Haga clic en la imagen de perfil para subir una personalizada desde sus archivos.",
-	"image_should_be_in_format": "La imagen debe ser en formato PNG o JPEG.",
+	"image_should_be_in_format": "La imagen debe ser en formato PNG, JPEG o WEBP.",
 	"items_per_page": "Elementos por página",
 	"no_items_found": "No se encontraron elementos",
 	"select_items": "Seleccionar elementos...",

frontend/messages/fi.json

@@ -1,473 +1,473 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
-	"my_account": "My Account",
-	"logout": "Logout",
-	"confirm": "Confirm",
-	"docs": "Docs",
-	"key": "Key",
-	"value": "Value",
-	"remove_custom_claim": "Remove custom claim",
-	"add_custom_claim": "Add custom claim",
-	"add_another": "Add another",
-	"select_a_date": "Select a date",
-	"select_file": "Select File",
-	"profile_picture": "Profile Picture",
-	"profile_picture_is_managed_by_ldap_server": "The profile picture is managed by the LDAP server and cannot be changed here.",
-	"click_profile_picture_to_upload_custom": "Click on the profile picture to upload a custom one from your files.",
-	"image_should_be_in_format": "The image should be in PNG or JPEG format.",
-	"items_per_page": "Items per page",
-	"no_items_found": "No items found",
-	"select_items": "Select items...",
-	"search": "Search...",
-	"expand_card": "Expand card",
-	"copied": "Copied",
-	"click_to_copy": "Click to copy",
-	"something_went_wrong": "Something went wrong",
-	"go_back_to_home": "Go back to home",
-	"alternative_sign_in_methods": "Alternative Sign In Methods",
-	"login_background": "Login background",
+	"my_account": "Oma tIli",
+	"logout": "Kirjaudu ulos",
+	"confirm": "Vahvista",
+	"docs": "Ohjeet",
+	"key": "Avain",
+	"value": "Arvo",
+	"remove_custom_claim": "Poista mukautettu vaatimus",
+	"add_custom_claim": "Lisää mukautettu vaatimus",
+	"add_another": "Lisää toinen",
+	"select_a_date": "Valitse päivämäärä",
+	"select_file": "Valitse tiedosto",
+	"profile_picture": "Profiilikuva",
+	"profile_picture_is_managed_by_ldap_server": "Profiilikuva hallitaan LDAP-palvelimella, eikä sitä voi muuttaa tässä.",
+	"click_profile_picture_to_upload_custom": "Napsauta profiilikuvaa ladataksesi kuvan tiedostoistasi.",
+	"image_should_be_in_format": "Kuvan tulee olla PNG-, JPEG- tai WEBP-muodossa.",
+	"items_per_page": "Kohteita per sivu",
+	"no_items_found": "Kohteita ei löytynyt",
+	"select_items": "Valitse kohteet...",
+	"search": "Hae...",
+	"expand_card": "Laajenna kortti",
+	"copied": "Kopioitu",
+	"click_to_copy": "Klikkaa kopioidaksesi",
+	"something_went_wrong": "Jokin meni pieleen",
+	"go_back_to_home": "Siirry takaisin kotiin",
+	"alternative_sign_in_methods": "Vaihtoehtoiset kirjautumistavat",
+	"login_background": "Kirjautumisen tausta",
 	"logo": "Logo",
-	"login_code": "Login Code",
-	"create_a_login_code_to_sign_in_without_a_passkey_once": "Create a login code that the user can use to sign in without a passkey once.",
-	"one_hour": "1 hour",
-	"twelve_hours": "12 hours",
-	"one_day": "1 day",
-	"one_week": "1 week",
-	"one_month": "1 month",
-	"expiration": "Expiration",
-	"generate_code": "Generate Code",
-	"name": "Name",
-	"browser_unsupported": "Browser unsupported",
-	"this_browser_does_not_support_passkeys": "This browser doesn't support passkeys. Please use an alternative sign in method.",
-	"an_unknown_error_occurred": "An unknown error occurred",
-	"authentication_process_was_aborted": "The authentication process was aborted",
-	"error_occurred_with_authenticator": "An error occurred with the authenticator",
-	"authenticator_does_not_support_discoverable_credentials": "The authenticator does not support discoverable credentials",
-	"authenticator_does_not_support_resident_keys": "The authenticator does not support resident keys",
-	"passkey_was_previously_registered": "This passkey was previously registered",
-	"authenticator_does_not_support_any_of_the_requested_algorithms": "The authenticator does not support any of the requested algorithms",
-	"authenticator_timed_out": "The authenticator timed out",
-	"critical_error_occurred_contact_administrator": "A critical error occurred. Please contact your administrator.",
-	"sign_in_to": "Sign in to {name}",
-	"client_not_found": "Client not found",
-	"client_wants_to_access_the_following_information": "<b>{client}</b> wants to access the following information:",
-	"do_you_want_to_sign_in_to_client_with_your_app_name_account": "Do you want to sign in to <b>{client}</b> with your {appName} account?",
-	"email": "Email",
-	"view_your_email_address": "View your email address",
-	"profile": "Profile",
-	"view_your_profile_information": "View your profile information",
-	"groups": "Groups",
-	"view_the_groups_you_are_a_member_of": "View the groups you are a member of",
-	"cancel": "Cancel",
-	"sign_in": "Sign in",
-	"try_again": "Try again",
-	"client_logo": "Client Logo",
-	"sign_out": "Sign out",
-	"do_you_want_to_sign_out_of_pocketid_with_the_account": "Do you want to sign out of {appName} with the account <b>{username}</b>?",
-	"sign_in_to_appname": "Sign in to {appName}",
-	"please_try_to_sign_in_again": "Please try to sign in again.",
-	"authenticate_with_passkey_to_access_account": "Authenticate yourself with your passkey to access your account.",
-	"authenticate": "Authenticate",
-	"please_try_again": "Please try again.",
-	"continue": "Continue",
-	"alternative_sign_in": "Alternative Sign In",
-	"if_you_do_not_have_access_to_your_passkey_you_can_sign_in_using_one_of_the_following_methods": "If you don't have access to your passkey, you can sign in using one of the following methods.",
-	"use_your_passkey_instead": "Use your passkey instead?",
-	"email_login": "Email Login",
-	"enter_a_login_code_to_sign_in": "Enter a login code to sign in.",
-	"sign_in_with_login_code": "Sign in with login code",
-	"request_a_login_code_via_email": "Request a login code via email.",
-	"go_back": "Go back",
-	"an_email_has_been_sent_to_the_provided_email_if_it_exists_in_the_system": "An email has been sent to the provided email, if it exists in the system.",
-	"enter_code": "Enter code",
-	"enter_your_email_address_to_receive_an_email_with_a_login_code": "Enter your email address to receive an email with a login code.",
-	"your_email": "Your email",
-	"submit": "Submit",
-	"enter_the_code_you_received_to_sign_in": "Enter the code you received to sign in.",
-	"code": "Code",
-	"invalid_redirect_url": "Invalid redirect URL",
-	"audit_log": "Audit Log",
-	"users": "Users",
-	"user_groups": "User Groups",
-	"oidc_clients": "OIDC Clients",
-	"api_keys": "API Keys",
-	"application_configuration": "Application Configuration",
-	"settings": "Settings",
-	"update_pocket_id": "Update Pocket ID",
-	"powered_by": "Powered by",
-	"see_your_account_activities_from_the_last_3_months": "See your account activities from the last 3 months.",
-	"time": "Time",
-	"event": "Event",
-	"approximate_location": "Approximate Location",
-	"ip_address": "IP Address",
-	"device": "Device",
-	"client": "Client",
-	"unknown": "Unknown",
-	"account_details_updated_successfully": "Account details updated successfully",
-	"profile_picture_updated_successfully": "Profile picture updated successfully. It may take a few minutes to update.",
-	"account_settings": "Account Settings",
-	"passkey_missing": "Passkey missing",
-	"please_provide_a_passkey_to_prevent_losing_access_to_your_account": "Please add a passkey to prevent losing access to your account.",
-	"single_passkey_configured": "Single Passkey Configured",
-	"it_is_recommended_to_add_more_than_one_passkey": "It is recommended to add more than one passkey to avoid losing access to your account.",
-	"account_details": "Account Details",
-	"passkeys": "Passkeys",
-	"manage_your_passkeys_that_you_can_use_to_authenticate_yourself": "Manage your passkeys that you can use to authenticate yourself.",
-	"add_passkey": "Add Passkey",
-	"create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey": "Create a one-time login code to sign in from a different device without a passkey.",
-	"create": "Create",
-	"first_name": "First name",
-	"last_name": "Last name",
-	"username": "Username",
-	"save": "Save",
-	"username_can_only_contain": "Username can only contain lowercase letters, numbers, underscores, dots, hyphens, and '@' symbols",
-	"username_must_start_with": "Username must start with an alphanumeric character",
-	"username_must_end_with": "Username must end with an alphanumeric character",
-	"sign_in_using_the_following_code_the_code_will_expire_in_minutes": "Sign in using the following code. The code will expire in 15 minutes.",
-	"or_visit": "or visit",
-	"added_on": "Added on",
-	"rename": "Rename",
-	"delete": "Delete",
-	"are_you_sure_you_want_to_delete_this_passkey": "Are you sure you want to delete this passkey?",
-	"passkey_deleted_successfully": "Passkey deleted successfully",
-	"delete_passkey_name": "Delete {passkeyName}",
-	"passkey_name_updated_successfully": "Passkey name updated successfully",
-	"name_passkey": "Name Passkey",
-	"name_your_passkey_to_easily_identify_it_later": "Name your passkey to easily identify it later.",
-	"create_api_key": "Create API Key",
-	"add_a_new_api_key_for_programmatic_access": "Add a new API key for programmatic access to the <link href='https://pocket-id.org/docs/api'>Pocket ID API</link>.",
-	"add_api_key": "Add API Key",
-	"manage_api_keys": "Manage API Keys",
-	"api_key_created": "API Key Created",
-	"for_security_reasons_this_key_will_only_be_shown_once": "For security reasons, this key will only be shown once. Please store it securely.",
-	"description": "Description",
-	"api_key": "API Key",
-	"close": "Close",
-	"name_to_identify_this_api_key": "Name to identify this API key.",
-	"expires_at": "Expires At",
-	"when_this_api_key_will_expire": "When this API key will expire.",
-	"optional_description_to_help_identify_this_keys_purpose": "Optional description to help identify this key's purpose.",
-	"expiration_date_must_be_in_the_future": "Expiration date must be in the future",
-	"revoke_api_key": "Revoke API Key",
-	"never": "Never",
-	"revoke": "Revoke",
-	"api_key_revoked_successfully": "API key revoked successfully",
-	"are_you_sure_you_want_to_revoke_the_api_key_apikeyname": "Are you sure you want to revoke the API key \"{apiKeyName}\"? This will break any integrations using this key.",
-	"last_used": "Last Used",
-	"actions": "Actions",
-	"images_updated_successfully": "Images updated successfully. It may take a few minutes to update.",
-	"general": "General",
-	"configure_smtp_to_send_emails": "Enable email notifications to alert users when a login is detected from a new device or location.",
+	"login_code": "Kirjautumiskoodi",
+	"create_a_login_code_to_sign_in_without_a_passkey_once": "Luo kirjautumiskoodi, jota käyttäjä voi käyttää kirjautuakseen sisään ilman pääsyavainta kerran.",
+	"one_hour": "1 tunti",
+	"twelve_hours": "12 tuntia",
+	"one_day": "1 päivä",
+	"one_week": "1 viikko",
+	"one_month": "1 kuukausi",
+	"expiration": "Vanhentuminen",
+	"generate_code": "Luo koodi",
+	"name": "Nimi",
+	"browser_unsupported": "Selainta ei tueta",
+	"this_browser_does_not_support_passkeys": "Tämä selain ei tue pääsyavaimia. Käytä vaihtoehtoista kirjautumistapaa.",
+	"an_unknown_error_occurred": "Tapahtui tuntematon virhe",
+	"authentication_process_was_aborted": "Todentamisprosessi keskeytettiin",
+	"error_occurred_with_authenticator": "Todentajan kanssa tapahtui virhe",
+	"authenticator_does_not_support_discoverable_credentials": "Todentaja ei tue löydettäviä käyttäjätietoja",
+	"authenticator_does_not_support_resident_keys": "Todentaja ei tue laiteavaimia",
+	"passkey_was_previously_registered": "Tämä pääsyavain on aiemmin rekisteröity",
+	"authenticator_does_not_support_any_of_the_requested_algorithms": "Todentaja ei tue mitään pyydetyistä algoritmeista",
+	"authenticator_timed_out": "Todentaja aikakatkaistiin",
+	"critical_error_occurred_contact_administrator": "Kriittinen virhe tapahtui. Ota yhteyttä järjestelmänvalvojaan.",
+	"sign_in_to": "Kirjaudu palveluun {name}",
+	"client_not_found": "Asiakasta ei löydy",
+	"client_wants_to_access_the_following_information": "<b>{client}</b> haluaa käyttää seuraavia tietoja:",
+	"do_you_want_to_sign_in_to_client_with_your_app_name_account": "Haluatko kirjautua sisään palveluun <b>{client}</b> {appName} -tililläsi?",
+	"email": "Sähköposti",
+	"view_your_email_address": "Näytä sähköpostiosoitteesi",
+	"profile": "Profiili",
+	"view_your_profile_information": "Tarkastele profiilisi tietoja",
+	"groups": "Ryhmät",
+	"view_the_groups_you_are_a_member_of": "Tarkastele ryhmiä, joiden jäsen olet",
+	"cancel": "Peruuta",
+	"sign_in": "Kirjaudu sisään",
+	"try_again": "Yritä uudelleen",
+	"client_logo": "Asiakasohjelman Logo",
+	"sign_out": "Kirjaudu ulos",
+	"do_you_want_to_sign_out_of_pocketid_with_the_account": "Haluatko kirjautua ulos palvelusta {appName} tilillä <b>{username}</b>?",
+	"sign_in_to_appname": "Kirjaudu palveluun {appName}",
+	"please_try_to_sign_in_again": "Yritä kirjautua sisään uudelleen.",
+	"authenticate_with_passkey_to_access_account": "Tunnistaudu pääsyavaimellasi, jotta pääset tiliisi.",
+	"authenticate": "Tunnistaudu",
+	"please_try_again": "Ole hyvä ja yritä uudelleen.",
+	"continue": "Jatka",
+	"alternative_sign_in": "Vaihtoehtoinen kirjautuminen",
+	"if_you_do_not_have_access_to_your_passkey_you_can_sign_in_using_one_of_the_following_methods": "Jos sinulla ei ole pääsyä pääsyavaimeesi, voit kirjautua sisään jollakin seuraavista tavoista.",
+	"use_your_passkey_instead": "Käytä pääsyavainta sittenkin?",
+	"email_login": "Sisäänkirjautuminen sähköpostilla",
+	"enter_a_login_code_to_sign_in": "Syötä kirjautumiskoodi kirjautuaksesi sisään.",
+	"sign_in_with_login_code": "Kirjaudu sisään kirjautumiskoodilla",
+	"request_a_login_code_via_email": "Pyydä kirjautumiskoodi sähköpostitse.",
+	"go_back": "Takaisin",
+	"an_email_has_been_sent_to_the_provided_email_if_it_exists_in_the_system": "Sähköposti on lähetetty annettuun osoitteeseen, jos se on järjestelmässä.",
+	"enter_code": "Syötä koodi",
+	"enter_your_email_address_to_receive_an_email_with_a_login_code": "Syötä sähköpostiosoitteesi saadaksesi kirjautumiskoodin sähköpostitse.",
+	"your_email": "Sähköpostisi",
+	"submit": "Lähetä",
+	"enter_the_code_you_received_to_sign_in": "Syötä saamasi koodi kirjautuaksesi sisään.",
+	"code": "Koodi",
+	"invalid_redirect_url": "Virheellinen uudelleenohjauksen URL",
+	"audit_log": "Tarkastusloki",
+	"users": "Käyttäjät",
+	"user_groups": "Käyttäjäryhmät",
+	"oidc_clients": "OIDC Asiakkaat",
+	"api_keys": "API Avaimet",
+	"application_configuration": "Sovelluksen määritys",
+	"settings": "Asetukset",
+	"update_pocket_id": "Päivitä Pocket ID",
+	"powered_by": "Voimanlähteenä",
+	"see_your_account_activities_from_the_last_3_months": "Katso tilisi tapahtumat viimeisen 3 kuukauden ajalta.",
+	"time": "Aika",
+	"event": "Tapahtuma",
+	"approximate_location": "Arvioitu sijainti",
+	"ip_address": "IP-osoite",
+	"device": "Laite",
+	"client": "Asiakas",
+	"unknown": "Tuntematon",
+	"account_details_updated_successfully": "Tilin tiedot päivitetty onnistuneesti",
+	"profile_picture_updated_successfully": "Profiilikuva päivitetty onnistuneesti. Päivitys voi kestää muutaman minuutin.",
+	"account_settings": "Tilin asetukset",
+	"passkey_missing": "Pääsyavain puuttuu",
+	"please_provide_a_passkey_to_prevent_losing_access_to_your_account": "Lisää pääsyavain, jotta et menetä pääsyä tiliisi.",
+	"single_passkey_configured": "Yksi pääsyavain määritetty",
+	"it_is_recommended_to_add_more_than_one_passkey": "On suositeltavaa lisätä useampi pääsyavain, jottet menetä päsyä tiliisi.",
+	"account_details": "Tilitiedot",
+	"passkeys": "Pääsyavaimet",
+	"manage_your_passkeys_that_you_can_use_to_authenticate_yourself": "Hallitse pääsyavaimiasi, joita voit käyttää tunnistautumiseen.",
+	"add_passkey": "Lisää pääsyavain",
+	"create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey": "Luo kertakäyttöinen kirjautumiskoodi, jotta voit kirjautua sisään toisella laitteella ilman pääsyavainta.",
+	"create": "Luo",
+	"first_name": "Etunimi",
+	"last_name": "Sukunimi",
+	"username": "Käyttäjätunnus",
+	"save": "Tallenna",
+	"username_can_only_contain": "Käyttäjätunnus voi sisältää vain pieniä kirjaimia, numeroita, alaviivoja, pisteitä, tavuviivoja ja @-merkkejä",
+	"username_must_start_with": "Käyttäjätunnuksen on alettava kirjaimella tai numerolla",
+	"username_must_end_with": "Käyttäjätunnuksen tulee päättyä kirjaimeen tai numeroon",
+	"sign_in_using_the_following_code_the_code_will_expire_in_minutes": "Kirjaudu sisään seuraavalla koodilla. Koodi vanhenee 15 minuutin kuluttua.",
+	"or_visit": "tai vieraile",
+	"added_on": "Lisätty",
+	"rename": "Nimeä uudelleen",
+	"delete": "Poista",
+	"are_you_sure_you_want_to_delete_this_passkey": "Haluatko varmasti poistaa tämän pääsyavaimen?",
+	"passkey_deleted_successfully": "Pääsyavaimen poistettu onnistuneesti",
+	"delete_passkey_name": "Poista {passkeyName}",
+	"passkey_name_updated_successfully": "Pääsyavaimen nimi päivitetty onnistuneesti",
+	"name_passkey": "Nimeä pääsyavain",
+	"name_your_passkey_to_easily_identify_it_later": "Nimeä pääsyavaimesi, jotta voit tunnistaa sen helposti myöhemmin.",
+	"create_api_key": "Luo API-avain",
+	"add_a_new_api_key_for_programmatic_access": "Lisää uusi API-avain ohjelmoitua pääsyä varten <link href='https://pocket-id.org/docs/api'>Pocket ID API</link>:iin.",
+	"add_api_key": "Lisää API-avain",
+	"manage_api_keys": "Hallitse API-avaimia",
+	"api_key_created": "API-avain luotu",
+	"for_security_reasons_this_key_will_only_be_shown_once": "Turvallisuussyistä tämä avain näytetään vain kerran. Säilytä se turvallisessa paikassa.",
+	"description": "Kuvaus",
+	"api_key": "API-avain",
+	"close": "Sulje",
+	"name_to_identify_this_api_key": "Nimi tämän API avaimen tunnistamiseksi.",
+	"expires_at": "Vanhenee",
+	"when_this_api_key_will_expire": "Milloin tämä API-avain vanhenee.",
+	"optional_description_to_help_identify_this_keys_purpose": "Valinnainen kuvaus, joka auttaa tunnistamaan tämän avaimen tarkoituksen.",
+	"expiration_date_must_be_in_the_future": "Päättymispäivän on oltava tulevaisuudessa",
+	"revoke_api_key": "Peruuta API-avain",
+	"never": "Ei koskaan",
+	"revoke": "Peru",
+	"api_key_revoked_successfully": "API-avain peruttu onnistuneesti",
+	"are_you_sure_you_want_to_revoke_the_api_key_apikeyname": "Haluatko varmasti perua API-avaimen \"{apiKeyName}\"? Tämä katkaisee kaikki tämän avaimen käyttävät integraatiot.",
+	"last_used": "Viimeksi käytetty",
+	"actions": "Toiminnot",
+	"images_updated_successfully": "Kuvat päivitetty onnistuneesti. Päivitys voi kestää muutaman minuutin.",
+	"general": "Yleiset",
+	"configure_smtp_to_send_emails": "Ota käyttöön sähköposti-ilmoitukset ilmoittaaksesi käyttäjille, kun kirjautuminen havaitaan uudesta laitteesta tai sijainnista.",
 	"ldap": "LDAP",
-	"configure_ldap_settings_to_sync_users_and_groups_from_an_ldap_server": "Configure LDAP settings to sync users and groups from an LDAP server.",
-	"images": "Images",
-	"update": "Update",
-	"email_configuration_updated_successfully": "Email configuration updated successfully",
-	"save_changes_question": "Save changes?",
-	"you_have_to_save_the_changes_before_sending_a_test_email_do_you_want_to_save_now": "You have to save the changes before sending a test email. Do you want to save now?",
-	"save_and_send": "Save and send",
-	"test_email_sent_successfully": "Test email sent successfully to your email address.",
-	"failed_to_send_test_email": "Failed to send test email. Check the server logs for more information.",
-	"smtp_configuration": "SMTP Configuration",
-	"smtp_host": "SMTP Host",
-	"smtp_port": "SMTP Port",
-	"smtp_user": "SMTP User",
-	"smtp_password": "SMTP Password",
-	"smtp_from": "SMTP From",
-	"smtp_tls_option": "SMTP TLS Option",
-	"email_tls_option": "Email TLS Option",
-	"skip_certificate_verification": "Skip Certificate Verification",
-	"this_can_be_useful_for_selfsigned_certificates": "This can be useful for self-signed certificates.",
-	"enabled_emails": "Enabled Emails",
-	"email_login_notification": "Email Login Notification",
-	"send_an_email_to_the_user_when_they_log_in_from_a_new_device": "Send an email to the user when they log in from a new device.",
-	"emai_login_code_requested_by_user": "Email Login Code Requested by User",
-	"allow_users_to_sign_in_with_a_login_code_sent_to_their_email": "Allows users to bypass passkeys by requesting a login code sent to their email. This significantly reduces security as anyone with access to the user's email can gain entry.",
-	"email_login_code_from_admin": "Email Login Code from Admin",
-	"allows_an_admin_to_send_a_login_code_to_the_user": "Allows an admin to send a login code to the user via email.",
-	"send_test_email": "Send test email",
-	"application_configuration_updated_successfully": "Application configuration updated successfully",
-	"application_name": "Application Name",
-	"session_duration": "Session Duration",
-	"the_duration_of_a_session_in_minutes_before_the_user_has_to_sign_in_again": "The duration of a session in minutes before the user has to sign in again.",
-	"enable_self_account_editing": "Enable Self-Account Editing",
-	"whether_the_users_should_be_able_to_edit_their_own_account_details": "Whether the users should be able to edit their own account details.",
-	"emails_verified": "Emails Verified",
-	"whether_the_users_email_should_be_marked_as_verified_for_the_oidc_clients": "Whether the user's email should be marked as verified for the OIDC clients.",
-	"ldap_configuration_updated_successfully": "LDAP configuration updated successfully",
-	"ldap_disabled_successfully": "LDAP disabled successfully",
-	"ldap_sync_finished": "LDAP sync finished",
-	"client_configuration": "Client Configuration",
+	"configure_ldap_settings_to_sync_users_and_groups_from_an_ldap_server": "Määritä LDAP-asetukset käyttäjien ja ryhmien synkronointia varten LDAP-palvelimelta.",
+	"images": "Kuvat",
+	"update": "Päivitä",
+	"email_configuration_updated_successfully": "Sähköpostiasetukset päivitetty onnistuneesti",
+	"save_changes_question": "Tallenna muutokset?",
+	"you_have_to_save_the_changes_before_sending_a_test_email_do_you_want_to_save_now": "Sinun on tallennettava muutokset ennen testisähköpostin lähettämistä. Haluatko tallentaa nyt?",
+	"save_and_send": "Tallenna ja lähetä",
+	"test_email_sent_successfully": "Testiviesti lähetetty onnistuneesti sähköpostiosoitteeseesi.",
+	"failed_to_send_test_email": "Testisähköpostin lähettäminen epäonnistui. Tarkista lisätietoja palvelimen lokitiedostoista.",
+	"smtp_configuration": "SMTP Asetukset",
+	"smtp_host": "SMTP palvelin",
+	"smtp_port": "SMTP portti",
+	"smtp_user": "SMTP käyttäjä",
+	"smtp_password": "SMTP salasana",
+	"smtp_from": "SMTP lähettäjä",
+	"smtp_tls_option": "SMTP TLS -valinta",
+	"email_tls_option": "Sähköpostin TLS-valinta",
+	"skip_certificate_verification": "Ohita varmenteen vahvistus",
+	"this_can_be_useful_for_selfsigned_certificates": "Tämä voi olla hyödyllistä itse-allekirjoitetuille varmenteille.",
+	"enabled_emails": "Käytössä olevat sähköpostit",
+	"email_login_notification": "Sähköposti-ilmoitus kirjautumisesta",
+	"send_an_email_to_the_user_when_they_log_in_from_a_new_device": "Lähetä käyttäjälle sähköposti, kun hän kirjautuu sisään uudelta laitteelta.",
+	"emai_login_code_requested_by_user": "Käyttäjän pyytämä sähköpostin kirjautumiskoodi",
+	"allow_users_to_sign_in_with_a_login_code_sent_to_their_email": "Antaa käyttäjille mahdollisuuden ohittaa pääsyavaimen pyytämällä kirjautumiskoodin, joka lähetetään heidän sähköpostiinsa. Tämä merkittävästi heikentää turvallisuutta, koska kuka tahansa, jolla on pääsy käyttäjän sähköpostiin, voi kirjautua sisään.",
+	"email_login_code_from_admin": "Sähköpostin kirjautumiskoodi järjestelmänvalvojalta",
+	"allows_an_admin_to_send_a_login_code_to_the_user": "Antaa järjestelmänvalvojalle mahdollisuuden lähettää käyttäjälle kirjautumiskoodi sähköpostitse.",
+	"send_test_email": "Lähetä testisähköposti",
+	"application_configuration_updated_successfully": "Sovelluksen määritykset päivitetty onnistuneesti",
+	"application_name": "Sovelluksen nimi",
+	"session_duration": "Istunnon kesto",
+	"the_duration_of_a_session_in_minutes_before_the_user_has_to_sign_in_again": "Istunnon kesto minuutteina ennen kuin käyttäjän on kirjauduttava uudelleen.",
+	"enable_self_account_editing": "Ota käyttöön tilin itsemuokkaus",
+	"whether_the_users_should_be_able_to_edit_their_own_account_details": "Määrittää voiko käyttäjät itse muokata oman tilinsä tietoja.",
+	"emails_verified": "Sähköpostiosoitteet vahvistettu",
+	"whether_the_users_email_should_be_marked_as_verified_for_the_oidc_clients": "Merkitäänkö käyttäjän sähköpostiosoite vahvistetuksi OIDC-asiakkaille.",
+	"ldap_configuration_updated_successfully": "LDAP-määritykset päivitetty onnistuneesti",
+	"ldap_disabled_successfully": "LDAP poistettu käytöstä onnistuneesti",
+	"ldap_sync_finished": "LDAP-synkronointi valmis",
+	"client_configuration": "Asiakkaan määritys",
 	"ldap_url": "LDAP URL",
 	"ldap_bind_dn": "LDAP Bind DN",
-	"ldap_bind_password": "LDAP Bind Password",
-	"ldap_base_dn": "LDAP Base DN",
-	"user_search_filter": "User Search Filter",
-	"the_search_filter_to_use_to_search_or_sync_users": "The Search filter to use to search/sync users.",
-	"groups_search_filter": "Groups Search Filter",
-	"the_search_filter_to_use_to_search_or_sync_groups": "The Search filter to use to search/sync groups.",
-	"attribute_mapping": "Attribute Mapping",
-	"user_unique_identifier_attribute": "User Unique Identifier Attribute",
-	"the_value_of_this_attribute_should_never_change": "The value of this attribute should never change.",
-	"username_attribute": "Username Attribute",
-	"user_mail_attribute": "User Mail Attribute",
-	"user_first_name_attribute": "User First Name Attribute",
-	"user_last_name_attribute": "User Last Name Attribute",
-	"user_profile_picture_attribute": "User Profile Picture Attribute",
-	"the_value_of_this_attribute_can_either_be_a_url_binary_or_base64_encoded_image": "The value of this attribute can either be a URL, a binary or a base64 encoded image.",
-	"group_members_attribute": "Group Members Attribute",
-	"the_attribute_to_use_for_querying_members_of_a_group": "The attribute to use for querying members of a group.",
-	"group_unique_identifier_attribute": "Group Unique Identifier Attribute",
-	"group_rdn_attribute": "Group RDN Attribute (in DN)",
-	"admin_group_name": "Admin Group Name",
-	"members_of_this_group_will_have_admin_privileges_in_pocketid": "Members of this group will have Admin Privileges in Pocket ID.",
-	"disable": "Disable",
-	"sync_now": "Sync now",
-	"enable": "Enable",
-	"user_created_successfully": "User created successfully",
-	"create_user": "Create User",
-	"add_a_new_user_to_appname": "Add a new user to {appName}",
-	"add_user": "Add User",
-	"manage_users": "Manage Users",
-	"admin_privileges": "Admin Privileges",
-	"admins_have_full_access_to_the_admin_panel": "Admins have full access to the admin panel.",
-	"delete_firstname_lastname": "Delete {firstName} {lastName}",
-	"are_you_sure_you_want_to_delete_this_user": "Are you sure you want to delete this user?",
-	"user_deleted_successfully": "User deleted successfully",
-	"role": "Role",
-	"source": "Source",
-	"admin": "Admin",
-	"user": "User",
-	"local": "Local",
-	"toggle_menu": "Toggle menu",
-	"edit": "Edit",
-	"user_groups_updated_successfully": "User groups updated successfully",
-	"user_updated_successfully": "User updated successfully",
-	"custom_claims_updated_successfully": "Custom claims updated successfully",
-	"back": "Back",
-	"user_details_firstname_lastname": "User Details {firstName} {lastName}",
-	"manage_which_groups_this_user_belongs_to": "Manage which groups this user belongs to.",
-	"custom_claims": "Custom Claims",
-	"custom_claims_are_key_value_pairs_that_can_be_used_to_store_additional_information_about_a_user": "Custom claims are key-value pairs that can be used to store additional information about a user. These claims will be included in the ID token if the scope 'profile' is requested.",
-	"user_group_created_successfully": "User group created successfully",
-	"create_user_group": "Create User Group",
-	"create_a_new_group_that_can_be_assigned_to_users": "Create a new group that can be assigned to users.",
-	"add_group": "Add Group",
-	"manage_user_groups": "Manage User Groups",
-	"friendly_name": "Friendly Name",
-	"name_that_will_be_displayed_in_the_ui": "Name that will be displayed in the UI",
-	"name_that_will_be_in_the_groups_claim": "Name that will be in the \"groups\" claim",
-	"delete_name": "Delete {name}",
-	"are_you_sure_you_want_to_delete_this_user_group": "Are you sure you want to delete this user group?",
-	"user_group_deleted_successfully": "User group deleted successfully",
-	"user_count": "User Count",
-	"user_group_updated_successfully": "User group updated successfully",
-	"users_updated_successfully": "Users updated successfully",
-	"user_group_details_name": "User Group Details {name}",
-	"assign_users_to_this_group": "Assign users to this group.",
-	"custom_claims_are_key_value_pairs_that_can_be_used_to_store_additional_information_about_a_user_prioritized": "Custom claims are key-value pairs that can be used to store additional information about a user. These claims will be included in the ID token if the scope 'profile' is requested. Custom claims defined on the user will be prioritized if there are conflicts.",
-	"oidc_client_created_successfully": "OIDC client created successfully",
-	"create_oidc_client": "Create OIDC Client",
-	"add_a_new_oidc_client_to_appname": "Add a new OIDC client to {appName}.",
-	"add_oidc_client": "Add OIDC Client",
-	"manage_oidc_clients": "Manage OIDC Clients",
-	"one_time_link": "One Time Link",
-	"use_this_link_to_sign_in_once": "Use this link to sign in once. This is needed for users who haven't added a passkey yet or have lost it.",
-	"add": "Add",
-	"callback_urls": "Callback URLs",
-	"logout_callback_urls": "Logout Callback URLs",
-	"public_client": "Public Client",
-	"public_clients_description": "Public clients do not have a client secret. They are designed for mobile, web, and native applications where secrets cannot be securely stored.",
+	"ldap_bind_password": "LDAP Bind Salasana",
+	"ldap_base_dn": "LDAP perus DN",
+	"user_search_filter": "Käyttäjän hakusuodatin",
+	"the_search_filter_to_use_to_search_or_sync_users": "Käyttäjien hakuun/synkronointiin käytettävä hakusuodatin.",
+	"groups_search_filter": "Ryhmien hakusuodatin",
+	"the_search_filter_to_use_to_search_or_sync_groups": "Ryhmien hakuun/synkronointiin käytettävä hakusuodatin.",
+	"attribute_mapping": "Attribuuttien yhdistäminen",
+	"user_unique_identifier_attribute": "Käyttäjän yksilöllinen tunnisteattribuutti",
+	"the_value_of_this_attribute_should_never_change": "Tämän attribuutin arvon ei tulisi koskaan muuttua.",
+	"username_attribute": "Käyttäjänimen attribuutti",
+	"user_mail_attribute": "Käyttäjän sähköpostin attribuutti",
+	"user_first_name_attribute": "Käyttäjän etunimi-attribuutti",
+	"user_last_name_attribute": "Käyttäjän sukunimi-attribuutti",
+	"user_profile_picture_attribute": "Käyttäjän profiilikuva-attribuutti",
+	"the_value_of_this_attribute_can_either_be_a_url_binary_or_base64_encoded_image": "Tämän attribuutin arvo voi olla joko URL, binääri tai base64-koodattu kuva.",
+	"group_members_attribute": "Ryhmän jäsenten attribuutti",
+	"the_attribute_to_use_for_querying_members_of_a_group": "Attribuutti, jota käytetään ryhmän jäsenten kyselyä varten.",
+	"group_unique_identifier_attribute": "Ryhmän yksilöllinen tunnisteattribuutti",
+	"group_rdn_attribute": "Ryhmän RDN-attribuutti (DN:ssä)",
+	"admin_group_name": "Järjestelmänvalvojan ryhmän nimi",
+	"members_of_this_group_will_have_admin_privileges_in_pocketid": "Tämän ryhmän jäsenillä on järjestelmänvalvojan oikeudet Pocket ID:ssä.",
+	"disable": "Poista käytöstä",
+	"sync_now": "Synkronoi nyt",
+	"enable": "Ota käyttöön",
+	"user_created_successfully": "Käyttäjä luotu onnistuneesti",
+	"create_user": "Luo käyttäjä",
+	"add_a_new_user_to_appname": "Lisää käyttäjä palveluun {appName}",
+	"add_user": "Lisää käyttäjä",
+	"manage_users": "Käyttäjien hallinta",
+	"admin_privileges": "Järjestelmänvalvojan oikeudet",
+	"admins_have_full_access_to_the_admin_panel": "Järjestelmänvalvojilla on täysi pääsy hallintapaneeliin.",
+	"delete_firstname_lastname": "Poista {firstName} {lastName}",
+	"are_you_sure_you_want_to_delete_this_user": "Haluatko varmasti poistaa tämän käyttäjän?",
+	"user_deleted_successfully": "Käyttäjä poistettu onnistuneesti",
+	"role": "Rooli",
+	"source": "Lähde",
+	"admin": "Järjestelmänvalvoja",
+	"user": "Käyttäjä",
+	"local": "Paikallinen",
+	"toggle_menu": "Avaa valikko",
+	"edit": "Muokkaa",
+	"user_groups_updated_successfully": "Käyttäjäryhmät päivitetty onnistuneesti",
+	"user_updated_successfully": "Käyttäjä päivitetty onnistuneesti",
+	"custom_claims_updated_successfully": "Mukautetut vaatimukset päivitetty onnistuneesti",
+	"back": "Takaisin",
+	"user_details_firstname_lastname": "Käyttäjän tiedot {firstName} {lastName}",
+	"manage_which_groups_this_user_belongs_to": "Hallitse, mihin ryhmiin tämä käyttäjä kuuluu.",
+	"custom_claims": "Mukautetut vaatimukset",
+	"custom_claims_are_key_value_pairs_that_can_be_used_to_store_additional_information_about_a_user": "Mukautetut vaatimukset ovat avain-arvo-pareja, joita voidaan käyttää käyttäjää koskevien lisätietojen tallentamiseen. Nämä vaatimukset sisällytetään tunnistustunnukseen, jos pyydetään oikeusaluetta \"profile\".",
+	"user_group_created_successfully": "Käyttäjäryhmä luotu onnistuneesti",
+	"create_user_group": "Luo käyttäjäryhmä",
+	"create_a_new_group_that_can_be_assigned_to_users": "Luo uusi ryhmä, joka voidaan määrittää käyttäjille.",
+	"add_group": "Lisää ryhmä",
+	"manage_user_groups": "Hallitse käyttäjäryhmiä",
+	"friendly_name": "Käyttäjäystävälinen nimi",
+	"name_that_will_be_displayed_in_the_ui": "Nimi, joka näkyy käyttöliittymässä",
+	"name_that_will_be_in_the_groups_claim": "Nimi, joka tulee olemaan \"groups\" -vaatimuksessa",
+	"delete_name": "Poista {name}",
+	"are_you_sure_you_want_to_delete_this_user_group": "Haluatko varmasti poistaa tämän käyttäjäryhmän?",
+	"user_group_deleted_successfully": "Käyttäjäryhmä poistettu onnistuneesti",
+	"user_count": "Käyttäjien määrä",
+	"user_group_updated_successfully": "Käyttäjäryhmä päivitetty onnistuneesti",
+	"users_updated_successfully": "Käyttäjät päivitetty onnistuneesti",
+	"user_group_details_name": "Käyttäjäryhmän tiedot {name}",
+	"assign_users_to_this_group": "Määritä käyttäjät tähän ryhmään.",
+	"custom_claims_are_key_value_pairs_that_can_be_used_to_store_additional_information_about_a_user_prioritized": "Mukautetut vaatimukset ovat avain-arvo-pareja, joita voidaan käyttää käyttäjää koskevien lisätietojen tallentamiseen. Nämä vaatimukset sisällytetään tunnistustunnukseen, jos pyydetään oikeusaluetta \"profiili\". Käyttäjälle määritellyt mukautetut vaatimukset asetetaan etusijalle, jos esiintyy ristiriitoja.",
+	"oidc_client_created_successfully": "OIDC-asiakasohjelma luotu onnistuneesti",
+	"create_oidc_client": "Luo OIDC-asiakas",
+	"add_a_new_oidc_client_to_appname": "Lisää uusi OIDC-asiakasohjelma {appName} palveluun.",
+	"add_oidc_client": "Lisää OIDC-asiakas",
+	"manage_oidc_clients": "Hallitse OIDC-asiakkaita",
+	"one_time_link": "Kertakäyttöinen linkki",
+	"use_this_link_to_sign_in_once": "Käytä tätä linkkiä kirjautuaksesi sisään kerran. Tätä tarvitaan käyttäjille, jotka eivät ole vielä lisänneet pääsyavainta tai ovat kadottaneet sen.",
+	"add": "Lisää",
+	"callback_urls": "Takaisinkutsu-URL",
+	"logout_callback_urls": "Uloskirjautumisen takaisinkutsun URL",
+	"public_client": "Julkinen asiakas",
+	"public_clients_description": "Julkisilla asiakkailla ei ole asiakassalaisuutta. Ne on suunniteltu mobiili-, web- ja natiivisovelluksiin, joissa salaisuuksia ei voida tallentaa turvallisesti.",
 	"pkce": "PKCE",
-	"public_key_code_exchange_is_a_security_feature_to_prevent_csrf_and_authorization_code_interception_attacks": "Public Key Code Exchange is a security feature to prevent CSRF and authorization code interception attacks.",
-	"requires_reauthentication": "Requires Re-Authentication",
-	"requires_users_to_authenticate_again_on_each_authorization": "Requires users to authenticate again on each authorization, even if already signed in",
+	"public_key_code_exchange_is_a_security_feature_to_prevent_csrf_and_authorization_code_interception_attacks": "Public Key Code Exchange on tietoturvatoiminto, joka estää CSRF:n ja valtuutuskoodin sieppaushyökkäykset.",
+	"requires_reauthentication": "Vaatii uudelleentodennuksen",
+	"requires_users_to_authenticate_again_on_each_authorization": "Vaatii käyttäjiltä uuden todennuksen jokaisella valtuutuksella, vaikka he olisivat jo kirjautuneet sisään",
 	"name_logo": "{name} logo",
-	"change_logo": "Change Logo",
-	"upload_logo": "Upload Logo",
-	"remove_logo": "Remove Logo",
-	"are_you_sure_you_want_to_delete_this_oidc_client": "Are you sure you want to delete this OIDC client?",
-	"oidc_client_deleted_successfully": "OIDC client deleted successfully",
-	"authorization_url": "Authorization URL",
+	"change_logo": "Vaihda logo",
+	"upload_logo": "Lataa logo",
+	"remove_logo": "Poista logo",
+	"are_you_sure_you_want_to_delete_this_oidc_client": "Haluatko varmasti poistaa tämän OIDC-asiakkaan?",
+	"oidc_client_deleted_successfully": "OIDC-asiakasohjelma poistettu onnistuneesti",
+	"authorization_url": "Valtuutuksen URL",
 	"oidc_discovery_url": "OIDC Discovery URL",
-	"token_url": "Token URL",
-	"userinfo_url": "Userinfo URL",
-	"logout_url": "Logout URL",
-	"certificate_url": "Certificate URL",
-	"enabled": "Enabled",
-	"disabled": "Disabled",
-	"oidc_client_updated_successfully": "OIDC client updated successfully",
-	"create_new_client_secret": "Create new client secret",
-	"are_you_sure_you_want_to_create_a_new_client_secret": "Are you sure you want to create a new client secret? The old one will be invalidated.",
-	"generate": "Generate",
-	"new_client_secret_created_successfully": "New client secret created successfully",
-	"allowed_user_groups_updated_successfully": "Allowed user groups updated successfully",
-	"oidc_client_name": "OIDC Client {name}",
-	"client_id": "Client ID",
-	"client_secret": "Client secret",
-	"show_more_details": "Show more details",
-	"allowed_user_groups": "Allowed User Groups",
-	"add_user_groups_to_this_client_to_restrict_access_to_users_in_these_groups": "Add user groups to this client to restrict access to users in these groups. If no user groups are selected, all users will have access to this client.",
-	"favicon": "Favicon",
-	"light_mode_logo": "Light Mode Logo",
-	"dark_mode_logo": "Dark Mode Logo",
-	"background_image": "Background Image",
-	"language": "Language",
-	"reset_profile_picture_question": "Reset profile picture?",
-	"this_will_remove_the_uploaded_image_and_reset_the_profile_picture_to_default": "This will remove the uploaded image and reset the profile picture to default. Do you want to continue?",
-	"reset": "Reset",
-	"reset_to_default": "Reset to default",
-	"profile_picture_has_been_reset": "Profile picture has been reset. It may take a few minutes to update.",
-	"select_the_language_you_want_to_use": "Select the language you want to use. Please note that some text may be automatically translated and could be inaccurate.",
-	"contribute_to_translation": "If you find an issue you're welcome to contribute to the translation on <link href='https://crowdin.com/project/pocket-id'>Crowdin</link>.",
-	"personal": "Personal",
-	"global": "Global",
-	"all_users": "All Users",
-	"all_events": "All Events",
-	"all_clients": "All Clients",
-	"all_locations": "All Locations",
-	"global_audit_log": "Global Audit Log",
-	"see_all_account_activities_from_the_last_3_months": "See all user activity for the last 3 months.",
-	"token_sign_in": "Token Sign In",
-	"client_authorization": "Client Authorization",
-	"new_client_authorization": "New Client Authorization",
-	"device_code_authorization": "Device Code Authorization",
-	"new_device_code_authorization": "New Device Code Authorization",
-	"passkey_added": "Passkey Added",
-	"passkey_removed": "Passkey Removed",
-	"disable_animations": "Disable Animations",
-	"turn_off_ui_animations": "Turn off animations throughout the UI.",
-	"user_disabled": "Account Disabled",
-	"disabled_users_cannot_log_in_or_use_services": "Disabled users cannot log in or use services.",
-	"user_disabled_successfully": "User has been disabled successfully.",
-	"user_enabled_successfully": "User has been enabled successfully.",
-	"status": "Status",
-	"disable_firstname_lastname": "Disable {firstName} {lastName}",
-	"are_you_sure_you_want_to_disable_this_user": "Are you sure you want to disable this user? They will not be able to log in or access any services.",
-	"ldap_soft_delete_users": "Keep disabled users from LDAP.",
-	"ldap_soft_delete_users_description": "When enabled, users removed from LDAP will be disabled rather than deleted from the system.",
-	"login_code_email_success": "The login code has been sent to the user.",
-	"send_email": "Send Email",
-	"show_code": "Show Code",
-	"callback_url_description": "URL(s) provided by your client. Will be automatically added if left blank. Wildcards (*) are supported, but best avoided for better security.",
-	"logout_callback_url_description": "URL(s) provided by your client for logout. Wildcards (*) are supported, but best avoided for better security.",
-	"api_key_expiration": "API Key Expiration",
-	"send_an_email_to_the_user_when_their_api_key_is_about_to_expire": "Send an email to the user when their API key is about to expire.",
-	"authorize_device": "Authorize Device",
-	"the_device_has_been_authorized": "The device has been authorized.",
-	"enter_code_displayed_in_previous_step": "Enter the code that was displayed in the previous step.",
-	"authorize": "Authorize",
-	"federated_client_credentials": "Federated Client Credentials",
-	"federated_client_credentials_description": "Using federated client credentials, you can authenticate OIDC clients using JWT tokens issued by third-party authorities.",
-	"add_federated_client_credential": "Add Federated Client Credential",
-	"add_another_federated_client_credential": "Add another federated client credential",
-	"oidc_allowed_group_count": "Allowed Group Count",
-	"unrestricted": "Unrestricted",
-	"show_advanced_options": "Show Advanced Options",
-	"hide_advanced_options": "Hide Advanced Options",
-	"oidc_data_preview": "OIDC Data Preview",
-	"preview_the_oidc_data_that_would_be_sent_for_different_users": "Preview the OIDC data that would be sent for different users",
-	"id_token": "ID Token",
-	"access_token": "Access Token",
-	"userinfo": "Userinfo",
-	"id_token_payload": "ID Token Payload",
-	"access_token_payload": "Access Token Payload",
-	"userinfo_endpoint_response": "Userinfo Endpoint Response",
-	"copy": "Copy",
-	"no_preview_data_available": "No preview data available",
-	"copy_all": "Copy All",
-	"preview": "Preview",
-	"preview_for_user": "Preview for {name}",
-	"preview_the_oidc_data_that_would_be_sent_for_this_user": "Preview the OIDC data that would be sent for this user",
-	"show": "Show",
-	"select_an_option": "Select an option",
-	"select_user": "Select User",
-	"error": "Error",
-	"select_an_accent_color_to_customize_the_appearance_of_pocket_id": "Select an accent color to customize the appearance of Pocket ID.",
-	"accent_color": "Accent Color",
-	"custom_accent_color": "Custom Accent Color",
-	"custom_accent_color_description": "Enter a custom color using valid CSS color formats (e.g., hex, rgb, hsl).",
-	"color_value": "Color Value",
-	"apply": "Apply",
-	"signup_token": "Signup Token",
-	"create_a_signup_token_to_allow_new_user_registration": "Create a signup token to allow new user registration.",
-	"usage_limit": "Usage Limit",
-	"number_of_times_token_can_be_used": "Number of times the signup token can be used.",
-	"expires": "Expires",
-	"signup": "Sign Up",
-	"user_creation": "User Creation",
-	"configure_user_creation": "Manage user creation settings, including signup methods and default permissions for new users.",
-	"user_creation_groups_description": "Assign these groups automatically to new users upon signup.",
-	"user_creation_claims_description": "Assign these custom claims automatically to new users upon signup.",
-	"user_creation_updated_successfully": "User creation settings updated successfully.",
-	"signup_disabled_description": "User signups are completely disabled. Only administrators can create new user accounts.",
-	"signup_requires_valid_token": "A valid signup token is required to create an account",
-	"validating_signup_token": "Validating signup token",
-	"go_to_login": "Go to login",
-	"signup_to_appname": "Sign Up to {appName}",
-	"create_your_account_to_get_started": "Create your account to get started.",
-	"initial_account_creation_description": "Please create your account to get started. You will be able to set up a passkey later.",
-	"setup_your_passkey": "Set up your passkey",
-	"create_a_passkey_to_securely_access_your_account": "Create a passkey to securely access your account. This will be your primary way to sign in.",
-	"skip_for_now": "Skip for now",
-	"account_created": "Account Created",
-	"enable_user_signups": "Enable User Signups",
-	"enable_user_signups_description": "Decide how users can sign up for new accounts in Pocket ID.",
-	"user_signups_are_disabled": "User signups are currently disabled",
-	"create_signup_token": "Create Signup Token",
-	"view_active_signup_tokens": "View Active Signup Tokens",
-	"manage_signup_tokens": "Manage Signup Tokens",
-	"view_and_manage_active_signup_tokens": "View and manage active signup tokens.",
-	"signup_token_deleted_successfully": "Signup token deleted successfully.",
-	"expired": "Expired",
-	"used_up": "Used Up",
-	"active": "Active",
-	"usage": "Usage",
-	"created": "Created",
-	"token": "Token",
-	"loading": "Loading",
-	"delete_signup_token": "Delete Signup Token",
-	"are_you_sure_you_want_to_delete_this_signup_token": "Are you sure you want to delete this signup token? This action cannot be undone.",
-	"signup_with_token": "Signup with token",
-	"signup_with_token_description": "Users can only sign up using a valid signup token created by an administrator.",
-	"signup_open": "Open Signup",
-	"signup_open_description": "Anyone can create a new account without restrictions.",
-	"of": "of",
-	"skip_passkey_setup": "Skip Passkey Setup",
-	"skip_passkey_setup_description": "It's highly recommended to set up a passkey because without one, you will be locked out of your account as soon as the session expires.",
-	"my_apps": "My Apps",
-	"no_apps_available": "No apps available",
-	"contact_your_administrator_for_app_access": "Contact your administrator to get access to applications.",
-	"launch": "Launch",
-	"client_launch_url": "Client Launch URL",
-	"client_launch_url_description": "The URL that will be opened when a user launches the app from the My Apps page.",
-	"client_name_description": "The name of the client that shows in the Pocket ID UI.",
-	"revoke_access": "Revoke Access",
-	"revoke_access_description": "Revoke access to <b>{clientName}</b>. <b>{clientName}</b> will no longer be able to access your account information.",
-	"revoke_access_successful": "The access to {clientName} has been successfully revoked.",
-	"last_signed_in_ago": "Last signed in {time} ago",
-	"invalid_client_id": "Client ID can only contain letters, numbers, underscores, and hyphens",
-	"custom_client_id_description": "Set a custom client ID if this is required by your application. Otherwise, leave it blank to generate a random one.",
-	"generated": "Generated",
-	"administration": "Administration",
-	"group_rdn_attribute_description": "The attribute used in the groups distinguished name (DN).",
-	"display_name_attribute": "Display Name Attribute",
-	"display_name": "Display Name",
-	"configure_application_images": "Configure Application Images",
-	"ui_config_disabled_info_title": "UI Configuration Disabled",
-	"ui_config_disabled_info_description": "The UI configuration is disabled because the application configuration settings are managed through environment variables. Some settings may not be editable.",
-	"logo_from_url_description": "Paste a direct image URL (svg, png, webp). Find icons at <link  href=\"https://selfh.st/icons\">Selfh.st Icons</link> or <link href=\"https://dashboardicons.com\">Dashboard Icons</link>.",
-	"invalid_url": "Invalid URL",
-	"require_user_email": "Require Email Address",
-	"require_user_email_description": "Requires users to have an email address. If disabled, the users without an email address won't be able to use features that require an email address.",
-	"view": "View",
-	"toggle_columns": "Toggle columns",
-	"locale": "Locale",
+	"token_url": "Tokenin URL",
+	"userinfo_url": "Käyttäjätietojen URL-osoite",
+	"logout_url": "Uloskirjautumisen URL-osoite",
+	"certificate_url": "Sertifikaatin URL-osoite",
+	"enabled": "Käytössä",
+	"disabled": "Pois käytöstä",
+	"oidc_client_updated_successfully": "OIDC-asiakasohjelma päivitetty onnistuneesti",
+	"create_new_client_secret": "Luo uusi asiakassalaisuus",
+	"are_you_sure_you_want_to_create_a_new_client_secret": "Haluatko varmasti luoda uuden asiakassalaisuuden? Vanha salaisuus mitätöidään.",
+	"generate": "Luo",
+	"new_client_secret_created_successfully": "Uusi asiakassalaisuus luotu onnistuneesti",
+	"allowed_user_groups_updated_successfully": "Sallitut käyttäjäryhmät päivitetty onnistuneesti",
+	"oidc_client_name": "OIDC-asiakas {name}",
+	"client_id": "Asiakas ID",
+	"client_secret": "Asiakkaan salaisuus",
+	"show_more_details": "Näytä lisätietoja",
+	"allowed_user_groups": "Sallitut käyttäjäryhmät",
+	"add_user_groups_to_this_client_to_restrict_access_to_users_in_these_groups": "Lisää käyttäjäryhmiä tähän asiakkaaseen rajoittaaksesi pääsyn näiden ryhmien käyttäjille. Jos käyttäjäryhmiä ei ole valittu, kaikki käyttäjät pääsevät käyttämään tätä asiakasta.",
+	"favicon": "Sivustokuvake",
+	"light_mode_logo": "Vaalean tilan logo",
+	"dark_mode_logo": "Tumman tilan logo",
+	"background_image": "Taustakuva",
+	"language": "Kieli",
+	"reset_profile_picture_question": "Palautetaanko profiilikuva?",
+	"this_will_remove_the_uploaded_image_and_reset_the_profile_picture_to_default": "Tämä poistaa ladatun kuvan ja palauttaa profiilikuva oletusasetuksiin. Haluatko jatkaa?",
+	"reset": "Palauta",
+	"reset_to_default": "Palauta oletukset",
+	"profile_picture_has_been_reset": "Profiilikuva on nollattu. Päivitys voi kestää muutaman minuutin.",
+	"select_the_language_you_want_to_use": "Valitse haluamasi kieli. Huomaa, että osa tekstistä saatetaan kääntää automaattisesti, jolloin käännös voi olla epätarkka.",
+	"contribute_to_translation": "Jos löydät ongelman, voit osallistua käännöstyöhön <link href='https://crowdin.com/project/pocket-id'>Crowdinissa</link>.",
+	"personal": "Henkilökohtainen",
+	"global": "Globaali",
+	"all_users": "Kaikki käyttäjät",
+	"all_events": "Kaikki tapahtumat",
+	"all_clients": "Kaikki asiakkaat",
+	"all_locations": "Kaikki sijainnit",
+	"global_audit_log": "Globaali tarkastusloki",
+	"see_all_account_activities_from_the_last_3_months": "Katso kaikkien käyttäjien toiminnot viimeisen 3 kuukauden ajalta.",
+	"token_sign_in": "Tunnuksella kirjautuminen",
+	"client_authorization": "Asiakkaan valtuutus",
+	"new_client_authorization": "Uuden asiakkaan valtuutus",
+	"device_code_authorization": "Laitteen koodivaltuutus",
+	"new_device_code_authorization": "Uuden laitteen koodivaltuutus",
+	"passkey_added": "Pääsyavain lisättiin",
+	"passkey_removed": "Pääsyavain poistettiin",
+	"disable_animations": "Poista animaatiot käytöstä",
+	"turn_off_ui_animations": "Poista animaatiot käytöstä koko käyttöliittymässä.",
+	"user_disabled": "Tili poistettu käytöstä",
+	"disabled_users_cannot_log_in_or_use_services": "Käytöstä poistetut käyttäjät eivät voi kirjautua sisään tai käyttää palveluita.",
+	"user_disabled_successfully": "Käyttäjä on poistettu käytöstä onnistuneesti.",
+	"user_enabled_successfully": "Käyttäjä on otettu käyttöön onnistuneesti.",
+	"status": "Tila",
+	"disable_firstname_lastname": "Poista käytöstä {firstName} {lastName}",
+	"are_you_sure_you_want_to_disable_this_user": "Haluatko varmasti poistaa tämän käyttäjän käytöstä? Hän ei voi kirjautua sisään tai käyttää mitään palveluita.",
+	"ldap_soft_delete_users": "Säilytä LDAP:sta käytöstä poistetut käyttäjät.",
+	"ldap_soft_delete_users_description": "Kun tämä toiminto on käytössä, LDAP:sta poistetut käyttäjät merkitään käytöstä poistetuiksi sen sijaan, että ne poistettaisiin järjestelmästä kokonaan.",
+	"login_code_email_success": "Pääsyavain poistettiin",
+	"send_email": "Lähetä sähköposti",
+	"show_code": "Näytä koodi",
+	"callback_url_description": "Asiakkaasi antamat URL-osoitteet. Lisätään automaattisesti, jos kenttä jätetään tyhjäksi. Villikortit (*) ovat tuettuja, mutta niitä on parempi välttää turvallisuussyistä.",
+	"logout_callback_url_description": "Asiakkaasi antamat URL-osoitteet kirjautumiseen. Villikortit (*) ovat tuettuja, mutta niitä on parempi välttää turvallisuuden vuoksi.",
+	"api_key_expiration": "API-avaimen voimassaolon päättyminen",
+	"send_an_email_to_the_user_when_their_api_key_is_about_to_expire": "Lähetä käyttäjälle sähköpostiviesti, kun hänen API-avaimensa on vanhentumassa.",
+	"authorize_device": "Valtuuta laite",
+	"the_device_has_been_authorized": "Laite on valtuutettu.",
+	"enter_code_displayed_in_previous_step": "Syötä edellisessä vaiheessa näkynyt koodi.",
+	"authorize": "Salli",
+	"federated_client_credentials": "Federoidut asiakastunnukset",
+	"federated_client_credentials_description": "Yhdistettyjen asiakastunnistetietojen avulla voit todentaa OIDC-asiakkaat kolmannen osapuolen myöntämillä JWT-tunnuksilla.",
+	"add_federated_client_credential": "Lisää federoitu asiakastunnus",
+	"add_another_federated_client_credential": "Lisää toinen federoitu asiakastunnus",
+	"oidc_allowed_group_count": "Sallittujen ryhmien määrä",
+	"unrestricted": "Rajoittamaton",
+	"show_advanced_options": "Näytä lisäasetukset",
+	"hide_advanced_options": "Piilota lisäasetukset",
+	"oidc_data_preview": "OIDC-tietojen esikatselu",
+	"preview_the_oidc_data_that_would_be_sent_for_different_users": "Esikatsele OIDC-tiedot, jotka lähetetään eri käyttäjille",
+	"id_token": "ID-tunnus",
+	"access_token": "Käyttöoikeustunnus",
+	"userinfo": "Käyttäjätieto",
+	"id_token_payload": "ID tunnuksen data",
+	"access_token_payload": "Pääsytunnuksen data",
+	"userinfo_endpoint_response": "Käyttäjätietojen päätepisteen vastaus",
+	"copy": "Kopioi",
+	"no_preview_data_available": "Esikatselutietoja ei saatavilla",
+	"copy_all": "Kopioi kaikki",
+	"preview": "Esikatsele",
+	"preview_for_user": "Esikatsele käyttäjänä {name}",
+	"preview_the_oidc_data_that_would_be_sent_for_this_user": "Esikatsele OIDC-tiedot, jotka lähetetään tälle käyttäjälle",
+	"show": "Näytä",
+	"select_an_option": "Valitse vaihtoehto",
+	"select_user": "Valitse käyttäjä",
+	"error": "Virhe",
+	"select_an_accent_color_to_customize_the_appearance_of_pocket_id": "Valitse korostusväri Pocket ID:n ulkoasun mukauttamiseksi.",
+	"accent_color": "Korostusväri",
+	"custom_accent_color": "Mukautettu korostusväri",
+	"custom_accent_color_description": "Syötä mukautettu väri käyttämällä CSS-väriformaatteja (esim. hex, rgb, hsl).",
+	"color_value": "Väriarvo",
+	"apply": "Käytä",
+	"signup_token": "Rekisteröitymistunnus",
+	"create_a_signup_token_to_allow_new_user_registration": "Luo rekisteröitymistunnus, jotta uudet käyttäjät voivat rekisteröityä.",
+	"usage_limit": "Käyttöraja",
+	"number_of_times_token_can_be_used": "Kuinka monta kertaa rekisteröitymistunnusta voidaan käyttää.",
+	"expires": "Vanhenee",
+	"signup": "Rekisteröidy",
+	"user_creation": "Käyttäjän luominen",
+	"configure_user_creation": "Hallitse käyttäjien luomisen asetuksia, mukaan lukien rekisteröitymistavat ja uusien käyttäjien oletusluvat.",
+	"user_creation_groups_description": "Määritä nämä ryhmät automaattisesti uusille käyttäjille rekisteröitymisen yhteydessä.",
+	"user_creation_claims_description": "Määritä nämä mukautetut vaatimukset automaattisesti uusille käyttäjille rekisteröitymisen yhteydessä.",
+	"user_creation_updated_successfully": "Käyttäjän luomisen asetukset päivitetty onnistuneesti.",
+	"signup_disabled_description": "Käyttäjien rekisteröityminen on kokonaan estetty. Vain järjestelmänvalvojat voivat luoda uusia käyttäjätilejä.",
+	"signup_requires_valid_token": "Tilisi luomiseen tarvitaan voimassa oleva rekisteröitymistunnus",
+	"validating_signup_token": "Kirjautumistunnuksen validointi",
+	"go_to_login": "Siirry kirjautumiseen",
+	"signup_to_appname": "Rekisteröidy palveluun {appName}",
+	"create_your_account_to_get_started": "Luo käyttäjä alottaaksesi.",
+	"initial_account_creation_description": "Luo tili aloittaaksesi. Voit asettaa pääsyavaimen myöhemmin.",
+	"setup_your_passkey": "Määritä pääsyavain",
+	"create_a_passkey_to_securely_access_your_account": "Luo pääsyavain, jolla voit kirjautua sisään tiliisi turvallisesti. Tämä tulee olemaan ensisijainen tapasi kirjautua sisään.",
+	"skip_for_now": "Ohita toistaiseksi",
+	"account_created": "Tili luotu",
+	"enable_user_signups": "Ota käyttäjien rekisteröityminen käyttöön",
+	"enable_user_signups_description": "Päätä, miten käyttäjät voivat rekisteröidä uusia tilejä Pocket ID:ssä.",
+	"user_signups_are_disabled": "Käyttäjien rekisteröityminen on tällä hetkellä pois käytöstä",
+	"create_signup_token": "Luo rekisteröitymistunnus",
+	"view_active_signup_tokens": "Näytä aktiiviset rekisteröitymistunnukset",
+	"manage_signup_tokens": "Hallitse rekisteröitymistunnuksia",
+	"view_and_manage_active_signup_tokens": "Tarkastele ja hallitse aktiivisia rekisteröitymistunnuksia.",
+	"signup_token_deleted_successfully": "Rekisteröitymistunnus poistettu onnistuneesti.",
+	"expired": "Vanhentunut",
+	"used_up": "Käytetty loppuun",
+	"active": "Aktiivinen",
+	"usage": "Käyttö",
+	"created": "Luotu",
+	"token": "Tunnus",
+	"loading": "Ladataan",
+	"delete_signup_token": "Poista rekisteröitymistunnus",
+	"are_you_sure_you_want_to_delete_this_signup_token": "Haluatko varmasti poistaa tämän rekisteröitymistunnuksen? Tätä toimintoa ei voi peruuttaa.",
+	"signup_with_token": "Rekisteröidy tunnuksella",
+	"signup_with_token_description": "Käyttäjät voivat rekisteröityä vain käyttämällä järjestelmänvalvojan luomaa voimassa olevaa rekisteröitymistunnusta.",
+	"signup_open": "Avoin rekisteröityminen",
+	"signup_open_description": "Kuka tahansa voi luoda uuden tilin ilman rajoituksia.",
+	"of": "/",
+	"skip_passkey_setup": "Ohita pääsyavaimen määritys",
+	"skip_passkey_setup_description": "On erittäin suositeltavaa asettaa pääsyavain, koska ilman sitä tilisi lukkiutuu heti, kun istunto vanhenee.",
+	"my_apps": "Omat sovellukset",
+	"no_apps_available": "Ei sovelluksia saatavilla",
+	"contact_your_administrator_for_app_access": "Ota yhteyttä järjestelmänvalvojaan saadaksesi pääsyn sovelluksiin.",
+	"launch": "Avaa",
+	"client_launch_url": "Asiakkaan käynnistys-URL",
+	"client_launch_url_description": "URL-osoite, joka avautuu, kun käyttäjä käynnistää sovelluksen Omat sovellukset -sivulta.",
+	"client_name_description": "Asiakkaan nimi, joka näkyy Pocket ID käyttöliittymässä.",
+	"revoke_access": "Peru käyttöoikeus",
+	"revoke_access_description": "Peruuta käyttöoikeus palveluun <b>{clientName}</b>. <b>{clientName}</b> palvelu ei voi enää käyttää tilisi tietoja.",
+	"revoke_access_successful": "Pääsy palveluun {clientName} on peruutettu onnistuneesti.",
+	"last_signed_in_ago": "Viimeksi kirjautunut {time} sitten",
+	"invalid_client_id": "Asiakastunnus voi sisältää vain kirjaimia, numeroita, alaviivoja ja väliviivoja",
+	"custom_client_id_description": "Aseta mukautettu asiakastunnus, jos sovelluksesi sitä vaatii. Muussa tapauksessa jätä kenttä tyhjäksi, jotta järjestelmä luo satunnaisen tunnuksen.",
+	"generated": "Luotu",
+	"administration": "Ylläpito",
+	"group_rdn_attribute_description": "Ryhmien erottavassa nimessä (DN) käytetty attribuutti.",
+	"display_name_attribute": "Näytönimien attribuutti",
+	"display_name": "Näyttönimi",
+	"configure_application_images": "Määritä sovelluksen kuvat",
+	"ui_config_disabled_info_title": "UI-asetukset poistettu käytöstä",
+	"ui_config_disabled_info_description": "Käyttöliittymän asetukset on poistettu käytöstä, koska sovelluksen asetuksia hallitaan ympäristömuuttujien avulla. Joitakin asetuksia ei ehkä voi muokata.",
+	"logo_from_url_description": "Liitä suora kuvan URL-osoite (svg, png, webp). Löydät kuvakkeita osoitteesta <link  href=\"https://selfh.st/icons\">Selfh.st Icons</link> tai <link href=\"https://dashboardicons.com\">Dashboard Icons</link>.",
+	"invalid_url": "Virheellinen URL-osoite",
+	"require_user_email": "Vaadi sähköpostiosoite",
+	"require_user_email_description": "Vaatii käyttäjiltä sähköpostiosoitteen. Jos tämä asetus on pois käytöstä, käyttäjät, joilla ei ole sähköpostiosoitetta, eivät voi käyttää ominaisuuksia, jotka edellyttävät sähköpostiosoitetta.",
+	"view": "Näytä",
+	"toggle_columns": "Näytä sarakkeet",
+	"locale": "Kieli",
 	"ldap_id": "LDAP ID",
-	"reauthentication": "Re-authentication",
-	"clear_filters": "Clear Filters",
-	"default_profile_picture": "Default Profile Picture",
-	"light": "Light",
-	"dark": "Dark",
-	"system": "System"
+	"reauthentication": "Uudelleentodentaminen",
+	"clear_filters": "Tyhjennä suodattimet",
+	"default_profile_picture": "Oletusprofiilikuva",
+	"light": "Vaalea",
+	"dark": "Tumma",
+	"system": "Järjestelmä"
 }

frontend/messages/fr.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Photo de profil",
 	"profile_picture_is_managed_by_ldap_server": "La photo de profil est gérée par le serveur LDAP et ne peut pas être modifiée ici.",
 	"click_profile_picture_to_upload_custom": "Cliquez sur la photo de profil pour télécharger une photo depuis votre ordinateur.",
-	"image_should_be_in_format": "L'image doit être au format PNG ou JPEG.",
+	"image_should_be_in_format": "L'image doit être au format PNG, JPEG ou WEBP.",
 	"items_per_page": "Éléments par page",
 	"no_items_found": "Aucune donnée trouvée",
 	"select_items": "Sélectionner des éléments...",

frontend/messages/it.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Immagine del profilo",
 	"profile_picture_is_managed_by_ldap_server": "L'immagine del profilo è gestita dal server LDAP e non può essere modificata qui.",
 	"click_profile_picture_to_upload_custom": "Clicca sull'immagine del profilo per caricarne una personalizzata dai tuoi file.",
-	"image_should_be_in_format": "L'immagine deve essere in formato PNG o JPEG.",
+	"image_should_be_in_format": "L'immagine deve essere in formato PNG, JPEG o WEBP.",
 	"items_per_page": "Elementi per pagina",
 	"no_items_found": "Nessun elemento trovato",
 	"select_items": "Scegli gli articoli...",

frontend/messages/ja.json

@@ -14,7 +14,7 @@
 	"profile_picture": "プロフィール画像",
 	"profile_picture_is_managed_by_ldap_server": "プロフィール画像はLDAPサーバーによって管理されており、ここでは変更できません。",
 	"click_profile_picture_to_upload_custom": "プロフィール画像をクリックして、ファイルからカスタム画像をアップロードします。",
-	"image_should_be_in_format": "画像はPNGまたはJPEG形式である必要があります。",
+	"image_should_be_in_format": "画像はPNG、JPEG、またはWEBP形式である必要があります。",
 	"items_per_page": "ページあたりの表示件数",
 	"no_items_found": "項目が見つかりません",
 	"select_items": "項目を選択…",

frontend/messages/ko.json

@@ -14,7 +14,7 @@
 	"profile_picture": "프로필 사진",
 	"profile_picture_is_managed_by_ldap_server": "프로필 사진이 LDAP 서버에서 관리되어 여기에서 변경할 수 없습니다.",
 	"click_profile_picture_to_upload_custom": "프로필 사진을 클릭하여 파일에서 사용자 정의 사진을 업로드하세요.",
-	"image_should_be_in_format": "이미지는 PNG 또는 JPEG 형식이어야 합니다.",
+	"image_should_be_in_format": "이미지는 PNG, JPEG 또는 WEBP 형식이어야 합니다.",
 	"items_per_page": "페이지당 항목",
 	"no_items_found": "항목 없음",
 	"select_items": "항목을 선택하세요...",

frontend/messages/nl.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Profielfoto",
 	"profile_picture_is_managed_by_ldap_server": "De profielfoto wordt beheerd door de LDAP-server en kan hier niet worden gewijzigd.",
 	"click_profile_picture_to_upload_custom": "Klik op de profielfoto om een aangepaste foto uit je bestanden te uploaden.",
-	"image_should_be_in_format": "De afbeelding moet in PNG- of JPEG-formaat zijn.",
+	"image_should_be_in_format": "De afbeelding moet in PNG-, JPEG- of WEBP-formaat zijn.",
 	"items_per_page": "Aantal per pagina",
 	"no_items_found": "Geen items gevonden",
 	"select_items": "Kies items...",

frontend/messages/pl.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Zdjęcie profilowe",
 	"profile_picture_is_managed_by_ldap_server": "Zdjęcie profilowe jest zarządzane przez serwer LDAP i nie można go tutaj zmienić.",
 	"click_profile_picture_to_upload_custom": "Kliknij zdjęcie profilowe, aby przesłać własne z plików.",
-	"image_should_be_in_format": "Obraz powinien być w formacie PNG lub JPEG.",
+	"image_should_be_in_format": "Obraz powinien być w formacie PNG, JPEG lub WEBP.",
 	"items_per_page": "Elementów na stronę",
 	"no_items_found": "Nie znaleziono żadnych elementów",
 	"select_items": "Wybierz elementy...",

frontend/messages/pt-BR.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Foto de Perfil",
 	"profile_picture_is_managed_by_ldap_server": "A foto de perfil é gerenciada pelo servidor LDAP e não pode ser alterada aqui.",
 	"click_profile_picture_to_upload_custom": "Clique na foto de perfil para enviar uma imagem personalizada dos seus arquivos.",
-	"image_should_be_in_format": "A imagem deve estar no formato PNG ou JPEG.",
+	"image_should_be_in_format": "A imagem deve estar no formato PNG, JPEG ou WEBP.",
 	"items_per_page": "Itens por página",
 	"no_items_found": "Nada foi encontrado",
 	"select_items": "Selecione os itens...",

frontend/messages/ru.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Изображение профиля",
 	"profile_picture_is_managed_by_ldap_server": "Изображение профиля управляется сервером LDAP и не может быть изменено здесь.",
 	"click_profile_picture_to_upload_custom": "Нажмите на изображение профиля, чтобы загрузить его из ваших файлов.",
-	"image_should_be_in_format": "Изображение должно быть в формате PNG или JPEG.",
+	"image_should_be_in_format": "Изображение должно быть в формате PNG, JPEG или WEBP.",
 	"items_per_page": "Элементов на странице",
 	"no_items_found": "Элементы не найдены",
 	"select_items": "Выбрать элементы...",
@@ -155,7 +155,7 @@
 	"are_you_sure_you_want_to_revoke_the_api_key_apikeyname": "Вы уверены, что хотите отозвать ключ API \"{apiKeyName}\"? Любые интеграции, использующие этот ключ, перестанут работать.",
 	"last_used": "Последнее использование",
 	"actions": "Действия",
-	"images_updated_successfully": "Изображения обновились, но может занять пару минут.",
+	"images_updated_successfully": "Изображения успешно обновлены. Это может занять пару минут для обновления.",
 	"general": "Общее",
 	"configure_smtp_to_send_emails": "Включить уведомления пользователей по электронной почте при обнаружении логина с нового устройства или локации.",
 	"ldap": "LDAP",
@@ -331,10 +331,10 @@
 	"token_sign_in": "Вход с помощью токена",
 	"client_authorization": "Авторизация клиента",
 	"new_client_authorization": "Авторизация нового клиента",
-	"device_code_authorization": "Авторизация кода устройства",
-	"new_device_code_authorization": "Авторизация нового кода устройства",
-	"passkey_added": "Добавлен пароль",
-	"passkey_removed": "Удален ключ доступа",
+	"device_code_authorization": "Авторизация через код устройства",
+	"new_device_code_authorization": "Новая авторизация через код устройства",
+	"passkey_added": "Пасскей добавлен",
+	"passkey_removed": "Пасскей удален",
 	"disable_animations": "Отключить анимации",
 	"turn_off_ui_animations": "Отключить все анимации в интерфейсе.",
 	"user_disabled": "Учетная запись отключена",
@@ -467,7 +467,7 @@
 	"reauthentication": "Повторная аутентификация",
 	"clear_filters": "Сбросить фильтры",
 	"default_profile_picture": "Изображение профиля по умолчанию",
-	"light": "Свет",
-	"dark": "Темный",
-	"system": "Система"
+	"light": "Светлая",
+	"dark": "Темная",
+	"system": "Системная"
 }

frontend/messages/sv.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Profilbild",
 	"profile_picture_is_managed_by_ldap_server": "Profilbilden hanteras av LDAP-servern och kan inte ändras här.",
 	"click_profile_picture_to_upload_custom": "Klicka på profilbilden för att ladda upp en anpassad bild från dina filer.",
-	"image_should_be_in_format": "Bilden ska vara i PNG- eller JPEG-format.",
+	"image_should_be_in_format": "Bilden ska vara i PNG-, JPEG- eller WEBP-format.",
 	"items_per_page": "Objekt per sida",
 	"no_items_found": "Inga objekt hittades",
 	"select_items": "Välj objekt...",

frontend/messages/tr.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Profil resmi",
 	"profile_picture_is_managed_by_ldap_server": "Profil resmi LDAP sunucusu tarafından yönetilmektedir ve burada değiştirilemez.",
 	"click_profile_picture_to_upload_custom": "Özel bir resim yüklemek için profil resmine tıklayın.",
-	"image_should_be_in_format": "Resim PNG veya JPEG formatın’da olmalıdır.",
+	"image_should_be_in_format": "Resim PNG, JPEG veya WEBP formatın’da olmalıdır.",
 	"items_per_page": "Sayfa başına öğe sayısı",
 	"no_items_found": "Hiçbir öğe bulunamadı",
 	"select_items": "Öğeleri seçin...",

frontend/messages/uk.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Фотографія профілю",
 	"profile_picture_is_managed_by_ldap_server": "Фотографія профілю управляється сервером LDAP і не може бути змінена тут.",
 	"click_profile_picture_to_upload_custom": "Натисніть на зображення профілю, щоб завантажити власне зображення.",
-	"image_should_be_in_format": "Зображення повинно бути у форматі PNG або JPEG.",
+	"image_should_be_in_format": "Зображення повинно бути у форматі PNG, JPEG або WEBP.",
 	"items_per_page": "Елементів на сторінці",
 	"no_items_found": "Нічого не знайдено",
 	"select_items": "Виберіть елементи...",

frontend/messages/vi.json

@@ -14,7 +14,7 @@
 	"profile_picture": "Ảnh đại diện",
 	"profile_picture_is_managed_by_ldap_server": "Hình đại diện được quản lý bởi máy chủ LDAP và không thể thay đổi tại đây.",
 	"click_profile_picture_to_upload_custom": "Nhấp vào hình ảnh hồ sơ để tải lên hình ảnh tùy chỉnh.",
-	"image_should_be_in_format": "Hình ảnh phải ở định dạng PNG hoặc JPEG.",
+	"image_should_be_in_format": "Hình ảnh phải ở định dạng PNG, JPEG hoặc WEBP.",
 	"items_per_page": "Số kết quả mỗi trang",
 	"no_items_found": "Không tìm thấy kết quả nào",
 	"select_items": "Chọn các mục...",

frontend/messages/zh-CN.json

@@ -14,7 +14,7 @@
 	"profile_picture": "头像",
 	"profile_picture_is_managed_by_ldap_server": "头像由 LDAP 服务器管理，无法在此处更改。",
 	"click_profile_picture_to_upload_custom": "点击头像来从文件中上传您的自定义头像。",
-	"image_should_be_in_format": "图片应为 PNG 或 JPEG 格式。",
+	"image_should_be_in_format": "图片应为 PNG、JPEG 或 WEBP 格式。",
 	"items_per_page": "每页条数",
 	"no_items_found": "这里暂时空空如也",
 	"select_items": "选择项目……",

frontend/messages/zh-TW.json

@@ -14,7 +14,7 @@
 	"profile_picture": "個人資料圖片",
 	"profile_picture_is_managed_by_ldap_server": "這張個人資料圖片是由 LDAP 伺服器管理，無法在此變更。",
 	"click_profile_picture_to_upload_custom": "點擊個人資料圖片，從您的檔案中上傳自訂圖片。",
-	"image_should_be_in_format": "圖片應為 PNG 或 JPEG 格式。",
+	"image_should_be_in_format": "圖片應為 PNG、JPEG 或 WEBP 格式。",
 	"items_per_page": "每頁項目數",
 	"no_items_found": "找不到任何項目",
 	"select_items": "選擇項目...",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocket-id-frontend",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -21,7 +21,7 @@
     "date-fns": "^4.1.0",
     "jose": "^6.1.2",
     "qrcode": "^1.5.4",
-    "runed": "^0.36.0",
+    "runed": "^0.37.0",
     "sveltekit-superforms": "^2.28.1",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.1.13"
@@ -31,7 +31,7 @@
     "@inlang/plugin-m-function-matcher": "^2.1.0",
     "@inlang/plugin-message-format": "^4.0.0",
     "@internationalized/date": "^3.10.0",
-    "@lucide/svelte": "^0.554.0",
+    "@lucide/svelte": "^0.555.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.49.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -45,11 +45,11 @@
     "formsnap": "^2.0.1",
     "globals": "^16.5.0",
     "mode-watcher": "^1.1.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.3",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "rollup": "^4.53.3",
-    "svelte": "^5.44.0",
+    "svelte": "^5.45.2",
     "svelte-check": "^4.3.4",
     "svelte-sonner": "^1.0.6",
     "tailwind-variants": "^3.2.2",

frontend/src/app.css

@@ -1,6 +1,8 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+@variant dark (&:where(.dark, .dark *));
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still

frontend/src/lib/components/audit-log-list.svelte

@@ -6,6 +6,7 @@
 	import type { AdvancedTableColumn } from '$lib/types/advanced-table.type';
 	import type { AuditLog, AuditLogFilter } from '$lib/types/audit-log.type';
 	import { translateAuditLogEvent } from '$lib/utils/audit-log-translator';
+	import { untrack } from 'svelte';
 
 	let {
 		isAdmin = false,
@@ -61,7 +62,11 @@
 
 	$effect(() => {
 		if (filters) {
-			tableRef?.refresh();
+			filters.userID;
+			filters.event;
+			filters.location;
+			filters.clientName;
+			untrack(() => tableRef?.refresh());
 		}
 	});
 

frontend/src/lib/components/form/checkbox-with-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Checkbox } from '$lib/components/ui/checkbox';
-	import * as Field from '$lib/components/ui/field';
+	import { Label } from '$lib/components/ui/label';
 
 	let {
 		id,
@@ -26,10 +26,14 @@
 		onCheckedChange={(v) => onCheckedChange && onCheckedChange(v == true)}
 		bind:checked
 	/>
-	<Field.Field class="gap-0">
-		<Field.Label for={id}>{label}</Field.Label>
+	<div class="grid gap-1.5 leading-none">
+		<Label for={id} class="mb-0 text-sm leading-none font-medium">
+			{label}
+		</Label>
 		{#if description}
-			<Field.Description>{description}</Field.Description>
+			<p class="text-muted-foreground text-[0.8rem]">
+				{description}
+			</p>
 		{/if}
-	</Field.Field>
+	</div>
 </div>

frontend/src/lib/components/form/form-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import DatePicker from '$lib/components/form/date-picker.svelte';
-	import * as Field from '$lib/components/ui/field';
 	import { Input, type FormInputEvent } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
 	import { m } from '$lib/paraglide/messages';
 	import type { FormInput } from '$lib/utils/form-util';
 	import { LucideExternalLink } from '@lucide/svelte';
@@ -34,12 +34,12 @@
 	const id = label?.toLowerCase().replace(/ /g, '-');
 </script>
 
-<Field.Field data-disabled={disabled} {...restProps}>
+<div {...restProps}>
 	{#if label}
-		<Field.Label required={input?.required} for={id}>{label}</Field.Label>
+		<Label required={input?.required} class="mb-0" for={id}>{label}</Label>
 	{/if}
 	{#if description}
-		<Field.Description>
+		<p class="text-muted-foreground mt-1 text-xs">
 			{description}
 			{#if docsLink}
 				<a
@@ -51,26 +51,28 @@
 					<LucideExternalLink class="inline size-3 align-text-top" />
 				</a>
 			{/if}
-		</Field.Description>
+		</p>
 	{/if}
-	{#if children}
-		{@render children()}
-	{:else if input}
-		{#if type === 'date'}
-			<DatePicker {id} bind:value={input.value as Date} />
-		{:else}
-			<Input
-				aria-invalid={!!input.error}
-				{id}
-				{placeholder}
-				{type}
-				bind:value={input.value}
-				{disabled}
-				oninput={(e) => onInput?.(e)}
-			/>
+	<div class={label || description ? 'mt-2' : ''}>
+		{#if children}
+			{@render children()}
+		{:else if input}
+			{#if type === 'date'}
+				<DatePicker {id} bind:value={input.value as Date} />
+			{:else}
+				<Input
+					aria-invalid={!!input.error}
+					{id}
+					{placeholder}
+					{type}
+					bind:value={input.value}
+					{disabled}
+					oninput={(e) => onInput?.(e)}
+				/>
+			{/if}
 		{/if}
-	{/if}
-	{#if input?.error}
-		<Field.Error>{input.error}</Field.Error>
-	{/if}
-</Field.Field>
+		{#if input?.error}
+			<p class="text-destructive mt-1 text-start text-xs">{input.error}</p>
+		{/if}
+	</div>
+</div>

frontend/src/lib/components/form/profile-picture-settings.svelte

@@ -5,8 +5,7 @@
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import { cachedProfilePicture } from '$lib/utils/cached-image-util';
-	import { LucideRefreshCw, LucideUpload } from '@lucide/svelte';
-	import { Spinner } from '$lib/components/ui/spinner';
+	import { LucideLoader, LucideRefreshCw, LucideUpload } from '@lucide/svelte';
 	import { onMount } from 'svelte';
 	import { openConfirmDialog } from '../confirm-dialog';
 
@@ -89,7 +88,7 @@
 					</Avatar.Root>
 					<div class="absolute inset-0 flex items-center justify-center">
 						{#if isLoading}
-							<Spinner class="size-5" />
+							<LucideLoader class="size-5 animate-spin" />
 						{:else}
 							<LucideUpload class="size-5 opacity-0 transition-opacity group-hover:opacity-100" />
 						{/if}

frontend/src/lib/components/form/searchable-multi-select.svelte

@@ -3,10 +3,9 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Command from '$lib/components/ui/command';
 	import * as Popover from '$lib/components/ui/popover';
-	import { Spinner } from '$lib/components/ui/spinner';
 	import { cn } from '$lib/utils/style';
 	import { m } from '$lib/paraglide/messages';
-	import { LucideCheck, LucideChevronDown } from '@lucide/svelte';
+	import { LoaderCircle, LucideCheck, LucideChevronDown } from '@lucide/svelte';
 	import type { FormEventHandler } from 'svelte/elements';
 
 	type Item = {
@@ -109,7 +108,7 @@
 			<Command.Empty>
 				{#if isLoading}
 					<div class="flex w-full items-center justify-center py-2">
-						<Spinner />
+						<LoaderCircle class="size-4 animate-spin" />
 					</div>
 				{:else}
 					{m.no_items_found()}

frontend/src/lib/components/form/searchable-select.svelte

@@ -2,10 +2,9 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Command from '$lib/components/ui/command';
 	import * as Popover from '$lib/components/ui/popover';
-	import { Spinner } from '$lib/components/ui/spinner';
 	import { m } from '$lib/paraglide/messages';
 	import { cn } from '$lib/utils/style';
-	import { LucideCheck, LucideChevronDown } from '@lucide/svelte';
+	import { LoaderCircle, LucideCheck, LucideChevronDown } from '@lucide/svelte';
 	import { tick } from 'svelte';
 	import type { FormEventHandler, HTMLAttributes } from 'svelte/elements';
 
@@ -91,7 +90,7 @@
 			<Command.Empty>
 				{#if isLoading}
 					<div class="flex w-full justify-center">
-						<Spinner />
+						<LoaderCircle class="size-4 animate-spin" />
 					</div>
 				{:else}
 					{m.no_items_found()}

frontend/src/lib/components/header/header.svelte

@@ -39,7 +39,9 @@
 			{/if}
 		</div>
 		<div class="flex items-center justify-between gap-4">
-			<ModeSwitcher />
+			{#if !isAuthPage}
+				<ModeSwitcher />
+			{/if}
 			{#if $userStore?.id}
 				<HeaderAvatar />
 			{/if}

frontend/src/lib/components/header/mode-switcher.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import SunIcon from '@lucide/svelte/icons/sun';
 	import MoonIcon from '@lucide/svelte/icons/moon';
+	import SunIcon from '@lucide/svelte/icons/sun';
 
-	import { mode, resetMode, setMode } from 'mode-watcher';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { m } from '$lib/paraglide/messages';
+	import { mode, resetMode, setMode } from 'mode-watcher';
 
 	const isDark = $derived(mode.current === 'dark');
 </script>

frontend/src/lib/components/one-time-link-modal.svelte

@@ -4,7 +4,7 @@
 	import Qrcode from '$lib/components/qrcode/qrcode.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Field from '$lib/components/ui/field';
+	import Label from '$lib/components/ui/label/label.svelte';
 	import * as Select from '$lib/components/ui/select/index.js';
 	import { Separator } from '$lib/components/ui/separator';
 	import { m } from '$lib/paraglide/messages';
@@ -78,14 +78,14 @@
 		</Dialog.Header>
 
 		{#if oneTimeLink === null}
-			<Field.Field>
-				<Field.Label for="expiration">{m.expiration()}</Field.Label>
+			<div>
+				<Label for="expiration">{m.expiration()}</Label>
 				<Select.Root
 					type="single"
 					value={Object.keys(availableExpirations)[0]}
 					onValueChange={(v) => (selectedExpiration = v! as keyof typeof availableExpirations)}
 				>
-					<Select.Trigger id="expiration" class="h-9 w-full">
+					<Select.Trigger id="expiration" class="w-full h-9">
 						{selectedExpiration}
 					</Select.Trigger>
 					<Select.Content>
@@ -94,7 +94,7 @@
 						{/each}
 					</Select.Content>
 				</Select.Root>
-			</Field.Field>
+			</div>
 			<Dialog.Footer class="mt-2">
 				{#if $appConfigStore.emailOneTimeAccessAsAdminEnabled}
 					<Button
@@ -112,10 +112,10 @@
 		{:else}
 			<div class="flex flex-col items-center gap-2">
 				<CopyToClipboard value={code!}>
-					<p class="font-code text-3xl">{code}</p>
+					<p class="text-3xl font-code">{code}</p>
 				</CopyToClipboard>
 
-				<div class="text-muted-foreground my-2 flex items-center justify-center gap-3">
+				<div class="flex items-center justify-center gap-3 my-2 text-muted-foreground">
 					<Separator />
 					<p class="text-xs text-nowrap">{m.or_visit()}</p>
 					<Separator />

frontend/src/lib/components/passkey-row.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
-	import * as Item from '$lib/components/ui/item/index.js';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import { LucideCalendar, LucidePencil, LucideTrash, type Icon as IconType } from '@lucide/svelte';
@@ -20,54 +19,61 @@
 	} = $props();
 </script>
 
-<Item.Root variant="muted" class="hover:bg-muted transition-colors">
-	<Item.Media class="bg-primary/10 text-primary rounded-lg p-2">
-		{#if icon}{@const Icon = icon}
-			<Icon class="size-5" />
-		{/if}
-	</Item.Media>
-	<Item.Content>
-		<Item.Title>{label}</Item.Title>
-		{#if description}
-			<Item.Description class="flex items-center">
-				<LucideCalendar class="mr-1 size-3" />
-				{description}
-			</Item.Description>
-		{/if}
-	</Item.Content>
-	<Item.Actions>
-		<Tooltip.Provider>
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Button
-						onclick={onRename}
-						size="icon"
-						variant="ghost"
-						class="size-8"
-						aria-label={m.rename()}
-					>
-						<LucidePencil class="size-4" />
-					</Button>
-				</Tooltip.Trigger>
-				<Tooltip.Content>{m.rename()}</Tooltip.Content>
-			</Tooltip.Root>
-		</Tooltip.Provider>
+<div class="bg-card hover:bg-muted/50 group rounded-lg p-3 transition-colors">
+	<div class="flex items-center justify-between">
+		<div class="flex items-start gap-3">
+			<div class="bg-primary/10 text-primary mt-1 rounded-lg p-2">
+				{#if icon}{@const Icon = icon}
+					<Icon class="size-5" />
+				{/if}
+			</div>
+			<div>
+				<div class="flex items-center gap-2">
+					<p class="font-medium">{label}</p>
+				</div>
+				{#if description}
+					<div class="text-muted-foreground mt-1 flex items-center text-xs">
+						<LucideCalendar class="mr-1 size-3" />
+						{description}
+					</div>
+				{/if}
+			</div>
+		</div>
 
-		<Tooltip.Provider>
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Button
-						onclick={onDelete}
-						size="icon"
-						variant="ghost"
-						class="hover:bg-destructive/10 hover:text-destructive size-8"
-						aria-label={m.delete()}
-					>
-						<LucideTrash class="size-4" />
-					</Button>
-				</Tooltip.Trigger>
-				<Tooltip.Content>{m.delete()}</Tooltip.Content>
-			</Tooltip.Root>
-		</Tooltip.Provider>
-	</Item.Actions>
-</Item.Root>
+		<div class="flex items-center gap-2">
+			<Tooltip.Provider>
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						<Button
+							onclick={onRename}
+							size="icon"
+							variant="ghost"
+							class="size-8"
+							aria-label={m.rename()}
+						>
+							<LucidePencil class="size-4" />
+						</Button>
+					</Tooltip.Trigger>
+					<Tooltip.Content>{m.rename()}</Tooltip.Content>
+				</Tooltip.Root></Tooltip.Provider
+			>
+
+			<Tooltip.Provider>
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						<Button
+							onclick={onDelete}
+							size="icon"
+							variant="ghost"
+							class="hover:bg-destructive/10 hover:text-destructive size-8"
+							aria-label={m.delete()}
+						>
+							<LucideTrash class="size-4" />
+						</Button>
+					</Tooltip.Trigger>
+					<Tooltip.Content>{m.delete()}</Tooltip.Content>
+				</Tooltip.Root></Tooltip.Provider
+			>
+		</div>
+	</div>
+</div>

frontend/src/lib/components/scope-item.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import * as Item from '$lib/components/ui/item/index.js';
 	import type { Icon as IconType } from '@lucide/svelte';
-
 	interface Props {
 		icon: typeof IconType;
 		name: string;
@@ -13,12 +11,10 @@
 	const SvelteComponent = $derived(icon);
 </script>
 
-<Item.Root size="sm">
-	<Item.Media variant="icon">
-		<SvelteComponent class="size-4" />
-	</Item.Media>
-	<Item.Content>
-		<Item.Title class="font-medium">{name}</Item.Title>
-		<Item.Description class="text-xs">{description}</Item.Description>
-	</Item.Content>
-</Item.Root>
+<div class="flex items-center">
+	<div class="bg-muted mr-5 rounded-lg p-2"><SvelteComponent /></div>
+	<div class="text-start">
+		<h3 class="font-semibold">{name}</h3>
+		<p class="text-muted-foreground text-sm">{description}</p>
+	</div>
+</div>

frontend/src/lib/components/scope-list.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import * as Item from '$lib/components/ui/item/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import { LucideMail, LucideUser, LucideUsers } from '@lucide/svelte';
 	import ScopeItem from './scope-item.svelte';
@@ -7,7 +6,7 @@
 	let { scope }: { scope: string } = $props();
 </script>
 
-<Item.Group data-testid="scopes">
+<div class="flex flex-col gap-3" data-testid="scopes">
 	{#if scope!.includes('email')}
 		<ScopeItem icon={LucideMail} name={m.email()} description={m.view_your_email_address()} />
 	{/if}
@@ -25,4 +24,4 @@
 			description={m.view_the_groups_you_are_a_member_of()}
 		/>
 	{/if}
-</Item.Group>
+</div>

frontend/src/lib/components/signup/signup-token-modal.svelte

@@ -4,8 +4,8 @@
 	import Qrcode from '$lib/components/qrcode/qrcode.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Field from '$lib/components/ui/field';
 	import { Input } from '$lib/components/ui/input';
+	import Label from '$lib/components/ui/label/label.svelte';
 	import * as Select from '$lib/components/ui/select/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
@@ -67,8 +67,8 @@
 
 		{#if signupToken === null}
 			<div class="space-y-4">
-				<Field.Field>
-					<Field.Label for="expiration">{m.expiration()}</Field.Label>
+				<div>
+					<Label for="expiration">{m.expiration()}</Label>
 					<Select.Root
 						type="single"
 						value={Object.keys(availableExpirations)[0]}
@@ -83,13 +83,13 @@
 							{/each}
 						</Select.Content>
 					</Select.Root>
-				</Field.Field>
+				</div>
 
-				<Field.Field>
-					<Field.Label for="usage-limit">{m.usage_limit()}</Field.Label>
-					<Field.Description>
+				<div>
+					<Label class="mb-0" for="usage-limit">{m.usage_limit()}</Label>
+					<p class="text-muted-foreground mt-1 mb-2 text-xs">
 						{m.number_of_times_token_can_be_used()}
-					</Field.Description>
+					</p>
 					<Input
 						id="usage-limit"
 						type="number"
@@ -98,7 +98,7 @@
 						bind:value={usageLimit}
 						class="h-9"
 					/>
-				</Field.Field>
+				</div>
 			</div>
 
 			<Dialog.Footer class="mt-4">

frontend/src/lib/components/ui/button/button.svelte

@@ -42,7 +42,7 @@
 </script>
 
 <script lang="ts">
-	import { Spinner } from '$lib/components/ui/spinner';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
 	import { onMount } from 'svelte';
 
 	let {
@@ -97,7 +97,7 @@
 		{...restProps}
 	>
 		{#if isLoading}
-			<Spinner />
+			<LoaderCircle class="size-4 animate-spin" />
 		{/if}
 		{@render children?.()}
 	</a>
@@ -112,7 +112,7 @@
 		{...restProps}
 	>
 		{#if isLoading}
-			<Spinner />
+			<LoaderCircle class="size-4 animate-spin" />
 		{/if}
 		{@render children?.()}
 	</button>

frontend/src/lib/components/ui/field/field-content.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="field-content"
-	class={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/field/field-description.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
-</script>
-
-<p
-	bind:this={ref}
-	data-slot="field-description"
-	class={cn(
-		'text-muted-foreground -mt-1 mb-0 text-xs leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-		'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</p>

frontend/src/lib/components/ui/field/field-error.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { Snippet } from "svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		errors,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		children?: Snippet;
-		errors?: { message?: string }[];
-	} = $props();
-
-	const hasContent = $derived.by(() => {
-		// has slotted error
-		if (children) return true;
-
-		// no errors
-		if (!errors) return false;
-
-		// has an error but no message
-		if (errors.length === 1 && !errors[0]?.message) {
-			return false;
-		}
-
-		return true;
-	});
-
-	const isMultipleErrors = $derived(errors && errors.length > 1);
-	const singleErrorMessage = $derived(errors && errors.length === 1 && errors[0]?.message);
-</script>
-
-{#if hasContent}
-	<div
-		bind:this={ref}
-		role="alert"
-		data-slot="field-error"
-		class={cn("text-destructive text-sm font-normal", className)}
-		{...restProps}
-	>
-		{#if children}
-			{@render children()}
-		{:else if singleErrorMessage}
-			{singleErrorMessage}
-		{:else if isMultipleErrors}
-			<ul class="ms-4 flex list-disc flex-col gap-1">
-				{#each errors ?? [] as error, index (index)}
-					{#if error?.message}
-						<li>{error.message}</li>
-					{/if}
-				{/each}
-			</ul>
-		{/if}
-	</div>
-{/if}

frontend/src/lib/components/ui/field/field-group.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="field-group"
-	class={cn(
-		"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/field/field-label.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { cn } from '$lib/utils/style.js';
-	import type { ComponentProps } from 'svelte';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		required = false,
-		children,
-		...restProps
-	}: ComponentProps<typeof Label> & {
-		required?: boolean;
-	} = $props();
-</script>
-
-<Label
-	bind:ref
-	data-slot="field-label"
-	{required}
-	class={cn(
-		'group/field-label peer/field-label mt-1 mb-0 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-		'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-		'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</Label>

frontend/src/lib/components/ui/field/field-legend.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = "legend",
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
-		variant?: "legend" | "label";
-	} = $props();
-</script>
-
-<legend
-	bind:this={ref}
-	data-slot="field-legend"
-	data-variant={variant}
-	class={cn(
-		"mb-3 font-medium",
-		"data-[variant=legend]:text-base",
-		"data-[variant=label]:text-sm",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</legend>

frontend/src/lib/components/ui/field/field-separator.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { Snippet } from "svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		children?: Snippet;
-	} = $props();
-
-	const hasContent = $derived(!!children);
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="field-separator"
-	data-content={hasContent}
-	class={cn(
-		"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-		className
-	)}
-	{...restProps}
->
-	<Separator class="absolute inset-0 top-1/2" />
-	{#if children}
-		<span
-			class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
-			data-slot="field-separator-content"
-		>
-			{@render children()}
-		</span>
-	{/if}
-</div>

frontend/src/lib/components/ui/field/field-set.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLFieldsetAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLFieldsetAttributes> = $props();
-</script>
-
-<fieldset
-	bind:this={ref}
-	data-slot="field-set"
-	class={cn(
-		"flex flex-col gap-6",
-		"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</fieldset>

frontend/src/lib/components/ui/field/field-title.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="field-title"
-	class={cn(
-		"flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/field/field.svelte

@@ -1,53 +0,0 @@
-<script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
-
-	export const fieldVariants = tv({
-		base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
-		variants: {
-			orientation: {
-				vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-				horizontal: [
-					"flex-row items-center",
-					"[&>[data-slot=field-label]]:flex-auto",
-					"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
-				],
-				responsive: [
-					"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-					"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-				],
-			},
-		},
-		defaultVariants: {
-			orientation: "vertical",
-		},
-	});
-
-	export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
-</script>
-
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		orientation = "vertical",
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		orientation?: FieldOrientation;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	role="group"
-	data-slot="field"
-	data-orientation={orientation}
-	class={cn(fieldVariants({ orientation }), className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/field/index.ts

@@ -1,33 +0,0 @@
-import Field from "./field.svelte";
-import Set from "./field-set.svelte";
-import Legend from "./field-legend.svelte";
-import Group from "./field-group.svelte";
-import Content from "./field-content.svelte";
-import Label from "./field-label.svelte";
-import Title from "./field-title.svelte";
-import Description from "./field-description.svelte";
-import Separator from "./field-separator.svelte";
-import Error from "./field-error.svelte";
-
-export {
-	Field,
-	Set,
-	Legend,
-	Group,
-	Content,
-	Label,
-	Title,
-	Description,
-	Separator,
-	Error,
-	//
-	Set as FieldSet,
-	Legend as FieldLegend,
-	Group as FieldGroup,
-	Content as FieldContent,
-	Label as FieldLabel,
-	Title as FieldTitle,
-	Description as FieldDescription,
-	Separator as FieldSeparator,
-	Error as FieldError,
-};

frontend/src/lib/components/ui/item/index.ts

@@ -1,34 +0,0 @@
-import Root from "./item.svelte";
-import Group from "./item-group.svelte";
-import Separator from "./item-separator.svelte";
-import Header from "./item-header.svelte";
-import Footer from "./item-footer.svelte";
-import Content from "./item-content.svelte";
-import Title from "./item-title.svelte";
-import Description from "./item-description.svelte";
-import Actions from "./item-actions.svelte";
-import Media from "./item-media.svelte";
-
-export {
-	Root,
-	Group,
-	Separator,
-	Header,
-	Footer,
-	Content,
-	Title,
-	Description,
-	Actions,
-	Media,
-	//
-	Root as Item,
-	Group as ItemGroup,
-	Separator as ItemSeparator,
-	Header as ItemHeader,
-	Footer as ItemFooter,
-	Content as ItemContent,
-	Title as ItemTitle,
-	Description as ItemDescription,
-	Actions as ItemActions,
-	Media as ItemMedia,
-};

frontend/src/lib/components/ui/item/item-actions.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="item-actions"
-	class={cn("flex items-center gap-2", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/item/item-content.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="item-content"
-	class={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/item/item-description.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
-</script>
-
-<p
-	bind:this={ref}
-	data-slot="item-description"
-	class={cn(
-		"text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
-		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</p>

frontend/src/lib/components/ui/item/item-footer.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="item-footer"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/item/item-group.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	role="list"
-	data-slot="item-group"
-	class={cn("group/item-group flex flex-col", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/item/item-header.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="item-header"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/item/item-media.svelte

@@ -1,42 +0,0 @@
-<script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
-
-	export const itemMediaVariants = tv({
-		base: "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
-				image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
-</script>
-
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		variant = "default",
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="item-media"
-	data-variant={variant}
-	class={cn(itemMediaVariants({ variant }), className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/item/item-separator.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { cn } from "$lib/utils/style.js";
-	import type { ComponentProps } from "svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: ComponentProps<typeof Separator> = $props();
-</script>
-
-<Separator
-	bind:ref
-	data-slot="item-separator"
-	orientation="horizontal"
-	class={cn("my-0", className)}
-	{...restProps}
-/>

frontend/src/lib/components/ui/item/item-title.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	role="heading"
-	aria-level="3"
-	data-slot="item-title"
-	class={cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

frontend/src/lib/components/ui/item/item.svelte

@@ -1,60 +0,0 @@
-<script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
-
-	export const itemVariants = tv({
-		base: "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline: "border-border",
-				muted: "bg-muted/50",
-			},
-			size: {
-				default: "gap-4 p-4",
-				sm: "gap-2.5 px-4 py-3",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
-
-	export type ItemSize = VariantProps<typeof itemVariants>["size"];
-	export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
-</script>
-
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { Snippet } from "svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		child,
-		variant,
-		size,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		variant?: ItemVariant;
-		size?: ItemSize;
-	} = $props();
-
-	const mergedProps = $derived({
-		class: cn(itemVariants({ variant, size }), className),
-		"data-slot": "item",
-		"data-variant": variant,
-		"data-size": size,
-		...restProps,
-	});
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div bind:this={ref} {...mergedProps}>
-		{@render mergedProps.children?.()}
-	</div>
-{/if}

frontend/src/lib/components/ui/skeleton/index.ts

@@ -1,7 +1,7 @@
-import Root from "./skeleton.svelte";
+import Root from './skeleton.svelte';
 
 export {
 	Root,
 	//
-	Root as Skeleton,
+	Root as Skeleton
 };

frontend/src/lib/components/ui/skeleton/skeleton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn("bg-accent animate-pulse rounded-md", className)}
+	class={cn('bg-accent animate-pulse rounded-md', className)}
 	{...restProps}
 ></div>

frontend/src/lib/components/ui/spinner/index.ts

@@ -1 +0,0 @@
-export { default as Spinner } from "./spinner.svelte";

frontend/src/lib/components/ui/spinner/spinner.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { cn } from "$lib/utils/style.js";
-	import Loader2Icon from "@lucide/svelte/icons/loader-2";
-	import type { ComponentProps } from "svelte";
-
-	let { class: className, ...restProps }: ComponentProps<typeof Loader2Icon> = $props();
-</script>
-
-<Loader2Icon
-	role="status"
-	aria-label="Loading"
-	class={cn("size-4 animate-spin", className)}
-	{...restProps}
-/>

frontend/src/lib/services/api-service.ts

@@ -1,13 +1,13 @@
 import axios from 'axios';
 
 abstract class APIService {
-  protected api = axios.create({ baseURL: '/api' });
+	protected api = axios.create({ baseURL: '/api' });
 
-  constructor() {
-    if (typeof process !== 'undefined' && process?.env?.DEVELOPMENT_BACKEND_URL) {
-      this.api.defaults.baseURL = process.env.DEVELOPMENT_BACKEND_URL;
-    }
-  }
+	constructor() {
+		if (typeof process !== 'undefined' && process?.env?.DEVELOPMENT_BACKEND_URL) {
+			this.api.defaults.baseURL = process.env.DEVELOPMENT_BACKEND_URL;
+		}
+	}
 }
 
 export default APIService;

frontend/src/lib/services/webauthn-service.ts

@@ -4,35 +4,35 @@ import APIService from './api-service';
 import userStore from '$lib/stores/user-store';
 import type { AuthenticationResponseJSON, RegistrationResponseJSON } from '@simplewebauthn/browser';
 class WebAuthnService extends APIService {
-  getRegistrationOptions = async () => (await this.api.get(`/webauthn/register/start`)).data;
+	getRegistrationOptions = async () => (await this.api.get(`/webauthn/register/start`)).data;
 
-  finishRegistration = async (body: RegistrationResponseJSON) =>
-    (await this.api.post(`/webauthn/register/finish`, body)).data as Passkey;
+	finishRegistration = async (body: RegistrationResponseJSON) =>
+		(await this.api.post(`/webauthn/register/finish`, body)).data as Passkey;
 
-  getLoginOptions = async () => (await this.api.get(`/webauthn/login/start`)).data;
+	getLoginOptions = async () => (await this.api.get(`/webauthn/login/start`)).data;
 
-  finishLogin = async (body: AuthenticationResponseJSON) =>
-    (await this.api.post(`/webauthn/login/finish`, body)).data as User;
+	finishLogin = async (body: AuthenticationResponseJSON) =>
+		(await this.api.post(`/webauthn/login/finish`, body)).data as User;
 
-  logout = async () => {
-    await this.api.post(`/webauthn/logout`);
-    userStore.clearUser();
-  };
+	logout = async () => {
+		await this.api.post(`/webauthn/logout`);
+		userStore.clearUser();
+	};
 
-  listCredentials = async () => (await this.api.get(`/webauthn/credentials`)).data as Passkey[];
+	listCredentials = async () => (await this.api.get(`/webauthn/credentials`)).data as Passkey[];
 
-  removeCredential = async (id: string) => {
-    await this.api.delete(`/webauthn/credentials/${id}`);
-  };
+	removeCredential = async (id: string) => {
+		await this.api.delete(`/webauthn/credentials/${id}`);
+	};
 
-  updateCredentialName = async (id: string, name: string) => {
-    await this.api.patch(`/webauthn/credentials/${id}`, { name });
-  };
+	updateCredentialName = async (id: string, name: string) => {
+		await this.api.patch(`/webauthn/credentials/${id}`, { name });
+	};
 
-  reauthenticate = async (body?: AuthenticationResponseJSON) => {
-    const res = await this.api.post('/webauthn/reauthenticate', body);
-    return res.data.reauthenticationToken as string;
-  };
+	reauthenticate = async (body?: AuthenticationResponseJSON) => {
+		const res = await this.api.post('/webauthn/reauthenticate', body);
+		return res.data.reauthenticationToken as string;
+	};
 }
 
 export default WebAuthnService;

frontend/src/lib/types/advanced-table.type.ts

@@ -3,7 +3,7 @@ import type { Component, Snippet } from 'svelte';
 export type AdvancedTableColumn<T extends Record<string, any>> = {
 	label: string;
 	column?: keyof T & string;
-    key?: string;
+	key?: string;
 	value?: (item: T) => string | number | boolean | undefined;
 	cell?: Snippet<[{ item: T }]>;
 	sortable?: boolean;
@@ -12,9 +12,11 @@ export type AdvancedTableColumn<T extends Record<string, any>> = {
 		value: string | boolean;
 		icon?: Component;
 	}[];
-    hidden?: boolean;
+	hidden?: boolean;
 };
-export type CreateAdvancedTableActions<T extends Record<string, any>> = (item: T) => AdvancedTableAction<T>[];
+export type CreateAdvancedTableActions<T extends Record<string, any>> = (
+	item: T
+) => AdvancedTableAction<T>[];
 
 export type AdvancedTableAction<T> = {
 	label: string;

frontend/src/lib/types/audit-log.type.ts

@@ -12,7 +12,7 @@ export type AuditLog = {
 };
 
 export type AuditLogFilter = {
-	userId: string;
+	userID: string;
 	event: string;
 	location: string;
 	clientName: string;

frontend/src/lib/utils/audit-log-translator.ts

@@ -9,8 +9,8 @@ export const eventTypes: Record<string, string> = {
 	DEVICE_CODE_AUTHORIZATION: m.device_code_authorization(),
 	NEW_DEVICE_CODE_AUTHORIZATION: m.new_device_code_authorization(),
 	PASSKEY_ADDED: m.passkey_added(),
-	PASSKEY_REMOVED: m.passkey_removed(),
-}
+	PASSKEY_REMOVED: m.passkey_removed()
+};
 
 /**
  * Translates an audit log event type using paraglide messages.

frontend/src/lib/utils/cached-image-util.ts

@@ -22,9 +22,13 @@ export const cachedApplicationLogo: CachableImage = {
 
 export const cachedDefaultProfilePicture: CachableImage = {
 	getUrl: () =>
-		getCachedImageUrl(new URL('/api/application-images/default-profile-picture', window.location.origin)),
+		getCachedImageUrl(
+			new URL('/api/application-images/default-profile-picture', window.location.origin)
+		),
 	bustCache: () =>
-		bustImageCache(new URL('/api/application-images/default-profile-picture', window.location.origin))
+		bustImageCache(
+			new URL('/api/application-images/default-profile-picture', window.location.origin)
+		)
 };
 
 export const cachedBackgroundImage: CachableImage = {

frontend/src/routes/authorize/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import FormattedMessage from '$lib/components/formatted-message.svelte';
 	import SignInWrapper from '$lib/components/login-wrapper.svelte';
-	import ScopeList from '$lib/components/scope-list.svelte';
+	import ScopeItem from '$lib/components/scope-item.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import { m } from '$lib/paraglide/messages';
@@ -10,6 +10,7 @@
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
 	import { getWebauthnErrorMessage } from '$lib/utils/error-util';
+	import { LucideMail, LucideUser, LucideUsers } from '@lucide/svelte';
 	import { startAuthentication, type AuthenticationResponseJSON } from '@simplewebauthn/browser';
 	import { onMount } from 'svelte';
 	import { slide } from 'svelte/transition';
@@ -139,8 +140,30 @@
 							/>
 						</p>
 					</Card.Header>
-					<Card.Content>
-						<ScopeList {scope} />
+					<Card.Content data-testid="scopes">
+						<div class="flex flex-col gap-3">
+							{#if scope!.includes('email')}
+								<ScopeItem
+									icon={LucideMail}
+									name={m.email()}
+									description={m.view_your_email_address()}
+								/>
+							{/if}
+							{#if scope!.includes('profile')}
+								<ScopeItem
+									icon={LucideUser}
+									name={m.profile()}
+									description={m.view_your_profile_information()}
+								/>
+							{/if}
+							{#if scope!.includes('groups')}
+								<ScopeItem
+									icon={LucideUsers}
+									name={m.groups()}
+									description={m.view_the_groups_you_are_a_member_of()}
+								/>
+							{/if}
+						</div>
 					</Card.Content>
 				</Card.Root>
 			</div>

frontend/src/routes/login/alternative/+page.svelte

@@ -2,7 +2,8 @@
 	import { page } from '$app/state';
 	import SignInWrapper from '$lib/components/login-wrapper.svelte';
 	import Logo from '$lib/components/logo.svelte';
-	import * as Item from '$lib/components/ui/item/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import * as Card from '$lib/components/ui/card';
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import { LucideChevronRight, LucideMail, LucideRectangleEllipsis } from '@lucide/svelte';
@@ -39,26 +40,24 @@
 		<p class="text-muted-foreground mt-3">
 			{m.if_you_do_not_have_access_to_your_passkey_you_can_sign_in_using_one_of_the_following_methods()}
 		</p>
-		<Item.Group class="mt-5 gap-3">
+		<div class="mt-5 flex flex-col gap-3">
 			{#each methods as method}
-				<Item.Root variant="outline">
-					{#snippet child({ props })}
-						<a href={method.href + page.url.search} {...props}>
-							<Item.Media class="text-primary">
-								<method.icon class="size-7" />
-							</Item.Media>
-							<Item.Content>
-								<Item.Title class="text-lg">{method.title}</Item.Title>
-								<Item.Description>{method.description}</Item.Description>
-							</Item.Content>
-							<Item.Actions>
-								<LucideChevronRight class="size-5" />
-							</Item.Actions>
-						</a>
-					{/snippet}
-				</Item.Root>
+				<a href={method.href + page.url.search}>
+					<Card.Root>
+						<Card.Content class="flex items-center justify-between px-4">
+							<div class="flex gap-3">
+								<method.icon class="text-primary size-7" />
+								<div class="text-start">
+									<h3 class="text-lg font-semibold">{method.title}</h3>
+									<p class="text-muted-foreground text-sm">{method.description}</p>
+								</div>
+							</div>
+							<Button variant="ghost"><LucideChevronRight class="size-5" /></Button>
+						</Card.Content>
+					</Card.Root>
+				</a>
 			{/each}
-		</Item.Group>
+		</div>
 
 		<a class="text-muted-foreground mt-5 text-xs" href={'/login' + page.url.search}
 			>{m.use_your_passkey_instead()}</a

frontend/src/routes/settings/account/+page.svelte

@@ -3,7 +3,6 @@
 	import * as Alert from '$lib/components/ui/alert';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
-	import * as Item from '$lib/components/ui/item/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import WebAuthnService from '$lib/services/webauthn-service';
@@ -101,22 +100,25 @@
 
 <!-- Login code card mobile -->
 <div class="block sm:hidden">
-	<Item.Root variant="outline">
-		<Item.Media class="text-primary/80">
-			<RectangleEllipsis class="size-5" />
-		</Item.Media>
-		<Item.Content>
-			<Item.Title>{m.login_code()}</Item.Title>
-			<Item.Description>
-				{m.create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey()}
-			</Item.Description>
-		</Item.Content>
-		<Item.Actions class="w-full sm:w-auto">
-			<Button variant="outline" class="w-full" onclick={() => (showLoginCodeModal = true)}>
-				{m.create()}
-			</Button>
-		</Item.Actions>
-	</Item.Root>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
+				<div>
+					<Card.Title>
+						<RectangleEllipsis class="text-primary/80 size-5" />
+						{m.login_code()}
+					</Card.Title>
+					<Card.Description>
+						{m.create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey()}
+					</Card.Description>
+				</div>
+
+				<Button variant="outline" class="w-full" onclick={() => (showLoginCodeModal = true)}>
+					{m.create()}
+				</Button>
+			</div>
+		</Card.Header>
+	</Card.Root>
 </div>
 
 <!-- Account details card -->
@@ -138,68 +140,75 @@
 	</Card.Content>
 </Card.Root>
 
-<!-- Passkey management -->
-<Item.Group class="bg-muted/50 rounded-xl border p-4">
-	<Item.Root class="border-none bg-transparent p-0">
-		<Item.Media class="text-primary/80">
-			<KeyRound class="size-5" />
-		</Item.Media>
-		<Item.Content>
-			<Item.Title class="text-xl font-semibold">{m.passkeys()}</Item.Title>
-			<Item.Description>
-				{m.manage_your_passkeys_that_you_can_use_to_authenticate_yourself()}
-			</Item.Description>
-		</Item.Content>
-		<Item.Actions>
-			<Button variant="outline" onclick={createPasskey}>
-				{m.add_passkey()}
-			</Button>
-		</Item.Actions>
-	</Item.Root>
-	{#if passkeys.length != 0}
-		<Item.Separator class="my-4" />
-		<PasskeyList bind:passkeys />
-	{/if}
-</Item.Group>
+<!-- Passkey management card -->
+<div>
+	<Card.Root class="gap-3">
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>
+						<KeyRound class="text-primary/80 size-5" />
+						{m.passkeys()}
+					</Card.Title>
+					<Card.Description>
+						{m.manage_your_passkeys_that_you_can_use_to_authenticate_yourself()}
+					</Card.Description>
+				</div>
+				<Button variant="outline" class="ml-3" onclick={createPasskey}>
+					{m.add_passkey()}
+				</Button>
+			</div>
+		</Card.Header>
+		{#if passkeys.length != 0}
+			<Card.Content>
+				<PasskeyList bind:passkeys />
+			</Card.Content>
+		{/if}
+	</Card.Root>
+</div>
 
 <!-- Login code card -->
 <div class="hidden sm:block">
-	<Item.Root variant="muted">
-		<Item.Media class="text-primary/80">
-			<RectangleEllipsis class="size-5" />
-		</Item.Media>
-		<Item.Content>
-			<Item.Title>{m.login_code()}</Item.Title>
-			<Item.Description>
-				{m.create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey()}
-			</Item.Description>
-		</Item.Content>
-		<Item.Actions>
-			<Button variant="outline" onclick={() => (showLoginCodeModal = true)}>
-				{m.create()}
-			</Button>
-		</Item.Actions>
-	</Item.Root>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
+				<div>
+					<Card.Title>
+						<RectangleEllipsis class="text-primary/80 size-5" />
+						{m.login_code()}
+					</Card.Title>
+					<Card.Description>
+						{m.create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey()}
+					</Card.Description>
+				</div>
+				<Button variant="outline" onclick={() => (showLoginCodeModal = true)}>
+					{m.create()}
+				</Button>
+			</div>
+		</Card.Header>
+	</Card.Root>
 </div>
 
 <!-- Language selection card -->
 <div>
-	<Item.Root variant="muted">
-		<Item.Media class="text-primary/80">
-			<Languages class="size-5" />
-		</Item.Media>
-		<Item.Content>
-			<Item.Title>{m.language()}</Item.Title>
-			<Item.Description>
-				{m.select_the_language_you_want_to_use()}
-				<br />
-				<FormattedMessage m={m.contribute_to_translation()} />
-			</Item.Description>
-		</Item.Content>
-		<Item.Actions>
-			<LocalePicker />
-		</Item.Actions>
-	</Item.Root>
+	<Card.Root>
+		<Card.Header>
+			<div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
+				<div>
+					<Card.Title>
+						<Languages class="text-primary/80 size-5" />
+						{m.language()}
+					</Card.Title>
+					<Card.Description>
+						{m.select_the_language_you_want_to_use()}
+						<br />
+						<FormattedMessage m={m.contribute_to_translation()} />
+					</Card.Description>
+				</div>
+				<LocalePicker />
+			</div>
+		</Card.Header>
+	</Card.Root>
 </div>
 
 <RenamePasskeyModal

frontend/src/routes/settings/account/account-form.svelte

@@ -2,7 +2,6 @@
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import ProfilePictureSettings from '$lib/components/form/profile-picture-settings.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Field from '$lib/components/ui/field/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
@@ -87,20 +86,30 @@
 		resetCallback={resetProfilePicture}
 	/>
 
-	<Field.Separator />
+	<hr class="border-border" />
 
 	<fieldset disabled={userInfoInputDisabled}>
-		<Field.Group class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-			<FormInput label={m.first_name()} bind:input={$inputs.firstName} onInput={onNameInput} />
-			<FormInput label={m.last_name()} bind:input={$inputs.lastName} onInput={onNameInput} />
-			<FormInput
-				label={m.display_name()}
-				bind:input={$inputs.displayName}
-				onInput={() => (hasManualDisplayNameEdit = true)}
-			/>
-			<FormInput label={m.username()} bind:input={$inputs.username} />
-			<FormInput label={m.email()} type="email" bind:input={$inputs.email} />
-		</Field.Group>
+		<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+			<div>
+				<FormInput label={m.first_name()} bind:input={$inputs.firstName} onInput={onNameInput} />
+			</div>
+			<div>
+				<FormInput label={m.last_name()} bind:input={$inputs.lastName} onInput={onNameInput} />
+			</div>
+			<div>
+				<FormInput
+					label={m.display_name()}
+					bind:input={$inputs.displayName}
+					onInput={() => (hasManualDisplayNameEdit = true)}
+				/>
+			</div>
+			<div>
+				<FormInput label={m.username()} bind:input={$inputs.username} />
+			</div>
+			<div>
+				<FormInput label={m.email()} bind:input={$inputs.email} />
+			</div>
+		</div>
 
 		<div class="flex justify-end pt-4">
 			<Button {isLoading} type="submit">{m.save()}</Button>

frontend/src/routes/settings/account/passkey-list.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
 	import GlassRowItem from '$lib/components/passkey-row.svelte';
-	import * as Item from '$lib/components/ui/item/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import WebauthnService from '$lib/services/webauthn-service';
 	import type { Passkey } from '$lib/types/passkey.type';
@@ -37,7 +36,7 @@
 	}
 </script>
 
-<Item.Group class="gap-3">
+<div class="space-y-3">
 	{#each passkeys as passkey}
 		<GlassRowItem
 			label={passkey.name}
@@ -47,7 +46,7 @@
 			onDelete={() => deletePasskey(passkey)}
 		/>
 	{/each}
-</Item.Group>
+</div>
 
 <RenamePasskeyModal
 	bind:passkey={passkeyToRename}

frontend/src/routes/settings/account/rename-passkey-modal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Field from '$lib/components/ui/field';
 	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
 	import { m } from '$lib/paraglide/messages';
 	import WebAuthnService from '$lib/services/webauthn-service';
 	import type { Passkey } from '$lib/types/passkey.type';
@@ -52,7 +52,7 @@
 		</Dialog.Header>
 		<form onsubmit={preventDefault(onSubmit)}>
 			<div class="grid items-center gap-4 sm:grid-cols-4">
-				<Field.Label for="name" class="sm:text-right">{m.name()}</Field.Label>
+				<Label for="name" class="sm:text-right">{m.name()}</Label>
 				<Input id="name" bind:value={name} class="col-span-3" />
 			</div>
 			<Dialog.Footer class="mt-4">

frontend/src/routes/settings/admin/application-configuration/application-image.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import FileInput from '$lib/components/form/file-input.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Field from '$lib/components/ui/field';
+	import { Label } from '$lib/components/ui/label';
 	import { cn } from '$lib/utils/style';
 	import { LucideImageOff, LucideUpload, LucideX } from '@lucide/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -53,7 +53,7 @@
 </script>
 
 <div class="flex flex-col items-start md:flex-row md:items-center" {...restProps}>
-	<Field.Label class="w-52" for={id}>{label}</Field.Label>
+	<Label class="w-52" for={id}>{label}</Label>
 	<FileInput {id} variant="secondary" {accept} onchange={onImageChange}>
 		<div
 			class={cn('group/image relative flex items-center rounded transition-colors', {

frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte

@@ -3,7 +3,7 @@
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Field from '$lib/components/ui/field';
+	import Label from '$lib/components/ui/label/label.svelte';
 	import * as Select from '$lib/components/ui/select';
 	import { m } from '$lib/paraglide/messages';
 	import AppConfigService from '$lib/services/app-config-service';
@@ -112,8 +112,8 @@
 			<FormInput label={m.smtp_user()} bind:input={$inputs.smtpUser} />
 			<FormInput label={m.smtp_password()} type="password" bind:input={$inputs.smtpPassword} />
 			<FormInput label={m.smtp_from()} bind:input={$inputs.smtpFrom} />
-			<Field.Field>
-				<Field.Label for="smtp-tls">{m.smtp_tls_option()}</Field.Label>
+			<div class="grid gap-2">
+				<Label class="mb-0" for="smtp-tls">{m.smtp_tls_option()}</Label>
 				<Select.Root
 					type="single"
 					value={$inputs.smtpTls.value}
@@ -128,7 +128,7 @@
 						<Select.Item value="tls" label="TLS" />
 					</Select.Content>
 				</Select.Root>
-			</Field.Field>
+			</div>
 			<SwitchWithLabel
 				id="skip-cert-verify"
 				label={m.skip_certificate_verification()}

frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte

@@ -2,7 +2,8 @@
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Field from '$lib/components/ui/field';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import * as Select from '$lib/components/ui/select';
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
@@ -81,21 +82,21 @@
 				bind:checked={$inputs.disableAnimations.value}
 			/>
 
-			<Field.Field class="space-y-5">
+			<div class="space-y-5">
 				<div>
-					<Field.Label>
+					<Label class="mb-0 text-sm font-medium">
 						{m.accent_color()}
-					</Field.Label>
-					<Field.Description>
+					</Label>
+					<p class="text-muted-foreground text-[0.8rem]">
 						{m.select_an_accent_color_to_customize_the_appearance_of_pocket_id()}
-					</Field.Description>
+					</p>
 				</div>
 				<AccentColorPicker
 					previousColor={appConfig.accentColor}
 					bind:selectedColor={$inputs.accentColor.value}
 					disabled={$appConfigStore.uiConfigDisabled}
 				/>
-			</Field.Field>
+			</div>
 		</div>
 		<div class="mt-5 flex justify-end">
 			<Button {isLoading} type="submit">{m.save()}</Button>

frontend/src/routes/settings/admin/application-configuration/forms/app-config-signup-defaults-form.svelte

@@ -2,7 +2,7 @@
 	import CustomClaimsInput from '$lib/components/form/custom-claims-input.svelte';
 	import SearchableMultiSelect from '$lib/components/form/searchable-multi-select.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Field from '$lib/components/ui/field';
+	import { Label } from '$lib/components/ui/label';
 	import * as Select from '$lib/components/ui/select';
 	import { m } from '$lib/paraglide/messages';
 	import UserGroupService from '$lib/services/user-group-service';
@@ -98,11 +98,13 @@
 
 <form onsubmit={preventDefault(onSubmit)}>
 	<fieldset class="flex flex-col gap-5" disabled={$appConfigStore.uiConfigDisabled}>
-		<Field.Field>
-			<Field.Label for="enable-user-signup">{m.enable_user_signups()}</Field.Label>
-			<Field.Description>
-				{m.enable_user_signups_description()}
-			</Field.Description>
+		<div class="grid gap-2">
+			<div>
+				<Label class="mb-0" for="enable-user-signup">{m.enable_user_signups()}</Label>
+				<p class="text-muted-foreground text-[0.8rem]">
+					{m.enable_user_signups_description()}
+				</p>
+			</div>
 			<Select.Root
 				type="single"
 				value={allowUserSignups}
@@ -143,13 +145,13 @@
 					</Select.Item>
 				</Select.Content>
 			</Select.Root>
-		</Field.Field>
+		</div>
 
-		<Field.Field>
-			<Field.Label for="default-groups">{m.user_groups()}</Field.Label>
-			<Field.Description>
+		<div>
+			<Label for="default-groups" class="mb-0">{m.user_groups()}</Label>
+			<p class="text-muted-foreground mt-1 mb-2 text-xs">
 				{m.user_creation_groups_description()}
-			</Field.Description>
+			</p>
 			<SearchableMultiSelect
 				id="default-groups"
 				items={userGroups}
@@ -161,14 +163,14 @@
 				isLoading={isUserSearchLoading}
 				disableInternalSearch
 			/>
-		</Field.Field>
-		<Field.Field>
-			<Field.Label>{m.custom_claims()}</Field.Label>
-			<Field.Description>
+		</div>
+		<div>
+			<Label class="mb-0">{m.custom_claims()}</Label>
+			<p class="text-muted-foreground mt-1 mb-2 text-xs">
 				{m.user_creation_claims_description()}
-			</Field.Description>
+			</p>
 			<CustomClaimsInput bind:customClaims />
-		</Field.Field>
+		</div>
 
 		<div class="flex justify-end pt-2">
 			<Button {isLoading} type="submit">{m.save()}</Button>

frontend/src/routes/settings/admin/application-configuration/forms/custom-accent-color-dialog.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Field from '$lib/components/ui/field';
 	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import { preventDefault } from '$lib/utils/event-util';
 
@@ -48,8 +48,8 @@
 
 		<form onsubmit={preventDefault(applyCustomColor)}>
 			<div class="space-y-4">
-				<Field.Field>
-					<Field.Label for="custom-color-input">{m.color_value()}</Field.Label>
+				<div>
+					<Label for="custom-color-input" class="text-sm font-medium">{m.color_value()}</Label>
 					<div class="flex items-center gap-2">
 						<div class="w-full transition">
 							<Input
@@ -68,7 +68,7 @@
 							style="background-color: {customColorInput}"
 						></div>
 					</div>
-				</Field.Field>
+				</div>
 			</div>
 
 			<Dialog.Footer class="mt-6">

frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte

@@ -6,7 +6,7 @@
 	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
-	import * as Field from '$lib/components/ui/field';
+	import Label from '$lib/components/ui/label/label.svelte';
 	import UserGroupSelection from '$lib/components/user-group-selection.svelte';
 	import { m } from '$lib/paraglide/messages';
 	import OidcService from '$lib/services/oidc-service';
@@ -132,14 +132,14 @@
 	<Card.Content>
 		<div class="flex flex-col">
 			<div class="mb-2 flex flex-col sm:flex-row sm:items-center">
-				<Field.Label class="w-50">{m.client_id()}</Field.Label>
+				<Label class="mb-0 w-50">{m.client_id()}</Label>
 				<CopyToClipboard value={client.id}>
 					<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
 				</CopyToClipboard>
 			</div>
 			{#if !client.isPublic}
 				<div class="mt-1 mb-2 flex flex-col sm:flex-row sm:items-center">
-					<Field.Label class="w-50">{m.client_secret()}</Field.Label>
+					<Label class="mb-0 w-50">{m.client_secret()}</Label>
 					{#if $clientSecretStore}
 						<CopyToClipboard value={$clientSecretStore}>
 							<span class="text-muted-foreground text-sm" data-testid="client-secret">
@@ -166,7 +166,7 @@
 				<div transition:slide>
 					{#each Object.entries(setupDetails) as [key, value]}
 						<div class="mb-5 flex flex-col sm:flex-row sm:items-center">
-							<Field.Label class="w-50">{key}</Field.Label>
+							<Label class="mb-0 w-50">{key}</Label>
 							<CopyToClipboard {value}>
 								<span class="text-muted-foreground text-sm">{value}</span>
 							</CopyToClipboard>

frontend/src/routes/settings/admin/oidc-clients/client-secret.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Field from '$lib/components/ui/field';
 	import Input from '$lib/components/ui/input/input.svelte';
+	import Label from '$lib/components/ui/label/label.svelte';
 	import { m } from '$lib/paraglide/messages';
 
 	let {
@@ -23,7 +23,7 @@
 			<Dialog.Title>{m.one_time_link()}</Dialog.Title>
 			<Dialog.Description>{m.use_this_link_to_sign_in_once()}</Dialog.Description>
 		</Dialog.Header>
-		<Field.Label for="one-time-link">{m.one_time_link()}</Field.Label>
+		<Label for="one-time-link">{m.one_time_link()}</Label>
 		<Input id="one-time-link" value={oneTimeLink} readonly />
 	</Dialog.Content>
 </Dialog.Root>

frontend/src/routes/settings/admin/oidc-clients/federated-identities-input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Field from '$lib/components/ui/field';
 	import { Input } from '$lib/components/ui/input';
+	import Label from '$lib/components/ui/label/label.svelte';
 	import { m } from '$lib/paraglide/messages';
 	import type { OidcClient, OidcClientFederatedIdentity } from '$lib/types/oidc.type';
 	import { LucideMinus, LucidePlus } from '@lucide/svelte';
@@ -67,7 +67,7 @@
 			{#each federatedIdentities as identity, i}
 				<div class="space-y-3 rounded-lg border p-4">
 					<div class="flex items-center justify-between">
-						<Field.Label>Identity {i + 1}</Field.Label>
+						<Label class="text-sm font-medium">Identity {i + 1}</Label>
 						{#if federatedIdentities.length > 0}
 							<Button
 								variant="outline"
@@ -81,8 +81,8 @@
 					</div>
 
 					<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-						<Field.Field>
-							<Field.Label required for="issuer-{i}">Issuer</Field.Label>
+						<div>
+							<Label required for="issuer-{i}" class="text-xs">Issuer</Label>
 							<Input
 								id="issuer-{i}"
 								placeholder="https://example.com/"
@@ -91,12 +91,12 @@
 								aria-invalid={!!getFieldError(i, 'issuer')}
 							/>
 							{#if getFieldError(i, 'issuer')}
-								<Field.Error>{getFieldError(i, 'issuer')}</Field.Error>
+								<p class="text-destructive mt-1 text-xs">{getFieldError(i, 'issuer')}</p>
 							{/if}
-						</Field.Field>
+						</div>
 
-						<Field.Field>
-							<Field.Label for="subject-{i}">Subject</Field.Label>
+						<div>
+							<Label for="subject-{i}" class="text-xs">Subject</Label>
 							<Input
 								id="subject-{i}"
 								placeholder="Defaults to the client ID"
@@ -105,12 +105,12 @@
 								aria-invalid={!!getFieldError(i, 'subject')}
 							/>
 							{#if getFieldError(i, 'subject')}
-								<Field.Error>{getFieldError(i, 'subject')}</Field.Error>
+								<p class="text-destructive mt-1 text-xs">{getFieldError(i, 'subject')}</p>
 							{/if}
-						</Field.Field>
+						</div>
 
-						<Field.Field>
-							<Field.Label for="audience-{i}">Audience</Field.Label>
+						<div>
+							<Label for="audience-{i}" class="text-xs">Audience</Label>
 							<Input
 								id="audience-{i}"
 								placeholder="Defaults to the Pocket ID URL"
@@ -119,12 +119,12 @@
 								aria-invalid={!!getFieldError(i, 'audience')}
 							/>
 							{#if getFieldError(i, 'audience')}
-								<Field.Error>{getFieldError(i, 'audience')}</Field.Error>
+								<p class="text-destructive mt-1 text-xs">{getFieldError(i, 'audience')}</p>
 							{/if}
-						</Field.Field>
+						</div>
 
-						<Field.Field>
-							<Field.Label for="jwks-{i}">JWKS URL</Field.Label>
+						<div>
+							<Label for="jwks-{i}" class="text-xs">JWKS URL</Label>
 							<Input
 								id="jwks-{i}"
 								placeholder="Defaults to {identity.issuer || '<issuer>'}/.well-known/jwks.json"
@@ -133,9 +133,9 @@
 								aria-invalid={!!getFieldError(i, 'jwks')}
 							/>
 							{#if getFieldError(i, 'jwks')}
-								<Field.Error>{getFieldError(i, 'jwks')}</Field.Error>
+								<p class="text-destructive mt-1 text-xs">{getFieldError(i, 'jwks')}</p>
 							{/if}
-						</Field.Field>
+						</div>
 					</div>
 				</div>
 			{/each}

frontend/src/routes/settings/admin/oidc-clients/oidc-callback-url-input.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Field from '$lib/components/ui/field';
 	import { Input } from '$lib/components/ui/input';
 	import { m } from '$lib/paraglide/messages';
 	import { LucideMinus, LucidePlus } from '@lucide/svelte';
@@ -45,7 +44,7 @@
 		</div>
 	</FormInput>
 	{#if error}
-		<Field.Error>{error}</Field.Error>
+		<p class="text-destructive mt-1 text-xs">{error}</p>
 	{/if}
 	<Button
 		class="mt-2"

frontend/src/routes/settings/admin/oidc-clients/oidc-client-image-input.svelte

@@ -2,7 +2,7 @@
 	import UrlFileInput from '$lib/components/form/url-file-input.svelte';
 	import ImageBox from '$lib/components/image-box.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Field from '$lib/components/ui/field';
+	import { Label } from '$lib/components/ui/label';
 	import { m } from '$lib/paraglide/messages';
 	import { LucideX } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
@@ -26,7 +26,7 @@
 	let id = `oidc-client-logo-${light ? 'light' : 'dark'}`;
 </script>
 
-<Field.Label for={id}>{m.logo()}</Field.Label>
+<Label for={id}>{m.logo()}</Label>
 <div class="flex h-24 items-end gap-4">
 	<div class="flex flex-col gap-2">
 		{#if tabTriggers}