@hexclave/next 1.0.2 → 1.0.5

package/src/components-page/sign-in.tsx

@@ -0,0 +1,34 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { AuthPage } from "./auth-page";
+
+export function SignIn(props: {
+  fullPage?: boolean,
+  automaticRedirect?: boolean,
+  extraInfo?: React.ReactNode,
+  firstTab?: 'magic-link' | 'password',
+  mockProject?: {
+    config: {
+      signUpEnabled: boolean,
+      credentialEnabled: boolean,
+      passkeyEnabled: boolean,
+      magicLinkEnabled: boolean,
+      oauthProviders: {
+        id: string,
+      }[],
+    },
+  },
+}) {
+  return (
+    <AuthPage
+      fullPage={!!props.fullPage}
+      type="sign-in"
+      automaticRedirect={!!props.automaticRedirect}
+      extraInfo={props.extraInfo}
+      firstTab={props.firstTab}
+      mockProject={props.mockProject}
+    />
+  );
+}

package/src/components-page/sign-out.tsx

@@ -0,0 +1,37 @@
+'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 { cacheFunction } from "@hexclave/shared/dist/utils/caches";
+import { use } from "@hexclave/shared/dist/utils/react";
+import { CurrentUser, useUser } from "..";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+
+const cacheSignOut = cacheFunction(async (user: CurrentUser, redirectUrl: string | undefined) => {
+  return await user.signOut({ redirectUrl });
+});
+
+const cacheRedirectIfAlreadySignedOut = cacheFunction(async (redirectUrl: string | undefined) => {
+  if (redirectUrl == null) {
+    return;
+  }
+  if (typeof window !== "undefined") {
+    window.location.replace(redirectUrl);
+  }
+});
+
+export function SignOut(props: { fullPage?: boolean, searchParams?: Record<string, string> }) {
+  const user = useUser({ or: "return-null" });
+  const redirectUrl = props.searchParams?.after_auth_return_to;
+
+  if (user) {
+    use(cacheSignOut(user, redirectUrl));
+  } else {
+    use(cacheRedirectIfAlreadySignedOut(redirectUrl));
+  }
+
+  return <PredefinedMessageCard type='signedOut' fullPage={props.fullPage} />;
+}

package/src/components-page/sign-up.tsx

@@ -0,0 +1,24 @@
+'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 { AuthPage } from './auth-page';
+
+export function SignUp(props: {
+  fullPage?: boolean,
+  automaticRedirect?: boolean,
+  noPasswordRepeat?: boolean,
+  extraInfo?: React.ReactNode,
+  firstTab?: 'magic-link' | 'password',
+}) {
+  return <AuthPage
+    fullPage={!!props.fullPage}
+    type='sign-up'
+    automaticRedirect={!!props.automaticRedirect}
+    noPasswordRepeat={props.noPasswordRepeat}
+    extraInfo={props.extraInfo}
+    firstTab={props.firstTab}
+  />;
+}

package/src/components-page/team-creation.tsx

@@ -0,0 +1,78 @@
+'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 { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, Typography } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { MessageCard, useStackApp, useUser } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { useTranslation } from "../lib/translations";
+
+export function TeamCreation(props: { fullPage?: boolean }) {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    displayName: yupString().defined().nonEmpty(t('Please enter a team name')),
+  });
+
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const app = useStackApp();
+  const project = app.useProject();
+  const user = useUser({ or: 'redirect' });
+  const [loading, setLoading] = useState(false);
+  const navigate = app.useNavigate();
+
+  if (!project.config.clientTeamCreationEnabled) {
+    return <MessageCard title={t('Team creation is not enabled')} />;
+  }
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+
+    try {
+      const team = await user.createTeam({ displayName: data.displayName });
+      navigate(`${app.urls.handler}/team-settings/${team.id}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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'>
+            {t('Create a Team')}
+          </Typography>
+        </div>
+        <form
+          className="flex flex-col items-stretch stack-scope"
+          onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}
+          noValidate
+        >
+          <Label htmlFor="display-name" className="mb-1">{t('Display name')}</Label>
+          <Input
+            id="display-name"
+            {...register('displayName')}
+          />
+          <FormWarningText text={errors.displayName?.message?.toString()} />
+
+          <Button type="submit" className="mt-6" loading={loading}>
+            {t('Create')}
+          </Button>
+        </form>
+      </div>
+    </MaybeFullPage>
+  );
+}

package/src/components-page/team-invitation.tsx

@@ -0,0 +1,150 @@
+'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 { KnownErrors } from "@hexclave/shared";
+import { cacheFunction } from "@hexclave/shared/dist/utils/caches";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { use } from "@hexclave/shared/dist/utils/react";
+import { Typography } from "@hexclave/ui";
+import React from "react";
+import { MessageCard, StackClientApp, useStackApp, useUser } from "..";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { useTranslation } from "../lib/translations";
+
+const cachedVerifyInvitation = cacheFunction(async (hexclaveApp: StackClientApp<true>, code: string) => {
+  return await hexclaveApp.verifyTeamInvitationCode(code);
+});
+
+const cachedGetInvitationDetails = cacheFunction(async (hexclaveApp: StackClientApp<true>, code: string) => {
+  return await hexclaveApp.getTeamInvitationDetails(code);
+});
+
+function TeamInvitationInner(props: { fullPage?: boolean, searchParams: Record<string, string> }) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+  const [success, setSuccess] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
+  const details = use(cachedGetInvitationDetails(hexclaveApp, props.searchParams.code || ''));
+
+  if (errorMessage || details.status === 'error') {
+    return (
+      <PredefinedMessageCard type="unknownError" fullPage={props.fullPage} />
+    );
+  }
+
+  if (success) {
+    return (
+      <MessageCard
+        title={t('Team invitation')}
+        fullPage={props.fullPage}
+        primaryButtonText="Go home"
+        primaryAction={() => hexclaveApp.redirectToHome()}
+      >
+        <Typography>You have successfully joined {details.data.teamDisplayName}</Typography>
+      </MessageCard>
+    );
+  }
+
+
+  return (
+    <MessageCard
+      title={t('Team invitation')}
+      fullPage={props.fullPage}
+      primaryButtonText={t('Join')}
+      primaryAction={() => runAsynchronouslyWithAlert(async () => {
+        const result = await hexclaveApp.acceptTeamInvitation(props.searchParams.code || '');
+        if (result.status === 'error') {
+        setErrorMessage(result.error.message);
+        } else {
+        setSuccess(true);
+        }
+      })}
+      secondaryButtonText={t('Ignore')}
+      secondaryAction={() => hexclaveApp.redirectToHome()}
+    >
+      <Typography>You are invited to join {details.data.teamDisplayName}</Typography>
+    </MessageCard>
+  );
+}
+
+export function TeamInvitation({ fullPage=false, searchParams }: { fullPage?: boolean, searchParams: Record<string, string> }) {
+  const { t } = useTranslation();
+  // Include restricted users to detect if user needs to complete onboarding
+  const user = useUser({ includeRestricted: true });
+  const hexclaveApp = useStackApp();
+
+  const invalidJsx = (
+    <MessageCard title={t('Invalid Team Invitation Link')} fullPage={fullPage}>
+      <Typography>{t('Please double check if you have the correct team invitation link.')}</Typography>
+    </MessageCard>
+  );
+
+  const expiredJsx = (
+    <MessageCard title={t('Expired Team Invitation Link')} fullPage={fullPage}>
+      <Typography>{t('Your team invitation link has expired. Please request a new team invitation link ')}</Typography>
+    </MessageCard>
+  );
+
+  const usedJsx = (
+    <MessageCard title={t('Used Team Invitation Link')} fullPage={fullPage}>
+      <Typography>{t('This team invitation link has already been used.')}</Typography>
+    </MessageCard>
+  );
+
+  const code = searchParams.code;
+  if (!code) {
+    return invalidJsx;
+  }
+
+  if (!user) {
+    return (
+      <MessageCard
+        title={t('Team invitation')}
+        fullPage={fullPage}
+        primaryButtonText={t('Sign in')}
+        primaryAction={() => hexclaveApp.redirectToSignIn()}
+        secondaryButtonText={t('Cancel')}
+        secondaryAction={() => hexclaveApp.redirectToHome()}
+      >
+        <Typography>{t('Sign in or create an account to join the team.')}</Typography>
+      </MessageCard>
+    );
+  }
+
+  // User is restricted (needs to complete onboarding) - redirect to onboarding
+  if (user.isRestricted) {
+    return (
+      <MessageCard
+        title={t('Complete your account setup')}
+        fullPage={fullPage}
+        primaryButtonText={t('Complete setup')}
+        primaryAction={() => hexclaveApp.redirectToOnboarding()}
+        secondaryButtonText={t('Cancel')}
+        secondaryAction={() => hexclaveApp.redirectToHome()}
+      >
+        <Typography>{t('Please complete your account setup before joining teams.')}</Typography>
+      </MessageCard>
+    );
+  }
+
+  const verificationResult = use(cachedVerifyInvitation(hexclaveApp, searchParams.code || ''));
+
+  if (verificationResult.status === 'error') {
+    const error = verificationResult.error;
+    if (KnownErrors.VerificationCodeNotFound.isInstance(error)) {
+      return invalidJsx;
+    } else if (KnownErrors.VerificationCodeExpired.isInstance(error)) {
+      return expiredJsx;
+    } else if (KnownErrors.VerificationCodeAlreadyUsed.isInstance(error)) {
+      return usedJsx;
+    } else {
+      throw error;
+    }
+  }
+
+  return <TeamInvitationInner fullPage={fullPage} searchParams={searchParams} />;
+};