@cytario/web 2.1.3 → 2.1.5

package/app/routes/admin/inviteUser/inviteUser.modal.tsx

@@ -1,11 +1,6 @@
 import { Button, Checkbox } from "@cytario/design";
 import { useEffect, useState } from "react";
-import {
-  useActionData,
-  useNavigate,
-  useNavigation,
-  useOutletContext,
-} from "react-router";
+import { useActionData, useNavigate, useNavigation, useOutletContext } from "react-router";
 
 import { InviteUserForm } from "./inviteUser.form";
 import { type GroupInfo } from "~/.server/auth/keycloakAdmin";
@@ -50,21 +45,13 @@ export default function InviteModal() {
         actionData={actionData}
       />
       <footer className="flex items-center gap-3 mt-6">
-        <Checkbox
-          isSelected={inviteAnother}
-          onChange={setInviteAnother}
-          className="mr-auto"
-        >
+        <Checkbox isSelected={inviteAnother} onChange={setInviteAnother} className="mr-auto">
           <span className="text-sm text-slate-600">Invite another</span>
         </Checkbox>
         <Button onPress={() => navigate(-1)} variant="secondary">
           Cancel
         </Button>
-        <Button
-          type="submit"
-          form="invite-form"
-          isDisabled={isSubmitting}
-        >
+        <Button type="submit" form="invite-form" isDisabled={isSubmitting}>
           {isSubmitting ? "Inviting..." : "Send Invite"}
         </Button>
       </footer>

package/app/routes/admin/updateUser/updateUser.form.tsx

@@ -19,11 +19,7 @@ interface UpdateUserFormProps {
   groupPaths: Set<string>;
 }
 
-export const UpdateUserForm = ({
-  user,
-  groups,
-  groupPaths,
-}: UpdateUserFormProps) => {
+export const UpdateUserForm = ({ user, groups, groupPaths }: UpdateUserFormProps) => {
   const submit = useSubmit();
 
   const [memberGroupIds, setMemberGroupIds] = useState<Set<string>>(() => {
@@ -61,10 +57,7 @@ export const UpdateUserForm = ({
       }
     });
     for (const group of groups) {
-      formData.append(
-        `group-${group.id}`,
-        String(memberGroupIds.has(group.id)),
-      );
+      formData.append(`group-${group.id}`, String(memberGroupIds.has(group.id)));
     }
     return formData;
   };
@@ -73,9 +66,7 @@ export const UpdateUserForm = ({
     const changes: string[] = [];
 
     if (user.enabled && !data.enabled) {
-      changes.push(
-        `Disable account for ${user.firstName} ${user.lastName}`,
-      );
+      changes.push(`Disable account for ${user.firstName} ${user.lastName}`);
     }
 
     const addedAdminGroups = groups.filter(
@@ -249,9 +240,7 @@ export const UpdateUserForm = ({
         confirmLabel="Save Changes"
         confirmVariant="primary"
       >
-        <p className="text-sm text-slate-600">
-          You are about to make the following changes:
-        </p>
+        <p className="text-sm text-slate-600">You are about to make the following changes:</p>
         <ul className="list-disc list-inside text-sm text-slate-900 space-y-1">
           {warnings.map((w) => (
             <li key={w}>{w}</li>

package/app/routes/admin/updateUser/updateUser.modal.tsx

@@ -1,16 +1,8 @@
 import { Button } from "@cytario/design";
-import {
-  useNavigate,
-  useNavigation,
-  useOutletContext,
-  useParams,
-} from "react-router";
+import { useNavigate, useNavigation, useOutletContext, useParams } from "react-router";
 
 import { UpdateUserForm } from "./updateUser.form";
-import {
-  type UserWithGroups,
-  type GroupInfo,
-} from "~/.server/auth/keycloakAdmin";
+import { type UserWithGroups, type GroupInfo } from "~/.server/auth/keycloakAdmin";
 import { RouteModal } from "~/components/RouteModal";
 
 export { userDetailAction as action } from "./userDetail.action";
@@ -33,23 +25,13 @@ export default function UserModal() {
   }
 
   return (
-    <RouteModal
-      title={`Edit User \u2014 ${match.user.firstName} ${match.user.lastName}`}
-    >
-      <UpdateUserForm
-        user={match.user}
-        groups={groups}
-        groupPaths={match.groupPaths}
-      />
+    <RouteModal title={`Edit User \u2014 ${match.user.firstName} ${match.user.lastName}`}>
+      <UpdateUserForm user={match.user} groups={groups} groupPaths={match.groupPaths} />
       <footer className="flex gap-3 justify-end mt-6">
         <Button onPress={() => navigate(-1)} variant="secondary">
           Cancel
         </Button>
-        <Button
-          type="submit"
-          form="update-form"
-          isDisabled={isSubmitting}
-        >
+        <Button type="submit" form="update-form" isDisabled={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save Changes"}
         </Button>
       </footer>

package/app/routes/admin/updateUser/userDetail.action.ts

@@ -5,19 +5,11 @@ import { assertGroupsInScope } from "../assertGroupsInScope";
 import { assertUsersInScope } from "../assertUsersInScope";
 import { authContext } from "~/.server/auth/authMiddleware";
 import { getSession } from "~/.server/auth/getSession";
-import {
-  addUserToGroup,
-  removeUserFromGroup,
-  updateUser,
-} from "~/.server/auth/keycloakAdmin";
+import { addUserToGroup, removeUserFromGroup, updateUser } from "~/.server/auth/keycloakAdmin";
 import { sessionStorage } from "~/.server/auth/sessionStorage";
 import { updateUserSchema } from "~/routes/admin/updateUser/updateUser.schema";
 
-export const userDetailAction: ActionFunction = async ({
-  request,
-  context,
-  params,
-}) => {
+export const userDetailAction: ActionFunction = async ({ request, context, params }) => {
   const { user } = context.get(authContext);
   const { adminUrl, scope } = assertAdminScope(request.url, user.adminScopes);
 

package/app/routes/admin/users/BulkActions.tsx

@@ -3,17 +3,10 @@ import { Ban, Check, UserMinus, UserPlus } from "lucide-react";
 import { useMemo, useState } from "react";
 import { useNavigation, useSubmit } from "react-router";
 
-import {
-  type GroupInfo,
-  type UserWithGroups,
-} from "~/.server/auth/keycloakAdmin";
+import { type GroupInfo, type UserWithGroups } from "~/.server/auth/keycloakAdmin";
 import { ConfirmDialog } from "~/components/ConfirmDialog";
 
-type BulkIntent =
-  | "addToGroup"
-  | "removeFromGroup"
-  | "enableAccounts"
-  | "disableAccounts";
+type BulkIntent = "addToGroup" | "removeFromGroup" | "enableAccounts" | "disableAccounts";
 
 interface BulkActionsProps {
   selectedUserIds: string[];
@@ -81,12 +74,7 @@ function GroupSelector({
   );
 }
 
-export function BulkActions({
-  selectedUserIds,
-  users,
-  groups,
-  onSuccess,
-}: BulkActionsProps) {
+export function BulkActions({ selectedUserIds, users, groups, onSuccess }: BulkActionsProps) {
   const submit = useSubmit();
   const { state } = useNavigation();
   const isSubmitting = state === "submitting";
@@ -96,10 +84,7 @@ export function BulkActions({
   const [selectedGroupId, setSelectedGroupId] = useState("");
 
   const allGroupOptions = useMemo(
-    () =>
-      groups
-        .filter((g) => !g.isAdmin)
-        .map((g) => ({ id: g.id, name: g.path })),
+    () => groups.filter((g) => !g.isAdmin).map((g) => ({ id: g.id, name: g.path })),
     [groups],
   );
 
@@ -110,19 +95,13 @@ export function BulkActions({
 
   // Remove: only groups at least one selected user is in
   const removeGroupOptions = useMemo(
-    () =>
-      allGroupOptions.filter((o) =>
-        selectedUsers.some((u) => u.groupPaths.has(o.name)),
-      ),
+    () => allGroupOptions.filter((o) => selectedUsers.some((u) => u.groupPaths.has(o.name))),
     [allGroupOptions, selectedUsers],
   );
 
   // Add: only groups where at least one selected user is NOT yet a member
   const addGroupOptions = useMemo(
-    () =>
-      allGroupOptions.filter((o) =>
-        selectedUsers.some((u) => !u.groupPaths.has(o.name)),
-      ),
+    () => allGroupOptions.filter((o) => selectedUsers.some((u) => !u.groupPaths.has(o.name))),
     [allGroupOptions, selectedUsers],
   );
 
@@ -145,10 +124,7 @@ export function BulkActions({
     const formData = new FormData();
     formData.set("intent", intent);
     formData.set("userIds", selectedUserIds.join(","));
-    if (
-      selectedGroupId &&
-      (intent === "addToGroup" || intent === "removeFromGroup")
-    ) {
+    if (selectedGroupId && (intent === "addToGroup" || intent === "removeFromGroup")) {
       formData.set("groupId", selectedGroupId);
     }
 
@@ -215,15 +191,16 @@ export function BulkActions({
           confirmVariant={config.confirmVariant}
         >
           <p className="text-sm text-slate-600">
-            This will affect{" "}
-            <span className="font-medium text-slate-900">{count}</span> user
+            This will affect <span className="font-medium text-slate-900">{count}</span> user
             {count !== 1 ? "s" : ""}.
           </p>
-          {config.needsGroup && <GroupSelector
-            options={getGroupOptions(intent)}
-            value={selectedGroupId}
-            onChange={setSelectedGroupId}
-          />}
+          {config.needsGroup && (
+            <GroupSelector
+              options={getGroupOptions(intent)}
+              value={selectedGroupId}
+              onChange={setSelectedGroupId}
+            />
+          )}
         </ConfirmDialog>
       )}
     </>

package/app/routes/admin/users/bulkUsers.action.ts

@@ -6,11 +6,7 @@ import { assertGroupsInScope } from "../assertGroupsInScope";
 import { assertUsersInScope } from "../assertUsersInScope";
 import { authContext } from "~/.server/auth/authMiddleware";
 import { getSession } from "~/.server/auth/getSession";
-import {
-  addUserToGroup,
-  removeUserFromGroup,
-  setUserEnabled,
-} from "~/.server/auth/keycloakAdmin";
+import { addUserToGroup, removeUserFromGroup, setUserEnabled } from "~/.server/auth/keycloakAdmin";
 import { sessionStorage } from "~/.server/auth/sessionStorage";
 
 const actionLabels = {
@@ -20,10 +16,7 @@ const actionLabels = {
   disableAccounts: "disabled",
 } as const;
 
-export const bulkUsersAction: ActionFunction = async ({
-  request,
-  context,
-}) => {
+export const bulkUsersAction: ActionFunction = async ({ request, context }) => {
   const { user } = context.get(authContext);
   const { adminUrl, scope } = assertAdminScope(request.url, user.adminScopes);
 

package/app/routes/admin/users/bulkUsers.schema.ts

@@ -2,12 +2,7 @@ import { z } from "zod";
 
 export const bulkActionSchema = z
   .object({
-    intent: z.enum([
-      "addToGroup",
-      "removeFromGroup",
-      "enableAccounts",
-      "disableAccounts",
-    ]),
+    intent: z.enum(["addToGroup", "removeFromGroup", "enableAccounts", "disableAccounts"]),
     userIds: z
       .string()
       .min(1, "At least one user is required")

package/app/routes/admin/users/users.route.tsx

@@ -1,11 +1,4 @@
-import {
-  Badge,
-  Banner,
-  Button,
-  ButtonLink,
-  EmptyState,
-  Pill,
-} from "@cytario/design";
+import { Badge, Banner, Button, ButtonLink, EmptyState, Pill } from "@cytario/design";
 import { type RowSelectionState } from "@tanstack/react-table";
 import { FolderPlus, Plug, UserPlus, Users, UsersRound } from "lucide-react";
 import { useMemo, useState } from "react";
@@ -19,19 +12,12 @@ import {
 
 import { BulkActions } from "./BulkActions";
 import type { ConnectionConfig } from "~/.generated/client";
-import {
-  type UserWithGroups,
-  type GroupInfo,
-} from "~/.server/auth/keycloakAdmin";
+import { type UserWithGroups, type GroupInfo } from "~/.server/auth/keycloakAdmin";
 import { Container, Section, SectionHeader } from "~/components/Container";
 import { ProviderPill } from "~/components/Pills/ProviderPill";
 import { ScopePill } from "~/components/Pills/ScopePill";
 import { SelectionFooter } from "~/components/Table/SelectionFooter";
-import {
-  type CellRenderers,
-  type ColumnConfig,
-  Table,
-} from "~/components/Table/Table";
+import { type CellRenderers, type ColumnConfig, Table } from "~/components/Table/Table";
 import { useModal } from "~/hooks/useModal";
 
 export const meta: MetaFunction = () => [{ title: "Admin — Users" }];
@@ -46,9 +32,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   defaultShouldRevalidate,
 }) => {
   if (formAction) return defaultShouldRevalidate;
-  return (
-    currentUrl.searchParams.get("scope") !== nextUrl.searchParams.get("scope")
-  );
+  return currentUrl.searchParams.get("scope") !== nextUrl.searchParams.get("scope");
 };
 
 interface UserRow {
@@ -65,10 +49,7 @@ function buildGroupColumn(
   allGroups: GroupInfo[],
   counts: Map<string, number>,
   totalCount: number,
-  {
-    pillVisibleCount,
-    ...extra
-  }: Partial<ColumnConfig> & { pillVisibleCount?: number } = {},
+  { pillVisibleCount, ...extra }: Partial<ColumnConfig> & { pillVisibleCount?: number } = {},
 ): ColumnConfig {
   const options = [
     { label: "All", value: "" },
@@ -159,25 +140,11 @@ function buildColumns(
       ],
       filterRender: (option) => {
         const label =
-          option.value === "true"
-            ? "Active"
-            : option.value === "false"
-              ? "Disabled"
-              : option.label;
-        return (
-          <Pill color={option.value === "true" ? "green" : "slate"}>
-            {label}
-          </Pill>
-        );
+          option.value === "true" ? "Active" : option.value === "false" ? "Disabled" : option.label;
+        return <Pill color={option.value === "true" ? "green" : "slate"}>{label}</Pill>;
       },
     },
-    buildGroupColumn(
-      "groups",
-      "Groups",
-      groups,
-      groupCounts,
-      totalCount,
-    ),
+    buildGroupColumn("groups", "Groups", groups, groupCounts, totalCount),
   ];
 }
 
@@ -193,9 +160,7 @@ function buildCellRenderers(scope: string): CellRenderers<UserRow> {
     ),
     enabled: (row) => {
       const label = row.enabled === "true" ? "Active" : "Disabled";
-      return (
-        <Pill color={row.enabled === "true" ? "green" : "slate"}>{label}</Pill>
-      );
+      return <Pill color={row.enabled === "true" ? "green" : "slate"}>{label}</Pill>;
     },
     groups: (row) => (
       <div className="flex flex-wrap gap-1">
@@ -279,21 +244,14 @@ export default function AdminUsersRoute() {
         >
           Bulk Invite
         </ButtonLink>
-        <Button
-          variant="secondary"
-          iconLeft={Plug}
-          onPress={() => openModal("add-connection")}
-        >
+        <Button variant="secondary" iconLeft={Plug} onPress={() => openModal("add-connection")}>
           Connect Storage
         </Button>
       </SectionHeader>
 
       <Container>
         <section aria-labelledby="connections-heading" className="mb-6">
-          <h3
-            id="connections-heading"
-            className="text-sm font-medium text-slate-500 mb-2"
-          >
+          <h3 id="connections-heading" className="text-sm font-medium text-slate-500 mb-2">
             Connections
           </h3>
           {connections.length > 0 ? (
@@ -314,12 +272,8 @@ export default function AdminUsersRoute() {
               ))}
             </ul>
           ) : (
-            <Banner
-              variant="warning"
-              title="No connections linked to this group"
-            >
-              Members won&apos;t be able to access any data until you connect
-              storage.
+            <Banner variant="warning" title="No connections linked to this group">
+              Members won&apos;t be able to access any data until you connect storage.
             </Banner>
           )}
         </section>
@@ -342,10 +296,7 @@ export default function AdminUsersRoute() {
             title="No users yet"
             description="Invite team members to get started."
             action={
-              <ButtonLink
-                href={`/admin/users/invite?scope=${encodeURIComponent(scope)}`}
-                size="lg"
-              >
+              <ButtonLink href={`/admin/users/invite?scope=${encodeURIComponent(scope)}`} size="lg">
                 Invite User
               </ButtonLink>
             }

package/app/routes/api/cyberduck-profile.$name.ts

@@ -161,9 +161,13 @@ ${scopesXml}
         <key>STS Endpoint</key>
         <string>${escapeXml(stsEndpoint)}</string>
         <key>Properties</key>
-        <dict>${roleArn ? `
+        <dict>${
+          roleArn
+            ? `
             <key>s3.assumerole.rolearn</key>
-            <string>${escapeXml(roleArn)}</string>` : ""}
+            <string>${escapeXml(roleArn)}</string>`
+            : ""
+        }
 ${s3PropertiesXml}        </dict>
     </dict>
 </plist>`;

package/app/routes/auth/callback.route.tsx

@@ -48,10 +48,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   // Validate required parameters
   if (!code || !state) {
     console.error(`${label} Missing code or state parameter`);
-    return failWithNotification(
-      request,
-      "Authentication failed. Missing required parameters.",
-    );
+    return failWithNotification(request, "Authentication failed. Missing required parameters.");
   }
 
   try {
@@ -59,19 +56,13 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     const stateData = await validateOAuthState(state);
     if (!stateData) {
       console.error(`${label} Invalid or expired state parameter`);
-      return failWithNotification(
-        request,
-        "Authentication session expired. Please try again.",
-      );
+      return failWithNotification(request, "Authentication session expired. Please try again.");
     }
 
     // Guard for in-flight states from before PKCE deployment
     if (!stateData.codeVerifier || !stateData.nonce) {
       console.error(`${label} State missing codeVerifier or nonce`);
-      return failWithNotification(
-        request,
-        "Authentication session invalid. Please try again.",
-      );
+      return failWithNotification(request, "Authentication session invalid. Please try again.");
     }
 
     console.info(`${label} State validated successfully`);
@@ -81,28 +72,18 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
     // Exchange authorization code for tokens with PKCE verifier
     console.info(`${label} Exchanging authorization code for tokens`);
-    const tokens = await exchangeAuthCode(
-      code,
-      redirectUri,
-      stateData.codeVerifier,
-    );
+    const tokens = await exchangeAuthCode(code, redirectUri, stateData.codeVerifier);
 
     // Verify ID token signature via JWKS and validate nonce from verified payload
     const idTokenPayload = await verifyIdToken(tokens.id_token);
     if (!idTokenPayload) {
       console.error(`${label} ID token signature verification failed`);
-      return failWithNotification(
-        request,
-        "Authentication failed. Please try again.",
-      );
+      return failWithNotification(request, "Authentication failed. Please try again.");
     }
 
     if (idTokenPayload.nonce !== stateData.nonce) {
       console.error(`${label} Nonce mismatch in ID token`);
-      return failWithNotification(
-        request,
-        "Authentication failed. Please try again.",
-      );
+      return failWithNotification(request, "Authentication failed. Please try again.");
     }
 
     // Get user info using the access token
@@ -126,20 +107,14 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
     // Redirect to the originally requested page or default to home
     const redirectTo = validateRedirectTo(stateData.redirectTo);
-    console.info(
-      `${label} Authentication successful, redirecting to:`,
-      redirectTo,
-    );
+    console.info(`${label} Authentication successful, redirecting to:`, redirectTo);
 
     return redirect(redirectTo, {
       headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
     });
   } catch (error) {
     console.error(`${label} Authentication failed:`, error);
-    return failWithNotification(
-      request,
-      "Authentication failed. Please try again.",
-    );
+    return failWithNotification(request, "Authentication failed. Please try again.");
   }
 };
 

package/app/routes/auth/login.route.tsx

@@ -1,10 +1,7 @@
 import { LoaderFunctionArgs, redirect, MetaFunction } from "react-router";
 
 import { getSession } from "~/.server/auth/getSession";
-import {
-  generateOAuthState,
-  validateRedirectTo,
-} from "~/.server/auth/oauthState";
+import { generateOAuthState, validateRedirectTo } from "~/.server/auth/oauthState";
 import { getWellKnownEndpoints } from "~/.server/auth/wellKnownEndpoints";
 import { createLabel } from "~/.server/logging";
 import { cytarioConfig } from "~/config";
@@ -14,8 +11,7 @@ export const meta: MetaFunction = () => {
     { title: "Cytario | Login" },
     {
       name: "description",
-      content:
-        "Log in to Cytario to access your secure workspace and manage your data.",
+      content: "Log in to Cytario to access your secure workspace and manage your data.",
     },
   ];
 };
@@ -75,10 +71,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     return redirect(authUrl.toString());
   } catch (error) {
     console.error(`${label} Failed to initiate login:`, error);
-    throw new Response(
-      "Unable to connect to authentication service. Please try again later.",
-      { status: 502 },
-    );
+    throw new Response("Unable to connect to authentication service. Please try again later.", {
+      status: 502,
+    });
   }
 };
 
@@ -86,7 +81,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 export default function LoginRoute() {
   return (
     <div className="flex items-center justify-center h-screen">
-      <p role="status" className="text-slate-500">Redirecting to login...</p>
+      <p role="status" className="text-slate-500">
+        Redirecting to login...
+      </p>
     </div>
   );
 }

package/app/routes/auth/logout.route.tsx

@@ -31,18 +31,14 @@ const revokeRefreshToken = async (
     });
 
     if (!response.ok) {
-      console.warn(
-        `${label} Token revocation returned ${response.status}`,
-      );
+      console.warn(`${label} Token revocation returned ${response.status}`);
     }
   } catch (error) {
     console.warn(`${label} Token revocation failed:`, error);
   }
 };
 
-export const loader = async ({
-  request,
-}: LoaderFunctionArgs): Promise<Response> => {
+export const loader = async ({ request }: LoaderFunctionArgs): Promise<Response> => {
   const session = await getSession(request);
   const { authTokens } = await getSessionData(session);
 
@@ -52,18 +48,12 @@ export const loader = async ({
   // Revoke refresh token before ending session (best-effort)
   if (authTokens?.refreshToken) {
     console.info(`${label} Revoking refresh token`);
-    await revokeRefreshToken(
-      authTokens.refreshToken,
-      wellKnownEndpoints.revocation_endpoint,
-    );
+    await revokeRefreshToken(authTokens.refreshToken, wellKnownEndpoints.revocation_endpoint);
   }
 
   // Build the logout URL with post_logout_redirect_uri
   const logoutUrl = new URL(wellKnownEndpoints.end_session_endpoint);
-  logoutUrl.searchParams.set(
-    "post_logout_redirect_uri",
-    `${cytarioConfig.endpoints.webapp}/login`,
-  );
+  logoutUrl.searchParams.set("post_logout_redirect_uri", `${cytarioConfig.endpoints.webapp}/login`);
 
   // Include id_token_hint for better logout behavior
   if (authTokens?.idToken) {

package/app/routes/config.route.tsx

@@ -23,11 +23,7 @@ function PreferencesSection() {
   return (
     <div className="flex flex-col gap-3">
       <H2>Preferences</H2>
-      <Switch
-        isSelected={showHiddenFiles}
-        onChange={toggleShowHiddenFiles}
-        className="text-sm"
-      >
+      <Switch isSelected={showHiddenFiles} onChange={toggleShowHiddenFiles} className="text-sm">
         Show hidden files
       </Switch>
       <p className="text-xs text-(--color-text-secondary)">