From 584c35e6b88eba699b276ca0337bba567f4f7761 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Tue, 31 Jan 2023 15:10:08 +0000
Subject: [PATCH] Added reset password functionality - Display reset password
 option on log in modal only - Display `resetPassword` modal only when state
 is not login or signup - Use Firebase hook to send email with reset
 instructions

---
 src/components/Modal/Auth/AuthModal.tsx     |  16 ++-
 src/components/Modal/Auth/Login.tsx         |  28 ++++-
 src/components/Modal/Auth/ResetPassword.tsx | 107 ++++++++++++++++++++
 3 files changed, 145 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Modal/Auth/ResetPassword.tsx

diff --git a/src/components/Modal/Auth/AuthModal.tsx b/src/components/Modal/Auth/AuthModal.tsx
index 41f07be..e9e5b46 100644
--- a/src/components/Modal/Auth/AuthModal.tsx
+++ b/src/components/Modal/Auth/AuthModal.tsx
@@ -16,6 +16,7 @@ import { useAuthState } from "react-firebase-hooks/auth";
 import { useRecoilState } from "recoil";
 import AuthInputs from "./AuthInputs";
 import OAuthButtons from "./OAuthButtons";
+import ResetPassword from "./ResetPassword";
 
 const AuthModal: React.FC = () => {
   const [modalState, setModalState] = useRecoilState(authModalState);
@@ -57,11 +58,16 @@ const AuthModal: React.FC = () => {
               justify="center"
               width="70%"
             >
-              <OAuthButtons />
-              {/* <Text color='gray.500' fontWeight={700}>OR</Text> */}
-              <Divider />
-              <AuthInputs />
-              {/* <ResetPassword /> */}
+              {modalState.view === "login" || modalState.view === "signup" ? (
+                <>
+                  <OAuthButtons />
+                  {/* <Text color='gray.500' fontWeight={700}>OR</Text> */}
+                  <Divider />
+                  <AuthInputs />
+                </>
+              ) : (
+                <ResetPassword />
+              )}
             </Flex>
           </ModalBody>
         </ModalContent>
diff --git a/src/components/Modal/Auth/Login.tsx b/src/components/Modal/Auth/Login.tsx
index c6d253d..df97ba9 100644
--- a/src/components/Modal/Auth/Login.tsx
+++ b/src/components/Modal/Auth/Login.tsx
@@ -95,12 +95,38 @@ const Login: React.FC<LoginProps> = () => {
         {FIREBASE_ERRORS[error?.message as keyof typeof FIREBASE_ERRORS]}
       </Text>
 
-      <Button width="100%" height="36px" mt={2} mb={2} type="submit" isLoading={loading}>
+      <Button
+        width="100%"
+        height="36px"
+        mt={2}
+        mb={2}
+        type="submit"
+        isLoading={loading}
+      >
         {" "}
         {/* When the form is submitted, execute onSubmit function */}
         Log In
       </Button>
 
+      <Flex fontSize="9pt" justifyContent="center" mb={2}>
+        <Text fontSize="9pt" mr={1}>
+          Forgot your password?
+        </Text>
+        <Text
+          color="red.500"
+          fontWeight={700}
+          cursor="pointer"
+          onClick={() =>
+            setAuthModalState((prev) => ({
+              ...prev,
+              view: "resetPassword",
+            }))
+          }
+        >
+          Reset Password
+        </Text>
+      </Flex>
+
       <Flex fontSize="9pt" justifyContent="center">
         <Text mr={1}>Want to join the circus? </Text>
         <Text
diff --git a/src/components/Modal/Auth/ResetPassword.tsx b/src/components/Modal/Auth/ResetPassword.tsx
new file mode 100644
index 0000000..23eb747
--- /dev/null
+++ b/src/components/Modal/Auth/ResetPassword.tsx
@@ -0,0 +1,107 @@
+import { Button, Flex, Icon, Image, Input, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { useSendPasswordResetEmail } from "react-firebase-hooks/auth";
+import { BsDot } from "react-icons/bs";
+import { useSetRecoilState } from "recoil";
+import { authModalState } from "../../../atoms/authModalAtom";
+import { auth } from "../../../firebase/clientApp";
+
+const ResetPassword: React.FC = () => {
+  const setAuthModalState = useSetRecoilState(authModalState);
+  const [email, setEmail] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [sendPasswordResetEmail, sending, error] =
+    useSendPasswordResetEmail(auth);
+
+  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    await sendPasswordResetEmail(email);
+    setSuccess(true);
+  };
+  return (
+    <Flex direction="column" alignItems="center" width="100%">
+	  <Image src="/images/logo.svg" height="40px" mb={2} alt="Website logo"/>
+      <Text fontWeight={700} mb={2}>
+        Reset your password
+      </Text>
+      {success ? (
+        <Text mb={4}>Check your email</Text>
+      ) : (
+        <>
+          <Text fontSize="sm" textAlign="center" mb={2}>
+            Enter the email associated with your account and we will send you a
+            reset link
+          </Text>
+          <form onSubmit={onSubmit} style={{ width: "100%" }}>
+            <Input
+              required
+              name="email"
+              placeholder="Email"
+              type="email"
+              mb={2}
+              onChange={(event) => setEmail(event.target.value)}
+              fontSize="10pt"
+              _placeholder={{ color: "gray.500" }}
+              _hover={{
+                bg: "white",
+                border: "1px solid",
+                borderColor: "blue.500",
+              }}
+              _focus={{
+                outline: "none",
+                bg: "white",
+                border: "1px solid",
+                borderColor: "blue.500",
+              }}
+              bg="gray.50"
+            />
+            <Text textAlign="center" fontSize="10pt" color="red">
+              {error?.message}
+            </Text>
+            <Button
+              width="100%"
+              height="36px"
+              mb={2}
+              mt={2}
+              type="submit"
+              isLoading={sending}
+            >
+              Reset Password
+            </Button>
+          </form>
+        </>
+      )}
+      <Flex
+        alignItems="center"
+        fontSize="9pt"
+        color="red.500"
+        fontWeight={700}
+        cursor="pointer"
+      >
+        <Text
+          onClick={() =>
+            setAuthModalState((prev) => ({
+              ...prev,
+              view: "login",
+            }))
+          }
+        >
+          LOGIN
+        </Text>
+        <Icon as={BsDot} />
+        <Text
+          onClick={() =>
+            setAuthModalState((prev) => ({
+              ...prev,
+              view: "signup",
+            }))
+          }
+        >
+          SIGN UP
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
+export default ResetPassword;