@hexclave/next 1.0.2 → 1.0.5

package/src/components-page/account-settings/email-and-auth/passkey-section.tsx

@@ -0,0 +1,112 @@
+
+//===========================================
+// 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 { useStackApp } from "../../..";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+export function PasskeySection(props?: {
+  mockMode?: boolean,
+}) {
+  const { t } = useTranslation();
+  const user = useUser({ or: props?.mockMode ? 'return-null' : "throw" });
+
+  // In mock mode, show a placeholder message
+  if (props?.mockMode && !user) {
+    return (
+      <Section
+        title={t("Passkey")}
+        description={t("Passkey management is not available in demo mode.")}
+      >
+        <Typography variant='secondary'>{t("Passkey management is not available in demo mode.")}</Typography>
+      </Section>
+    );
+  }
+
+  if (!user) {
+    return null; // This shouldn't happen in non-mock mode due to throw
+  }
+  const hexclaveApp = useStackApp();
+  const project = hexclaveApp.useProject();
+  const contactChannels = user.useContactChannels();
+
+
+  // passkey is enabled if there is a passkey
+  const hasPasskey = user.passkeyAuthEnabled;
+
+  const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;
+
+  if (!project.config.passkeyEnabled) {
+    return null;
+  }
+
+  const handleDeletePasskey = async () => {
+    await user.update({ passkeyAuthEnabled: false });
+    setShowConfirmationModal(false);
+  };
+
+
+  const handleAddNewPasskey = async () => {
+    await user.registerPasskey();
+  };
+
+  return (
+    <>
+      <Section title={t("Passkey")} description={hasPasskey ? t("Passkey registered") : t("Register a passkey")}>
+        <div className='flex md:justify-end gap-2'>
+          {!hasValidEmail && (
+            <Typography variant='secondary' type='label'>{t("To enable Passkey sign-in, please add a verified sign-in email.")}</Typography>
+          )}
+          {hasValidEmail && hasPasskey && isLastAuth && (
+            <Typography variant='secondary' type='label'>{t("Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method")}</Typography>
+          )}
+          {!hasPasskey && hasValidEmail && (
+            <div>
+              <Button onClick={handleAddNewPasskey} variant='secondary'>{t("Add new passkey")}</Button>
+            </div>
+          )}
+          {hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && (
+            <Button
+              variant='secondary'
+              onClick={() => setShowConfirmationModal(true)}
+            >
+              {t("Delete Passkey")}
+            </Button>
+          )}
+          {hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && (
+            <div className='flex flex-col gap-2'>
+              <Typography variant='destructive'>
+                {t("Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.")}
+              </Typography>
+              <div className='flex gap-2'>
+                <Button
+                  variant='destructive'
+                  onClick={handleDeletePasskey}
+                >
+                  {t("Disable")}
+                </Button>
+                <Button
+                  variant='secondary'
+                  onClick={() => setShowConfirmationModal(false)}
+                >
+                  {t("Cancel")}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </Section>
+
+
+    </>
+
+  );
+}

package/src/components-page/account-settings/email-and-auth/password-section.tsx

@@ -0,0 +1,174 @@
+
+//===========================================
+// 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 { getPasswordError } from '@hexclave/shared/dist/helpers/password';
+import { passwordSchema as schemaFieldsPasswordSchema, yupObject, yupString } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput, Typography } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from '../../..';
+import { FormWarningText } from "../../../components/elements/form-warning";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+
+export function PasswordSection(props?: {
+  mockMode?: boolean,
+}) {
+  const { t } = useTranslation();
+  const user = useUser({ or: props?.mockMode ? 'return-null' : "throw" });
+
+  // In mock mode, show a placeholder message
+  if (props?.mockMode && !user) {
+    return (
+      <Section
+        title={t("Password")}
+        description={t("Password management is not available in demo mode.")}
+      >
+        <Typography variant='secondary'>{t("Password management is not available in demo mode.")}</Typography>
+      </Section>
+    );
+  }
+
+  if (!user) {
+    return null; // This shouldn't happen in non-mock mode due to throw
+  }
+  const contactChannels = user.useContactChannels();
+  const [changingPassword, setChangingPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const project = useStackApp().useProject();
+
+  const passwordSchema = yupObject({
+    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your old password')) : yupString(),
+    newPassword: schemaFieldsPasswordSchema.defined().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;
+        }
+      }
+    }),
+    newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), "", null], t('Passwords do not match')).defined().nonEmpty(t('Please repeat your password'))
+  });
+
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({
+    resolver: yupResolver(passwordSchema)
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.usedForAuth).length > 0;
+
+  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {
+    setLoading(true);
+    try {
+      const { oldPassword, newPassword } = data;
+      const error = user.hasPassword
+        ? await user.updatePassword({ oldPassword: oldPassword!, newPassword })
+        : await user.setPassword({ password: newPassword! });
+      if (error) {
+        setError('oldPassword', { type: 'manual', message: t('Incorrect password') });
+      } else {
+        reset();
+        setChangingPassword(false);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const registerPassword = register('newPassword');
+  const registerPasswordRepeat = register('newPasswordRepeat');
+
+  if (!project.config.credentialEnabled) {
+    return null;
+  }
+
+  return (
+    <Section
+      title={t("Password")}
+      description={user.hasPassword ? t("Update your password") : t("Set a password for your account")}
+    >
+      <div className='flex flex-col gap-4'>
+        {!changingPassword ? (
+          hasValidEmail ? (
+            <Button
+              variant='secondary'
+              onClick={() => setChangingPassword(true)}
+            >
+              {user.hasPassword ? t("Update password") : t("Set password")}
+            </Button>
+          ) : (
+            <Typography variant='secondary' type='label'>{t("To set a password, please add a sign-in email.")}</Typography>
+          )
+        ) : (
+          <form
+            onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+            noValidate
+          >
+            {user.hasPassword && (
+              <>
+                <Label htmlFor="old-password" className="mb-1">{t("Old password")}</Label>
+                <Input
+                  id="old-password"
+                  type="password"
+                  autoComplete="current-password"
+                  {...register("oldPassword")}
+                />
+                <FormWarningText text={errors.oldPassword?.message?.toString()} />
+              </>
+            )}
+
+            <Label htmlFor="new-password" className="mt-4 mb-1">{t("New password")}</Label>
+            <PasswordInput
+              id="new-password"
+              autoComplete="new-password"
+              {...registerPassword}
+              onChange={(e) => {
+                clearErrors('newPassword');
+                clearErrors('newPasswordRepeat');
+                runAsynchronously(registerPassword.onChange(e));
+              }}
+            />
+            <FormWarningText text={errors.newPassword?.message?.toString()} />
+
+            <Label htmlFor="repeat-password" className="mt-4 mb-1">{t("Repeat new password")}</Label>
+            <PasswordInput
+              id="repeat-password"
+              autoComplete="new-password"
+              {...registerPasswordRepeat}
+              onChange={(e) => {
+                clearErrors('newPassword');
+                clearErrors('newPasswordRepeat');
+                runAsynchronously(registerPasswordRepeat.onChange(e));
+              }}
+            />
+            <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />
+
+            <div className="mt-6 flex gap-4">
+              <Button type="submit" loading={loading}>
+                {user.hasPassword ? t("Update Password") : t("Set Password")}
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setChangingPassword(false);
+                  reset();
+                }}
+              >
+                {t("Cancel")}
+              </Button>
+            </div>
+          </form>
+        )}
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,44 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { PageLayout } from "../page-layout";
+import { Switch } from "@hexclave/ui";
+import { Separator, Typography } from "@hexclave/ui";
+
+
+export function NotificationsPage() {
+  const { t } = useTranslation();
+  const user = useUser({ or: 'redirect' });
+  const notificationCategories = user.useNotificationCategories();
+
+  return (
+    <PageLayout>
+      <Separator />
+      <div className='flex flex-col gap-2'>
+        <div className='sm:flex-1 flex flex-col justify-center pb-2'>
+          <Typography className="font-medium">
+            {t('Choose which emails you want to receive')}
+          </Typography>
+        </div>
+        {notificationCategories.map((category) => (
+          <div key={category.id} className="flex justify-start gap-4 items-center">
+            <Switch
+              checked={category.enabled}
+              onCheckedChange={(value) => void category.setEnabled(value)}
+              disabled={!category.canDisable}
+            />
+            <Typography>{category.name}</Typography>
+            {!category.canDisable && (
+              <Typography variant='secondary' type='footnote'>
+                (cannot be disabled)
+              </Typography>
+            )}
+          </div>
+        ))}
+      </div>
+    </PageLayout>
+  );
+}

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

@@ -0,0 +1,11 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+export function PageLayout(props: { children: React.ReactNode }) {
+  return (
+    <div className='flex flex-col gap-6'>
+      {props.children}
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+'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";
+import { Team, TeamSwitcher } from "../../..";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { PageLayout } from "../page-layout";
+import { PaymentsPanel } from "./payments-panel";
+
+export function PaymentsPage(props: { mockMode?: boolean, availableTeams?: Team[], allowPersonal?: boolean }) {
+  const { t } = useTranslation();
+  const user = useUser({ or: props.mockMode ? "return-null" : "redirect" });
+  const teams = props.availableTeams ?? user?.useTeams() ?? [];
+  const allowPersonal = props.allowPersonal ?? true;
+  const hasTeams = teams.length > 0;
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const effectiveSelectedTeam = selectedTeam ?? (!allowPersonal ? (teams[0] ?? null) : null);
+  const customer = effectiveSelectedTeam ?? (allowPersonal ? user : null);
+  const customerType = effectiveSelectedTeam ? "team" : "user";
+
+  useEffect(() => {
+    if (props.mockMode) {
+      return;
+    }
+    if (!allowPersonal && !selectedTeam && teams.length > 0) {
+      setSelectedTeam(teams[0]);
+      return;
+    }
+    if (selectedTeam && !teams.some(team => team.id === selectedTeam.id)) {
+      setSelectedTeam(allowPersonal ? null : (teams[0] ?? null));
+    }
+  }, [allowPersonal, props.mockMode, selectedTeam, teams]);
+
+  if (props.mockMode) {
+    return (
+      <PageLayout>
+        <PaymentsPanel
+          mockMode
+        />
+      </PageLayout>
+    );
+  }
+
+  if (!customer) {
+    return null;
+  }
+
+
+  return (
+    <PageLayout>
+      {hasTeams ? (
+        <TeamSwitcher
+          team={effectiveSelectedTeam ?? undefined}
+          teams={teams}
+          allowNull={allowPersonal}
+          nullLabel={t("Personal")}
+          onChange={async (team) => {
+            setSelectedTeam(team);
+          }}
+        />
+      ) : null}
+      <PaymentsPanel
+        customer={customer}
+        customerType={customerType}
+      />
+    </PageLayout>
+  );
+}