// filename : LoginModal.tsx
import { Box, Button, Input, InputGroup, InputLeftElement, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, VStack,} from "@chakra-ui/react";
import React, { useState } from "react";
import { FaUserNinja, FaLock } from "react-icons/fa";
import SocialLogin from "./SocialLogin";
interface LoginModalProps {
isOpen: boolean;
onClose: () => void;
}
export default function LoginModal({ isOpen, onClose }: LoginModalProps) {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [emailError, setEmailError] = useState("");
const onChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
const { name, value } = event.currentTarget;
if (name === "username") {
setUsername(value);
} else if (name === "password") {
setPassword(value);
}
};
const onSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
if (!email.includes("@")) {
setEmailError("please write a valid email");
}
console.log(username, password);
};
return (
<Modal onClose={onClose} isOpen={isOpen}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Log in</ModalHeader>
<ModalCloseButton />
<ModalBody as="form" onSubmit={onSubmit as any}>
<VStack>
<InputGroup size={"md"}>
<InputLeftElement
children={
<Box color="gray.500">
<FaUserNinja />
</Box>
}
/>
<Input
required
name="username"
onChange={onChange}
value={username}
variant={"filled"}
placeholder="Username"
/>
</InputGroup>
<InputGroup>
<InputLeftElement
children={
<Box color="gray.500">
<FaLock />
</Box>
}
/>
<Input
required
name="password"
onChange={onChange}
value={password}
type="password"
variant={"filled"}
placeholder="Password"
/>
</InputGroup>
</VStack>
<Button type="submit" mt={4} colorScheme={"red"} w="100%">
Log in
</Button>
<SocialLogin />
</ModalBody>
</ModalContent>
</Modal>
);
}
// filename : LoginModal.tsx
import { useForm } from "react-hook-form";
import {
Box,
Button,
Input,
InputGroup,
InputLeftElement,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
Text,
VStack,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { FaUserNinja, FaLock } from "react-icons/fa";
import SocialLogin from "./SocialLogin";
interface LoginModalProps {
isOpen: boolean;
onClose: () => void;
}
interface IForm {
username: string;
password: string;
}
export default function LoginModal({ isOpen, onClose }: LoginModalProps) {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<IForm>();
const onSubmit = (data: IForm) => {
console.log(data);
};
return (
<Modal onClose={onClose} isOpen={isOpen}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Log in</ModalHeader>
<ModalCloseButton />
<ModalBody as="form" onSubmit={handleSubmit(onSubmit)}>
<VStack>
<InputGroup size={"md"}>
<InputLeftElement
children={
<Box color="gray.500">
<FaUserNinja />
</Box>
}
/>
<Input
isInvalid={Boolean(errors.username?.message)}
{...register("username", {
required: "Please write a username",
})}
variant={"filled"}
placeholder="Username"
/>
</InputGroup>
<InputGroup>
<InputLeftElement
children={
<Box color="gray.500">
<FaLock />
</Box>
}
/>
<Input
isInvalid={Boolean(errors.password?.message)}
{...register("password", {
required: "Please write a password",
})}
type="password"
variant={"filled"}
placeholder="Password"
/>
</InputGroup>
</VStack>
<Button type="submit" mt={4} colorScheme={"red"} w="100%">
Log in
</Button>
<SocialLogin />
</ModalBody>
</ModalContent>
</Modal>
);
}
Commit: bd36d8b966c72f0b039bb79d2824e5043e357af6