@checkstack/auth-frontend 0.0.2

package/src/components/AuthSettingsPage.tsx

@@ -0,0 +1,249 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  useApi,
+  permissionApiRef,
+  rpcApiRef,
+} from "@checkstack/frontend-api";
+import { PageLayout, useToast, Tabs, TabPanel } from "@checkstack/ui";
+import { authApiRef, AuthUser, Role, AuthStrategy, Permission } from "../api";
+import {
+  permissions as authPermissions,
+  AuthApi,
+} from "@checkstack/auth-common";
+import { Shield, Settings2, Users, Key } from "lucide-react";
+import { UsersTab } from "./UsersTab";
+import { RolesTab } from "./RolesTab";
+import { StrategiesTab } from "./StrategiesTab";
+import { ApplicationsTab } from "./ApplicationsTab";
+
+export const AuthSettingsPage: React.FC = () => {
+  const authApi = useApi(authApiRef);
+  const rpcApi = useApi(rpcApiRef);
+  const authClient = rpcApi.forPlugin(AuthApi);
+  const permissionApi = useApi(permissionApiRef);
+  const toast = useToast();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const session = authApi.useSession();
+
+  const [activeTab, setActiveTab] = useState<
+    "users" | "roles" | "strategies" | "applications"
+  >("users");
+  const [users, setUsers] = useState<(AuthUser & { roles: string[] })[]>([]);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [permissions, setPermissions] = useState<Permission[]>([]);
+  const [strategies, setStrategies] = useState<AuthStrategy[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const canReadUsers = permissionApi.usePermission(
+    authPermissions.usersRead.id
+  );
+
+  // Handle ?tab= URL parameters (from command palette)
+  useEffect(() => {
+    const tab = searchParams.get("tab");
+
+    if (tab && ["users", "roles", "strategies", "applications"].includes(tab)) {
+      setActiveTab(tab as "users" | "roles" | "strategies" | "applications");
+    }
+
+    // Clear the URL params after processing
+    if (tab) {
+      searchParams.delete("tab");
+      searchParams.delete("action");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [searchParams, setSearchParams]);
+
+  const canManageUsers = permissionApi.usePermission(
+    authPermissions.usersManage.id
+  );
+  const canCreateUsers = permissionApi.usePermission(
+    authPermissions.usersCreate.id
+  );
+  const canReadRoles = permissionApi.usePermission(
+    authPermissions.rolesRead.id
+  );
+  const canCreateRoles = permissionApi.usePermission(
+    authPermissions.rolesCreate.id
+  );
+  const canUpdateRoles = permissionApi.usePermission(
+    authPermissions.rolesUpdate.id
+  );
+  const canDeleteRoles = permissionApi.usePermission(
+    authPermissions.rolesDelete.id
+  );
+  const canManageRoles = permissionApi.usePermission(
+    authPermissions.rolesManage.id
+  );
+  const canManageStrategies = permissionApi.usePermission(
+    authPermissions.strategiesManage.id
+  );
+  const canManageRegistration = permissionApi.usePermission(
+    authPermissions.registrationManage.id
+  );
+  const canManageApplications = permissionApi.usePermission(
+    authPermissions.applicationsManage.id
+  );
+
+  // Compute loading and permission states for PageLayout
+  const permissionsLoading =
+    loading ||
+    canReadUsers.loading ||
+    canReadRoles.loading ||
+    canManageStrategies.loading ||
+    canManageApplications.loading;
+
+  const hasAnyPermission =
+    canReadUsers.allowed ||
+    canReadRoles.allowed ||
+    canManageStrategies.allowed ||
+    canManageApplications.allowed;
+
+  // Special case: if user is not logged in, show permission denied
+  const isAllowed = session.data?.user ? hasAnyPermission : false;
+
+  // Compute visible tabs based on permissions
+  const visibleTabs = useMemo(() => {
+    const tabs: Array<{
+      id: "users" | "roles" | "strategies" | "applications";
+      label: string;
+      icon: React.ReactNode;
+    }> = [];
+    if (canReadUsers.allowed)
+      tabs.push({
+        id: "users",
+        label: "Users & Roles",
+        icon: <Users size={18} />,
+      });
+    if (canReadRoles.allowed)
+      tabs.push({
+        id: "roles",
+        label: "Roles & Permissions",
+        icon: <Shield size={18} />,
+      });
+    if (canManageStrategies.allowed)
+      tabs.push({
+        id: "strategies",
+        label: "Auth Strategies",
+        icon: <Settings2 size={18} />,
+      });
+    if (canManageApplications.allowed)
+      tabs.push({
+        id: "applications",
+        label: "Applications",
+        icon: <Key size={18} />,
+      });
+    return tabs;
+  }, [
+    canReadUsers.allowed,
+    canReadRoles.allowed,
+    canManageStrategies.allowed,
+    canManageApplications.allowed,
+  ]);
+
+  // Auto-select first visible tab if current tab is not accessible
+  useEffect(() => {
+    if (
+      visibleTabs.length > 0 &&
+      !visibleTabs.some((t) => t.id === activeTab)
+    ) {
+      setActiveTab(visibleTabs[0].id);
+    }
+  }, [visibleTabs, activeTab]);
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const usersData = (await authClient.getUsers()) as (AuthUser & {
+        roles: string[];
+      })[];
+      const rolesData = await authClient.getRoles();
+      const permissionsData = await authClient.getPermissions();
+      const strategiesData = await authClient.getStrategies();
+      setUsers(usersData);
+      setRoles(rolesData);
+      setPermissions(permissionsData);
+      setStrategies(strategiesData);
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : "Failed to fetch data";
+      toast.error(message);
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Initial data fetch
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // Get current user's role IDs for the RolesTab
+  const currentUserRoleIds =
+    users.find((u) => u.id === session.data?.user?.id)?.roles || [];
+
+  return (
+    <PageLayout
+      title="Authentication Settings"
+      loading={permissionsLoading}
+      allowed={isAllowed}
+    >
+      <Tabs
+        items={visibleTabs}
+        activeTab={activeTab}
+        onTabChange={(tabId) =>
+          setActiveTab(
+            tabId as "users" | "roles" | "strategies" | "applications"
+          )
+        }
+        className="mb-6"
+      />
+
+      <TabPanel id="users" activeTab={activeTab}>
+        <UsersTab
+          users={users}
+          roles={roles}
+          strategies={strategies}
+          currentUserId={session.data?.user?.id}
+          canReadUsers={canReadUsers.allowed}
+          canCreateUsers={canCreateUsers.allowed}
+          canManageUsers={canManageUsers.allowed}
+          canManageRoles={canManageRoles.allowed}
+          onDataChange={fetchData}
+        />
+      </TabPanel>
+
+      <TabPanel id="roles" activeTab={activeTab}>
+        <RolesTab
+          roles={roles}
+          permissions={permissions}
+          userRoleIds={currentUserRoleIds}
+          canReadRoles={canReadRoles.allowed}
+          canCreateRoles={canCreateRoles.allowed}
+          canUpdateRoles={canUpdateRoles.allowed}
+          canDeleteRoles={canDeleteRoles.allowed}
+          onDataChange={fetchData}
+        />
+      </TabPanel>
+
+      <TabPanel id="strategies" activeTab={activeTab}>
+        <StrategiesTab
+          strategies={strategies}
+          canManageStrategies={canManageStrategies.allowed}
+          canManageRegistration={canManageRegistration.allowed}
+          onDataChange={fetchData}
+        />
+      </TabPanel>
+
+      <TabPanel id="applications" activeTab={activeTab}>
+        <ApplicationsTab
+          roles={roles}
+          canManageApplications={canManageApplications.allowed}
+        />
+      </TabPanel>
+    </PageLayout>
+  );
+};

package/src/components/AuthStrategyCard.tsx

@@ -0,0 +1,77 @@
+import {
+  StrategyConfigCard,
+  type ConfigSection,
+  type LucideIconName,
+} from "@checkstack/ui";
+import type { AuthStrategy } from "../api";
+
+export interface AuthStrategyCardProps {
+  strategy: AuthStrategy;
+  onToggle: (id: string, enabled: boolean) => Promise<void>;
+  onSaveConfig: (id: string, config: Record<string, unknown>) => Promise<void>;
+  saving?: boolean;
+  disabled?: boolean;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  config?: Record<string, unknown>;
+}
+
+/**
+ * Auth strategy card using the shared StrategyConfigCard component.
+ * Uses Toggle switch style for auth strategies.
+ */
+export function AuthStrategyCard({
+  strategy,
+  onToggle,
+  onSaveConfig,
+  saving,
+  disabled,
+  expanded,
+  onExpandedChange,
+  config,
+}: AuthStrategyCardProps) {
+  // Check if config schema has properties
+  const hasConfigSchema =
+    strategy.configSchema &&
+    "properties" in strategy.configSchema &&
+    Object.keys(strategy.configSchema.properties as Record<string, unknown>)
+      .length > 0;
+
+  // Config is missing if schema has properties but no saved config
+  const configMissing = hasConfigSchema && strategy.config === undefined;
+
+  // Build config sections
+  const configSections: ConfigSection[] = [];
+  if (hasConfigSchema) {
+    configSections.push({
+      id: "config",
+      title: "Configuration",
+      schema: strategy.configSchema,
+      value: config ?? strategy.config,
+      onSave: async (newConfig) => {
+        await onSaveConfig(strategy.id, newConfig);
+      },
+    });
+  }
+
+  return (
+    <StrategyConfigCard
+      strategy={{
+        id: strategy.id,
+        displayName: strategy.displayName,
+        description: strategy.description,
+        icon: strategy.icon as LucideIconName,
+        enabled: strategy.enabled,
+      }}
+      configSections={configSections}
+      onToggle={onToggle}
+      saving={saving}
+      toggleDisabled={disabled}
+      useToggleSwitch={true}
+      configMissing={configMissing}
+      expanded={expanded}
+      onExpandedChange={onExpandedChange}
+      instructions={strategy.adminInstructions}
+    />
+  );
+}

package/src/components/ChangePasswordPage.tsx

@@ -0,0 +1,259 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Lock, ArrowLeft, CheckCircle, AlertCircle, Key } from "lucide-react";
+import { passwordSchema } from "@checkstack/auth-common";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+  Checkbox,
+} from "@checkstack/ui";
+import { useAuthClient } from "../lib/auth-client";
+
+export const ChangePasswordPage = () => {
+  const navigate = useNavigate();
+
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [revokeOtherSessions, setRevokeOtherSessions] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [success, setSuccess] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const authClient = useAuthClient();
+
+  // Validate new password on change
+  useEffect(() => {
+    if (newPassword) {
+      const result = passwordSchema.safeParse(newPassword);
+      if (result.success) {
+        setValidationErrors([]);
+      } else {
+        setValidationErrors(result.error.issues.map((issue) => issue.message));
+      }
+    } else {
+      setValidationErrors([]);
+    }
+  }, [newPassword]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(undefined);
+
+    // Frontend validation
+    if (newPassword !== confirmPassword) {
+      setError("New passwords do not match");
+      return;
+    }
+
+    const result = passwordSchema.safeParse(newPassword);
+    if (!result.success) {
+      setError(result.error.issues[0].message);
+      return;
+    }
+
+    if (!currentPassword) {
+      setError("Current password is required");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await authClient.changePassword({
+        currentPassword,
+        newPassword,
+        revokeOtherSessions,
+      });
+
+      if (response.error) {
+        setError(response.error.message ?? "Failed to change password");
+      } else {
+        setSuccess(true);
+      }
+    } catch (error_) {
+      setError(
+        error_ instanceof Error ? error_.message : "Failed to change password"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Success state
+  if (success) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardHeader className="space-y-1 text-center">
+            <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
+              <CheckCircle className="h-6 w-6 text-primary" />
+            </div>
+            <CardTitle className="text-2xl font-bold">
+              Password Changed Successfully
+            </CardTitle>
+            <CardDescription>
+              Your password has been updated.
+              {revokeOtherSessions &&
+                " All other sessions have been signed out."}
+            </CardDescription>
+          </CardHeader>
+          <CardFooter>
+            <Button className="w-full" onClick={() => navigate("/")}>
+              Go to Dashboard
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold">Change Password</CardTitle>
+          <CardDescription>
+            Enter your current password and choose a new password.
+          </CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent className="space-y-4">
+            {error && (
+              <Alert variant="error">
+                <AlertIcon>
+                  <AlertCircle className="h-4 w-4" />
+                </AlertIcon>
+                <AlertContent>
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </AlertContent>
+              </Alert>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="currentPassword">Current Password</Label>
+              <div className="relative">
+                <Key className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="currentPassword"
+                  type="password"
+                  placeholder="Enter current password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                  autoFocus
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="newPassword">New Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="newPassword"
+                  type="password"
+                  placeholder="Enter new password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+              {validationErrors.length > 0 && (
+                <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
+                  {validationErrors.map((validationError, i) => (
+                    <li key={i} className="text-destructive">
+                      {validationError}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Confirm New Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  placeholder="Confirm new password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+              {confirmPassword && newPassword !== confirmPassword && (
+                <p className="text-sm text-destructive">
+                  Passwords do not match
+                </p>
+              )}
+            </div>
+
+            <div className="text-xs text-muted-foreground">
+              Password must be at least 8 characters and contain:
+              <ul className="list-disc pl-5 mt-1">
+                <li>At least one uppercase letter</li>
+                <li>At least one lowercase letter</li>
+                <li>At least one number</li>
+              </ul>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="revokeOtherSessions"
+                checked={revokeOtherSessions}
+                onCheckedChange={(checked) =>
+                  setRevokeOtherSessions(checked === true)
+                }
+              />
+              <Label
+                htmlFor="revokeOtherSessions"
+                className="text-sm font-normal"
+              >
+                Sign out of all other sessions
+              </Label>
+            </div>
+          </CardContent>
+          <CardFooter className="flex flex-col gap-4">
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={
+                loading ||
+                validationErrors.length > 0 ||
+                newPassword !== confirmPassword ||
+                !currentPassword
+              }
+            >
+              {loading ? "Changing..." : "Change Password"}
+            </Button>
+            <button
+              type="button"
+              onClick={() => navigate(-1)}
+              className="text-sm text-primary hover:underline flex items-center justify-center gap-1"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Go Back
+            </button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+};