@hexclave/next 1.0.3 → 1.0.5

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

@@ -0,0 +1,85 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Typography } from "@hexclave/ui";
+import { useState } from "react";
+import { useStackApp, useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+export function DeleteAccountSection(props?: { mockMode?: boolean }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });
+  const app = useStackApp();
+  const project = app.useProject();
+  const [deleting, setDeleting] = useState(false);
+
+  // In mock mode, always show the delete section
+  const showDeleteSection = props?.mockMode || project.config.clientUserDeletionEnabled;
+
+  if (!showDeleteSection) {
+    return null;
+  }
+
+  const handleDeleteAccount = async () => {
+    if (props?.mockMode) {
+      // Mock mode - just show an alert
+      alert("Mock mode: Account deletion clicked");
+      setDeleting(false);
+      return;
+    }
+
+    if (user) {
+      await user.delete();
+      await app.redirectToHome();
+    }
+  };
+
+  return (
+    <Section
+      title={t("Delete Account")}
+      description={t("Permanently remove your account and all associated data")}
+    >
+      <div className='stack-scope flex flex-col items-stretch'>
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>{t("Danger zone")}</AccordionTrigger>
+            <AccordionContent>
+              {!deleting ? (
+                <div>
+                  <Button
+                    variant='destructive'
+                    onClick={() => setDeleting(true)}
+                  >
+                    {t("Delete account")}
+                  </Button>
+                </div>
+              ) : (
+                <div className='flex flex-col gap-2'>
+                  <Typography variant='destructive'>
+                    {t("Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.")}
+                  </Typography>
+                  <div className='flex gap-2'>
+                    <Button
+                      variant='destructive'
+                      onClick={handleDeleteAccount}
+                    >
+                      {t("Delete Account")}
+                    </Button>
+                    <Button
+                      variant='secondary'
+                      onClick={() => setDeleting(false)}
+                    >
+                      {t("Cancel")}
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,19 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { PageLayout } from "../page-layout";
+import { DeleteAccountSection } from "./delete-account-section";
+import { SignOutSection } from "./sign-out-section";
+
+
+export function SettingsPage(props?: {
+  mockMode?: boolean,
+}) {
+  return (
+    <PageLayout>
+      <DeleteAccountSection mockMode={props?.mockMode} />
+      <SignOutSection mockMode={props?.mockMode} />
+    </PageLayout>
+  );
+}

package/src/components-page/account-settings/settings/sign-out-section.tsx

@@ -0,0 +1,40 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Button } from "@hexclave/ui";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+export function SignOutSection(props?: { mockMode?: boolean }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+
+  const handleSignOut = async () => {
+    if (props?.mockMode) {
+      // Mock mode - just show an alert or do nothing
+      alert("Mock mode: Sign out clicked");
+      return;
+    }
+    if (user) {
+      await user.signOut();
+    }
+  };
+
+  return (
+    <Section
+      title={t("Sign out")}
+      description={t("End your current session")}
+    >
+      <div>
+        <Button
+          variant='secondary'
+          onClick={handleSignOut}
+        >
+          {t("Sign out")}
+        </Button>
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,57 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Button, Typography } from "@hexclave/ui";
+import { useState } from "react";
+import { Team } from "../../..";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+export function LeaveTeamSection(props: { team: Team }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: 'redirect' });
+  const [leaving, setLeaving] = useState(false);
+
+  return (
+    <Section
+      title={t("Leave Team")}
+      description={t("leave this team and remove your team profile")}
+    >
+      {!leaving ? (
+        <div>
+          <Button
+            variant='secondary'
+            onClick={() => setLeaving(true)}
+          >
+            {t("Leave team")}
+          </Button>
+        </div>
+      ) : (
+        <div className='flex flex-col gap-2'>
+          <Typography variant='destructive'>
+            {t("Are you sure you want to leave the team?")}
+          </Typography>
+          <div className='flex gap-2'>
+            <Button
+              variant='destructive'
+              onClick={async () => {
+                await user.leaveTeam(props.team);
+                window.location.reload();
+              }}
+            >
+              {t("Leave")}
+            </Button>
+            <Button
+              variant='secondary'
+              onClick={() => setLeaving(false)}
+            >
+              {t("Cancel")}
+            </Button>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+}

package/src/components-page/account-settings/teams/team-api-keys-section.tsx

@@ -0,0 +1,74 @@
+
+//===========================================
+// 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 { Button } from "@hexclave/ui";
+import { useState } from "react";
+import { CreateApiKeyDialog, ShowApiKeyDialog } from "../../../components/api-key-dialogs";
+import { ApiKeyTable } from "../../../components/api-key-table";
+import { useStackApp, useUser } from "../../../lib/hooks";
+import { TeamApiKeyFirstView } from "../../../lib/hexclave-app/api-keys";
+import { Team } from "../../../lib/hexclave-app/teams";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+
+export function TeamApiKeysSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const team = user.useTeam(props.team.id);
+  const hexclaveApp = useStackApp();
+  const project = hexclaveApp.useProject();
+
+  if (!team) {
+    throw new HexclaveAssertionError("Team not found");
+  }
+
+  const teamApiKeysEnabled = project.config.allowTeamApiKeys;
+  const manageApiKeysPermission = user.usePermission(props.team, '$manage_api_keys');
+  if (!manageApiKeysPermission || !teamApiKeysEnabled) {
+    return null;
+  }
+
+  return <TeamApiKeysSectionInner team={props.team} />;
+}
+
+function TeamApiKeysSectionInner(props: { team: Team }) {
+  const { t } = useTranslation();
+
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
+  const [returnedApiKey, setReturnedApiKey] = useState<TeamApiKeyFirstView | null>(null);
+
+  const apiKeys = props.team.useApiKeys();
+
+  const CreateDialog = CreateApiKeyDialog<"team">;
+  const ShowDialog = ShowApiKeyDialog<"team">;
+
+  return (
+    <>
+      <Section
+        title={t("API Keys")}
+        description={t("API keys grant programmatic access to your team.")}
+      >
+        <Button onClick={() => setIsNewApiKeyDialogOpen(true)}>
+          {t("Create API Key")}
+        </Button>
+      </Section>
+      <ApiKeyTable apiKeys={apiKeys} />
+
+      <CreateDialog
+        open={isNewApiKeyDialogOpen}
+        onOpenChange={setIsNewApiKeyDialogOpen}
+        onKeyCreated={setReturnedApiKey}
+        createApiKey={async (data) => {
+          const apiKey = await props.team.createApiKey(data);
+          return apiKey;
+        }}
+      />
+      <ShowDialog
+        apiKey={returnedApiKey}
+        onClose={() => setReturnedApiKey(null)}
+      />
+    </>
+  );
+}

package/src/components-page/account-settings/teams/team-creation-page.tsx

@@ -0,0 +1,92 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { FormWarningText } from "../../../components/elements/form-warning";
+import { MessageCard } from "../../../components/message-cards/message-card";
+import { useStackApp, useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { PageLayout } from "../page-layout";
+import { Section } from "../section";
+
+export function TeamCreationPage(props?: {
+  mockMode?: boolean,
+}) {
+  const { t } = useTranslation();
+
+  const teamCreationSchema = yupObject({
+    displayName: yupString().defined().nonEmpty(t("Please enter a team name")),
+  });
+
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(teamCreationSchema)
+  });
+  const app = useStackApp();
+  const project = app.useProject();
+  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });
+  const navigate = app.useNavigate();
+  const [loading, setLoading] = useState(false);
+
+  // In mock mode, show that team creation is disabled
+  if (props?.mockMode) {
+    return (
+      <PageLayout>
+        <MessageCard title={t("Team creation is disabled in demo mode")} />
+      </PageLayout>
+    );
+  }
+
+  if (!project.config.clientTeamCreationEnabled) {
+    return <MessageCard title={t("Team creation is not enabled")} />;
+  }
+
+  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {
+    if (props?.mockMode) {
+      // Mock mode - just show an alert
+      alert("Mock mode: Team creation clicked");
+      return;
+    }
+
+    setLoading(true);
+
+    let team;
+    try {
+      team = await user?.createTeam({ displayName: data.displayName });
+    } finally {
+      setLoading(false);
+    }
+
+    if (team) {
+      navigate(`#team-${team.id}`);
+    }
+  };
+
+  return (
+    <PageLayout>
+      <Section title={t("Create a Team")} description={t("Enter a display name for your new team")}>
+        <form
+          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+          noValidate
+          className='flex gap-2 flex-col sm:flex-row'
+        >
+          <div className='flex flex-col flex-1'>
+            <Input
+              id="displayName"
+              type="text"
+              {...register("displayName")}
+            />
+            <FormWarningText text={errors.displayName?.message?.toString()} />
+          </div>
+          <Button type="submit" loading={loading}>{t("Create")}</Button>
+        </form>
+      </Section>
+    </PageLayout>
+  );
+}

package/src/components-page/account-settings/teams/team-display-name-section.tsx

@@ -0,0 +1,31 @@
+
+//===========================================
+// 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 TeamDisplayNameSection(props: { team: Team }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: 'redirect' });
+  const updateTeamPermission = user.usePermission(props.team, '$update_team');
+
+  if (!updateTeamPermission) {
+    return null;
+  }
+
+  return (
+    <Section
+      title={t("Team display name")}
+      description={t("Change the display name of your team")}
+    >
+      <EditableText
+        value={props.team.displayName}
+        onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}
+      />
+    </Section>
+  );
+}

package/src/components-page/account-settings/teams/team-member-invitation-section.tsx

@@ -0,0 +1,128 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { yupResolver } from "@hookform/resolvers/yup";
+import { strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@hexclave/ui";
+import { Trash } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { Team } from "../../..";
+import { FormWarningText } from "../../../components/elements/form-warning";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+export function TeamMemberInvitationSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');
+
+  if (!inviteMemberPermission) {
+    return null;
+  }
+
+  return <MemberInvitationSectionInner team={props.team} />;
+}
+
+function MemberInvitationsSectionInvitationsList(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const { t } = useTranslation();
+  const invitationsToShow = props.team.useInvitations();
+  const removeMemberPermission = user.usePermission(props.team, '$remove_members');
+
+  return <>
+    <Table className='mt-6'>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[200px]">{t("Outstanding invitations")}</TableHead>
+          <TableHead className="w-[60px]">{t("Expires")}</TableHead>
+          <TableHead className="w-[36px] max-w-[36px]"></TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invitationsToShow.map((invitation, i) => (
+          <TableRow key={invitation.id}>
+            <TableCell>
+              <Typography>{invitation.recipientEmail}</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography variant='secondary'>{invitation.expiresAt.toLocaleString()}</Typography>
+            </TableCell>
+            <TableCell align='right' className='max-w-[36px]'>
+              {removeMemberPermission && (
+                <Button onClick={async () => await invitation.revoke()} size='icon' variant='ghost'>
+                  <Trash className="w-4 h-4" />
+                </Button>
+              )}
+            </TableCell>
+          </TableRow>
+        ))}
+        {invitationsToShow.length === 0 && <TableRow>
+          <TableCell colSpan={3}>
+            <Typography variant='secondary'>{t("No outstanding invitations")}</Typography>
+          </TableCell>
+        </TableRow>}
+      </TableBody>
+    </Table>
+  </>;
+}
+
+function MemberInvitationSectionInner(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const { t } = useTranslation();
+  const readMemberPermission = user.usePermission(props.team, '$read_members');
+
+  const invitationSchema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email address')).defined().nonEmpty(t('Please enter an email address')),
+  });
+
+  const { register, handleSubmit, formState: { errors }, watch } = useForm({
+    resolver: yupResolver(invitationSchema)
+  });
+  const [loading, setLoading] = useState(false);
+  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);
+
+  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {
+    setLoading(true);
+
+    try {
+      await props.team.inviteUser({ email: data.email });
+      setInvitedEmail(data.email);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    setInvitedEmail(null);
+  }, [watch('email')]);
+
+  return (
+    <>
+      <Section
+        title={t("Invite member")}
+        description={t("Invite a user to your team through email")}
+      >
+        <form
+          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+          noValidate
+          className='w-full'
+        >
+          <div className="flex flex-col gap-4 sm:flex-row w-full">
+            <Input
+              placeholder={t("Email")}
+              {...register("email")}
+            />
+            <Button type="submit" loading={loading}>{t("Invite User")}</Button>
+          </div>
+          <FormWarningText text={errors.email?.message?.toString()} />
+          {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}
+        </form>
+      </Section>
+      {readMemberPermission && <MemberInvitationsSectionInvitationsList team={props.team} />}
+    </>
+  );
+}

package/src/components-page/account-settings/teams/team-member-list-section.tsx

@@ -0,0 +1,59 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@hexclave/ui";
+import { Team } from "../../..";
+import { UserAvatar } from "../../../components/elements/user-avatar";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+
+export function TeamMemberListSection(props: { team: Team }) {
+  const user = useUser({ or: 'redirect' });
+  const readMemberPermission = user.usePermission(props.team, '$read_members');
+  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');
+
+  if (!readMemberPermission && !inviteMemberPermission) {
+    return null;
+  }
+
+  return <MemberListSectionInner team={props.team} />;
+}
+
+function MemberListSectionInner(props: { team: Team }) {
+  const { t } = useTranslation();
+  const users = props.team.useUsers();
+
+  return (
+    <div>
+      <Typography className='font-medium mb-2'>{t("Members")}</Typography>
+      <div className='border rounded-md'>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">{t("User")}</TableHead>
+              <TableHead className="w-[200px]">{t("Name")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {users.map(({ id, teamProfile }, i) => (
+              <TableRow key={id}>
+                <TableCell>
+                  <UserAvatar user={teamProfile} />
+                </TableCell>
+                <TableCell>
+                  {teamProfile.displayName && (
+                    <Typography>{teamProfile.displayName}</Typography>
+                  )}
+                  {!teamProfile.displayName && (
+                    <Typography className="text-muted-foreground italic">{t("No display name set")}</Typography>
+                  )}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+
+//===========================================
+// 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 { PageLayout } from "../page-layout";
+import { LeaveTeamSection } from "./leave-team-section";
+import { TeamApiKeysSection } from "./team-api-keys-section";
+import { TeamDisplayNameSection } from "./team-display-name-section";
+import { TeamMemberInvitationSection } from "./team-member-invitation-section";
+import { TeamMemberListSection } from "./team-member-list-section";
+import { TeamProfileImageSection } from "./team-profile-image-section";
+import { TeamUserProfileSection } from "./team-profile-user-section";
+
+
+export function TeamPage(props: { team: Team }) {
+  return (
+    <PageLayout>
+      <TeamUserProfileSection key={`user-profile-${props.team.id}`} team={props.team} />
+      <TeamProfileImageSection key={`profile-image-${props.team.id}`} team={props.team} />
+      <TeamDisplayNameSection key={`display-name-${props.team.id}`} team={props.team} />
+      <TeamMemberListSection key={`member-list-${props.team.id}`} team={props.team} />
+      <TeamMemberInvitationSection key={`member-invitation-${props.team.id}`} team={props.team} />
+      <TeamApiKeysSection key={`api-keys-${props.team.id}`} team={props.team} />
+      <LeaveTeamSection key={`leave-team-${props.team.id}`} team={props.team} />
+    </PageLayout>
+  );
+}

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

@@ -0,0 +1,33 @@
+
+//===========================================
+// 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 { ProfileImageEditor } from "../../../components/profile-image-editor";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+export function TeamProfileImageSection(props: { team: Team }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: 'redirect' });
+  const updateTeamPermission = user.usePermission(props.team, '$update_team');
+
+  if (!updateTeamPermission) {
+    return null;
+  }
+
+  return (
+    <Section
+      title={t("Team profile image")}
+      description={t("Upload an image for your team")}
+    >
+      <ProfileImageEditor
+        user={props.team}
+        onProfileImageUrlChange={async (profileImageUrl) => {
+          await props.team.update({ profileImageUrl });
+        }}
+      />
+    </Section>
+  );
+}