@checkstack/auth-frontend 0.2.0 → 0.3.0

package/src/components/RolesTab.tsx

@@ -16,8 +16,7 @@ import {
   useToast,
 } from "@checkstack/ui";
 import { Plus, Edit, Trash2 } from "lucide-react";
-import { useApi } from "@checkstack/frontend-api";
-import { rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { AuthApi } from "@checkstack/auth-common";
 import type { Role, AccessRuleEntry } from "../api";
 import { RoleDialog } from "./RoleDialog";
@@ -43,14 +42,51 @@ export const RolesTab: React.FC<RolesTabProps> = ({
   canDeleteRoles,
   onDataChange,
 }) => {
-  const rpcApi = useApi(rpcApiRef);
-  const authClient = rpcApi.forPlugin(AuthApi);
+  const authClient = usePluginClient(AuthApi);
   const toast = useToast();
 
   const [roleToDelete, setRoleToDelete] = useState<string>();
   const [roleDialogOpen, setRoleDialogOpen] = useState(false);
   const [editingRole, setEditingRole] = useState<Role | undefined>();
 
+  // Mutations
+  const createRoleMutation = authClient.createRole.useMutation({
+    onSuccess: () => {
+      toast.success("Role created successfully");
+      void onDataChange();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create role"
+      );
+    },
+  });
+
+  const updateRoleMutation = authClient.updateRole.useMutation({
+    onSuccess: () => {
+      toast.success("Role updated successfully");
+      void onDataChange();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update role"
+      );
+    },
+  });
+
+  const deleteRoleMutation = authClient.deleteRole.useMutation({
+    onSuccess: () => {
+      toast.success("Role deleted successfully");
+      setRoleToDelete(undefined);
+      void onDataChange();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete role"
+      );
+    },
+  });
+
   const handleCreateRole = () => {
     setEditingRole(undefined);
     setRoleDialogOpen(true);
@@ -67,44 +103,21 @@ export const RolesTab: React.FC<RolesTabProps> = ({
     description?: string;
     accessRules: string[];
   }) => {
-    try {
-      if (params.id) {
-        await authClient.updateRole({
-          id: params.id,
-          name: params.name,
-          description: params.description,
-          accessRules: params.accessRules,
-        });
-        toast.success("Role updated successfully");
-      } else {
-        await authClient.createRole({
-          name: params.name,
-          description: params.description,
-          accessRules: params.accessRules,
-        });
-        toast.success("Role created successfully");
-      }
-      await onDataChange();
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to save role"
-      );
-      throw error;
-    }
+    await (params.id ? updateRoleMutation.mutateAsync({
+        id: params.id,
+        name: params.name,
+        description: params.description,
+        accessRules: params.accessRules,
+      }) : createRoleMutation.mutateAsync({
+        name: params.name,
+        description: params.description,
+        accessRules: params.accessRules,
+      }));
   };
 
-  const handleDeleteRole = async () => {
+  const handleDeleteRole = () => {
     if (!roleToDelete) return;
-    try {
-      await authClient.deleteRole(roleToDelete);
-      toast.success("Role deleted successfully");
-      setRoleToDelete(undefined);
-      await onDataChange();
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to delete role"
-      );
-    }
+    deleteRoleMutation.mutate(roleToDelete);
   };
 
   return (

package/src/components/StrategiesTab.tsx

@@ -15,8 +15,7 @@ import {
   useToast,
 } from "@checkstack/ui";
 import { Shield, RefreshCw } from "lucide-react";
-import { useApi } from "@checkstack/frontend-api";
-import { rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { AuthApi } from "@checkstack/auth-common";
 import type { AuthStrategy } from "../api";
 import { AuthStrategyCard } from "./AuthStrategyCard";
@@ -34,8 +33,7 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
   canManageRegistration,
   onDataChange,
 }) => {
-  const rpcApi = useApi(rpcApiRef);
-  const authClient = rpcApi.forPlugin(AuthApi);
+  const authClient = usePluginClient(AuthApi);
   const toast = useToast();
 
   const [reloading, setReloading] = useState(false);
@@ -45,14 +43,9 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
   >({});
 
   // Registration state
-  const [registrationSchema, setRegistrationSchema] = useState<
-    Record<string, unknown> | undefined
-  >();
   const [registrationSettings, setRegistrationSettings] = useState<{
     allowRegistration: boolean;
   }>({ allowRegistration: true });
-  const [loadingRegistration, setLoadingRegistration] = useState(true);
-  const [savingRegistration, setSavingRegistration] = useState(false);
   const [registrationValid, setRegistrationValid] = useState(true);
 
   // Initialize strategy configs when strategies change
@@ -64,104 +57,101 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
     setStrategyConfigs(configs);
   }, [strategies]);
 
-  // Fetch registration data when we have access
+  // Query: Registration schema (admin only)
+  const { data: registrationSchema, isLoading: schemaLoading } =
+    authClient.getRegistrationSchema.useQuery(
+      {},
+      { enabled: canManageRegistration }
+    );
+
+  // Query: Registration status (admin only)
+  const { data: registrationStatus, isLoading: statusLoading } =
+    authClient.getRegistrationStatus.useQuery(
+      {},
+      { enabled: canManageRegistration }
+    );
+
+  // Sync fetched settings to local state
   useEffect(() => {
-    if (!canManageRegistration) {
-      setLoadingRegistration(false);
-      return;
+    if (registrationStatus) {
+      setRegistrationSettings(registrationStatus);
     }
+  }, [registrationStatus]);
 
-    const fetchRegistrationData = async () => {
-      setLoadingRegistration(true);
-      try {
-        const [schema, status] = await Promise.all([
-          authClient.getRegistrationSchema(),
-          authClient.getRegistrationStatus(),
-        ]);
-        setRegistrationSchema(schema);
-        setRegistrationSettings(status);
-      } catch (error) {
-        console.error("Failed to fetch registration data:", error);
-      } finally {
-        setLoadingRegistration(false);
-      }
-    };
-    fetchRegistrationData();
-  }, [canManageRegistration, authClient]);
+  const loadingRegistration = schemaLoading || statusLoading;
+
+  // Mutations
+  const updateStrategyMutation = authClient.updateStrategy.useMutation({
+    onSuccess: () => {
+      toast.success("Strategy updated");
+      void onDataChange();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update strategy"
+      );
+    },
+  });
+
+  const setRegistrationMutation = authClient.setRegistrationStatus.useMutation({
+    onSuccess: () => {
+      toast.success("Registration settings saved");
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save settings"
+      );
+    },
+  });
+
+  const reloadAuthMutation = authClient.reloadAuth.useMutation({
+    onSuccess: () => {
+      toast.success("Authentication system reloaded");
+      void onDataChange();
+      setReloading(false);
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to reload auth"
+      );
+      setReloading(false);
+    },
+  });
 
   const handleToggleStrategy = async (strategyId: string, enabled: boolean) => {
-    try {
-      await authClient.updateStrategy({ id: strategyId, enabled });
-      await onDataChange();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Failed to toggle strategy";
-      toast.error(message);
-    }
+    await updateStrategyMutation.mutateAsync({ id: strategyId, enabled });
   };
 
   const handleSaveStrategyConfig = async (
     strategyId: string,
     config: Record<string, unknown>
   ) => {
-    try {
-      const strategy = strategies.find((s) => s.id === strategyId);
-      if (!strategy) {
-        toast.error("Strategy not found");
-        return;
-      }
-      setStrategyConfigs({
-        ...strategyConfigs,
-        [strategyId]: config,
-      });
-      await authClient.updateStrategy({
-        id: strategyId,
-        enabled: strategy.enabled,
-        config,
-      });
-      toast.success(
-        "Configuration saved successfully! Click 'Reload Authentication' to apply changes."
-      );
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to save strategy configuration";
-      toast.error(message);
+    const strategy = strategies.find((s) => s.id === strategyId);
+    if (!strategy) {
+      toast.error("Strategy not found");
+      return;
     }
+    setStrategyConfigs({
+      ...strategyConfigs,
+      [strategyId]: config,
+    });
+    await updateStrategyMutation.mutateAsync({
+      id: strategyId,
+      enabled: strategy.enabled,
+      config,
+    });
+    toast.success(
+      "Configuration saved successfully! Click 'Reload Authentication' to apply changes."
+    );
   };
 
-  const handleSaveRegistration = async () => {
-    setSavingRegistration(true);
-    try {
-      await authClient.setRegistrationStatus(registrationSettings);
-      toast.success("Registration settings saved successfully");
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to save registration settings"
-      );
-    } finally {
-      setSavingRegistration(false);
-    }
+  const handleSaveRegistration = () => {
+    setRegistrationMutation.mutate(registrationSettings);
   };
 
-  const handleReloadAuth = async () => {
+  const handleReloadAuth = () => {
     setReloading(true);
-    try {
-      await authClient.reloadAuth();
-      toast.success("Authentication system reloaded successfully");
-      await onDataChange();
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to reload authentication"
-      );
-    } finally {
-      setReloading(false);
-    }
+    reloadAuthMutation.mutate({});
   };
 
   const enabledStrategies = strategies.filter((s) => s.enabled);
@@ -183,7 +173,7 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
             ) : registrationSchema ? (
               <div className="space-y-4">
                 <DynamicForm
-                  schema={registrationSchema}
+                  schema={registrationSchema as Record<string, unknown>}
                   value={registrationSettings}
                   onChange={(value) =>
                     setRegistrationSettings(
@@ -193,10 +183,14 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
                   onValidChange={setRegistrationValid}
                 />
                 <Button
-                  onClick={() => void handleSaveRegistration()}
-                  disabled={savingRegistration || !registrationValid}
+                  onClick={handleSaveRegistration}
+                  disabled={
+                    setRegistrationMutation.isPending || !registrationValid
+                  }
                 >
-                  {savingRegistration ? "Saving..." : "Save Settings"}
+                  {setRegistrationMutation.isPending
+                    ? "Saving..."
+                    : "Save Settings"}
                 </Button>
               </div>
             ) : (