@hexclave/next 1.0.3 → 1.0.5

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

@@ -0,0 +1,157 @@
+
+//===========================================
+// 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 { useState } from "react";
+import { CreateApiKeyDialog, ShowApiKeyDialog } from "../../../components/api-key-dialogs";
+import { ApiKeyTable } from "../../../components/api-key-table";
+import { useUser } from "../../../lib/hooks";
+import { ApiKey, ApiKeyCreationOptions } from "../../../lib/hexclave-app/api-keys";
+import { useTranslation } from "../../../lib/translations";
+import { PageLayout } from "../page-layout";
+
+
+export function ApiKeysPage(props?: {
+  mockApiKeys?: Array<{
+    id: string,
+    description: string,
+    createdAt: string,
+    expiresAt?: string,
+    manuallyRevokedAt?: string,
+  }>,
+  mockMode?: boolean,
+}) {
+  const { t } = useTranslation();
+
+  // Check if we're in any kind of mock mode first
+  const isInMockMode = !!(props?.mockApiKeys || props?.mockMode);
+
+  const userFromHook = useUser({ or: isInMockMode ? 'return-null' : 'redirect' });
+
+  // In mock mode, we don't need a user - just show mock data
+  if (isInMockMode && !userFromHook) {
+    // This is expected in mock mode, continue with mock data
+  }
+
+  // Only return null if we're not in mock mode and don't have a user
+  if (!isInMockMode && !userFromHook) {
+    return null; // This shouldn't happen due to redirect, but just in case
+  }
+
+  // Use mock data if provided
+  const mockApiKeysData = props?.mockApiKeys ? props.mockApiKeys.map(mockKey => ({
+    id: mockKey.id,
+    description: mockKey.description,
+    createdAt: new Date(mockKey.createdAt),
+    expiresAt: mockKey.expiresAt ? new Date(mockKey.expiresAt) : undefined,
+    manuallyRevokedAt: mockKey.manuallyRevokedAt ? new Date(mockKey.manuallyRevokedAt) : null,
+    value: {
+      lastFour: mockKey.id.slice(-4).padStart(4, '0'), // Use last 4 chars of ID or pad with zeros
+    },
+    type: 'user' as const,
+    userId: 'mock-user-id',
+    update: async () => {
+      console.log('Mock API key update called');
+    },
+    revoke: async () => {
+      console.log('Mock API key revoke called');
+    },
+    isValid: () => {
+      const now = new Date();
+      const isExpired = mockKey.expiresAt ? new Date(mockKey.expiresAt) < now : false;
+      const isRevoked = !!mockKey.manuallyRevokedAt;
+      return !isExpired && !isRevoked;
+    },
+    whyInvalid: () => {
+      const now = new Date();
+      if (mockKey.manuallyRevokedAt) return 'manually-revoked';
+      if (mockKey.expiresAt && new Date(mockKey.expiresAt) < now) return 'expired';
+      return null;
+    },
+  })) : [
+    {
+      id: 'key-1',
+      description: 'Development Key',
+      createdAt: new Date(Date.now() - 172800000), // 2 days ago
+      expiresAt: undefined,
+      manuallyRevokedAt: null,
+      value: {
+        lastFour: 'ey-1'.slice(-4).padStart(4, '0'),
+      },
+      type: 'user' as const,
+      userId: 'mock-user-id',
+      update: async () => {
+        console.log('Mock API key update called');
+      },
+      revoke: async () => {
+        console.log('Mock API key revoke called');
+      },
+      isValid: () => true,
+      whyInvalid: () => null,
+    }
+  ];
+
+  // Determine which API keys to use
+  let apiKeys: any[];
+  if (isInMockMode) {
+    apiKeys = mockApiKeysData;
+  } else if (userFromHook) {
+    apiKeys = userFromHook.useApiKeys();
+  } else {
+    apiKeys = [];
+  }
+
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
+  const [returnedApiKey, setReturnedApiKey] = useState<ApiKey<"user", true> | null>(null);
+
+  const CreateDialog = CreateApiKeyDialog<"user">;
+  const ShowDialog = ShowApiKeyDialog<"user">;
+
+  const handleCreateApiKey = async (data: ApiKeyCreationOptions<"user">) => {
+    if (isInMockMode) {
+      // Mock API key creation
+      const mockApiKey = {
+        id: `key-${Date.now()}`,
+        description: data.description,
+        createdAt: new Date().toISOString(),
+        expiresAt: data.expiresAt?.toISOString(),
+        value: 'sk_dev_mock_key_' + Math.random().toString(36).substring(2),
+        update: async () => {
+          console.log('Mock API key update called');
+        },
+        revoke: async () => {
+          console.log('Mock API key revoke called');
+        },
+        isValid: () => true,
+        whyInvalid: () => null,
+        type: 'user' as const,
+        userId: 'mock-user-id',
+      };
+      return mockApiKey as any;
+    }
+
+    if (!userFromHook) throw new Error('User not available');
+    return await userFromHook.createApiKey(data);
+  };
+
+  return (
+    <PageLayout>
+      <Button onClick={() => setIsNewApiKeyDialogOpen(true)}>
+        {t("Create API Key")}
+      </Button>
+      <ApiKeyTable apiKeys={apiKeys} />
+      <CreateDialog
+        open={isNewApiKeyDialogOpen}
+        onOpenChange={setIsNewApiKeyDialogOpen}
+        onKeyCreated={setReturnedApiKey}
+        createApiKey={handleCreateApiKey}
+        mockMode={isInMockMode}
+      />
+      <ShowDialog
+        apiKey={returnedApiKey}
+        onClose={() => setReturnedApiKey(null)}
+      />
+    </PageLayout>
+  );
+}

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

@@ -0,0 +1,53 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Button, Input, Typography } from "@hexclave/ui";
+import { Edit } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "../../lib/translations";
+
+
+export function EditableText(props: { value: string, onSave?: (value: string) => void | Promise<void> }) {
+  const [editing, setEditing] = useState(false);
+  const [editingValue, setEditingValue] = useState(props.value);
+  const { t } = useTranslation();
+
+  return (
+    <div className='flex items-center gap-2'>
+      {editing ? (
+        <>
+          <Input
+            value={editingValue}
+            onChange={(e) => setEditingValue(e.target.value)}
+          />
+          <Button
+            size='sm'
+            onClick={async () => {
+              await props.onSave?.(editingValue);
+              setEditing(false);
+            }}
+          >
+            {t("Save")}
+          </Button>
+          <Button
+            size='sm'
+            variant='secondary'
+            onClick={() => {
+              setEditingValue(props.value);
+              setEditing(false);
+            }}>
+            {t("Cancel")}
+          </Button>
+        </>
+      ) : (
+        <>
+          <Typography>{props.value}</Typography>
+          <Button onClick={() => setEditing(true)} size='icon' variant='ghost'>
+            <Edit className="w-4 h-4" />
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+
+//===========================================
+// 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 { EmailsSection } from "./emails-section";
+import { MfaSection } from "./mfa-section";
+import { OtpSection } from "./otp-section";
+import { PasskeySection } from "./passkey-section";
+import { PasswordSection } from "./password-section";
+
+export function EmailsAndAuthPage(props?: {
+  mockMode?: boolean,
+}) {
+  return (
+    <PageLayout>
+      <EmailsSection mockMode={props?.mockMode}/>
+      <PasswordSection mockMode={props?.mockMode} />
+      <PasskeySection mockMode={props?.mockMode} />
+      <OtpSection mockMode={props?.mockMode} />
+      <MfaSection mockMode={props?.mockMode} />
+    </PageLayout>
+  );
+}

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

@@ -0,0 +1,201 @@
+
+//===========================================
+// 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/dist/known-errors";
+import { strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from "@hexclave/ui";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { FormWarningText } from "../../../components/elements/form-warning";
+import { useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+
+export function EmailsSection(props?: {
+  mockMode?: boolean,
+}) {
+  const { t } = useTranslation();
+  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });
+
+  // In mock mode, show a placeholder message
+  if (props?.mockMode && !user) {
+    return (
+      <div>
+        <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>
+          <Typography className='font-medium'>{t("Emails")}</Typography>
+        </div>
+        <Typography variant='secondary'>{t("Email management is not available in demo mode.")}</Typography>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null; // This shouldn't happen in non-mock mode due to redirect
+  }
+
+  const contactChannels = user.useContactChannels();
+  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);
+  const [addingEmailLoading, setAddingEmailLoading] = useState(false);
+  const [addedEmail, setAddedEmail] = useState<string | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const isLastEmailUsedForAuth = contactChannels.filter(x => x.usedForAuth && x.type === 'email').length === 1;
+
+  useEffect(() => {
+    if (addedEmail) {
+      runAsynchronously(async () => {
+        const cc = contactChannels.find(x => x.value === addedEmail);
+        if (cc && !cc.isVerified) {
+          await cc.sendVerificationEmail();
+        }
+        setAddedEmail(null);
+      });
+    }
+  }, [contactChannels, addedEmail]);
+
+  const emailSchema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email address'))
+      .notOneOf(contactChannels.map(x => x.value), t('Email already exists'))
+      .defined()
+      .nonEmpty(t('Email is required')),
+  });
+
+  const { register, handleSubmit, formState: { errors }, reset } = useForm({
+    resolver: yupResolver(emailSchema)
+  });
+
+  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {
+    setAddingEmailLoading(true);
+    try {
+      await user.createContactChannel({ type: 'email', value: data.email, usedForAuth: false });
+      setAddedEmail(data.email);
+    } finally {
+      setAddingEmailLoading(false);
+    }
+    setAddingEmail(false);
+    reset();
+  };
+
+  return (
+    <div>
+      <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>
+        <Typography className='font-medium'>{t("Emails")}</Typography>
+        {addingEmail ? (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              runAsynchronously(handleSubmit(onSubmit));
+            }}
+            className='flex flex-col'
+          >
+            <div className='flex gap-2'>
+              <Input
+                {...register("email")}
+                placeholder={t("Enter email")}
+              />
+              <Button type="submit" loading={addingEmailLoading}>
+                {t("Add")}
+              </Button>
+              <Button
+                variant='secondary'
+                onClick={() => {
+                  setAddingEmail(false);
+                  reset();
+                }}
+              >
+                {t("Cancel")}
+              </Button>
+            </div>
+            {errors.email && <FormWarningText text={errors.email.message} />}
+          </form>
+        ) : (
+          <div className='flex md:justify-end'>
+            <Button variant='secondary' onClick={() => setAddingEmail(true)}>{t("Add an email")}</Button>
+          </div>
+        )}
+      </div>
+
+      {contactChannels.length > 0 ? (
+        <div className='border rounded-md'>
+          <Table>
+            <TableBody>
+              {/*eslint-disable-next-line @typescript-eslint/no-unnecessary-condition*/}
+              {contactChannels.filter(x => x.type === 'email')
+                .sort((a, b) => {
+                  if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+                  if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;
+                  return 0;
+                })
+                .map(x => (
+                  <TableRow key={x.id}>
+                    <TableCell>
+                      <div className='flex flex-col md:flex-row gap-2 md:gap-4'>
+                        {x.value}
+                        <div className='flex gap-2'>
+                          {x.isPrimary ? <Badge>{t("Primary")}</Badge> : null}
+                          {!x.isVerified ? <Badge variant='destructive'>{t("Unverified")}</Badge> : null}
+                          {x.usedForAuth ? <Badge variant='outline'>{t("Used for sign-in")}</Badge> : null}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="flex justify-end">
+                      <ActionCell items={[
+                        ...(!x.isVerified ? [{
+                          item: t("Send verification email"),
+                          onClick: async () => { await x.sendVerificationEmail(); },
+                        }] : []),
+                        ...(!x.isPrimary && x.isVerified ? [{
+                          item: t("Set as primary"),
+                          onClick: async () => { await x.update({ isPrimary: true }); },
+                        }] :
+                          !x.isPrimary ? [{
+                            item: t("Set as primary"),
+                            onClick: async () => {},
+                            disabled: true,
+                            disabledTooltip: t("Please verify your email first"),
+                          }] : []),
+                        ...(!x.usedForAuth && x.isVerified ? [{
+                          item: t("Use for sign-in"),
+                          onClick: async () => {
+                            try {
+                              await x.update({ usedForAuth: true });
+                            } catch (e) {
+                              if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) {
+                                alert(t("This email is already used for sign-in by another user."));
+                              }
+                            }
+                          }
+                        }] : []),
+                        ...(x.usedForAuth && !isLastEmailUsedForAuth ? [{
+                          item: t("Stop using for sign-in"),
+                          onClick: async () => { await x.update({ usedForAuth: false }); },
+                        }] : x.usedForAuth ? [{
+                          item: t("Stop using for sign-in"),
+                          onClick: async () => {},
+                          disabled: true,
+                          disabledTooltip: t("You can not remove your last sign-in email"),
+                        }] : []),
+                        // Determine if this email can be removed
+                        ...(!isLastEmailUsedForAuth || !x.usedForAuth ? [{
+                          item: t("Remove"),
+                          onClick: async () => { await x.delete(); },
+                          danger: true,
+                        }] : [{
+                          item: t("Remove"),
+                          onClick: async () => {},
+                          disabled: true,
+                          disabledTooltip: t("You can not remove your last sign-in email"),
+                        }]),
+                      ]}/>
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,139 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { createTOTPKeyURI, verifyTOTP } from "@oslojs/otp";
+import { useAsyncCallback } from '@hexclave/shared/dist/hooks/use-async-callback';
+import { generateRandomValues } from '@hexclave/shared/dist/utils/crypto';
+import { throwErr } from "@hexclave/shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Typography } from "@hexclave/ui";
+import * as QRCode from 'qrcode';
+import { useEffect, useState } from "react";
+import { CurrentUser, Project } from '../../..';
+import { useStackApp, useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+export function MfaSection(props?: {
+  mockMode?: boolean,
+}) {
+  const { t } = useTranslation();
+  const project = useStackApp().useProject();
+  const user = useUser({ or: props?.mockMode ? 'return-null' : "throw" });
+
+  // In mock mode, show a placeholder message
+  if (props?.mockMode && !user) {
+    return (
+      <Section
+        title={t("Multi-factor authentication")}
+        description={t("MFA management is not available in demo mode.")}
+      >
+        <Typography variant='secondary'>{t("MFA 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 [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);
+  const [mfaCode, setMfaCode] = useState<string>("");
+  const [isMaybeWrong, setIsMaybeWrong] = useState(false);
+  const isEnabled = user.isMultiFactorRequired;
+
+  const [handleSubmit, isLoading] = useAsyncCallback(async () => {
+    await user.update({
+      totpMultiFactorSecret: generatedSecret,
+    });
+    setGeneratedSecret(null);
+    setQrCodeUrl(null);
+    setMfaCode("");
+  }, [generatedSecret, user]);
+
+  useEffect(() => {
+    setIsMaybeWrong(false);
+    runAsynchronouslyWithAlert(async () => {
+      if (generatedSecret && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {
+        await handleSubmit();
+      }
+      setIsMaybeWrong(true);
+    });
+  }, [mfaCode, generatedSecret, handleSubmit]);
+
+  return (
+    <Section
+      title={t("Multi-factor authentication")}
+      description={isEnabled
+        ? t("Multi-factor authentication is currently enabled.")
+        : t("Multi-factor authentication is currently disabled.")}
+    >
+      <div className='flex flex-col gap-4'>
+        {!isEnabled && generatedSecret && (
+          <>
+            <Typography>{t("Scan this QR code with your authenticator app:")}</Typography>
+            <img width={200} height={200} src={qrCodeUrl ?? throwErr("TOTP QR code failed to generate")} alt={t("TOTP multi-factor authentication QR code")} />
+            <Typography>{t("Then, enter your six-digit MFA code:")}</Typography>
+            <Input
+              value={mfaCode}
+              onChange={(e) => {
+                setIsMaybeWrong(false);
+                setMfaCode(e.target.value);
+              }}
+              placeholder="123456"
+              maxLength={6}
+              disabled={isLoading}
+            />
+            {isMaybeWrong && mfaCode.length === 6 && (
+              <Typography variant="destructive">{t("Incorrect code. Please try again.")}</Typography>
+            )}
+            <div className='flex'>
+              <Button
+                variant='secondary'
+                onClick={() => {
+                  setGeneratedSecret(null);
+                  setQrCodeUrl(null);
+                  setMfaCode("");
+                }}
+              >
+                {t("Cancel")}
+              </Button>
+            </div>
+          </>
+        )}
+        <div className='flex gap-2'>
+          {isEnabled ? (
+            <Button
+              variant='secondary'
+              onClick={async () => {
+                await user.update({
+                  totpMultiFactorSecret: null,
+                });
+              }}
+            >
+              {t("Disable MFA")}
+            </Button>
+          ) : !generatedSecret && (
+            <Button
+              variant='secondary'
+              onClick={async () => {
+                const secret = generateRandomValues(new Uint8Array(20));
+                setQrCodeUrl(await generateTotpQrCode(project, user, secret));
+                setGeneratedSecret(secret);
+              }}
+            >
+              {t("Enable MFA")}
+            </Button>
+          )}
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+
+async function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {
+  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);
+  return await QRCode.toDataURL(uri) as any;
+}

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

@@ -0,0 +1,102 @@
+
+//===========================================
+// 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, useUser } from "../../../lib/hooks";
+import { useTranslation } from "../../../lib/translations";
+import { Section } from "../section";
+
+export function OtpSection(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("One-Time Password")}
+        description={t("OTP management is not available in demo mode.")}
+      >
+        <Typography variant='secondary'>{t("OTP 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 project = useStackApp().useProject();
+  const contactChannels = user.useContactChannels();
+  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;
+  const [disabling, setDisabling] = 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.magicLinkEnabled) {
+    return null;
+  }
+
+  const handleDisableOTP = async () => {
+    await user.update({ otpAuthEnabled: false });
+    setDisabling(false);
+  };
+
+  return (
+    <Section title={t("OTP sign-in")} description={user.otpAuthEnabled ? t("OTP/magic link sign-in is currently enabled.") : t("Enable sign-in via magic link or OTP sent to your sign-in emails.")}>
+      <div className='flex md:justify-end'>
+        {hasValidEmail ? (
+          user.otpAuthEnabled ? (
+            !isLastAuth ? (
+              !disabling ? (
+                <Button
+                  variant='secondary'
+                  onClick={() => setDisabling(true)}
+                >
+                  {t("Disable OTP")}
+                </Button>
+              ) : (
+                <div className='flex flex-col gap-2'>
+                  <Typography variant='destructive'>
+                    {t("Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.")}
+                  </Typography>
+                  <div className='flex gap-2'>
+                    <Button
+                      variant='destructive'
+                      onClick={handleDisableOTP}
+                    >
+                      {t("Disable")}
+                    </Button>
+                    <Button
+                      variant='secondary'
+                      onClick={() => setDisabling(false)}
+                    >
+                      {t("Cancel")}
+                    </Button>
+                  </div>
+                </div>
+              )
+            ) : (
+              <Typography variant='secondary' type='label'>{t("OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method")}</Typography>
+            )
+          ) : (
+            <Button
+              variant='secondary'
+              onClick={async () => {
+                await user.update({ otpAuthEnabled: true });
+              }}
+            >
+              {t("Enable OTP")}
+            </Button>
+          )
+        ) : (
+          <Typography variant='secondary' type='label'>{t("To enable OTP sign-in, please add a verified sign-in email.")}</Typography>
+        )}
+      </div>
+    </Section>
+  );
+}