refactoring

src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { FC, useState } from "react";
+import { redirect } from "next/navigation";
+import { Button, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import PhoneInput from "@/components/PhoneInput/PhoneInput";
+
+type LoginForm = {
+    phoneNumber: string;
+};
+
+type Props = {
+    isCreatingId?: boolean;
+};
+
+const LoginForm: FC<Props> = ({ isCreatingId = false }) => {
+    const [phoneMask, setPhoneMask] = useState<string>("");
+    const form = useForm<LoginForm>({
+        initialValues: {
+            phoneNumber: "",
+        },
+        validate: {
+            phoneNumber: phoneNumber =>
+                phoneNumber.length !== phoneMask.length &&
+                "Введите корректный номер",
+        },
+    });
+
+    const handleSubmit = (values: LoginForm) => {
+        console.log(values);
+        console.log(phoneMask);
+
+        redirect("/verify-phone");
+    };
+
+    const navigateToCreateId = () => redirect("/create-id");
+
+    const navigateToLogin = () => redirect("/");
+
+    return (
+        <form onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack>
+                <PhoneInput
+                    {...form.getInputProps("phoneNumber")}
+                    setPhoneMask={setPhoneMask}
+                />
+                {isCreatingId ? (
+                    <>
+                        <Button
+                            variant={"filled"}
+                            type={"submit"}>
+                            Создать аккаунт
+                        </Button>
+                        <Button
+                            variant={"outline"}
+                            onClick={() => navigateToLogin()}>
+                            Уже есть LogiDex ID
+                        </Button>
+                    </>
+                ) : (
+                    <>
+                        <Button
+                            variant={"filled"}
+                            type={"submit"}>
+                            Войти
+                        </Button>
+                        <Button
+                            variant={"outline"}
+                            onClick={() => navigateToCreateId()}>
+                            Создать LogiDex ID
+                        </Button>
+                    </>
+                )}
+            </Stack>
+        </form>
+    );
+};
+
+export default LoginForm;