@checkstack/auth-frontend 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,207 @@
+# @checkstack/auth-frontend
+
+## 0.0.2
+
+### Patch Changes
+
+- d20d274: Initial release of all @checkstack packages. Rebranded from Checkmate to Checkstack with new npm organization @checkstack and domain checkstack.dev.
+- Updated dependencies [d20d274]
+  - @checkstack/auth-common@0.0.2
+  - @checkstack/common@0.0.2
+  - @checkstack/frontend-api@0.0.2
+  - @checkstack/ui@0.0.2
+
+## 0.3.0
+
+### Minor Changes
+
+- 52231ef: # Auth Settings Page Refactoring
+
+  ## Auth Frontend
+
+  Refactored the `AuthSettingsPage` into modular, self-contained tab components:
+
+  - **New Components**: Created `UsersTab`, `RolesTab`, `StrategiesTab`, and `ApplicationsTab` components
+  - **Dynamic Tab Visibility**: Tabs are now conditionally shown based on user permissions
+  - **Auto-Select Logic**: Automatically selects the first available tab if the current tab becomes inaccessible
+  - **Self-Contained State**: Each tab component manages its own state, handlers, and dialogs, reducing prop drilling
+
+  ## UI Package
+
+  - **Responsive Tabs**: Tabs now use column layout on small screens and row layout on medium+ screens
+
+- a65e002: Add command palette commands and deep-linking support
+
+  **Backend Changes:**
+
+  - `healthcheck-backend`: Add "Manage Health Checks" (⇧⌘H) and "Create Health Check" commands
+  - `catalog-backend`: Add "Manage Systems" (⇧⌘S) and "Create System" commands
+  - `integration-backend`: Add "Manage Integrations" (⇧⌘G), "Create Integration Subscription", and "View Integration Logs" commands
+  - `auth-backend`: Add "Manage Users" (⇧⌘U), "Create User", "Manage Roles", and "Manage Applications" commands
+  - `command-backend`: Auto-cleanup command registrations when plugins are deregistered
+
+  **Frontend Changes:**
+
+  - `HealthCheckConfigPage`: Handle `?action=create` URL parameter
+  - `CatalogConfigPage`: Handle `?action=create` URL parameter
+  - `IntegrationsPage`: Handle `?action=create` URL parameter
+  - `AuthSettingsPage`: Handle `?tab=` and `?action=create` URL parameters
+
+- 32ea706: ### User Menu Loading State Fix
+
+  Fixed user menu items "popping in" one after another due to independent async permission checks.
+
+  **Changes:**
+
+  - Added `UserMenuItemsContext` interface with `permissions` and `hasCredentialAccount` to `@checkstack/frontend-api`
+  - `LoginNavbarAction` now pre-fetches all permissions and credential account info before rendering the menu
+  - All user menu item components now use the passed context for synchronous permission checks instead of async hooks
+  - Uses `qualifyPermissionId` helper for fully-qualified permission IDs
+
+  **Result:** All menu items appear simultaneously when the user menu opens.
+
+### Patch Changes
+
+- 54cc787: ### Fix Access Denied Flash on Page Load
+
+  Fixed the "Access Denied" screen briefly flashing when loading permission-protected pages.
+
+  **Root cause:** The `usePermissions` hook was setting `loading: false` when the session was still pending, causing a brief moment where permissions appeared to be denied.
+
+  **Changes:**
+
+  - `usePermissions` hook now waits for session to finish loading (`isPending`) before determining permission state
+  - `PageLayout` component now treats `loading=undefined` with `allowed=false` as a loading state
+  - `AuthSettingsPage` now explicitly waits for permission hooks to finish loading before checking access
+
+  **Result:** Pages show a loading spinner until permissions are fully resolved, eliminating the flash.
+
+- a65e002: Add compile-time type safety for Lucide icon names
+
+  - Add `LucideIconName` type and `lucideIconSchema` Zod schema to `@checkstack/common`
+  - Update backend interfaces (`AuthStrategy`, `NotificationStrategy`, `IntegrationProvider`, `CommandDefinition`) to use `LucideIconName`
+  - Update RPC contracts to use `lucideIconSchema` for proper type inference across RPC boundaries
+  - Simplify `SocialProviderButton` to use `DynamicIcon` directly (removes 30+ lines of pascalCase conversion)
+  - Replace static `iconMap` in `SearchDialog` with `DynamicIcon` for dynamic icon rendering
+  - Add fallback handling in `DynamicIcon` when icon name isn't found
+  - Fix legacy kebab-case icon names to PascalCase: `mail`→`Mail`, `send`→`Send`, `github`→`Github`, `key-round`→`KeyRound`, `network`→`Network`, `AlertCircle`→`CircleAlert`
+
+- ae33df2: Move command palette from dashboard to centered navbar position
+
+  - Converted `command-frontend` into a plugin with `NavbarCenterSlot` extension
+  - Added compact `NavbarSearch` component with responsive search trigger
+  - Moved `SearchDialog` from dashboard-frontend to command-frontend
+  - Keyboard shortcut (⌘K / Ctrl+K) now works on every page
+  - Renamed navbar slots for clarity:
+    - `NavbarSlot` → `NavbarRightSlot`
+    - `NavbarMainSlot` → `NavbarLeftSlot`
+    - Added new `NavbarCenterSlot` for centered content
+
+- Updated dependencies [52231ef]
+- Updated dependencies [b0124ef]
+- Updated dependencies [54cc787]
+- Updated dependencies [a65e002]
+- Updated dependencies [ae33df2]
+- Updated dependencies [32ea706]
+  - @checkstack/ui@0.1.2
+  - @checkstack/common@0.2.0
+  - @checkstack/auth-common@0.2.1
+  - @checkstack/frontend-api@0.1.0
+
+## 0.2.1
+
+### Patch Changes
+
+- 1bf71bb: Hide "Change Password" menu item for non-credential users
+
+  The change password feature now only appears in the user menu for users who have
+  a credential-based account (email/password). Users who authenticated exclusively
+  via OAuth providers (e.g., GitHub, Google) will no longer see this option since
+  they don't have a password to change.
+
+## 0.2.0
+
+### Minor Changes
+
+- e26c08e: Add password change functionality for credential-authenticated users
+
+  - Add `changePassword` route to auth-common
+  - Create `ChangePasswordPage.tsx` component with password validation, current password verification, and session revocation option
+  - Add "Change Password" menu item in User Menu
+  - Reuses patterns from existing password reset flow for consistency
+
+### Patch Changes
+
+- Updated dependencies [e26c08e]
+  - @checkstack/auth-common@0.2.0
+
+## 0.1.1
+
+### Patch Changes
+
+- 0f8cc7d: Add runtime configuration API for Docker deployments
+
+  - Backend: Add `/api/config` endpoint serving `BASE_URL` at runtime
+  - Backend: Update CORS to use `BASE_URL` and auto-allow Vite dev server
+  - Backend: `INTERNAL_URL` now defaults to `localhost:3000` (no BASE_URL fallback)
+  - Frontend API: Add `RuntimeConfigProvider` context for runtime config
+  - Frontend: Use `RuntimeConfigProvider` from `frontend-api`
+  - Auth Frontend: Add `useAuthClient()` hook using runtime config
+
+- Updated dependencies [0f8cc7d]
+  - @checkstack/frontend-api@0.0.3
+  - @checkstack/ui@0.1.1
+
+## 0.1.0
+
+### Minor Changes
+
+- 32f2535: Refactor application role assignment
+
+  - Removed role selection from the application creation dialog
+  - New applications now automatically receive the "Applications" role
+  - Roles are now manageable inline in the Applications table (similar to user role management)
+  - Added informational alert in create dialog explaining default role behavior
+
+- b354ab3: # Strategy Instructions Support & Telegram Notification Plugin
+
+  ## Strategy Instructions Interface
+
+  Added `adminInstructions` and `userInstructions` optional fields to the `NotificationStrategy` interface. These allow strategies to export markdown-formatted setup guides that are displayed in the configuration UI:
+
+  - **`adminInstructions`**: Shown when admins configure platform-wide strategy settings (e.g., how to create API keys)
+  - **`userInstructions`**: Shown when users configure their personal settings (e.g., how to link their account)
+
+  ### Updated Components
+
+  - `StrategyConfigCard` now accepts an `instructions` prop and renders it before config sections
+  - `StrategyCard` passes `adminInstructions` to `StrategyConfigCard`
+  - `UserChannelCard` renders `userInstructions` when users need to connect
+
+  ## New Telegram Notification Plugin
+
+  Added `@checkstack/notification-telegram-backend` plugin for sending notifications via Telegram:
+
+  - Uses [grammY](https://grammy.dev/) framework for Telegram Bot API integration
+  - Sends messages with MarkdownV2 formatting and inline keyboard buttons for actions
+  - Includes comprehensive admin instructions for bot setup via @BotFather
+  - Includes user instructions for account linking
+
+  ### Configuration
+
+  Admins need to configure a Telegram Bot Token obtained from @BotFather.
+
+  ### User Linking
+
+  The strategy uses `contactResolution: { type: "custom" }` for Telegram Login Widget integration. Full frontend integration for the Login Widget is pending future work.
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [32f2535]
+- Updated dependencies [b354ab3]
+  - @checkstack/ui@0.1.0
+  - @checkstack/common@0.1.0
+  - @checkstack/auth-common@0.1.0
+  - @checkstack/frontend-api@0.0.2

package/e2e/login.e2e.ts

@@ -0,0 +1,63 @@
+import {
+  test,
+  expect,
+} from "@checkstack/test-utils-frontend/playwright";
+
+/**
+ * Sample E2E test for auth-frontend login page.
+ *
+ * Prerequisites:
+ * - Frontend dev server running: bun run dev (in packages/frontend)
+ * - Backend dev server running: bun run dev (in packages/backend)
+ *
+ * Run with: bun run test:e2e
+ */
+
+test.describe("Login Page", () => {
+  test("should display the login page", async ({ page }) => {
+    await page.goto("/login");
+
+    // Check that the page title or main heading is visible
+    await expect(page.locator("h1, h2").first()).toBeVisible();
+  });
+
+  test("should show login form elements", async ({ page }) => {
+    await page.goto("/login");
+
+    // Check for common login form elements
+    // Using flexible selectors since actual implementation may vary
+    const emailInput = page.locator(
+      'input[type="email"], input[name="email"], input[placeholder*="email" i]'
+    );
+    const passwordInput = page.locator(
+      'input[type="password"], input[name="password"]'
+    );
+    const submitButton = page.locator(
+      'button[type="submit"], button:has-text("Login"), button:has-text("Sign in")'
+    );
+
+    // At least one of these should be present for a login page
+    const hasLoginForm =
+      (await emailInput.count()) > 0 ||
+      (await passwordInput.count()) > 0 ||
+      (await submitButton.count()) > 0;
+
+    expect(hasLoginForm).toBe(true);
+  });
+
+  test("should navigate to register page from login", async ({ page }) => {
+    await page.goto("/login");
+
+    // Look for a register/sign up link
+    const registerLink = page.locator(
+      'a:has-text("Register"), a:has-text("Sign up"), a[href*="register"]'
+    );
+
+    if ((await registerLink.count()) > 0) {
+      await registerLink.first().click();
+
+      // Should navigate to a register page
+      await expect(page).toHaveURL(/register|signup/);
+    }
+  });
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@checkstack/auth-frontend",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "src/index.tsx",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./api": "./src/api.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0",
+    "test:e2e": "bunx playwright test"
+  },
+  "dependencies": {
+    "@checkstack/frontend-api": "workspace:*",
+    "@checkstack/common": "workspace:*",
+    "@checkstack/ui": "workspace:*",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.22.0",
+    "lucide-react": "^0.344.0",
+    "better-auth": "^1.1.8",
+    "@checkstack/auth-common": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@playwright/test": "^1.49.0",
+    "@checkstack/test-utils-frontend": "workspace:*",
+    "@checkstack/tsconfig": "workspace:*",
+    "@checkstack/scripts": "workspace:*"
+  }
+}

package/playwright-report/data/774b616fd991c36e57f6aa95d67906b877dff5d1.md

@@ -0,0 +1,20 @@
+# Page snapshot
+
+```yaml
+- generic [ref=e3]:
+  - banner [ref=e4]:
+    - generic [ref=e5]:
+      - link "Checkstack" [ref=e6] [cursor=pointer]:
+        - /url: /
+        - heading "Checkstack" [level=1] [ref=e7]
+      - navigation
+    - generic [ref=e8]:
+      - link "Login" [ref=e9] [cursor=pointer]:
+        - /url: /auth/login
+        - button "Login" [ref=e10]:
+          - img [ref=e11]
+          - text: Login
+      - button [ref=e16] [cursor=pointer]:
+        - img [ref=e17]
+  - main [ref=e20]
+```

package/playwright-report/data/d37ef869a8ef03c489f7ca3b80d67da69614c383.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0bbcdd45e1a47dd800a263b6874f98de64653fec3db75ea8288013b4a73e4e7d
+size 9066