Merge pull request #32 from chimobi-justice/ft/show-login-modal

Added: Modal for users to login when click to participate or interact…

src/components/LoginForm/index.tsx

@@ -0,0 +1,67 @@
+import { FunctionComponent } from 'react'
+import { Box, FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react'
+import { Field } from 'formik'
+
+import { Button, Input } from '@components/index'
+import { AuthFormProps } from 'src/types'
+
+const LoginForm: FunctionComponent<AuthFormProps> = ({ 
+  handleSubmit, 
+  errors, 
+  touched, 
+  isSubmitting 
+}) => {
+  return (
+    <form onSubmit={handleSubmit}>
+      <Box my={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.email && touched.email}
+        >
+          <FormLabel htmlFor="email">Email address</FormLabel>
+          <Field
+            as={Input}
+            id="email"
+            name="email"
+            type="email"
+            placeholder="enter email address"
+          />
+          <FormErrorMessage>{errors.email}</FormErrorMessage>
+        </FormControl>
+      </Box>
+
+      <Box my={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.password && touched.password}
+        >
+          <FormLabel htmlFor="email">Password</FormLabel>
+          <Field
+            as={Input}
+            id="password"
+            name="password"
+            type="password"
+            placeholder="enter password"
+          />
+          <FormErrorMessage>{errors.password}</FormErrorMessage>
+        </FormControl>
+      </Box>
+
+      <Box my={"15px"}>
+        <Button
+          variant="solid"
+          size={{ base: "md", lg: "lg" }}
+          width={"100%"}
+          type="submit"
+          fontWeight={"semibold"}
+          rounded="sm"
+          isloading={isSubmitting}
+        >
+          Sign In
+        </Button>
+      </Box>
+    </form>
+  )
+}
+
+export default LoginForm;

src/components/RegisterForm/index.tsx

@@ -0,0 +1,83 @@
+import { FunctionComponent } from 'react'
+import { Box, FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react'
+import { Field } from 'formik'
+
+import { Button, Input } from '@components/index'
+import { AuthFormProps } from 'src/types'
+
+const RegisterForm: FunctionComponent<AuthFormProps> = ({
+  handleSubmit,
+  errors,
+  touched,
+  isSubmitting
+}) => {
+  return (
+    <form onSubmit={handleSubmit}>
+      <Box mb={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.fullname && touched.fullname}
+        >
+          <FormLabel htmlFor="fullname">Fullname</FormLabel>
+          <Field
+            as={Input}
+            id="fullname"
+            name="fullname"
+            type="text"
+            placeholder="enter fullname"
+          />
+          <FormErrorMessage>{errors.fullname}</FormErrorMessage>
+        </FormControl>
+      </Box>
+      <Box my={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.email && touched.email}
+        >
+          <FormLabel htmlFor="email">Enter Email</FormLabel>
+          <Field
+            as={Input}
+            id="email"
+            name="email"
+            type="email"
+            placeholder="enter email address"
+          />
+          <FormErrorMessage>{errors.email}</FormErrorMessage>
+        </FormControl>
+      </Box>
+
+      <Box my={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.password && touched.password}
+        >
+          <FormLabel htmlFor="password">Password</FormLabel>
+          <Field
+            as={Input}
+            id="password"
+            name="password"
+            type="password"
+            placeholder="enter email password"
+          />
+          <FormErrorMessage>{errors.password}</FormErrorMessage>
+        </FormControl>
+      </Box>
+
+      <Box my={"20px"}>
+        <Button
+          variant="solid"
+          size={{ base: "md", lg: "lg" }}
+          width={"100%"}
+          type="submit"
+          fontWeight={"semibold"}
+          rounded="sm"
+          isloading={isSubmitting}
+        >
+          Sign Up
+        </Button>
+      </Box>
+    </form>
+  )
+}
+
+export default RegisterForm;

src/components/ShowLoginModal/index.tsx

@@ -0,0 +1,58 @@
+import { FunctionComponent } from 'react'
+import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react'
+import { Formik } from 'formik'
+
+import { LoginForm } from '@components/index'
+import { signInValidataionSchema } from '@validations/signin'
+import { useSignin } from '@hooks/auth/useSignin'
+import { ISignin } from 'src/types'
+
+interface IProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ShowLoginModal: FunctionComponent<IProps> = ({ isOpen, onClose }) => {
+  const { signinMutation } = useSignin();
+
+  const handleSignin = (values: ISignin) => {
+    signinMutation.mutate(values);
+  };
+
+  const initialValues: ISignin = {
+    email: "",
+    password: ""
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay
+        bg='blackAlpha.300'
+        backdropFilter='blur(10px) hue-rotate(90deg)'
+      />
+      <ModalContent>
+        <ModalBody>
+          <ModalHeader textAlign={"center"}>Sign in to paticipate</ModalHeader>
+
+          <Formik
+            initialValues={initialValues}
+            onSubmit={handleSignin}
+            validationSchema={signInValidataionSchema}
+
+          >
+            {({ handleSubmit, errors, touched }) => (
+              <LoginForm
+                handleSubmit={handleSubmit}
+                errors={errors}
+                touched={touched}
+                isSubmitting={signinMutation.isPending}
+              />
+            )}
+          </Formik>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default ShowLoginModal;