@hexclave/next 1.0.2 → 1.0.5

package/src/components-page/mfa.tsx

@@ -0,0 +1,222 @@
+"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 {
+  Button,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  Spinner,
+  Typography,
+  cn,
+} from "@hexclave/ui";
+import { CheckIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useStackApp } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { useTranslation } from "../lib/translations";
+
+function MfaForm({ onSuccess, onCancel }: {
+  onSuccess?: () => void,
+  onCancel?: () => void,
+}) {
+  const hexclaveApp = useStackApp();
+  const { t } = useTranslation();
+  const [otp, setOtp] = useState<string>("");
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const [submitting, setSubmitting] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [verified, setVerified] = useState<boolean>(false);
+
+  const [attemptCode, setAttemptCode] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!attemptCode && typeof window !== "undefined") {
+      // Hexclave rebrand: prefer the new MFA attempt code key, fall back to the legacy key.
+      const code = window.sessionStorage.getItem("hexclave_mfa_attempt_code") ?? window.sessionStorage.getItem("stack_mfa_attempt_code");
+      if (code) {
+        setAttemptCode(code);
+      }
+    }
+  }, [ attemptCode]);
+
+  // Handle OTP verification when code is complete
+  useEffect(() => {
+    if (otp.length === 6 && !submitting) {
+      // Blur any focused inputs
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+      if (formRef.current) {
+        const inputs = formRef.current.querySelectorAll('input');
+        for (const input of inputs) {
+          input.blur();
+        }
+      }
+
+      setSubmitting(true);
+      setError(null);
+
+      if (attemptCode) {
+        hexclaveApp
+          .signInWithMfa(otp, attemptCode, { noRedirect: true })
+          .then(async (result) => {
+            if (result.status === "ok") {
+              setVerified(true);
+
+              // Cleanup session storage
+              if (typeof window !== "undefined") {
+                // Hexclave rebrand: remove both the new and legacy MFA attempt code keys.
+                window.sessionStorage.removeItem("hexclave_mfa_attempt_code");
+                window.sessionStorage.removeItem("stack_mfa_attempt_code");
+              }
+
+              if (onSuccess) {
+                onSuccess();
+              } else {
+                await hexclaveApp.redirectToAfterSignIn();
+              }
+            } else {
+              throw result.error;
+            }
+          })
+          .catch((e) => {
+            if (e instanceof KnownErrors.InvalidTotpCode) {
+              setError(t("Invalid TOTP code"));
+            } else {
+              setError(t("Verification failed"));
+            }
+          })
+          .finally(() => {
+            setSubmitting(false);
+            if (!verified) {
+              setOtp("");
+            }
+          });
+      } else {
+        setSubmitting(false);
+        setError(t("Missing verification information"));
+      }
+    }
+
+    // Clear error when user is typing
+    if (otp.length !== 0 && otp.length !== 6) {
+      setError(null);
+    }
+  }, [otp, submitting, onSuccess, attemptCode, hexclaveApp, t, verified]);
+
+
+  const inputStyleClass = useMemo(() => {
+    if (verified) {
+      return "opacity-85 transition-all duration-300";
+    }
+
+    if (error) {
+      return "ring-red-500 border-red-500";
+    }
+
+    return "focus:ring-primary/50";
+  }, [error, verified]);
+
+  return (
+    <div className="flex flex-col items-stretch stack-scope">
+      <form ref={formRef} className="w-full flex flex-col items-center gap-4">
+        <InputOTP
+          maxLength={6}
+          type="text"
+          inputMode="numeric"
+          placeholder="······"
+          value={otp}
+          onChange={(value) => setOtp(value.toUpperCase())}
+          disabled={submitting || verified}
+        >
+          <InputOTPGroup>
+            {[0, 1, 2, 3, 4, 5].map((index) => (
+              <InputOTPSlot
+                key={index}
+                index={index}
+                size="lg"
+                className={cn(
+                  "border focus:ring-2 transition-all",
+                  inputStyleClass,
+                )}
+              />
+            ))}
+          </InputOTPGroup>
+        </InputOTP>
+
+        {/* Verification Status */}
+        <div className="h-8 flex flex-col gap-4 items-center justify-center w-full">
+          {verified ? (
+            <div className="flex items-center gap-2 animate-in fade-in duration-300 slide-in-from-bottom-2">
+              <CheckIcon className="w-5 h-5 text-green-600 animate-in zoom-in duration-300" />
+              <Typography className="text-sm font-medium">{t("Verified! Redirecting...")}</Typography>
+            </div>
+          ) : submitting ? (
+            <div className="flex items-center gap-2">
+              <Spinner className="text-primary h-4 w-4" />
+              <Typography className="text-sm">{t("Verifying...")}</Typography>
+            </div>
+          ) : null}
+
+          {/* Error reporting */}
+          {error !== null && !submitting && !verified ? <FormWarningText text={error} /> : null}
+        </div>
+      </form>
+
+      {/* Cancel Button */}
+      {onCancel && !verified && (
+        <Button
+          variant="link"
+          onClick={onCancel}
+          className="underline mt-4 self-center"
+          disabled={submitting || verified}
+        >
+          {t("Cancel")}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function MFA(props: {
+  fullPage?: boolean,
+  onSuccess?: () => void,
+  onCancel?: () => void,
+}) {
+  const { t } = useTranslation();
+
+  const headerText = t("Multi-Factor Authentication");
+  const instructionText = t("Enter the six-digit code from your authenticator app");
+
+  if (props.fullPage) {
+    return (
+      <MaybeFullPage fullPage={true}>
+        <div
+          className="stack-scope flex flex-col items-stretch"
+          style={{ maxWidth: "380px", flexBasis: "380px", padding: "1rem" }}
+        >
+          <div className="text-center mb-6">
+            <Typography type="h2">{headerText}</Typography>
+            <Typography className="mt-2">{instructionText}</Typography>
+          </div>
+          <MfaForm onSuccess={props.onSuccess} onCancel={props.onCancel} />
+        </div>
+      </MaybeFullPage>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-stretch stack-scope">
+      <Typography className="mb-4 text-center">{instructionText}</Typography>
+      <MfaForm onSuccess={props.onSuccess} onCancel={props.onCancel} />
+    </div>
+  );
+}

package/src/components-page/oauth-callback.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 { KnownError } from "@hexclave/shared";
+import { captureError } from "@hexclave/shared/dist/utils/errors";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { Spinner, cn } from "@hexclave/ui";
+import { useEffect, useRef, useState } from "react";
+import { useStackApp } from "..";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { StyledLink } from "../components/link";
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app";
+import { useTranslation } from "../lib/translations";
+
+export function OAuthCallback({ fullPage }: { fullPage?: boolean }) {
+  const { t } = useTranslation();
+  const app = useStackApp();
+  const called = useRef(false);
+  const [showRedirectLink, setShowRedirectLink] = useState(false);
+  const [redirectUrl, setRedirectUrl] = useState<string | null>(null);
+
+  useEffect(() => runAsynchronously(async () => {
+    if (called.current) return;
+    called.current = true;
+    const redirectToError = async (url: URL) => {
+      const urlString = url.toString();
+      if (app[hexclaveAppInternalsSymbol].getRedirectMethod() === "none") {
+        setRedirectUrl(urlString);
+        return;
+      }
+      await app[hexclaveAppInternalsSymbol].redirectToUrl(urlString, { replace: true });
+    };
+    try {
+      const hasRedirected = await app.callOAuthCallback();
+      if (!hasRedirected) {
+        await app.redirectToSignIn({ noRedirectBack: true });
+      }
+    } catch (e) {
+      if (KnownError.isKnownError(e)) {
+        const errorUrl = new URL(app.urls.error, window.location.href);
+        errorUrl.searchParams.set("errorCode", e.errorCode);
+        errorUrl.searchParams.set("message", e.message);
+        errorUrl.searchParams.set("details", JSON.stringify(e.details ?? {}));
+        await redirectToError(errorUrl);
+        return;
+      }
+      captureError("<OAuthCallback />", e);
+      await redirectToError(new URL(app.urls.error, window.location.href));
+    }
+  }), [app]);
+
+  useEffect(() => {
+    setTimeout(() => setShowRedirectLink(true), 3000);
+  }, []);
+
+  return (
+    <MaybeFullPage
+      fullPage={fullPage ?? false}
+      containerClassName="flex items-center justify-center"
+    >
+      <div
+        className={cn(
+          "text-center justify-center items-center stack-scope flex flex-col gap-4 max-w-[380px]",
+          fullPage ? "p-4" : "p-0"
+        )}
+      >
+        <div className="flex flex-col justify-center items-center gap-4">
+          <Spinner size={20} />
+        </div>
+        {showRedirectLink || redirectUrl != null ? <p>{t('If you are not redirected automatically, ')}<StyledLink className="whitespace-nowrap" href={redirectUrl ?? app.urls.home}>{t("click here")}</StyledLink></p> : null}
+      </div>
+    </MaybeFullPage>
+  );
+}

package/src/components-page/onboarding.tsx

@@ -0,0 +1,176 @@
+'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 { strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Typography } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp, useUser } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
+import { MessageCard } from "../components/message-cards/message-card";
+import { useTranslation } from "../lib/translations";
+
+export function Onboarding(props: {
+  fullPage?: boolean,
+}) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+  const user = useUser({ or: "return-null", includeRestricted: true });
+
+  // If user is not restricted anymore, redirect to the intended destination
+  // redirectToAfterSignIn automatically checks for after_auth_return_to in the URL
+  if (user && !user.isRestricted) {
+    runAsynchronously(hexclaveApp.redirectToAfterSignIn());
+    // TODO: This should return a loading indicator, not just null
+    return null;
+  }
+
+  // If user is anonymous or not logged in, redirect to sign-in
+  if (!user || user.isAnonymous) {
+    runAsynchronously(hexclaveApp.redirectToSignIn());
+    // TODO: This should return a loading indicator, not just null
+    return null;
+  }
+
+  // User is restricted - show appropriate onboarding step based on restricted reason
+  const restrictedReason = user.restrictedReason;
+
+  if (restrictedReason?.type === "email_not_verified") {
+    // Check if user has a primary email
+    const hasPrimaryEmail = !!user.primaryEmail;
+
+    if (!hasPrimaryEmail) {
+      // User needs to add an email first
+      return <AddEmailForm fullPage={props.fullPage} />;
+    }
+
+    // User has email but it's not verified
+    return <VerifyEmailScreen user={user} email={user.primaryEmail} fullPage={props.fullPage} />;
+  }
+
+  // Unknown restricted reason - show generic message
+  return (
+    <MessageCard
+      title={t("Complete your account setup")}
+      fullPage={!!props.fullPage}
+      secondaryButtonText={t("Sign out")}
+      secondaryAction={async () => {
+        await user.signOut();
+      }}
+    >
+      <p>{t("You have not yet completed your account setup. Please reach out to support if you believe this is an error.")}</p>
+    </MessageCard>
+  );
+}
+
+function AddEmailForm(props: {
+  fullPage?: boolean,
+  onEmailAdded?: () => void,
+}) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "throw", includeRestricted: true });
+  const hexclaveApp = useStackApp();
+  const [loading, setLoading] = useState(false);
+
+  const emailSchema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email address'))
+      .defined()
+      .nonEmpty(t('Email is required')),
+  });
+
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(emailSchema)
+  });
+
+  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {
+    setLoading(true);
+    try {
+      await user.update({ primaryEmail: data.email });
+      props.onEmailAdded?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <MessageCard
+      title={t("Add your email address")}
+      fullPage={!!props.fullPage}
+      secondaryButtonText={t("Sign out")}
+      secondaryAction={async () => {
+        await user.signOut();
+      }}
+    >
+      <Typography className="mb-4">
+        {t("Please add an email address to complete your account setup. We'll send you a verification email.")}
+      </Typography>
+      <form
+        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+        noValidate
+        className='flex flex-col gap-2'
+      >
+        <Input
+          {...register("email")}
+          placeholder={t("Enter your email")}
+          type="email"
+        />
+        {errors.email && <FormWarningText text={errors.email.message} />}
+        <Button type="submit" loading={loading} className="w-full">
+          {t("Continue")}
+        </Button>
+      </form>
+    </MessageCard>
+  );
+}
+
+function VerifyEmailScreen(props: {
+  user: NonNullable<ReturnType<typeof useUser>>,
+  email: string,
+  fullPage?: boolean,
+}) {
+  const { t } = useTranslation();
+  const { user, email } = props;
+  const [changingEmail, setChangingEmail] = useState(false);
+
+  if (changingEmail) {
+    return <AddEmailForm fullPage={props.fullPage} onEmailAdded={() => setChangingEmail(false)} />;
+  }
+
+  return (
+    <MessageCard
+      title={t("Please check your email inbox")}
+      fullPage={!!props.fullPage}
+      primaryButtonText={t("Resend verification email")}
+      primaryAction={async () => {
+        await user.sendVerificationEmail();
+      }}
+      secondaryButtonText={t("Sign out")}
+      secondaryAction={async () => {
+        await user.signOut();
+      }}
+    >
+      <Typography>
+        {t("Please verify your email address ")}
+        <span className="font-semibold">{email}</span>
+        {" ("}
+        <button
+          type="button"
+          className="text-primary hover:underline"
+          onClick={() => setChangingEmail(true)}
+        >
+          {t("change")}
+        </button>
+        {"). "}
+        {t("Click the button below to resend the verification link.")}
+      </Typography>
+    </MessageCard>
+  );
+}
+

package/src/components-page/password-reset.tsx

@@ -0,0 +1,185 @@
+'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 { KnownErrors } from "@hexclave/shared";
+import { getPasswordError } from "@hexclave/shared/dist/helpers/password";
+import { passwordSchema, yupObject, yupString } from "@hexclave/shared/dist/schema-fields";
+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 { Button, Label, PasswordInput, Typography, cn } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { StackClientApp, useStackApp } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { MessageCard } from "../components/message-cards/message-card";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { useTranslation } from "../lib/translations";
+
+export default function PasswordResetForm(props: {
+  code: string,
+  fullPage?: boolean,
+}) {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    password: passwordSchema.defined(t("Please enter your password")).nonEmpty(t("Please enter your password")).test({
+      name: 'is-valid-password',
+      test: (value, ctx) => {
+        const error = getPasswordError(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
+      }
+    }),
+    passwordRepeat: yupString().nullable().oneOf([yup.ref('password'), null], t("Passwords do not match")).defined().nonEmpty(t("Please repeat your password"))
+  });
+
+  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const hexclaveApp = useStackApp();
+  const [finished, setFinished] = useState(false);
+  const [resetError, setResetError] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+    try {
+      const { password } = data;
+      const result = await hexclaveApp.resetPassword({ password, code: props.code });
+      if (result.status === 'error') {
+        setResetError(true);
+        return;
+      }
+
+      setFinished(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (finished) {
+    return <PredefinedMessageCard type='passwordReset' fullPage={!!props.fullPage} />;
+  }
+
+  if (resetError) {
+    return (
+      <MessageCard title={t("Failed to reset password")} fullPage={!!props.fullPage}>
+        {t("Failed to reset password. Please request a new password reset link")}
+      </MessageCard>
+    );
+  }
+
+
+  return (
+    <MaybeFullPage fullPage={!!props.fullPage}>
+      <div className={cn(
+        "flex flex-col items-stretch max-w-[380px] flex-basis-[380px]",
+        props.fullPage ? "p-4" : "p-0"
+      )}>
+        <div className="text-center mb-6">
+          <Typography type='h2'>{t("Reset Your Password")}</Typography>
+        </div>
+
+        <form
+          className="flex flex-col items-stretch"
+          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+          noValidate
+        >
+          <Label htmlFor="password" className="mb-1">{t("New Password")}</Label>
+          <PasswordInput
+            id="password"
+            autoComplete="new-password"
+            {...register('password')}
+            onChange={() => {
+              clearErrors('password');
+              clearErrors('passwordRepeat');
+            }}
+          />
+          <FormWarningText text={errors.password?.message?.toString()} />
+
+          <Label htmlFor="repeat-password" className="mt-4 mb-1">{t("Repeat New Password")}</Label>
+          <PasswordInput
+            id="repeat-password"
+            autoComplete="new-password"
+            {...register('passwordRepeat')}
+            onChange={() => {
+              clearErrors('password');
+              clearErrors('passwordRepeat');
+            }}
+          />
+          <FormWarningText text={errors.passwordRepeat?.message?.toString()} />
+
+          <Button type="submit" className="mt-6" loading={loading}>
+            {t("Reset Password")}
+          </Button>
+        </form>
+      </div>
+    </MaybeFullPage>
+  );
+}
+
+
+const cachedVerifyPasswordResetCode = cacheFunction(async (hexclaveApp: StackClientApp<true>, code: string) => {
+  return await hexclaveApp.verifyPasswordResetCode(code);
+});
+
+export function PasswordReset({
+  searchParams,
+  fullPage = false,
+}: {
+  searchParams: Record<string, string>,
+  fullPage?: boolean,
+}) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+
+  const invalidJsx = (
+    <MessageCard title={t("Invalid Password Reset Link")} fullPage={fullPage}>
+      <Typography>{t("Please double check if you have the correct password reset link.")}</Typography>
+    </MessageCard>
+  );
+
+  const expiredJsx = (
+    <MessageCard title={t("Expired Password Reset Link")} fullPage={fullPage}>
+      <Typography>{t("Your password reset link has expired. Please request a new password reset link from the login page.")}</Typography>
+    </MessageCard>
+  );
+
+  const usedJsx = (
+    <MessageCard title={t("Used Password Reset Link")} fullPage={fullPage}>
+      <Typography>{t("This password reset link has already been used. If you need to reset your password again, please request a new password reset link from the login page.")}</Typography>
+    </MessageCard>
+  );
+
+  const code = searchParams.code;
+  if (!code) {
+    return invalidJsx;
+  }
+
+  const result = use(cachedVerifyPasswordResetCode(hexclaveApp, code));
+
+  if (result.status === 'error') {
+    if (KnownErrors.VerificationCodeNotFound.isInstance(result.error)) {
+      return invalidJsx;
+    } else if (KnownErrors.VerificationCodeExpired.isInstance(result.error)) {
+      return expiredJsx;
+    } else if (KnownErrors.VerificationCodeAlreadyUsed.isInstance(result.error)) {
+      return usedJsx;
+    } else {
+      throw result.error;
+    }
+  }
+
+  return <PasswordResetForm code={code} fullPage={fullPage} />;
+}

package/src/components-page/section.tsx

@@ -0,0 +1,27 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Separator, Typography } from "@hexclave/ui";
+
+
+function Section(props: { title: string, description?: string, children: React.ReactNode }) {
+  return (
+    <>
+      <Separator />
+      <div className='flex flex-col sm:flex-row gap-2'>
+        <div className='sm:flex-1 flex flex-col justify-center'>
+          <Typography className='font-medium'>
+            {props.title}
+          </Typography>
+          {props.description && <Typography variant='secondary' type='footnote'>
+            {props.description}
+          </Typography>}
+        </div>
+        <div className='sm:flex-1 sm:items-end flex flex-col gap-2 '>
+          {props.children}
+        </div>
+      </div>
+    </>
+  );
+}