@entropy-softworks/ui 2026.7.31

package/src/utils/__tests__/validation.test.ts

@@ -0,0 +1,52 @@
+import { validateEmail, validatePassword, validateUsername } from "../validation";
+
+describe("validateEmail", () => {
+  it.each(["a@b.co", "user.name+tag@example.com", "x@host.dev"])("accepts %s", (e) => {
+    expect(validateEmail(e)).toBe(true);
+  });
+
+  it.each(["", "no-at", "a@b", "a@b.c", "a@@b.co", " a@b.co", "a@b.co "])("rejects %s", (e) => {
+    expect(validateEmail(e)).toBe(false);
+  });
+});
+
+describe("validatePassword", () => {
+  it("accepts a strong password", () => {
+    const r = validatePassword("Aa1!2345");
+    expect(r.valid).toBe(true);
+    expect(r.errors).toEqual([]);
+  });
+
+  it("collects every rule violation in a single pass", () => {
+    const r = validatePassword("short");
+    expect(r.valid).toBe(false);
+    // length, upper, digit, symbol = 4 misses; lowercase is present.
+    expect(r.errors.length).toBe(4);
+  });
+
+  it("flags missing symbol only", () => {
+    const r = validatePassword("Aaaaaaa1");
+    expect(r.valid).toBe(false);
+    expect(r.errors).toHaveLength(1);
+    expect(r.errors[0]).toMatch(/special/i);
+  });
+});
+
+describe("validateUsername", () => {
+  it("accepts 3..30 ascii alnum/underscore", () => {
+    expect(validateUsername("abc")).toEqual({ valid: true });
+    expect(validateUsername("a_1")).toEqual({ valid: true });
+    expect(validateUsername("a".repeat(30))).toEqual({ valid: true });
+  });
+
+  it("rejects out-of-range length", () => {
+    expect(validateUsername("ab").valid).toBe(false);
+    expect(validateUsername("a".repeat(31)).valid).toBe(false);
+  });
+
+  it("rejects non-ascii / special chars", () => {
+    expect(validateUsername("ab-c").valid).toBe(false);
+    expect(validateUsername("ab c").valid).toBe(false);
+    expect(validateUsername("ab.c").valid).toBe(false);
+  });
+});

package/src/utils/api-fetch.ts

@@ -0,0 +1,61 @@
+import { Platform } from "react-native";
+import { fetchWithTimeout } from "./fetch";
+import { getBaseUrl, getSessionToken } from "../services/api-config";
+
+const SAFE_METHODS = new Set(["GET", "HEAD", "OPTIONS"]);
+
+const CSRF_COOKIE_NAME = "csrf_token";
+const CSRF_HEADER_NAME = "X-CSRF-Token";
+
+function readCookie(name: string): string | null {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const prefix = `${name}=`;
+  for (const part of document.cookie.split(";")) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith(prefix)) {
+      return decodeURIComponent(trimmed.slice(prefix.length));
+    }
+  }
+  return null;
+}
+
+/**
+ * Cross-platform authed `fetch` for the entropy-ui auth flows.
+ *
+ * **Web**: HttpOnly session cookie (auto-attached, used in same-origin /
+ * production) + `X-CSRF-Token` on writes. Also attaches a `Bearer` token when
+ * one is stored (sessionStorage) — needed for split-origin dev where the Lax
+ * cookie can't ride cross-origin XHR.
+ * **Native**: Bearer token loaded from SecureStore.
+ */
+export async function apiFetch(
+  path: string,
+  init: RequestInit = {},
+  timeoutMs?: number
+): Promise<Response> {
+  const url = `${getBaseUrl()}${path}`;
+  const method = (init.method ?? "GET").toUpperCase();
+  const headers = new Headers(init.headers);
+
+  if (Platform.OS === "web") {
+    if (!SAFE_METHODS.has(method)) {
+      const csrf = readCookie(CSRF_COOKIE_NAME);
+      if (csrf) {
+        headers.set(CSRF_HEADER_NAME, csrf);
+      }
+    }
+    const webToken = await getSessionToken();
+    if (webToken && !headers.has("Authorization")) {
+      headers.set("Authorization", `Bearer ${webToken}`);
+    }
+    return fetchWithTimeout(url, { ...init, headers, credentials: "include" }, timeoutMs);
+  }
+
+  const token = await getSessionToken();
+  if (token) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+  return fetchWithTimeout(url, { ...init, headers }, timeoutMs);
+}

package/src/utils/clipboard.ts

@@ -0,0 +1,69 @@
+/**
+ * Centralised copy-to-clipboard with a single, module-scope auto-clear
+ * timer.
+ *
+ * Why module scope: tying the timer to a React component (via `useRef`)
+ * means it gets cancelled when the screen unmounts — which happens
+ * routinely (auto-lock on tab-switch, navigation to another item). The
+ * user's just-completed copy then either gets wiped immediately
+ * (component cleanup runs `setStringAsync("")`) or sits indefinitely.
+ *
+ * Behaviour:
+ *   * `copyToClipboard(value)` writes the value, returns `true` on
+ *     success.
+ *   * On success, schedules a 30-second auto-wipe.
+ *   * Subsequent copies cancel the prior timer and reschedule, so the
+ *     wipe is always 30 seconds from the *last* copy regardless of
+ *     which screen issued it.
+ *
+ * Limitation: we don't read the clipboard back (would require the
+ * clipboard-read permission), so if the user copies from another app
+ * between our copy and the auto-clear firing, we'll still wipe their
+ * value at the 30s mark. Acceptable trade-off for a password manager.
+ */
+
+import * as Clipboard from "expo-clipboard";
+
+const AUTO_CLEAR_MS = 30_000;
+
+let clearTimer: ReturnType<typeof setTimeout> | null = null;
+
+/** Write `value` to the clipboard. Returns `true` if the write succeeded. */
+export async function copyToClipboard(value: string): Promise<boolean> {
+  let ok: boolean;
+  try {
+    ok = await Clipboard.setStringAsync(value);
+  } catch {
+    ok = false;
+  }
+  if (!ok) {
+    return false;
+  }
+
+  if (clearTimer !== null) {
+    clearTimeout(clearTimer);
+  }
+  clearTimer = setTimeout(() => {
+    clearTimer = null;
+    void Clipboard.setStringAsync("").catch(() => {
+      // Best-effort.
+    });
+  }, AUTO_CLEAR_MS);
+  return true;
+}
+
+/**
+ * Wipe the clipboard now (e.g. on explicit logout). Cancels the pending
+ * auto-clear so we don't fire a redundant wipe later.
+ */
+export async function clearClipboardNow(): Promise<void> {
+  if (clearTimer !== null) {
+    clearTimeout(clearTimer);
+    clearTimer = null;
+  }
+  try {
+    await Clipboard.setStringAsync("");
+  } catch {
+    // Best-effort.
+  }
+}

package/src/utils/cn.ts

@@ -0,0 +1,12 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Combines class names using clsx and merges Tailwind CSS classes intelligently.
+ *
+ * @param inputs - Class values to combine
+ * @returns Merged class string
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/debounce.ts

@@ -0,0 +1,33 @@
+/**
+ * Debounce a function. The returned function has a `.cancel()` method
+ * so a pending invocation can be cleared in a `useEffect` cleanup to
+ * avoid a setState-after-unmount on the trailing call.
+ *
+ * Intentionally a tiny, no-dependency implementation — `lodash.debounce`
+ * pulls 200kB of lodash with it; this is 15 lines, type-safe, and tree-
+ * shake-friendly.
+ */
+export function debounce<T extends (...args: Parameters<T>) => void>(
+  func: T,
+  wait: number
+): ((...args: Parameters<T>) => void) & { cancel: () => void } {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  const debounced = (...args: Parameters<T>) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+
+  debounced.cancel = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  return debounced;
+}

package/src/utils/error.ts

@@ -0,0 +1,10 @@
+/**
+ * Extract a human-readable message from an unknown error value.
+ *
+ * Use this in every `catch (e: unknown)` block instead of accessing
+ * `e?.message` directly — TypeScript's `unknown` type prevents property
+ * access without a type guard.
+ */
+export function getErrorMessage(e: unknown, fallback = "An unexpected error occurred"): string {
+  return e instanceof Error ? e.message : fallback;
+}

package/src/utils/fetch.ts

@@ -0,0 +1,33 @@
+/**
+ * `fetch` with a timeout abort signal merged onto the caller's own signal.
+ * The default timeout is 15s. Pass `Infinity` to disable the timeout
+ * (the caller's own `signal` still applies). Passing `0` aborts
+ * immediately — almost never what you want — so we treat any
+ * non-positive value as "no timeout" to avoid the footgun.
+ *
+ * **Lockstep duplicate** of `vault/clients/shared/src/utils/fetch.ts`.
+ * `@vault/shared` is the vault-specific lower layer; `@entropy-softworks/ui`
+ * is the cross-portfolio UI package. Neither can depend on the other
+ * (shared → ui would invert layering; ui → shared would chain every
+ * downstream Entropy Softworks app to vault). The function is small,
+ * pure, and stable; keep both copies byte-identical and update both
+ * when changing.
+ */
+export function fetchWithTimeout(
+  url: string,
+  options: RequestInit = {},
+  timeoutMs = 15000
+): Promise<Response> {
+  const controller = new AbortController();
+  const id =
+    timeoutMs > 0 && Number.isFinite(timeoutMs)
+      ? setTimeout(() => controller.abort(), timeoutMs)
+      : null;
+  const signals = [controller.signal, options.signal].filter((s): s is AbortSignal => s != null);
+  const combinedSignal = signals.length > 1 ? AbortSignal.any(signals) : controller.signal;
+  return fetch(url, { ...options, signal: combinedSignal }).finally(() => {
+    if (id !== null) {
+      clearTimeout(id);
+    }
+  });
+}

package/src/utils/http-error.ts

@@ -0,0 +1,81 @@
+/**
+ * Parse an Entropy Softworks server error response into a single user-
+ * facing string. Falls back to `fallback` when the body isn't valid
+ * JSON or doesn't follow the expected `{ error: { message, details? } }`
+ * shape. Detail arrays longer than `MAX_DETAILS` are truncated so a
+ * runaway server response can't produce an unreadable toast.
+ */
+export interface ServerErrorBody {
+  error: {
+    message: string;
+    details?: string[];
+    code?: string;
+  };
+}
+
+const MAX_DETAILS = 5;
+
+/**
+ * Error subclass that carries the server's machine-readable
+ * `error.code` and HTTP `status` alongside the human-readable
+ * message. UI code can branch on `code` (e.g. `INVALID_CREDENTIALS`,
+ * `ACCOUNT_LOCKED`, `EMAIL_NOT_VERIFIED`) instead of substring-
+ * matching against an English message that breaks under i18n.
+ */
+export class ApiError extends Error {
+  readonly code: string | undefined;
+  readonly status: number;
+  readonly details: readonly string[] | undefined;
+
+  constructor(
+    message: string,
+    options: { code?: string; status: number; details?: readonly string[] }
+  ) {
+    super(message);
+    this.name = "ApiError";
+    this.code = options.code;
+    this.status = options.status;
+    this.details = options.details;
+  }
+}
+
+export async function extractErrorMessage(response: Response, fallback: string): Promise<string> {
+  try {
+    const error: ServerErrorBody = await response.json();
+    const details = error.error.details;
+    if (details && details.length > 0) {
+      const shown = details.slice(0, MAX_DETAILS).join(", ");
+      return details.length > MAX_DETAILS ? `${shown}, …` : shown;
+    }
+    return error.error.message || fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Like `extractErrorMessage` but returns a structured `ApiError` so
+ * callers can branch on `code` / `status`. Use this when the caller
+ * is throwing and downstream consumers need machine-readable
+ * classification; use `extractErrorMessage` when all you need is a
+ * toast string.
+ */
+export async function extractApiError(response: Response, fallback: string): Promise<ApiError> {
+  let message = fallback;
+  let code: string | undefined;
+  let details: string[] | undefined;
+  try {
+    const error: ServerErrorBody = await response.json();
+    if (error.error.details && error.error.details.length > 0) {
+      details = error.error.details.slice(0, MAX_DETAILS);
+      const shown = details.join(", ");
+      message = error.error.details.length > MAX_DETAILS ? `${shown}, …` : shown;
+    } else {
+      message = error.error.message || fallback;
+    }
+    code = error.error.code;
+  } catch {
+    // Non-JSON body — keep fallback message, no code.
+  }
+  return new ApiError(message, { code, status: response.status, details });
+}

package/src/utils/index.ts

@@ -0,0 +1,23 @@
+export { apiFetch } from "./api-fetch";
+export { cn } from "./cn";
+export { getErrorMessage } from "./error";
+export {
+  darkPalette,
+  getPalette,
+  lightPalette,
+  usePalette,
+  type ColorScheme,
+  type Palette,
+} from "./palette";
+export { clearClipboardNow, copyToClipboard } from "./clipboard";
+export { loadSetting, saveSetting } from "./settings-storage";
+export { debounce } from "./debounce";
+export { ApiError, extractApiError, extractErrorMessage } from "./http-error";
+export { generatePassword, type GeneratePasswordOptions } from "./password";
+export {
+  validateEmail,
+  validatePassword,
+  validateUsername,
+  type PasswordValidation,
+  type UsernameValidation,
+} from "./validation";

package/src/utils/palette.ts

@@ -0,0 +1,105 @@
+/**
+ * JavaScript-side representation of the same color tokens NativeWind
+ * exposes as CSS variables in `styles/globals.css`. Components that need
+ * a palette object (RN-Web inline styles, SVG `stroke`, etc.) consume
+ * this so the values stay in lockstep with the className-based theming.
+ *
+ * Always read via `usePalette()` (or `getPalette(scheme)` for non-hook
+ * call sites) — the table mirrors `:root` for light and `.dark` for
+ * dark.
+ */
+
+import { useMemo } from "react";
+import { useColorScheme } from "nativewind";
+
+export interface Palette {
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  muted: string;
+  mutedForeground: string;
+  accent: string;
+  accentForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  border: string;
+  input: string;
+  inputBorder: string;
+  ring: string;
+  placeholder: string;
+}
+
+export const lightPalette: Palette = {
+  background: "rgb(255, 255, 255)",
+  foreground: "rgb(0, 0, 0)",
+  card: "rgb(255, 255, 255)",
+  cardForeground: "rgb(0, 0, 0)",
+  popover: "rgb(255, 255, 255)",
+  popoverForeground: "rgb(0, 0, 0)",
+  primary: "rgb(0, 0, 0)",
+  primaryForeground: "rgb(255, 255, 255)",
+  secondary: "rgb(245, 245, 245)",
+  secondaryForeground: "rgb(0, 0, 0)",
+  muted: "rgb(245, 245, 245)",
+  mutedForeground: "rgb(115, 115, 115)",
+  accent: "rgb(245, 245, 245)",
+  accentForeground: "rgb(0, 0, 0)",
+  destructive: "rgb(239, 68, 68)",
+  destructiveForeground: "rgb(255, 255, 255)",
+  border: "rgb(229, 229, 229)",
+  input: "rgb(255, 255, 255)",
+  inputBorder: "rgb(229, 229, 229)",
+  ring: "rgb(0, 0, 0)",
+  placeholder: "rgb(163, 163, 163)",
+};
+
+export const darkPalette: Palette = {
+  background: "rgb(0, 0, 0)",
+  foreground: "rgb(255, 255, 255)",
+  card: "rgb(0, 0, 0)",
+  cardForeground: "rgb(255, 255, 255)",
+  popover: "rgb(0, 0, 0)",
+  popoverForeground: "rgb(255, 255, 255)",
+  primary: "rgb(255, 255, 255)",
+  primaryForeground: "rgb(0, 0, 0)",
+  secondary: "rgb(38, 38, 38)",
+  secondaryForeground: "rgb(255, 255, 255)",
+  muted: "rgb(38, 38, 38)",
+  mutedForeground: "rgb(163, 163, 163)",
+  accent: "rgb(38, 38, 38)",
+  accentForeground: "rgb(255, 255, 255)",
+  destructive: "rgb(127, 29, 29)",
+  destructiveForeground: "rgb(255, 255, 255)",
+  border: "rgb(38, 38, 38)",
+  input: "rgb(0, 0, 0)",
+  inputBorder: "rgb(38, 38, 38)",
+  ring: "rgb(255, 255, 255)",
+  placeholder: "rgb(115, 115, 115)",
+};
+
+export type ColorScheme = "light" | "dark";
+
+export function getPalette(scheme: ColorScheme): Palette {
+  return scheme === "dark" ? darkPalette : lightPalette;
+}
+
+/**
+ * Returns the active palette + scheme. Re-renders the caller when the
+ * OS / class-toggled theme flips.
+ */
+export function usePalette(): { scheme: ColorScheme; palette: Palette } {
+  const { colorScheme } = useColorScheme();
+  const scheme: ColorScheme = colorScheme === "dark" ? "dark" : "light";
+  // Memoize the wrapper so callers using the result as a useMemo /
+  // useCallback dep see a stable reference until the scheme actually
+  // changes. The contained `palette` is already a module-level cached
+  // singleton; only the wrapper object was being re-created.
+  return useMemo(() => ({ scheme, palette: getPalette(scheme) }), [scheme]);
+}

package/src/utils/password.ts

@@ -0,0 +1,64 @@
+import { randomBytes } from "@noble/ciphers/utils.js";
+
+const UPPERCASE = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const LOWERCASE = "abcdefghijklmnopqrstuvwxyz";
+const NUMBERS = "0123456789";
+const SYMBOLS = "!@#$%^&*()_+-=[]{}|;:,.<>?";
+const SIMILAR = "il1Lo0O";
+
+export interface GeneratePasswordOptions {
+  /** Output length in characters. */
+  length: number;
+  includeUppercase?: boolean;
+  includeLowercase?: boolean;
+  includeNumbers?: boolean;
+  includeSymbols?: boolean;
+  /** Drop ambiguous glyphs (`i l 1 L o 0 O`). */
+  excludeSimilar?: boolean;
+}
+
+/**
+ * Generate a random password using CSPRNG bytes (`@noble/ciphers`) with
+ * rejection sampling so the output distribution stays uniform across
+ * the chosen character set — `b % len` modulo-bias is rejected by
+ * trimming the byte range to a multiple of `len`.
+ *
+ * Throws when every character class is disabled (no charset).
+ */
+export function generatePassword(opts: GeneratePasswordOptions): string {
+  let charset = "";
+  if (opts.includeUppercase ?? true) {
+    charset += UPPERCASE;
+  }
+  if (opts.includeLowercase ?? true) {
+    charset += LOWERCASE;
+  }
+  if (opts.includeNumbers ?? true) {
+    charset += NUMBERS;
+  }
+  if (opts.includeSymbols ?? true) {
+    charset += SYMBOLS;
+  }
+  if (opts.excludeSimilar) {
+    charset = charset
+      .split("")
+      .filter((c) => !SIMILAR.includes(c))
+      .join("");
+  }
+  if (charset.length === 0) {
+    throw new Error("generatePassword: at least one character class must be enabled");
+  }
+
+  const limit = Math.floor(256 / charset.length) * charset.length;
+  let out = "";
+  while (out.length < opts.length) {
+    const bytes = randomBytes(opts.length - out.length + 16);
+    for (let i = 0; i < bytes.length && out.length < opts.length; i++) {
+      const b = bytes[i] ?? 0;
+      if (b < limit) {
+        out += charset.charAt(b % charset.length);
+      }
+    }
+  }
+  return out;
+}

package/src/utils/settings-storage.ts

@@ -0,0 +1,68 @@
+import { Platform } from "react-native";
+import * as SecureStore from "expo-secure-store";
+
+/**
+ * Boolean preference storage shared across platforms.
+ *
+ * Web persists via `localStorage` so behaviour matches the native
+ * SecureStore path (also persistent). The web tier is origin-isolated
+ * but not encrypted at rest — don't use this for secrets, only for UX
+ * preferences whose disclosure is acceptable. Security-sensitive policy
+ * (e.g. enforced auto-lock) belongs server-side.
+ */
+
+const WEB_STORAGE_AVAILABLE =
+  Platform.OS === "web" && typeof window !== "undefined" && !!window.localStorage;
+
+let warnedNoStorage = false;
+function warnNoStorage(action: "load" | "save"): void {
+  if (warnedNoStorage) {
+    return;
+  }
+  warnedNoStorage = true;
+  if (!__DEV__) {
+    return;
+  }
+
+  console.warn(
+    `[settings-storage] ${action} failed: localStorage unavailable; using fallbacks for this session.`
+  );
+}
+
+export async function loadSetting(key: string, fallback: boolean): Promise<boolean> {
+  try {
+    if (Platform.OS === "web") {
+      if (!WEB_STORAGE_AVAILABLE) {
+        warnNoStorage("load");
+        return fallback;
+      }
+      const v = window.localStorage.getItem(key);
+      return v !== null ? v === "true" : fallback;
+    }
+    const v = await SecureStore.getItemAsync(key);
+    return v !== null ? v === "true" : fallback;
+  } catch (e) {
+    if (__DEV__) {
+      console.warn(`[settings-storage] load(${key}) threw:`, e);
+    }
+    return fallback;
+  }
+}
+
+export async function saveSetting(key: string, value: boolean): Promise<void> {
+  try {
+    if (Platform.OS === "web") {
+      if (!WEB_STORAGE_AVAILABLE) {
+        warnNoStorage("save");
+        return;
+      }
+      window.localStorage.setItem(key, String(value));
+      return;
+    }
+    await SecureStore.setItemAsync(key, String(value));
+  } catch (e) {
+    if (__DEV__) {
+      console.warn(`[settings-storage] save(${key}) threw:`, e);
+    }
+  }
+}

package/src/utils/validation.ts

@@ -0,0 +1,71 @@
+/**
+ * Input validators used by the UI to surface preview feedback before
+ * the user hits the server. The Entropy Softworks application servers
+ * enforce these same rules authoritatively (see `entropy-auth`'s
+ * `password::policy` / `Validation`); these implementations are kept
+ * deliberately strict to avoid false positives on the client.
+ *
+ * Email: a permissive `local@host.tld` shape — anything stricter risks
+ * rejecting valid addresses, and the server validates anyway.
+ *
+ * Password: matches the default `entropy-auth` policy (≥8 chars, mixed
+ * case, digit, symbol). Apps that opt their server into a different
+ * policy can ignore the `valid` result and let the server be the source
+ * of truth.
+ *
+ * Username: 3–30 chars, ASCII alnum + underscore.
+ */
+
+export interface PasswordValidation {
+  valid: boolean;
+  errors: string[];
+}
+
+export interface UsernameValidation {
+  valid: boolean;
+  error?: string;
+}
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+const UPPER = /[A-Z]/;
+const LOWER = /[a-z]/;
+const DIGIT = /[0-9]/;
+const SYMBOL = /[!@#$%^&*()_+\-=[\]{}|;:,.<>?]/;
+const USERNAME = /^[a-zA-Z0-9_]+$/;
+
+export function validateEmail(email: string): boolean {
+  return EMAIL.test(email);
+}
+
+export function validatePassword(password: string): PasswordValidation {
+  const errors: string[] = [];
+  if (password.length < 8) {
+    errors.push("Password must be at least 8 characters");
+  }
+  if (!UPPER.test(password)) {
+    errors.push("Password must contain at least one uppercase letter");
+  }
+  if (!LOWER.test(password)) {
+    errors.push("Password must contain at least one lowercase letter");
+  }
+  if (!DIGIT.test(password)) {
+    errors.push("Password must contain at least one number");
+  }
+  if (!SYMBOL.test(password)) {
+    errors.push("Password must contain at least one special character");
+  }
+  return { valid: errors.length === 0, errors };
+}
+
+export function validateUsername(username: string): UsernameValidation {
+  if (username.length < 3 || username.length > 30) {
+    return { valid: false, error: "Username must be between 3 and 30 characters" };
+  }
+  if (!USERNAME.test(username)) {
+    return {
+      valid: false,
+      error: "Username can only contain letters, numbers, and underscores",
+    };
+  }
+  return { valid: true };
+}