Cleanup

packages/features/auth/src/components/password-sign-up-form.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@kit/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
+import { Trans } from '@kit/ui/trans';
+
+import { PasswordSignUpSchema } from '../schemas/password-sign-up.schema';
+
+export const PasswordSignUpForm: React.FC<{
+  onSubmit: (params: {
+    email: string;
+    password: string;
+    repeatPassword: string;
+  }) => unknown;
+  loading: boolean;
+}> = ({ onSubmit, loading }) => {
+  const { t } = useTranslation();
+
+  const form = useForm({
+    resolver: zodResolver(PasswordSignUpSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+      repeatPassword: '',
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        className={'w-full space-y-2.5'}
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <FormField
+          control={form.control}
+          name={'email'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans i18nKey={'common:emailAddress'} />
+              </FormLabel>
+
+              <FormControl>
+                <Input
+                  data-test={'email-input'}
+                  required
+                  type="email"
+                  placeholder={t('emailPlaceholder')}
+                  {...field}
+                />
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name={'password'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans i18nKey={'common:password'} />
+              </FormLabel>
+
+              <FormControl>
+                <Input
+                  required
+                  data-test={'password-input'}
+                  type="password"
+                  placeholder={''}
+                  {...field}
+                />
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name={'repeatPassword'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans i18nKey={'auth:repeatPassword'} />
+              </FormLabel>
+
+              <FormControl>
+                <Input
+                  required
+                  data-test={'repeat-password-input'}
+                  type="password"
+                  placeholder={''}
+                  {...field}
+                />
+              </FormControl>
+
+              <FormMessage />
+
+              <FormDescription className={'pb-2 text-xs'}>
+                <Trans i18nKey={'auth:repeatPasswordHint'} />
+              </FormDescription>
+            </FormItem>
+          )}
+        />
+
+        <Button
+          data-test={'auth-submit-button'}
+          className={'w-full'}
+          type="submit"
+          disabled={loading}
+        >
+          <If
+            condition={loading}
+            fallback={<Trans i18nKey={'auth:signUpWithEmail'} />}
+          >
+            <Trans i18nKey={'auth:signingUp'} />
+          </If>
+        </Button>
+      </form>
+    </Form>
+  );
+};