62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
"use client";
|
||
|
||
import { FC } from "react";
|
||
import { redirect } from "next/navigation";
|
||
import { Button, PinInput, Stack } from "@mantine/core";
|
||
import { useForm } from "@mantine/form";
|
||
import style from "@/components/VerifyPhoneForm/VerifyPhone.module.css";
|
||
|
||
type VerifyNumberForm = {
|
||
code: string;
|
||
};
|
||
|
||
const VerifyPhoneForm: FC = () => {
|
||
const form = useForm<VerifyNumberForm>({
|
||
initialValues: {
|
||
code: "",
|
||
},
|
||
validate: {
|
||
code: code => code.length !== 6 && "Введите весь код",
|
||
},
|
||
});
|
||
|
||
const handleSubmit = (values: VerifyNumberForm) => {
|
||
console.log(values);
|
||
|
||
redirect("/services");
|
||
};
|
||
|
||
const navigateToLogin = () => redirect("/");
|
||
|
||
return (
|
||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||
<Stack>
|
||
<PinInput
|
||
length={6}
|
||
placeholder="_"
|
||
oneTimeCode
|
||
size={"md"}
|
||
classNames={{
|
||
root: style["pin-input-root"],
|
||
input: style["pin-input"],
|
||
}}
|
||
{...form.getInputProps("code")}
|
||
/>
|
||
<Button
|
||
variant={"filled"}
|
||
type={"submit"}
|
||
disabled={form.values.code.length !== 6}>
|
||
Подтвердить
|
||
</Button>
|
||
<Button
|
||
variant={"outline"}
|
||
onClick={navigateToLogin}>
|
||
Назад
|
||
</Button>
|
||
</Stack>
|
||
</form>
|
||
);
|
||
};
|
||
|
||
export default VerifyPhoneForm;
|