81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
"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;
|