Function SetupForm

app/(loggedOutRoutes)/auth/setup/setup-form.tsx:9–87

()

import { useTranslations } from "next-intl";

export default function SetupForm() {
  const t = useTranslations('auth');
  const [error, setError] = useState<string>("");
  const [isLoading, setIsLoading] = useState(false);
  const { isRwMarkable } = useAppMode();

  async function handleSubmit(formData: FormData) {
    setIsLoading(true);
    setError("");

    try {
      const result = await register(formData);
      if (result?.error) {
        setError(result.error);
      }
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <div className="space-y-6">
      <div className="space-y-2 text-center">
        <h1 className="text-2xl font-bold tracking-tight text-foreground">
          {t('welcomeTo', { appName: isRwMarkable ? "rwMarkable" : "jotty·page" })}
        </h1>
        <p className="text-md lg:text-sm text-muted-foreground">
          {t('createAdminAccountDescription')}
        </p>
      </div>

      <form action={handleSubmit} className="space-y-4">
        {error && (
          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-jotty">
            <span className="text-md lg:text-sm text-destructive">{error}</span>
          </div>
        )}

        <Input
          id="username"
          name="username"
          label={t('usernameLabel')}
          type="text"
          placeholder={t('chooseUsername')}
          required
          disabled={isLoading}
        />

        <Input
          id="password"
          name="password"
          label={t('passwordLabel')}
          type="password"
          placeholder={t('choosePassword')}
          required
          disabled={isLoading}
        />