@hexclave/next 1.0.3 → 1.0.5

package/src/components/team-switcher.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { HexclaveAssertionError } from "@hexclave/shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+  Typography,
+  cn,
+} from "@hexclave/ui";
+import { PlusCircle, Settings } from "lucide-react";
+import { Suspense, useMemo } from "react";
+import { Team, useStackApp, useUser } from "..";
+import { useTranslation } from "../lib/translations";
+import { TeamIcon } from "./team-icon";
+
+type MockTeam = {
+  id: string,
+  displayName: string,
+  profileImageUrl?: string | null,
+};
+
+type TeamSwitcherProps<AllowNull extends boolean = false> = {
+  team?: Team,
+  teamId?: string,
+  teams?: Team[],
+  allowNull?: AllowNull,
+  nullLabel?: string,
+  triggerClassName?: string,
+  onChange?: (team: AllowNull extends true ? Team | null : Team) => Promise<void>,
+  // Mock data props
+  mockUser?: {
+    team?: MockTeam,
+  },
+  mockTeams?: MockTeam[],
+  mockProject?: {
+    config: {
+      clientTeamCreationEnabled: boolean,
+    },
+  },
+};
+
+export function TeamSwitcher<AllowNull extends boolean = false>(props: TeamSwitcherProps<AllowNull>) {
+  return <Suspense fallback={<Fallback />}>
+    <Inner {...props} />
+  </Suspense>;
+}
+
+function Fallback() {
+  return <Skeleton className="h-9 w-full max-w-64 stack-scope" />;
+}
+
+function Inner<AllowNull extends boolean>(props: TeamSwitcherProps<AllowNull>) {
+  const { t } = useTranslation();
+  const appFromHook = useStackApp();
+  const userFromHook = useUser();
+
+  // Use mock data if provided, otherwise use real data
+  const app = props.mockUser ? {
+    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },
+    useNavigate: () => () => {}, // Mock navigate function
+    urls: { accountSettings: '/account-settings' },
+  } : appFromHook;
+
+  const user = props.mockUser ? {
+    selectedTeam: props.mockUser.team,
+    useTeams: () => props.mockTeams || [],
+    setSelectedTeam: async () => {}, // Mock function
+  } : userFromHook;
+
+  const navigate = app.useNavigate();
+  const project = app.useProject();
+  const rawTeams = props.teams ?? user?.useTeams();
+  const selectedTeam = props.team || rawTeams?.find(team => team.id === props.teamId);
+  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
+
+
+  return (
+    <Select
+      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}
+      onValueChange={(value) => {
+        runAsynchronouslyWithAlert(async () => {
+          let team: MockTeam | null = null;
+          if (value !== 'null-sentinel') {
+            team = teams?.find(team => team.id === value) || null;
+            if (!team) {
+              throw new HexclaveAssertionError('Team not found, this should not happen');
+            }
+          } else {
+            team = null;
+          }
+
+          // Call onChange callback if provided
+          if (props.onChange) {
+            await props.onChange(team as Team);
+          }
+        });
+      }}
+    >
+      <SelectTrigger className={cn("stack-scope max-w-64", props.triggerClassName)}>
+        <SelectValue placeholder="Select team"/>
+      </SelectTrigger>
+      <SelectContent className="stack-scope">
+        {selectedTeam ? <SelectGroup>
+          <SelectLabel>
+            <div className="flex items-center justify-between">
+              <span>
+                {t('Current team')}
+              </span>
+              <Button
+                variant='ghost'
+                size='icon'
+                className="h-6 w-6"
+                onClick={() => {
+                  if (!props.mockUser) {
+                    navigate(`${app.urls.accountSettings}#team-${selectedTeam.id}`);
+                  }
+                }}
+              >
+                <Settings className="h-4 w-4"/>
+              </Button>
+            </div>
+          </SelectLabel>
+          <SelectItem value={selectedTeam.id}>
+            <div className="flex items-center gap-2">
+              <TeamIcon team={selectedTeam as Team} />
+              <Typography className="max-w-40 truncate">{selectedTeam.displayName}</Typography>
+            </div>
+          </SelectItem>
+        </SelectGroup> : undefined}
+
+        {props.allowNull && <SelectGroup>
+          <SelectItem value="null-sentinel">
+            <div className="flex items-center gap-2">
+              <TeamIcon team='personal' />
+              <Typography className="max-w-40 truncate">{props.nullLabel || t('No team')}</Typography>
+            </div>
+          </SelectItem>
+        </SelectGroup>}
+
+        {teams?.length ?
+          <SelectGroup>
+            <SelectLabel>{t('Other teams')}</SelectLabel>
+            {teams.filter(team => team.id !== selectedTeam?.id)
+              .map(team => (
+                <SelectItem value={team.id} key={team.id}>
+                  <div className="flex items-center gap-2">
+                    <TeamIcon team={team as Team} />
+                    <Typography className="max-w-64 truncate">{team.displayName}</Typography>
+                  </div>
+                </SelectItem>
+              ))}
+          </SelectGroup> : null}
+
+        {!teams?.length && !props.allowNull ?
+          <SelectGroup>
+            <SelectLabel>{t('No teams yet')}</SelectLabel>
+          </SelectGroup> : null}
+
+        {project.config.clientTeamCreationEnabled && <>
+          <SelectSeparator/>
+          <div>
+            <Button
+              onClick={() => {
+                if (!props.mockUser) {
+                  navigate(`${app.urls.accountSettings}#team-creation`);
+                }
+              }}
+              className="w-full"
+              variant='ghost'
+            >
+              <PlusCircle className="mr-2 h-4 w-4"/> {t('Create a team')}
+            </Button>
+          </div>
+        </>}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/use-in-iframe.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { useEffect, useState } from "react";
+
+export function useInIframe() {
+  const [isIframe, setIsIframe] = useState(false);
+  useEffect(() => {
+    if (window.self !== window.top) {
+      setIsIframe(true);
+    }
+  }, []);
+
+  return isIframe;
+}

package/src/components/user-button.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from "@hexclave/ui";
+import { CircleUser, LogIn, LogOut, SunMoon, UserPlus } from "lucide-react";
+import React, { Suspense } from "react";
+import { CurrentUser, useStackApp, useUser } from "..";
+import { useTranslation } from "../lib/translations";
+import { UserAvatar } from "./elements/user-avatar";
+
+function Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {
+  return (
+    <DropdownMenuItem onClick={() => runAsynchronouslyWithAlert(props.onClick)}>
+      <div className="flex gap-2 items-center">
+        {props.icon}
+        <Typography>{props.text}</Typography>
+      </div>
+    </DropdownMenuItem>
+  );
+}
+
+type UserButtonProps = {
+  showUserInfo?: boolean,
+  colorModeToggle?: () => void | Promise<void>,
+  extraItems?: {
+    text: string,
+    icon: React.ReactNode,
+    onClick: () => void | Promise<void>,
+  }[],
+  mockUser?: {
+    displayName?: string,
+    primaryEmail?: string,
+    profileImageUrl?: string,
+  },
+};
+
+export function UserButton(props: UserButtonProps) {
+  return (
+    <Suspense fallback={<Skeleton className="h-[34px] w-[34px] rounded-full stack-scope" />}>
+      <UserButtonInner {...props} />
+    </Suspense>
+  );
+}
+
+function UserButtonInner(props: UserButtonProps) {
+  const userFromHook = useUser();
+
+  // Use mock user if provided, otherwise use real user
+  const user = props.mockUser ? {
+    displayName: props.mockUser.displayName || 'Mock User',
+    primaryEmail: props.mockUser.primaryEmail || 'mock@example.com',
+    profileImageUrl: props.mockUser.profileImageUrl,
+    signOut: () => {
+      console.log('Mock sign out - no action taken in demo mode');
+      return Promise.resolve();
+    }
+  } as CurrentUser : userFromHook;
+
+  return <UserButtonInnerInner {...props} user={user} />;
+}
+
+
+function UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {
+  const { t } = useTranslation();
+  const user = props.user;
+  const app = useStackApp();
+
+  const iconProps = { size: 20, className: 'h-4 w-4' };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="outline-none stack-scope rounded-lg hover:bg-muted/50 transition-colors hover:transition-none p-1.5">
+        <div className="flex gap-2 items-center">
+          <UserAvatar user={user} />
+          {user && props.showUserInfo &&
+            <div className="flex flex-col justify-center text-left min-w-0">
+              <div className="max-w-40 truncate text-sm font-medium">{user.displayName}</div>
+              <div className="max-w-40 truncate text-xs text-muted-foreground">{user.primaryEmail}</div>
+            </div>
+          }
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="stack-scope">
+        <DropdownMenuLabel>
+          <div className="flex gap-2 items-center">
+            <UserAvatar user={user} />
+            <div>
+              {user && <Typography className="max-w-40 truncate">{user.displayName}</Typography>}
+              {user && <Typography className="max-w-40 truncate" variant="secondary" type='label'>{user.primaryEmail}</Typography>}
+              {!user && <Typography>{t('Not signed in')}</Typography>}
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {user && <Item
+          text={t('Account settings')}
+          onClick={async () => {
+            if (props.mockUser) {
+              console.log('Mock account settings - no navigation in demo mode');
+            } else {
+              await app.redirectToAccountSettings();
+            }
+          }}
+          icon={<CircleUser {...iconProps} />}
+        />}
+        {!user && <Item
+          text={t('Sign in')}
+          onClick={async () => {
+            if (props.mockUser) {
+              console.log('Mock sign in - no navigation in demo mode');
+            } else {
+              await app.redirectToSignIn();
+            }
+          }}
+          icon={<LogIn {...iconProps} />}
+        />}
+        {!user && <Item
+          text={t('Sign up')}
+          onClick={async () => {
+            if (props.mockUser) {
+              console.log('Mock sign up - no navigation in demo mode');
+            } else {
+              await app.redirectToSignUp();
+            }
+          }}
+          icon={<UserPlus {...iconProps}/> }
+        />}
+        {user && props.extraItems && props.extraItems.map((item, index) => (
+          <Item key={index} {...item} />
+        ))}
+        {props.colorModeToggle && (
+          <Item
+            text={t('Toggle theme')}
+            onClick={props.colorModeToggle}
+            icon={<SunMoon {...iconProps} />}
+          />
+        )}
+        {user && <Item
+          text={t('Sign out')}
+          onClick={async () => {
+            if (props.mockUser) {
+              console.log('Mock sign out - no action taken in demo mode');
+            } else {
+              await user.signOut();
+            }
+          }}
+          icon={<LogOut {...iconProps} />}
+        />}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components-page/account-settings/active-sessions/active-sessions-page.tsx

@@ -0,0 +1,238 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { fromNow } from "@hexclave/shared/dist/utils/dates";
+import { captureError } from "@hexclave/shared/dist/utils/errors";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { ActionCell, Badge, Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@hexclave/ui";
+import { useEffect, useState } from "react";
+import { useUser } from "../../../lib/hooks";
+import { ActiveSession } from "../../../lib/hexclave-app/users";
+import { useTranslation } from "../../../lib/translations";
+import { PageLayout } from "../page-layout";
+
+export function ActiveSessionsPage(props?: {
+  mockSessions?: Array<{
+    id: string,
+    isCurrentSession: boolean,
+    isImpersonation?: boolean,
+    createdAt: string,
+    lastUsedAt?: string,
+    geoInfo?: {
+      ip?: string,
+      cityName?: string,
+    },
+  }>,
+  mockMode?: boolean,
+}) {
+  const { t } = useTranslation();
+  const userFromHook = useUser({ or: (props?.mockSessions || props?.mockMode) ? 'return-null' : 'throw' });
+  const [isLoading, setIsLoading] = useState(!props?.mockSessions);
+  const [isRevokingAll, setIsRevokingAll] = useState(false);
+  const [sessions, setSessions] = useState<ActiveSession[]>([]);
+  const [showConfirmRevokeAll, setShowConfirmRevokeAll] = useState(false);
+
+  // Use mock data if provided
+  const mockSessionsData = props?.mockSessions ? props.mockSessions.map(session => ({
+    id: session.id,
+    isCurrentSession: session.isCurrentSession,
+    isImpersonation: session.isImpersonation || false,
+    createdAt: session.createdAt,
+    lastUsedAt: session.lastUsedAt,
+    geoInfo: session.geoInfo,
+  })) : [
+    {
+      id: 'current-session',
+      isCurrentSession: true,
+      createdAt: new Date().toISOString(),
+      lastUsedAt: new Date().toISOString(),
+      geoInfo: { ip: '192.168.1.1', cityName: 'San Francisco' }
+    },
+    {
+      id: 'mobile-session',
+      isCurrentSession: false,
+      createdAt: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
+      lastUsedAt: new Date(Date.now() - 7200000).toISOString(), // 2 hours ago
+      geoInfo: { ip: '10.0.0.1', cityName: 'New York' }
+    }
+  ];
+
+  // Fetch sessions when component mounts (only if not using mock data)
+  useEffect(() => {
+    if (props?.mockSessions) {
+      setSessions(mockSessionsData as any);
+      setIsLoading(false);
+      return;
+    }
+
+    // If in mock mode but no mock sessions provided, use default mock data
+    if (props?.mockMode && !userFromHook) {
+      setSessions(mockSessionsData as any);
+      setIsLoading(false);
+      return;
+    }
+
+    if (!userFromHook) return;
+
+    runAsynchronously(async () => {
+      setIsLoading(true);
+      const sessionsData = await userFromHook.getActiveSessions();
+      const enhancedSessions = sessionsData;
+      setSessions(enhancedSessions);
+      setIsLoading(false);
+    });
+  }, [userFromHook, props?.mockSessions]);
+
+  const handleRevokeSession = async (sessionId: string) => {
+    if (props?.mockSessions) {
+      // Mock revoke - just remove from list
+      setSessions(prev => prev.filter(session => session.id !== sessionId));
+      return;
+    }
+
+    if (!userFromHook) return;
+
+    try {
+      await userFromHook.revokeSession(sessionId);
+      setSessions(prev => prev.filter(session => session.id !== sessionId));
+    } catch (error) {
+      captureError("session-revoke", { sessionId ,error });
+      throw error;
+    }
+  };
+
+  const handleRevokeAllSessions = async () => {
+    setIsRevokingAll(true);
+    try {
+      if (props?.mockSessions) {
+        // Mock revoke all - just keep current session
+        setSessions(prevSessions => prevSessions.filter(session => session.isCurrentSession));
+      } else if (userFromHook) {
+        const deletionPromises = sessions
+          .filter(session => !session.isCurrentSession)
+          .map(session => userFromHook.revokeSession(session.id));
+        await Promise.all(deletionPromises);
+        setSessions(prevSessions => prevSessions.filter(session => session.isCurrentSession));
+      }
+    } catch (error) {
+      captureError("all-sessions-revoke", { error, sessionIds: sessions.map(session => session.id) });
+      throw error;
+    } finally {
+      setIsRevokingAll(false);
+      setShowConfirmRevokeAll(false);
+    }
+  };
+
+  return (
+    <PageLayout>
+      <div>
+        <div className="flex justify-between items-center mb-2">
+          <Typography className='font-medium'>{t("Active Sessions")}</Typography>
+          {sessions.filter(s => !s.isCurrentSession).length > 0 && !isLoading && (
+            showConfirmRevokeAll ? (
+              <div className="flex gap-2">
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  loading={isRevokingAll}
+                  onClick={handleRevokeAllSessions}
+                >
+                  {t("Confirm")}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  disabled={isRevokingAll}
+                  onClick={() => setShowConfirmRevokeAll(false)}
+                >
+                  {t("Cancel")}
+                </Button>
+              </div>
+            ) : (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowConfirmRevokeAll(true)}
+              >
+                {t("Revoke All Other Sessions")}
+              </Button>
+            )
+          )}
+        </div>
+        <Typography variant='secondary' type='footnote' className="mb-4">
+          {t("These are devices where you're currently logged in. You can revoke access to end a session.")}
+        </Typography>
+
+        {isLoading ? (
+          <Skeleton className="h-[300px] w-full rounded-md" />
+        ) : (
+          <div className='border rounded-md'>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[200px]">{t("Session")}</TableHead>
+                  <TableHead className="w-[150px]">{t("IP Address")}</TableHead>
+                  <TableHead className="w-[150px]">{t("Location")}</TableHead>
+                  <TableHead className="w-[150px]">{t("Last used")}</TableHead>
+                  <TableHead className="w-[80px]"></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sessions.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={5} className="text-center py-6">
+                      <Typography variant="secondary">{t("No active sessions found")}</Typography>
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  sessions.map((session) => (
+                    <TableRow key={session.id}>
+                      <TableCell>
+                        <div className="flex flex-col">
+                          {/* We currently do not save any usefull information about the user, in the future, the name should probably say what kind of session it is (e.g. cli, browser, maybe what auth method was used) */}
+                          <Typography>{session.isCurrentSession ? t("Current Session") : t("Other Session")}</Typography>
+                          {session.isImpersonation && <Badge variant="secondary" className="w-fit mt-1">{t("Impersonation")}</Badge>}
+                          <Typography variant='secondary' type='footnote'>
+                            {t("Signed in {time}", { time: new Date(session.createdAt).toLocaleDateString() })}
+                          </Typography>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Typography>{session.geoInfo?.ip || t('-')}</Typography>
+                      </TableCell>
+                      <TableCell>
+                        <Typography>{session.geoInfo?.cityName || t('Unknown')}</Typography>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-col">
+                          <Typography>{session.lastUsedAt ? fromNow(new Date(session.lastUsedAt)) : t("Never")}</Typography>
+                          <Typography variant='secondary' type='footnote' title={session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleString() : ""}>
+                            {session.lastUsedAt ? new Date(session.lastUsedAt).toLocaleDateString() : ""}
+                          </Typography>
+                        </div>
+                      </TableCell>
+                      <TableCell align="right">
+                        <ActionCell
+                          items={[
+                            {
+                              item: t("Revoke"),
+                              onClick: () => handleRevokeSession(session.id),
+                              danger: true,
+                              disabled: session.isCurrentSession,
+                              disabledTooltip: session.isCurrentSession ? t("You cannot revoke your current session") : undefined,
+                            },
+                          ]}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </div>
+    </PageLayout>
+  );
+}