103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
"use client";
|
||
|
||
import { FC, useEffect, useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { Button, Stack } from "@mantine/core";
|
||
import { useForm } from "@mantine/form";
|
||
import PhoneInput from "@/components/PhoneInput/PhoneInput";
|
||
import { useAppDispatch } from "@/lib/store";
|
||
import { setLoginChallenge, setPhoneNumber } from "@/lib/features/auth/authSlice";
|
||
import { AuthService } from "@/mocks/authService";
|
||
import { notifications } from "@/lib/notifications";
|
||
|
||
type LoginForm = {
|
||
phoneNumber: string;
|
||
};
|
||
|
||
type Props = {
|
||
loginChallenge?: string;
|
||
isCreatingId?: boolean;
|
||
};
|
||
|
||
const LoginForm: FC<Props> = ({ loginChallenge, isCreatingId = false }) => {
|
||
const [phoneMask, setPhoneMask] = useState<string>("");
|
||
const router = useRouter();
|
||
const form = useForm<LoginForm>({
|
||
initialValues: {
|
||
phoneNumber: "",
|
||
},
|
||
validate: {
|
||
phoneNumber: phoneNumber =>
|
||
phoneNumber.length !== phoneMask.length &&
|
||
"Введите корректный номер",
|
||
},
|
||
});
|
||
const dispatch = useAppDispatch();
|
||
|
||
useEffect(() => {
|
||
dispatch(setLoginChallenge(loginChallenge ?? null));
|
||
}, [loginChallenge]);
|
||
|
||
const handleSubmit = (values: LoginForm) => {
|
||
dispatch(setPhoneNumber(values.phoneNumber));
|
||
|
||
new AuthService().requestLogin(values.phoneNumber)
|
||
.then(response => response.data)
|
||
.then(({ ok, message }) => {
|
||
if (!ok) {
|
||
notifications.error({ message });
|
||
} else {
|
||
router.push("/verify-phone");
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error(error);
|
||
notifications.error({ message: error.toString() });
|
||
})
|
||
};
|
||
|
||
const navigateToCreateId = () => router.push("/create-id");
|
||
|
||
const navigateToLogin = () => router.push("/");
|
||
|
||
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;
|