create users through admin page

backend/src/lib/domain/warren/models/user/requests.rs

@@ -11,8 +11,16 @@ pub struct RegisterUserRequest {
     password: UserPassword,
 }
 
+impl From<RegisterUserRequest> for CreateUserRequest {
+    fn from(value: RegisterUserRequest) -> Self {
+        Self::new(value.name, value.email, value.password, false)
+    }
+}
+
 #[derive(Debug, Error)]
 pub enum RegisterUserError {
+    #[error(transparent)]
+    CreateUser(#[from] CreateUserError),
     #[error(transparent)]
     Unknown(#[from] anyhow::Error),
 }
@@ -178,3 +186,45 @@ pub enum LoginUserError {
     #[error(transparent)]
     Unknown(#[from] anyhow::Error),
 }
+
+/// An admin request to create a new user
+#[derive(Clone, Debug, PartialEq, Eq, PartialOrd, Ord, Hash)]
+pub struct CreateUserRequest {
+    name: UserName,
+    email: UserEmail,
+    password: UserPassword,
+    admin: bool,
+}
+
+impl CreateUserRequest {
+    pub fn new(name: UserName, email: UserEmail, password: UserPassword, admin: bool) -> Self {
+        Self {
+            name,
+            email,
+            password,
+            admin,
+        }
+    }
+
+    pub fn name(&self) -> &UserName {
+        &self.name
+    }
+
+    pub fn email(&self) -> &UserEmail {
+        &self.email
+    }
+
+    pub fn password(&self) -> &UserPassword {
+        &self.password
+    }
+
+    pub fn admin(&self) -> bool {
+        self.admin
+    }
+}
+
+#[derive(Debug, Error)]
+pub enum CreateUserError {
+    #[error(transparent)]
+    Unknown(#[from] anyhow::Error),
+}

backend/src/lib/domain/warren/ports/metrics.rs

@@ -56,6 +56,9 @@ pub trait AuthMetrics: Clone + Send + Sync + 'static {
     fn record_user_login_success(&self) -> impl Future<Output = ()> + Send;
     fn record_user_login_failure(&self) -> impl Future<Output = ()> + Send;
 
+    fn record_user_creation_success(&self) -> impl Future<Output = ()> + Send;
+    fn record_user_creation_failure(&self) -> impl Future<Output = ()> + Send;
+
     fn record_auth_session_creation_success(&self) -> impl Future<Output = ()> + Send;
     fn record_auth_session_creation_failure(&self) -> impl Future<Output = ()> + Send;
 

backend/src/lib/domain/warren/ports/mod.rs

@@ -20,8 +20,8 @@ use super::models::{
         FilePath, ListFilesError, ListFilesRequest, RenameEntryError, RenameEntryRequest,
     },
     user::{
-        LoginUserError, LoginUserRequest, LoginUserResponse, RegisterUserError,
-        RegisterUserRequest, User,
+        CreateUserError, CreateUserRequest, LoginUserError, LoginUserRequest, LoginUserResponse,
+        RegisterUserError, RegisterUserRequest, User,
     },
     user_warren::{
         UserWarren,
@@ -120,6 +120,11 @@ pub trait AuthService: Clone + Send + Sync + 'static {
         &self,
         request: LoginUserRequest,
     ) -> impl Future<Output = Result<LoginUserResponse, LoginUserError>> + Send;
+    /// An action that creates a user (MUST REQUIRE ADMIN PRIVILEGES)
+    fn create_user(
+        &self,
+        request: AuthRequest<CreateUserRequest>,
+    ) -> impl Future<Output = Result<User, AuthError<CreateUserError>>> + Send;
 
     fn create_auth_session(
         &self,

backend/src/lib/domain/warren/ports/notifier.rs

@@ -73,6 +73,8 @@ pub trait FileSystemNotifier: Clone + Send + Sync + 'static {
 pub trait AuthNotifier: Clone + Send + Sync + 'static {
     fn user_registered(&self, user: &User) -> impl Future<Output = ()> + Send;
     fn user_logged_in(&self, response: &LoginUserResponse) -> impl Future<Output = ()> + Send;
+    fn user_created(&self, creator: &User, created: &User) -> impl Future<Output = ()> + Send;
+
     fn auth_session_created(&self, user_id: &Uuid) -> impl Future<Output = ()> + Send;
     fn auth_session_fetched(
         &self,

backend/src/lib/domain/warren/ports/repository.rs

@@ -12,7 +12,7 @@ use crate::domain::warren::models::{
         FilePath, ListFilesError, ListFilesRequest, RenameEntryError, RenameEntryRequest,
     },
     user::{
-        RegisterUserError, RegisterUserRequest, User, VerifyUserPasswordError,
+        CreateUserError, CreateUserRequest, User, VerifyUserPasswordError,
         VerifyUserPasswordRequest,
     },
     user_warren::{
@@ -70,10 +70,10 @@ pub trait FileSystemRepository: Clone + Send + Sync + 'static {
 }
 
 pub trait AuthRepository: Clone + Send + Sync + 'static {
-    fn register_user(
+    fn create_user(
         &self,
-        request: RegisterUserRequest,
-    ) -> impl Future<Output = Result<User, RegisterUserError>> + Send;
+        request: CreateUserRequest,
+    ) -> impl Future<Output = Result<User, CreateUserError>> + Send;
     fn verify_user_password(
         &self,
         request: VerifyUserPasswordRequest,

backend/src/lib/domain/warren/service/auth.rs

@@ -10,8 +10,8 @@ use crate::{
                 },
             },
             user::{
-                LoginUserError, LoginUserRequest, LoginUserResponse, RegisterUserError,
-                RegisterUserRequest, User,
+                CreateUserError, CreateUserRequest, LoginUserError, LoginUserRequest,
+                LoginUserResponse, RegisterUserError, RegisterUserRequest, User,
             },
             user_warren::{
                 UserWarren,
@@ -99,7 +99,7 @@ where
     N: AuthNotifier,
 {
     async fn register_user(&self, request: RegisterUserRequest) -> Result<User, RegisterUserError> {
-        let result = self.repository.register_user(request).await;
+        let result = self.repository.create_user(request.into()).await;
 
         if let Ok(user) = result.as_ref() {
             self.metrics.record_user_registration_success().await;
@@ -108,7 +108,7 @@ where
             self.metrics.record_user_registration_failure().await;
         }
 
-        result
+        result.map_err(Into::into)
     }
 
     async fn login_user(
@@ -139,6 +139,32 @@ where
         result.map_err(Into::into)
     }
 
+    async fn create_user(
+        &self,
+        request: AuthRequest<CreateUserRequest>,
+    ) -> Result<User, AuthError<CreateUserError>> {
+        let (session, request) = request.unpack();
+
+        let response = self
+            .fetch_auth_session(FetchAuthSessionRequest::new(session.session_id().clone()))
+            .await?;
+
+        if !response.user().admin() {
+            return Err(AuthError::InsufficientPermissions);
+        }
+
+        let result = self.repository.create_user(request).await;
+
+        if let Ok(user) = result.as_ref() {
+            self.metrics.record_user_creation_success().await;
+            self.notifier.user_created(response.user(), user).await;
+        } else {
+            self.metrics.record_user_creation_failure().await;
+        }
+
+        result.map_err(AuthError::Custom)
+    }
+
     async fn create_auth_session(
         &self,
         request: CreateAuthSessionRequest,

backend/src/lib/inbound/http/errors.rs

@@ -2,7 +2,7 @@ use crate::{
     domain::warren::models::{
         auth_session::{AuthError, requests::FetchAuthSessionError},
         file::{CreateDirectoryError, DeleteDirectoryError, DeleteFileError, ListFilesError},
-        user::{LoginUserError, RegisterUserError, VerifyUserPasswordError},
+        user::{CreateUserError, LoginUserError, RegisterUserError, VerifyUserPasswordError},
         user_warren::requests::FetchUserWarrenError,
         warren::{
             CreateWarrenDirectoryError, DeleteWarrenDirectoryError, DeleteWarrenFileError,
@@ -136,6 +136,7 @@ impl From<UploadWarrenFilesError> for ApiError {
 impl From<RegisterUserError> for ApiError {
     fn from(value: RegisterUserError) -> Self {
         match value {
+            RegisterUserError::CreateUser(err) => err.into(),
             RegisterUserError::Unknown(error) => Self::InternalServerError(error.to_string()),
         }
     }
@@ -197,3 +198,11 @@ impl<T: std::error::Error> From<AuthError<T>> for ApiError {
         }
     }
 }
+
+impl From<CreateUserError> for ApiError {
+    fn from(value: CreateUserError) -> Self {
+        match value {
+            CreateUserError::Unknown(err) => Self::InternalServerError(err.to_string()),
+        }
+    }
+}

backend/src/lib/inbound/http/handlers/admin/create_user.rs

@@ -0,0 +1,95 @@
+use axum::{Json, extract::State, http::StatusCode};
+use serde::Deserialize;
+use thiserror::Error;
+
+use crate::{
+    domain::warren::{
+        models::{
+            auth_session::AuthRequest,
+            user::{
+                CreateUserRequest, UserEmail, UserEmailError, UserName, UserNameError,
+                UserPassword, UserPasswordError,
+            },
+        },
+        ports::{AuthService, WarrenService},
+    },
+    inbound::http::{
+        AppState,
+        handlers::{UserData, extractors::SessionIdHeader},
+        responses::{ApiError, ApiSuccess},
+    },
+};
+
+#[derive(Debug, Clone, Error)]
+pub(super) enum ParseCreateUserHttpRequestError {
+    #[error(transparent)]
+    UserName(#[from] UserNameError),
+    #[error(transparent)]
+    UserEmail(#[from] UserEmailError),
+    #[error(transparent)]
+    UserPassword(#[from] UserPasswordError),
+}
+
+impl From<ParseCreateUserHttpRequestError> for ApiError {
+    fn from(value: ParseCreateUserHttpRequestError) -> Self {
+        match value {
+            ParseCreateUserHttpRequestError::UserName(err) => match err {
+                UserNameError::Empty => {
+                    Self::BadRequest("The username must not be empty".to_string())
+                }
+            },
+            ParseCreateUserHttpRequestError::UserEmail(err) => match err {
+                UserEmailError::Invalid => Self::BadRequest("The email is invalid".to_string()),
+                UserEmailError::Empty => {
+                    Self::BadRequest("The email must not be empty".to_string())
+                }
+            },
+            ParseCreateUserHttpRequestError::UserPassword(err) => Self::BadRequest(
+                match err {
+                    UserPasswordError::Empty => "The provided password is empty",
+                    // Best not give a potential bad actor any hints since this is the login and
+                    // not the registration
+                    UserPasswordError::LeadingWhitespace
+                    | UserPasswordError::TrailingWhitespace
+                    | UserPasswordError::TooShort
+                    | UserPasswordError::TooLong => "",
+                }
+                .to_string(),
+            ),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub(super) struct CreateUserHttpRequestBody {
+    name: String,
+    email: String,
+    password: String,
+    admin: bool,
+}
+
+impl CreateUserHttpRequestBody {
+    fn try_into_domain(self) -> Result<CreateUserRequest, ParseCreateUserHttpRequestError> {
+        let name = UserName::new(&self.name)?;
+        let email = UserEmail::new(&self.email)?;
+        let password = UserPassword::new(&self.password)?;
+
+        Ok(CreateUserRequest::new(name, email, password, self.admin))
+    }
+}
+
+pub async fn create_user<WS: WarrenService, AS: AuthService>(
+    State(state): State<AppState<WS, AS>>,
+    SessionIdHeader(session): SessionIdHeader,
+    Json(request): Json<CreateUserHttpRequestBody>,
+) -> Result<ApiSuccess<UserData>, ApiError> {
+    let domain_request = request.try_into_domain()?;
+
+    state
+        .auth_service
+        .create_user(AuthRequest::new(session, domain_request))
+        .await
+        .map(|user| ApiSuccess::new(StatusCode::CREATED, user.into()))
+        .map_err(ApiError::from)
+}

backend/src/lib/inbound/http/handlers/admin/mod.rs

@@ -0,0 +1,13 @@
+mod create_user;
+use create_user::create_user;
+
+use axum::{Router, routing::post};
+
+use crate::{
+    domain::warren::ports::{AuthService, WarrenService},
+    inbound::http::AppState,
+};
+
+pub fn routes<WS: WarrenService, AS: AuthService>() -> Router<AppState<WS, AS>> {
+    Router::new().route("/users", post(create_user))
+}

backend/src/lib/inbound/http/handlers/auth/fetch_session.rs

@@ -14,7 +14,7 @@ use crate::{
     },
     inbound::http::{
         AppState,
-        handlers::SessionUser,
+        handlers::UserData,
         responses::{ApiError, ApiSuccess},
     },
 };
@@ -22,7 +22,7 @@ use crate::{
 #[derive(Debug, Clone, Serialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct FetchSessionResponseBody {
-    user: SessionUser,
+    user: UserData,
     expires_at: i64,
 }
 

backend/src/lib/inbound/http/handlers/auth/login.rs

@@ -12,7 +12,7 @@ use crate::{
     },
     inbound::http::{
         AppState,
-        handlers::SessionUser,
+        handlers::UserData,
         responses::{ApiError, ApiSuccess},
     },
 };
@@ -70,7 +70,7 @@ impl LoginUserHttpRequestBody {
 #[derive(Debug, Clone, PartialEq, Serialize)]
 pub struct LoginResponseBody {
     token: String,
-    user: SessionUser,
+    user: UserData,
     expires_at: i64,
 }
 

backend/src/lib/inbound/http/handlers/mod.rs

@@ -3,6 +3,7 @@ use uuid::Uuid;
 
 use crate::domain::warren::models::user::User;
 
+pub mod admin;
 pub mod auth;
 pub mod extractors;
 pub mod warrens;
@@ -10,14 +11,14 @@ pub mod warrens;
 #[derive(Debug, Clone, Serialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 /// A session user that can be safely sent to the client
-pub struct SessionUser {
+pub(super) struct UserData {
     id: Uuid,
     name: String,
     email: String,
     admin: bool,
 }
 
-impl From<User> for SessionUser {
+impl From<User> for UserData {
     fn from(value: User) -> Self {
         Self {
             id: *value.id(),

backend/src/lib/inbound/http/mod.rs

@@ -6,6 +6,7 @@ use std::sync::Arc;
 
 use anyhow::Context;
 use axum::{Router, http::HeaderValue};
+use handlers::admin;
 use handlers::auth;
 use handlers::warrens;
 use tokio::net::TcpListener;
@@ -126,4 +127,5 @@ fn api_routes<WS: WarrenService, AS: AuthService>() -> Router<AppState<WS, AS>>
     Router::new()
         .nest("/auth", auth::routes())
         .nest("/warrens", warrens::routes())
+        .nest("/admin", admin::routes())
 }

backend/src/lib/outbound/metrics_debug_logger.rs

@@ -138,6 +138,13 @@ impl AuthMetrics for MetricsDebugLogger {
         tracing::debug!("[Metrics] User login failed");
     }
 
+    async fn record_user_creation_success(&self) {
+        tracing::debug!("[Metrics] User creation succeeded");
+    }
+    async fn record_user_creation_failure(&self) {
+        tracing::debug!("[Metrics] User creation failed");
+    }
+
     async fn record_auth_session_creation_success(&self) {
         tracing::debug!("[Metrics] Auth session creation succeeded");
     }

backend/src/lib/outbound/notifier_debug_logger.rs

@@ -121,6 +121,14 @@ impl AuthNotifier for NotifierDebugLogger {
         tracing::debug!("[Notifier] Registered user {}", user.name());
     }
 
+    async fn user_created(&self, creator: &User, created: &User) {
+        tracing::debug!(
+            "[Notifier] Admin user {} created user {}",
+            creator.name(),
+            created.name()
+        );
+    }
+
     async fn user_logged_in(&self, response: &LoginUserResponse) {
         tracing::debug!("[Notifier] Logged in user {}", response.user().name());
     }

backend/src/lib/outbound/postgres.rs

@@ -25,7 +25,7 @@ use crate::domain::warren::{
             },
         },
         user::{
-            RegisterUserError, RegisterUserRequest, User, UserEmail, UserName, UserPassword,
+            CreateUserError, CreateUserRequest, User, UserEmail, UserName, UserPassword,
             VerifyUserPasswordError, VerifyUserPasswordRequest,
         },
         user_warren::{
@@ -394,7 +394,7 @@ impl WarrenRepository for Postgres {
 }
 
 impl AuthRepository for Postgres {
-    async fn register_user(&self, request: RegisterUserRequest) -> Result<User, RegisterUserError> {
+    async fn create_user(&self, request: CreateUserRequest) -> Result<User, CreateUserError> {
         let mut connection = self
             .pool
             .acquire()
@@ -407,7 +407,7 @@ impl AuthRepository for Postgres {
                 request.name(),
                 request.email(),
                 request.password(),
-                false,
+                request.admin(),
             )
             .await
             .context(format!("Failed to create user"))?;

frontend/bun.lock

@@ -11,6 +11,7 @@
         "@nuxt/test-utils": "3.19.2",
         "@pinia/nuxt": "^0.11.1",
         "@tailwindcss/vite": "^4.1.11",
+        "@vee-validate/zod": "^4.15.1",
         "@vueuse/core": "^13.5.0",
         "byte-size": "^9.0.1",
         "class-variance-authority": "^0.7.1",
@@ -24,9 +25,11 @@
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.11",
         "tw-animate-css": "^1.3.5",
+        "vee-validate": "^4.15.1",
         "vue": "^3.5.17",
         "vue-router": "^4.5.1",
         "vue-sonner": "^2.0.1",
+        "zod": "^4.0.5",
       },
       "devDependencies": {
         "@iconify-json/lucide": "^1.2.57",
@@ -535,6 +538,8 @@
 
     "@unhead/vue": ["@unhead/vue@2.0.12", "", { "dependencies": { "hookable": "^5.5.3", "unhead": "2.0.12" }, "peerDependencies": { "vue": ">=3.5.13" } }, "sha512-WFaiCVbBd39FK6Bx3GQskhgT9s45Vjx6dRQegYheVwU1AnF+FAfJVgWbrl21p6fRJcLAFp0xDz6wE18JYBM0eQ=="],
 
+    "@vee-validate/zod": ["@vee-validate/zod@4.15.1", "", { "dependencies": { "type-fest": "^4.8.3", "vee-validate": "4.15.1" }, "peerDependencies": { "zod": "^3.24.0" } }, "sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA=="],
+
     "@vercel/nft": ["@vercel/nft@0.29.4", "", { "dependencies": { "@mapbox/node-pre-gyp": "^2.0.0", "@rollup/pluginutils": "^5.1.3", "acorn": "^8.6.0", "acorn-import-attributes": "^1.9.5", "async-sema": "^3.1.1", "bindings": "^1.4.0", "estree-walker": "2.0.2", "glob": "^10.4.5", "graceful-fs": "^4.2.9", "node-gyp-build": "^4.2.2", "picomatch": "^4.0.2", "resolve-from": "^5.0.0" }, "bin": { "nft": "out/cli.js" } }, "sha512-6lLqMNX3TuycBPABycx7A9F1bHQR7kiQln6abjFbPrf5C/05qHM9M5E4PeTE59c7z8g6vHnx1Ioihb2AQl7BTA=="],
 
     "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.4", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA=="],
@@ -1841,6 +1846,8 @@
 
     "validate-npm-package-license": ["validate-npm-package-license@3.0.4", "", { "dependencies": { "spdx-correct": "^3.0.0", "spdx-expression-parse": "^3.0.0" } }, "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew=="],
 
+    "vee-validate": ["vee-validate@4.15.1", "", { "dependencies": { "@vue/devtools-api": "^7.5.2", "type-fest": "^4.8.3" }, "peerDependencies": { "vue": "^3.4.26" } }, "sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg=="],
+
     "vite": ["vite@6.3.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ=="],
 
     "vite-dev-rpc": ["vite-dev-rpc@1.1.0", "", { "dependencies": { "birpc": "^2.4.0", "vite-hot-client": "^2.1.0" }, "peerDependencies": { "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0" } }, "sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A=="],
@@ -1923,7 +1930,7 @@
 
     "zip-stream": ["zip-stream@6.0.1", "", { "dependencies": { "archiver-utils": "^5.0.0", "compress-commons": "^6.0.2", "readable-stream": "^4.0.0" } }, "sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA=="],
 
-    "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
+    "zod": ["zod@4.0.5", "", {}, "sha512-/5UuuRPStvHXu7RS+gmvRf4NXrNxpSllGwDnCBcJZtQsKrviYXm54yDGV2KYNLT5kq0lHGcl7lqWJLgSaG+tgA=="],
 
     "@babel/code-frame/js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
@@ -1963,6 +1970,8 @@
 
     "@netlify/zip-it-and-ship-it/resolve": ["resolve@2.0.0-next.5", "", { "dependencies": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA=="],
 
+    "@netlify/zip-it-and-ship-it/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
+
     "@nodelib/fs.scandir/@nodelib/fs.stat": ["@nodelib/fs.stat@4.0.0", "", {}, "sha512-ctr6bByzksKRCV0bavi8WoQevU6plSp2IkllIsEqaiKe2mwNNnaluhnRhcsgGZHrrHk57B3lf95MkLMO3STYcg=="],
 
     "@nuxt/cli/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],

frontend/components/AppSidebar.vue

@@ -61,6 +61,9 @@ async function selectWarren(id: string) {
                                         <SidebarMenuSubButton
                                             :tooltip="warren.name"
                                             :is-active="
+                                                route.path.startsWith(
+                                                    '/warrens/files'
+                                                ) &&
                                                 store.current != null &&
                                                 store.current.warrenId === id
                                             "
@@ -78,6 +81,7 @@ async function selectWarren(id: string) {
             </SidebarGroup>
         </SidebarContent>
         <SidebarFooter>
+            <SidebarAdminMenu v-if="session != null && session.user.admin" />
             <SidebarUser v-if="session != null" :user="session.user" />
         </SidebarFooter>
     </Sidebar>

frontend/components/SidebarAdminMenu.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {
+    SidebarMenu,
+    SidebarMenuItem,
+    SidebarMenuButton,
+} from '@/components/ui/sidebar';
+
+const route = useRoute();
+</script>
+
+<template>
+    <SidebarMenu>
+        <SidebarMenuItem>
+            <NuxtLink to="/admin" as-child>
+                <SidebarMenuButton
+                    :is-active="route.path === '/admin'"
+                    tooltip="Admin"
+                >
+                    <Icon name="lucide:settings" />
+                    <span>Administration</span>
+                </SidebarMenuButton>
+            </NuxtLink>
+            <SidebarMenuSub>
+                <SidebarMenuSubItem>
+                    <NuxtLink to="/admin/users" as-child>
+                        <SidebarMenuSubButton
+                            :is-active="route.path === '/admin/users'"
+                        >
+                            <Icon name="lucide:users" />
+                            <span>Users</span>
+                        </SidebarMenuSubButton>
+                    </NuxtLink>
+                    <NuxtLink to="/admin/warrens" as-child>
+                        <SidebarMenuSubButton
+                            :is-active="route.path === '/admin/warrens'"
+                        >
+                            <Icon name="lucide:folder-tree" />
+                            <span>Warrens</span>
+                        </SidebarMenuSubButton>
+                    </NuxtLink>
+                    <!-- <NuxtLink to="/admin/stats" as-child>
+                        <SidebarMenuSubButton
+                            :is-active="route.path === '/admin/stats'"
+                        >
+                            <Icon name="lucide:bar-chart-3" />
+                            <span>Stats</span>
+                        </SidebarMenuSubButton>
+                    </NuxtLink> -->
+                </SidebarMenuSubItem>
+            </SidebarMenuSub>
+        </SidebarMenuItem>
+    </SidebarMenu>
+</template>

frontend/components/SidebarUser.vue

@@ -32,7 +32,7 @@ const AVATAR =
                     <SidebarMenuButton
                         size="lg"
                         class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                        tooltip="Settings"
+                        tooltip="User"
                     >
                         <Avatar class="h-8 w-8 rounded-lg">
                             <AvatarImage :src="AVATAR" />

frontend/components/admin/CreateUserDialog.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/switch';
+import { useForm } from 'vee-validate';
+import { createUserSchema } from '~/lib/schemas/admin';
+import { toTypedSchema } from '@vee-validate/zod';
+import type z from 'zod';
+import { createUser } from '~/lib/api/admin/createUser';
+
+const adminStore = useAdminStore();
+const creating = ref(false);
+
+function cancel() {
+    adminStore.closeCreateUserDialog();
+}
+
+const form = useForm({
+    validationSchema: toTypedSchema(createUserSchema),
+});
+
+const onSubmit = form.handleSubmit(
+    async (values: z.output<typeof createUserSchema>) => {
+        if (creating.value) {
+            return;
+        }
+
+        creating.value = true;
+
+        const result = await createUser(values);
+
+        creating.value = false;
+
+        if (result.success) {
+            adminStore.closeCreateUserDialog();
+        }
+    }
+);
+</script>
+
+<template>
+    <Dialog :open="adminStore.createUserDialog != null">
+        <DialogTrigger><slot /></DialogTrigger>
+        <DialogContent @escape-key-down="cancel">
+            <DialogHeader>
+                <DialogTitle>Create user</DialogTitle>
+                <DialogDescription>
+                    Enter a username, email and password to create a new user
+                </DialogDescription>
+            </DialogHeader>
+
+            <form
+                id="create-user-form"
+                class="flex flex-col gap-2"
+                @submit.prevent="onSubmit"
+            >
+                <FormField v-slot="{ componentField }" name="name">
+                    <FormItem>
+                        <FormLabel>Username</FormLabel>
+                        <FormControl>
+                            <Input
+                                v-bind="componentField"
+                                id="username"
+                                type="text"
+                                placeholder="confused-cat"
+                                autocomplete="off"
+                                data-1p-ignore
+                                data-protonpass-ignore
+                                data-bwignore
+                            />
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="email">
+                    <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                            <Input
+                                v-bind="componentField"
+                                id="email"
+                                type="email"
+                                placeholder="confusedcat@example.com"
+                                autocomplete="off"
+                                data-1p-ignore
+                                data-protonpass-ignore
+                                data-bwignore
+                            />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="password">
+                    <FormItem>
+                        <FormLabel>Password</FormLabel>
+                        <FormControl>
+                            <Input
+                                v-bind="componentField"
+                                id="password"
+                                type="password"
+                                autocomplete="off"
+                                data-1p-ignore
+                                data-protonpass-ignore
+                                data-bwignore
+                            />
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+
+                <FormField v-slot="{ value, handleChange }" name="admin">
+                    <FormItem>
+                        <FormLabel>Admin</FormLabel>
+                        <FormControl>
+                            <Switch
+                                id="admin"
+                                :model-value="value"
+                                @update:model-value="handleChange"
+                            />
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+            </form>
+
+            <DialogFooter>
+                <Button variant="outline" @click="cancel">Cancel</Button>
+                <Button type="submit" form="create-user-form">Create</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>

frontend/components/admin/DeleteUserDialog.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { Input } from '@/components/ui/input';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import type { AuthUser } from '~/types/auth';
+
+const adminStore = useAdminStore();
+// We'll only update this value if there is a user to prevent layout shifts on close
+const user = ref<AuthUser>();
+const confirmEmailInput = ref<InstanceType<typeof Input>>();
+const confirmEmail = ref<string>('');
+
+const emailMatches = computed(
+    () => user.value != null && user.value.email === confirmEmail.value
+);
+
+adminStore.$subscribe(async (_mutation, state) => {
+    if (state.deleteUserDialog != null) {
+        user.value = state.deleteUserDialog.user;
+        setTimeout(() => confirmEmailInput.value?.domRef?.focus(), 25);
+    }
+});
+
+function cancel() {
+    adminStore.clearDeleteUserDialog();
+}
+
+function submit() {}
+</script>
+
+<template>
+    <AlertDialog :open="adminStore.deleteUserDialog != null">
+        <AlertDialogTrigger as-child>
+            <slot />
+        </AlertDialogTrigger>
+        <AlertDialogContent @escape-key-down="cancel">
+            <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription class="space-y-1">
+                    <p ref="test">
+                        This action cannot be undone. This will permanently
+                        delete the user and remove their data from the database
+                    </p>
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlterDialogContent v-if="user != null">
+                <div class="flex flex-col gap-4">
+                    <AdminUserListing :user />
+                    <div class="flex flex-col gap-1">
+                        <p
+                            :class="[
+                                'tight text-sm',
+                                emailMatches
+                                    ? 'text-muted-foreground'
+                                    : 'text-destructive-foreground',
+                            ]"
+                        >
+                            Enter their email address to continue
+                        </p>
+                        <Input
+                            ref="confirmEmailInput"
+                            v-model="confirmEmail"
+                            type="text"
+                            :placeholder="user.email"
+                            autocomplete="off"
+                            data-1p-ignore
+                            data-protonpass-ignore
+                            data-bwignore
+                        />
+                    </div>
+                </div>
+            </AlterDialogContent>
+            <AlertDialogFooter>
+                <AlertDialogCancel @click="cancel">Cancel</AlertDialogCancel>
+                <AlertDialogAction :disabled="!emailMatches" @click="submit"
+                    >Delete</AlertDialogAction
+                >
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>

frontend/components/admin/UserListing.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { AuthUser } from '~/types/auth';
+
+const { user } = defineProps<{
+    user: AuthUser;
+}>();
+
+// TODO: Remove once this is a field on the users
+const AVATAR =
+    'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp';
+</script>
+
+<template>
+    <div class="group/user flex flex-row items-center justify-between gap-4">
+        <Avatar>
+            <AvatarImage :src="AVATAR" />
+        </Avatar>
+        <div class="flex grow flex-col leading-4">
+            <span class="text-sm font-medium">{{ user.name }}</span>
+            <span class="text-muted-foreground text-xs">{{ user.email }}</span>
+        </div>
+        <div class="opacity-0 transition-all group-hover/user:opacity-100">
+            <slot name="actions" />
+        </div>
+    </div>
+</template>

frontend/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot data-slot="alert-dialog" v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>

frontend/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>

frontend/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>

frontend/components/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

frontend/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

frontend/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-footer"
+    :class="
+      cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

frontend/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

frontend/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>

frontend/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>

frontend/components/ui/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'

frontend/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Check } from 'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+         props.class)"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="flex items-center justify-center text-current transition-none"
+    >
+      <slot>
+        <Check class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

frontend/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'

frontend/components/ui/form/FormControl.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Slot } from 'reka-ui'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

frontend/components/ui/form/FormDescription.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    data-slot="form-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

frontend/components/ui/form/FormItem.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useId } from 'reka-ui'
+import { type HTMLAttributes, provide } from 'vue'
+import { cn } from '@/lib/utils'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div
+    data-slot="form-item"
+    :class="cn('grid gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

frontend/components/ui/form/FormLabel.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+import { useFormField } from './useFormField'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn(
+      'data-[error=true]:text-destructive-foreground',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

frontend/components/ui/form/FormMessage.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { ErrorMessage } from 'vee-validate'
+import { type HTMLAttributes, toValue } from 'vue'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    data-slot="form-message"
+    as="p"
+    :name="toValue(name)"
+    :class="cn('text-destructive-foreground text-sm', props.class)"
+  />
+</template>

frontend/components/ui/form/index.ts

@@ -0,0 +1,7 @@
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'

frontend/components/ui/form/injectionKeys.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>

frontend/components/ui/form/useFormField.ts

@@ -0,0 +1,30 @@
+import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
+import { inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>')
+
+  const { name } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: useIsFieldValid(name),
+    isDirty: useIsFieldDirty(name),
+    isTouched: useIsFieldTouched(name),
+    error: useFieldError(name),
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}

frontend/components/ui/input/Input.vue

@@ -3,6 +3,12 @@ import type { HTMLAttributes } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
 
+const domRef = ref<HTMLInputElement>();
+
+defineExpose({
+	domRef,
+});
+
 const props = defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
@@ -21,6 +27,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 
 <template>
   <input
+	ref="domRef"
     v-model="modelValue"
     data-slot="input"
     :class="cn(

frontend/components/ui/label/Label.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Label, type LabelProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

frontend/components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'

frontend/components/ui/switch/Switch.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  SwitchRoot,
+  type SwitchRootEmits,
+  type SwitchRootProps,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="cn(
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

frontend/components/ui/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'

frontend/layouts/admin.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+    <NuxtLayout name="default">
+        <AdminCreateUserDialog />
+        <AdminDeleteUserDialog />
+        <slot />
+    </NuxtLayout>
+</template>

frontend/lib/api/admin/createUser.ts

@@ -0,0 +1,43 @@
+import { toast } from 'vue-sonner';
+import type { ApiResponse } from '~/types/api';
+import type { AuthUser, AuthUserFields } from '~/types/auth';
+import { getApiHeaders } from '..';
+
+/** Admin function to create a new user */
+export async function createUser(
+    user: AuthUserFields & { password: string }
+): Promise<{ success: true; user: AuthUser } | { success: false }> {
+    const { data, error } = await useFetch<ApiResponse<AuthUser>>(
+        getApiUrl('admin/users'),
+        {
+            method: 'POST',
+            headers: getApiHeaders(),
+            body: JSON.stringify({
+                name: user.name,
+                email: user.email,
+                password: user.password,
+                admin: user.admin,
+            }),
+            responseType: 'json',
+        }
+    );
+
+    if (data.value == null) {
+        toast.error('Create user', {
+            description: error.value?.data ?? 'Failed to create user',
+        });
+
+        return {
+            success: false,
+        };
+    }
+
+    toast.success('Create user', {
+        description: 'Successfully created user',
+    });
+
+    return {
+        success: true,
+        user: data.value.data,
+    };
+}

frontend/lib/api/auth/login.ts

@@ -1,6 +1,7 @@
 import { toast } from 'vue-sonner';
 import type { ApiResponse } from '~/types/api';
 import type { AuthUser } from '~/types/auth';
+import { getApiHeaders } from '..';
 
 export async function loginUser(
     email: string,
@@ -10,9 +11,7 @@ export async function loginUser(
         ApiResponse<{ token: string; user: AuthUser; expiresAt: number }>
     >(getApiUrl('auth/login'), {
         method: 'POST',
-        headers: {
-            'content-type': 'application/json',
-        },
+        headers: getApiHeaders(false),
         body: JSON.stringify({
             email: email,
             password: password,

frontend/lib/schemas/admin.ts

@@ -0,0 +1,9 @@
+import z from 'zod';
+import { registerSchema } from './auth';
+
+export const createUserSchema = registerSchema.extend({
+    admin: z
+        .boolean()
+        .default(false)
+        .prefault(() => false),
+});

frontend/lib/schemas/auth.ts

@@ -0,0 +1,23 @@
+import z from 'zod';
+
+export const registerSchema = z.object({
+    name: z.string('This field is required').trim().min(1),
+    email: z
+        .email({
+            error: 'This field is required',
+            pattern: z.regexes.rfc5322Email,
+        })
+        .trim(),
+    password: z.string('This field is required').trim().min(12).max(32),
+});
+
+export const loginSchema = z.object({
+    email: z
+        .email({
+            error: 'This field is required',
+            pattern: z.regexes.rfc5322Email,
+        })
+        .trim(),
+    // Don't include the min and max here to let bad actors waste their time
+    password: z.string('This field is required').trim(),
+});

frontend/middleware/is-admin.ts

@@ -0,0 +1,9 @@
+export default defineNuxtRouteMiddleware((_to, _from) => {
+    const session = useAuthSession().value;
+
+    if (session == null || !session.user.admin) {
+        return navigateTo({
+            path: 'login',
+        });
+    }
+});

frontend/nuxt.config.ts

@@ -62,4 +62,10 @@ export default defineNuxtConfig({
             cookiesSameSite: 'strict',
         },
     },
+
+    fonts: {
+        defaults: {
+            weights: [400, 500, 600, 700, 800, 900],
+        },
+    },
 });

frontend/package.json

@@ -18,6 +18,7 @@
         "@nuxt/test-utils": "3.19.2",
         "@pinia/nuxt": "^0.11.1",
         "@tailwindcss/vite": "^4.1.11",
+        "@vee-validate/zod": "^4.15.1",
         "@vueuse/core": "^13.5.0",
         "byte-size": "^9.0.1",
         "class-variance-authority": "^0.7.1",
@@ -31,9 +32,11 @@
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.11",
         "tw-animate-css": "^1.3.5",
+        "vee-validate": "^4.15.1",
         "vue": "^3.5.17",
         "vue-router": "^4.5.1",
-        "vue-sonner": "^2.0.1"
+        "vue-sonner": "^2.0.1",
+        "zod": "^4.0.5"
     },
     "devDependencies": {
         "@iconify-json/lucide": "^1.2.57",

frontend/pages/admin/index.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { AuthUser } from '~/types/auth';
+
+definePageMeta({
+    layout: 'admin',
+    middleware: ['is-admin'],
+});
+
+const session = useAuthSession();
+const adminStore = useAdminStore();
+
+const users: AuthUser[] = [
+    {
+        id: '5a307466-bf2e-4cf2-9b11-61f024e8fa71',
+        name: '409',
+        email: '409dev@protonmail.com',
+        admin: true,
+    },
+    {
+        id: '99132ce4-045c-4d4b-b957-61f5e99e708b',
+        name: 'test-user',
+        email: 'test@user.com',
+        admin: false,
+    },
+];
+</script>
+
+<template>
+    <div class="grid grid-cols-2 gap-4">
+        <Card>
+            <CardHeader>
+                <CardTitle
+                    ><NuxtLink to="/admin/users">Users</NuxtLink></CardTitle
+                >
+                <CardDescription
+                    >Add users or modify existing users' permissions or
+                    warrens</CardDescription
+                >
+            </CardHeader>
+            <CardContent>
+                <ScrollArea class="max-h-96">
+                    <div class="flex flex-col gap-4">
+                        <AdminUserListing
+                            v-for="user in users"
+                            :key="user.id"
+                            :user
+                            class="group/user flex flex-row items-center justify-between gap-4"
+                        >
+                            <template #actions>
+                                <Button
+                                    class="m-1"
+                                    variant="destructive"
+                                    size="icon"
+                                    :disabled="session?.user.id === user.id"
+                                    @click="
+                                        () =>
+                                            adminStore.openDeleteUserDialog(
+                                                user
+                                            )
+                                    "
+                                >
+                                    <Icon name="lucide:trash-2" />
+                                </Button>
+                            </template>
+                        </AdminUserListing>
+                    </div>
+                </ScrollArea>
+                <div class="mt-4 flex flex-row">
+                    <Button @click="adminStore.openCreateUserDialog"
+                        >Create user</Button
+                    >
+                </div>
+            </CardContent>
+        </Card>
+    </div>
+</template>

frontend/pages/admin/stats.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+    middleware: ['is-admin'],
+});
+</script>
+
+<template>
+    <p>/admin/stats</p>
+</template>

frontend/pages/admin/users.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+    middleware: ['is-admin'],
+});
+</script>
+
+<template>
+    <p>/admin/users</p>
+</template>

frontend/pages/admin/warrens.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+    middleware: ['is-admin'],
+});
+</script>
+
+<template>
+    <p>/admin/warrens</p>
+</template>

frontend/pages/index.vue

@@ -3,7 +3,3 @@ definePageMeta({
     middleware: ['authenticated'],
 });
 </script>
-
-<template>
-    <p>/</p>
-</template>

frontend/pages/login.vue

@@ -7,7 +7,11 @@ import {
     CardContent,
     CardFooter,
 } from '@/components/ui/card';
+import { toTypedSchema } from '@vee-validate/zod';
+import { useForm } from 'vee-validate';
+import type z from 'zod';
 import { loginUser } from '~/lib/api/auth/login';
+import { loginSchema } from '~/lib/schemas/auth';
 
 definePageMeta({
     layout: 'auth',
@@ -20,21 +24,20 @@ useHead({
 // TODO: Get this from the backend
 const OPEN_ID = false;
 const loggingIn = ref(false);
-const email = ref('');
-const password = ref('');
 
-const inputValid = computed(
-    () => email.value.trim().length > 0 && password.value.trim().length > 0
-);
+const form = useForm({
+    validationSchema: toTypedSchema(loginSchema),
+});
 
-async function submit() {
-    if (!inputValid.value) {
+const onSubmit = form.handleSubmit(
+    async (values: z.output<typeof loginSchema>) => {
+        if (loggingIn.value) {
             return;
         }
 
         loggingIn.value = true;
 
-    const { success } = await loginUser(email.value, password.value);
+        const { success } = await loginUser(values.email, values.password);
 
         if (success) {
             await navigateTo({ path: '/' });
@@ -42,12 +45,7 @@ async function submit() {
 
         loggingIn.value = false;
     }
-
-function onKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Enter') {
-        submit();
-    }
-}
+);
 </script>
 
 <template>
@@ -58,33 +56,48 @@ function onKeyDown(e: KeyboardEvent) {
                 Enter your email and password to log in to your account.
             </CardDescription>
         </CardHeader>
-        <CardContent class="grid gap-4">
-            <div class="grid gap-2">
-                <Label for="email">Email</Label>
+
+        <CardContent>
+            <form id="login-form" class="grid gap-4" @submit.prevent="onSubmit">
+                <FormField v-slot="{ componentField }" name="email">
+                    <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
                             <Input
+                                v-bind="componentField"
                                 id="email"
-                    v-model="email"
                                 type="email"
-                    placeholder="your@email.com"
+                                placeholder="name@example.com"
                                 autocomplete="off"
-                    required
-                    @keydown="onKeyDown"
                             />
-            </div>
-            <div class="grid gap-2">
-                <Label for="password">Password</Label>
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="password">
+                    <FormItem>
+                        <FormLabel>Password</FormLabel>
+                        <FormControl>
                             <Input
+                                v-bind="componentField"
                                 id="password"
-                    v-model="password"
                                 type="password"
                                 autocomplete="off"
-                    required
-                    @keydown="onKeyDown"
                             />
-            </div>
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+            </form>
         </CardContent>
+
         <CardFooter class="flex-col gap-2">
-            <Button class="w-full" :disabled="!inputValid" @click="submit"
+            <Button
+                type="submit"
+                class="w-full"
+                form="login-form"
+                :disabled="loggingIn"
                 >Log in</Button
             >
             <Button class="w-full" variant="outline" :disabled="!OPEN_ID"

frontend/pages/register.vue

@@ -7,7 +7,11 @@ import {
     CardContent,
     CardFooter,
 } from '@/components/ui/card';
+import { toTypedSchema } from '@vee-validate/zod';
+import { useForm } from 'vee-validate';
+import type z from 'zod';
 import { registerUser } from '~/lib/api/auth/register';
+import { registerSchema } from '~/lib/schemas/auth';
 
 definePageMeta({
     layout: 'auth',
@@ -18,24 +22,19 @@ useHead({
 });
 
 const registering = ref(false);
-const username = ref('');
-const email = ref('');
-const password = ref('');
 
-const allFieldsValid = computed(
-    () =>
-        username.value.trim().length > 0 &&
-        email.value.trim().length > 0 &&
-        password.value.trim().length > 0
-);
+const form = useForm({
+    validationSchema: toTypedSchema(registerSchema),
+});
 
-async function submit() {
+const onSubmit = form.handleSubmit(
+    async (values: z.output<typeof registerSchema>) => {
         registering.value = true;
 
         const { success } = await registerUser(
-        username.value,
-        email.value,
-        password.value
+            values.name,
+            values.email,
+            values.password
         );
 
         if (success) {
@@ -45,6 +44,7 @@ async function submit() {
 
         registering.value = false;
     }
+);
 </script>
 
 <template>
@@ -53,45 +53,66 @@ async function submit() {
             <CardTitle class="text-2xl">Register</CardTitle>
             <CardDescription>Create a new user account</CardDescription>
         </CardHeader>
-        <CardContent class="grid gap-4">
-            <div class="grid gap-2">
-                <Label for="username">Username</Label>
+        <CardContent>
+            <form
+                id="register-form"
+                class="grid gap-2"
+                @submit.prevent="onSubmit"
+            >
+                <FormField v-slot="{ componentField }" name="name">
+                    <FormItem>
+                        <FormLabel>Username</FormLabel>
+                        <FormControl>
                             <Input
+                                v-bind="componentField"
                                 id="username"
-                    v-model="username"
-                    type="username"
-                    placeholder="409"
+                                type="text"
+                                placeholder="confused-cat"
                                 autocomplete="off"
-                    required
                             />
-            </div>
-            <div class="grid gap-2">
-                <Label for="email">Email</Label>
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="email">
+                    <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
                             <Input
+                                v-bind="componentField"
                                 id="email"
-                    v-model="email"
                                 type="email"
-                    placeholder="your@email.com"
+                                placeholder="confusedcat@example.com"
                                 autocomplete="off"
-                    required
                             />
-            </div>
-            <div class="grid gap-2">
-                <Label for="password">Password</Label>
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="password">
+                    <FormItem>
+                        <FormLabel>Password</FormLabel>
+                        <FormControl>
                             <Input
+                                v-bind="componentField"
                                 id="password"
-                    v-model="password"
                                 type="password"
                                 autocomplete="off"
-                    required
                             />
-            </div>
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+            </form>
         </CardContent>
         <CardFooter class="flex-col gap-2">
             <Button
+                type="submit"
                 class="w-full"
-                :disabled="!allFieldsValid || registering"
-                @click="submit"
+                form="register-form"
+                :disabled="registering"
                 >Register</Button
             >
             <NuxtLink to="/login" class="w-full">

frontend/stores/admin.ts

@@ -0,0 +1,30 @@
+import type { AuthUser, AuthUserFields } from '~/types/auth';
+
+export const useAdminStore = defineStore('admin', {
+    state: () => ({
+        createUserDialog: null as { user: AuthUserFields } | null,
+        deleteUserDialog: null as { user: AuthUser } | null,
+    }),
+    actions: {
+        openCreateUserDialog() {
+            this.createUserDialog = {
+                user: {
+                    name: '',
+                    email: '',
+                    admin: false,
+                },
+            };
+        },
+        closeCreateUserDialog() {
+            this.createUserDialog = null;
+        },
+        openDeleteUserDialog(user: AuthUser) {
+            this.deleteUserDialog = {
+                user: user,
+            };
+        },
+        clearDeleteUserDialog() {
+            this.deleteUserDialog = null;
+        },
+    },
+});

frontend/types/auth.ts

@@ -7,8 +7,11 @@ export interface AuthSession {
     expiresAt: number;
 }
 
-export interface AuthUser {
+export interface AuthUser extends AuthUserFields {
     id: string;
+}
+
+export interface AuthUserFields {
     name: string;
     email: string;
     admin: boolean;