@hexclave/next 1.0.2 → 1.0.5

package/src/components-page/account-settings/teams/team-profile-user-section.tsx

@@ -0,0 +1,29 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Team } from "../../..";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { EditableText } from "../editable-text";
+import { Section } from "../section";
+
+export function TeamUserProfileSection(props: { team: Team }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: 'redirect' });
+  const profile = user.useTeamProfile(props.team);
+
+  return (
+    <Section
+      title={t("Team user name")}
+      description={t("Overwrite your user display name in this team")}
+    >
+      <EditableText
+        value={profile.displayName || ''}
+        onSave={async (newDisplayName) => {
+          await profile.update({ displayName: newDisplayName });
+        }}
+      />
+    </Section>
+  );
+}

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

@@ -0,0 +1,343 @@
+'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 { Skeleton, Typography } from '@hexclave/ui';
+import { Contact, ShieldCheck, Bell, Monitor, Key, Settings, CirclePlus, CreditCard } from 'lucide-react';
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useStackApp, useUser } from '..';
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { SidebarLayout } from '../components/elements/sidebar-layout';
+import { TeamIcon } from '../components/team-icon';
+import { useTranslation } from "../lib/translations";
+import { ActiveSessionsPage } from "./account-settings/active-sessions/active-sessions-page";
+import { ApiKeysPage } from "./account-settings/api-keys/api-keys-page";
+import { EmailsAndAuthPage } from './account-settings/email-and-auth/email-and-auth-page';
+import { NotificationsPage } from './account-settings/notifications/notifications-page';
+import { ProfilePage } from "./account-settings/profile-page/profile-page";
+import { PaymentsPage } from "./account-settings/payments/payments-page";
+import { SettingsPage } from './account-settings/settings/settings-page';
+import { TeamCreationPage } from './account-settings/teams/team-creation-page';
+import { TeamPage } from './account-settings/teams/team-page';
+
+const iconMap = {
+  Contact,
+  ShieldCheck,
+  Bell,
+  Monitor,
+  Key,
+  Settings,
+  CirclePlus,
+  CreditCard,
+} as const;
+
+const Icon = ({ name }: { name: keyof typeof iconMap }) => {
+  const LucideIcon = iconMap[name];
+  return <LucideIcon className="mr-2 h-4 w-4"/>;
+};
+
+export function AccountSettings(props: {
+  fullPage?: boolean,
+  extraItems?: ({
+    title: string,
+    content: React.ReactNode,
+    id: string,
+  } & ({
+    icon?: React.ReactNode,
+  } | {
+    iconName?: keyof typeof iconMap,
+  }))[],
+  mockUser?: {
+    displayName?: string,
+    profileImageUrl?: string,
+  },
+  mockApiKeys?: Array<{
+    id: string,
+    description: string,
+    createdAt: string,
+    expiresAt?: string,
+    manuallyRevokedAt?: string,
+  }>,
+  mockProject?: {
+    config: {
+      allowUserApiKeys: boolean,
+      clientTeamCreationEnabled: boolean,
+    },
+  },
+  mockSessions?: Array<{
+    id: string,
+    isCurrentSession: boolean,
+    isImpersonation?: boolean,
+    createdAt: string,
+    lastUsedAt?: string,
+    geoInfo?: {
+      ip?: string,
+      cityName?: string,
+    },
+  }>,
+}) {
+  const { t } = useTranslation();
+  const userFromHook = useUser({ or: props.mockUser ? 'return-null' : 'redirect' });
+  const hexclaveApp = useStackApp();
+  const projectFromHook = hexclaveApp.useProject();
+
+  // Use mock data if provided, otherwise use real data
+  const user = props.mockUser ? {
+    useTeams: () => [], // Mock empty teams for now
+    useBilling: () => ({ hasCustomer: false }), // Mock empty billing for now
+  } : userFromHook;
+
+  const project = props.mockProject || projectFromHook;
+  const teams = user?.useTeams() || [];
+  const billing = user?.useBilling() || null;
+  const teamsKey = useMemo(() => teams.map(team => team.id).join("|"), [teams]);
+  const teamsById = useMemo(() => teams, [teamsKey]);
+  const userRef = useRef(userFromHook ?? null);
+  const userId = userFromHook?.id ?? null;
+  const [paymentsAvailability, setPaymentsAvailability] = useState<{
+    userHasProducts: boolean,
+    teamIdsWithProducts: Set<string>,
+    isReady: boolean,
+  }>(() => ({
+    userHasProducts: false,
+    teamIdsWithProducts: new Set<string>(),
+    isReady: !!props.mockUser,
+  }));
+
+  useEffect(() => {
+    userRef.current = userFromHook ?? null;
+  }, [userFromHook]);
+
+  useEffect(() => {
+    if (props.mockUser || !userId) {
+      return;
+    }
+    let cancelled = false;
+    runAsynchronouslyWithAlert(async () => {
+      const currentUser = userRef.current;
+      if (!currentUser || currentUser.id !== userId) {
+        return;
+      }
+      const [userProducts, teamsWithProducts] = await Promise.all([
+        currentUser.listProducts({ limit: 1 }),
+        Promise.all(teamsById.map(async (team) => {
+          const isTeamAdmin = await currentUser.hasPermission(team, "team_admin");
+          if (!isTeamAdmin) {
+            return null;
+          }
+          const teamProducts = await team.listProducts({ limit: 1 });
+          const hasTeamProducts = teamProducts.some((product) => product.customerType === "team");
+          return hasTeamProducts ? team.id : null;
+        })),
+      ]);
+      if (cancelled) {
+        return;
+      }
+      const userHasProducts = userProducts.some((product) => product.customerType === "user");
+      const teamIdsWithProducts = new Set<string>(teamsWithProducts.filter((id): id is string => id !== null));
+      setPaymentsAvailability({
+        userHasProducts,
+        teamIdsWithProducts,
+        isReady: true,
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [props.mockUser, teamsById, userId]);
+
+  const teamsWithProducts = useMemo(
+    () => teamsById.filter(team => paymentsAvailability.teamIdsWithProducts.has(team.id)),
+    [paymentsAvailability.teamIdsWithProducts, teamsById],
+  );
+  const shouldShowPaymentsTab = props.mockUser
+    || (paymentsAvailability.isReady
+      && (paymentsAvailability.userHasProducts || teamsWithProducts.length > 0));
+
+  // If we're not in mock mode and don't have a user, the useUser hook will handle redirect
+  if (!props.mockUser && !userFromHook) {
+    return null;
+  }
+
+  return (
+    <MaybeFullPage fullPage={!!props.fullPage}>
+      <div className="self-stretch flex-grow w-full">
+        <SidebarLayout
+          items={([
+            {
+              title: t('My Profile'),
+              type: 'item',
+              id: 'profile',
+              icon: <Icon name="Contact"/>,
+              content: <ProfilePage mockUser={props.mockUser}/>,
+            },
+            {
+              title: t('Emails & Auth'),
+              type: 'item',
+              id: 'auth',
+              icon: <Icon name="ShieldCheck"/>,
+              content: <Suspense fallback={<EmailsAndAuthPageSkeleton/>}>
+                <EmailsAndAuthPage mockMode={!!props.mockUser}/>
+              </Suspense>,
+            },
+            {
+              title: t('Notifications'),
+              type: 'item',
+              id: 'notifications',
+              icon: <Icon name="Bell"/>,
+              content: <Suspense fallback={<NotificationsPageSkeleton/>}>
+                <NotificationsPage/>
+              </Suspense>,
+            },
+            {
+              title: t('Active Sessions'),
+              type: 'item',
+              id: 'sessions',
+              icon: <Icon name="Monitor"/>,
+              content: <Suspense fallback={<ActiveSessionsPageSkeleton/>}>
+                <ActiveSessionsPage mockSessions={props.mockSessions} mockMode={!!props.mockUser}/>
+              </Suspense>,
+            },
+            ...(project.config.allowUserApiKeys ? [{
+              title: t('API Keys'),
+              type: 'item',
+              id: 'api-keys',
+              icon: <Icon name="Key" />,
+              content: <Suspense fallback={<ApiKeysPageSkeleton/>}>
+                <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />
+              </Suspense>,
+            }] as const : []),
+            ...(shouldShowPaymentsTab ? [{
+              title: t('Payments'),
+              type: 'item',
+              id: 'payments',
+              icon: <Icon name="CreditCard" />,
+              content: <Suspense fallback={<PaymentsPageSkeleton/>}>
+                <PaymentsPage
+                  mockMode={!!props.mockUser}
+                  allowPersonal={paymentsAvailability.userHasProducts}
+                  availableTeams={teamsWithProducts}
+                />
+              </Suspense>,
+            }] as const : []),
+            {
+              title: t('Settings'),
+              type: 'item',
+              id: 'settings',
+              icon: <Icon name="Settings"/>,
+              content: <SettingsPage mockMode={!!props.mockUser}/>,
+            },
+            ...(props.extraItems?.map(item => ({
+              title: item.title,
+              type: 'item',
+              id: item.id,
+              icon: (() => {
+                const iconName = (item as any).iconName as keyof typeof iconMap | undefined;
+                if (iconName) {
+                  return <Icon name={iconName}/>;
+                } else if ((item as any).icon) {
+                  return (item as any).icon;
+                }
+                return null;
+              })(),
+              content: item.content,
+            } as const)) || []),
+            ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{
+              title: t('Teams'),
+              type: 'divider',
+            }] as const : [],
+            ...teams.map(team => ({
+              title: <div className='flex gap-2 items-center w-full'>
+                <TeamIcon team={team}/>
+                <Typography className="max-w-[320px] md:w-[90%] truncate">{team.displayName}</Typography>
+              </div>,
+              type: 'item',
+              id: `team-${team.id}`,
+              content: <Suspense fallback={<TeamPageSkeleton/>}>
+                <TeamPage team={team}/>
+              </Suspense>,
+            } as const)),
+            ...project.config.clientTeamCreationEnabled ? [{
+              title: t('Create a team'),
+              icon: <Icon name="CirclePlus"/>,
+              type: 'item',
+              id: 'team-creation',
+              content: <Suspense fallback={<TeamCreationSkeleton/>}>
+                <TeamCreationPage mockMode={!!props.mockUser} />
+              </Suspense>,
+            }] as const : [],
+          ] as const).filter((p) => p.type === 'divider' || (p as any).content )}
+          title={t("Account Settings")}
+        />
+      </div>
+    </MaybeFullPage>
+  );
+}
+
+function PageLayout(props: { children: React.ReactNode }) {
+  return (
+    <div className='flex flex-col gap-6'>
+      {props.children}
+    </div>
+  );
+}
+
+function EmailsAndAuthPageSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+  </PageLayout>;
+}
+
+function ActiveSessionsPageSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-6 w-48 mb-2"/>
+    <Skeleton className="h-4 w-full mb-4"/>
+    <Skeleton className="h-[200px] w-full mt-1 rounded-md"/>
+  </PageLayout>;
+}
+
+function ApiKeysPageSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-[200px] w-full mt-1 rounded-md"/>
+  </PageLayout>;
+}
+
+function PaymentsPageSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-6 w-48 mb-2"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-[200px] w-full mt-1 rounded-md"/>
+  </PageLayout>;
+}
+
+function TeamPageSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-[200px] w-full mt-1 rounded-md"/>
+  </PageLayout>;
+}
+
+function TeamCreationSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+  </PageLayout>;
+}
+
+function NotificationsPageSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+  </PageLayout>;
+}

package/src/components-page/auth-page.tsx

@@ -0,0 +1,206 @@
+'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 { KnownError } from '@hexclave/shared';
+import { captureError } from '@hexclave/shared/dist/utils/errors';
+import { runAsynchronously } from '@hexclave/shared/dist/utils/promises';
+import { use } from '@hexclave/shared/dist/utils/react';
+import { Skeleton, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from '@hexclave/ui';
+import { Suspense, useMemo } from 'react';
+import { useStackApp, useUser } from '..';
+import { CredentialSignIn } from '../components/credential-sign-in';
+import { CredentialSignUp } from '../components/credential-sign-up';
+import { MaybeFullPage } from '../components/elements/maybe-full-page';
+import { SeparatorWithText } from '../components/elements/separator-with-text';
+import { StyledLink } from '../components/link';
+import { KnownErrorMessageCard } from '../components/message-cards/known-error-message-card';
+import { MessageCard } from '../components/message-cards/message-card';
+import { MagicLinkSignIn } from '../components/magic-link-sign-in';
+import { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';
+import { OAuthButtonGroup } from '../components/oauth-button-group';
+import { PasskeyButton } from '../components/passkey-button';
+import { useTranslation } from '../lib/translations';
+
+type Props = {
+  noPasswordRepeat?: boolean,
+  firstTab?: 'magic-link' | 'password',
+  fullPage?: boolean,
+  type: 'sign-in' | 'sign-up',
+  automaticRedirect?: boolean,
+  extraInfo?: React.ReactNode,
+  mockProject?: {
+    config: {
+      signUpEnabled: boolean,
+      credentialEnabled: boolean,
+      passkeyEnabled: boolean,
+      magicLinkEnabled: boolean,
+      oauthProviders: {
+        id: string,
+      }[],
+    },
+  },
+}
+
+type AutomaticRedirectResult =
+  | { status: "success" }
+  | { status: "known-error", error: KnownError }
+  | { status: "unknown-error" };
+
+export function AuthPage(props: Props) {
+  return <Suspense fallback={<Fallback {...props} />}>
+    <Inner {...props} />
+  </Suspense>;
+}
+
+function Fallback(props: Props) {
+  return (
+    <MaybeFullPage fullPage={!!props.fullPage}>
+      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>
+        <div className="text-center mb-6 flex flex-col">
+          <Skeleton className='h-9 w-2/3 self-center' />
+
+          <Skeleton className='h-3 w-16 mt-8' />
+          <Skeleton className='h-9 w-full mt-1' />
+
+          <Skeleton className='h-3 w-24 mt-2' />
+          <Skeleton className='h-9 w-full mt-1' />
+
+          <Skeleton className='h-9 w-full mt-6' />
+        </div>
+      </div>
+    </MaybeFullPage>
+  );
+}
+
+function AutomaticRedirect(props: {
+  fullPage?: boolean,
+  isRestricted: boolean,
+  type: 'sign-in' | 'sign-up',
+}) {
+  const hexclaveApp = useStackApp();
+  const { t } = useTranslation();
+  const redirectResultPromise = useMemo(async (): Promise<AutomaticRedirectResult> => {
+    try {
+      await (
+        props.isRestricted
+          ? hexclaveApp.redirectToOnboarding({ replace: true })
+          : props.type === 'sign-in'
+            ? hexclaveApp.redirectToAfterSignIn({ replace: true })
+            : hexclaveApp.redirectToAfterSignUp({ replace: true })
+      );
+      return { status: "success" };
+    } catch (e) {
+      if (KnownError.isKnownError(e)) {
+        return { status: "known-error", error: e };
+      }
+      captureError("<AuthPage automaticRedirect />", e);
+      return { status: "unknown-error" };
+    }
+  }, [hexclaveApp, props.isRestricted, props.type]);
+
+  const redirectResult = use(redirectResultPromise);
+  if (redirectResult.status === "known-error") {
+    return <KnownErrorMessageCard error={redirectResult.error} fullPage={props.fullPage} />;
+  }
+  if (redirectResult.status === "unknown-error") {
+    return <PredefinedMessageCard type='unknownError' fullPage={props.fullPage} />;
+  }
+  return <MessageCard title={t("Redirecting...")} fullPage={props.fullPage} />;
+}
+
+function Inner(props: Props) {
+  const hexclaveApp = useStackApp();
+  const user = useUser({ includeRestricted: true });
+  const projectFromHook = hexclaveApp.useProject();
+  const project = props.mockProject || projectFromHook;
+  const { t } = useTranslation();
+
+  if (props.automaticRedirect && user && !props.mockProject) {
+    return <Suspense fallback={<MessageCard title={t("Redirecting...")} fullPage={props.fullPage} />}>
+      <AutomaticRedirect fullPage={props.fullPage} isRestricted={user.isRestricted} type={props.type} />
+    </Suspense>;
+  }
+
+  if (user && !props.mockProject && !props.automaticRedirect) {
+    return <PredefinedMessageCard type='signedIn' fullPage={props.fullPage} />;
+  }
+
+  if (props.type === 'sign-up' && !project.config.signUpEnabled) {
+    return <PredefinedMessageCard type='signUpDisabled' fullPage={props.fullPage} />;
+  }
+
+  const hasOAuthProviders = project.config.oauthProviders.length > 0;
+  const hasPasskey = (project.config.passkeyEnabled === true && props.type === "sign-in");
+  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && (hasOAuthProviders || hasPasskey);
+
+  return (
+    <MaybeFullPage fullPage={!!props.fullPage}>
+      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>
+        <div className="text-center mb-6">
+          <Typography type='h2'>
+            {props.type === 'sign-in' ? t("Sign in to your account") : t("Create a new account")}
+          </Typography>
+          {props.type === 'sign-in' ? (
+            project.config.signUpEnabled && (
+              <Typography>
+                {t("Don't have an account?")}{" "}
+                <StyledLink href={hexclaveApp.urls.signUp} onClick={(e) => {
+                  runAsynchronously(hexclaveApp.redirectToSignUp());
+                  e.preventDefault();
+                }}>{t("Sign up")}</StyledLink>
+              </Typography>
+            )
+          ) : (
+            <Typography>
+              {t("Already have an account?")}{" "}
+              <StyledLink href={hexclaveApp.urls.signIn} onClick={(e) => {
+                runAsynchronously(hexclaveApp.redirectToSignIn());
+                e.preventDefault();
+              }}>{t("Sign in")}</StyledLink>
+            </Typography>
+          )}
+        </div>
+        {(hasOAuthProviders || hasPasskey) && (
+          <div className='gap-4 flex flex-col items-stretch stack-scope'>
+            {hasOAuthProviders && <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />}
+            {hasPasskey && <PasskeyButton type={props.type} />}
+          </div>
+        )}
+
+        {enableSeparator && <SeparatorWithText text={t('Or continue with')} />}
+        {project.config.credentialEnabled && project.config.magicLinkEnabled ? (
+          <Tabs defaultValue={props.firstTab || 'magic-link'}>
+            <TabsList className={cn('w-full mb-2', {
+              'flex-row-reverse': props.firstTab === 'password'
+            })}>
+              <TabsTrigger value='magic-link' className='flex-1'>{t("Email")}</TabsTrigger>
+              <TabsTrigger value='password' className='flex-1'>{t("Email & Password")}</TabsTrigger>
+            </TabsList>
+            <TabsContent value='magic-link'>
+              <MagicLinkSignIn />
+            </TabsContent>
+            <TabsContent value='password'>
+              {props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn />}
+            </TabsContent>
+          </Tabs>
+        ) : project.config.credentialEnabled ? (
+          props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn />
+        ) : project.config.magicLinkEnabled ? (
+          <MagicLinkSignIn />
+        ) : !(hasOAuthProviders || hasPasskey) ? <Typography variant={"destructive"} className="text-center">{t("No authentication method enabled.")}</Typography> : null}
+        {props.extraInfo && (
+          <div className={cn('flex flex-col items-center text-center text-sm text-gray-500', {
+            'mt-2': project.config.credentialEnabled || project.config.magicLinkEnabled,
+            'mt-6': !(project.config.credentialEnabled || project.config.magicLinkEnabled),
+          })}>
+            <div>{props.extraInfo}</div>
+          </div>
+        )}
+      </div>
+    </MaybeFullPage>
+  );
+}