Merge pull request #17 from winningwizardtechnologies/feature/forgot-…

…password

forgot-password

src/App.tsx

@@ -14,6 +14,7 @@ import { themeConstant } from './Utilities/Constants';
 import { useDispatch } from 'react-redux';
 import { changeAllDentists } from './Redux/features/app/app-slice';
 import { fetchAllDocuments } from './Utilities/Util';
+import ForgotPassword from './Pages/ForgotPassword';
 
 const { Content } = Layout;
 
@@ -86,6 +87,7 @@ const App = () => {
                 <Route path='patients' element={<Contacts />} />
                 <Route path='booking' element={<Booking />} />
                 <Route path='feedback' element={<Feedback />} />
+                <Route path='forgotpassword' element={<ForgotPassword />} />
                 <Route path='404' element={<NoPage />} />
                 <Route path='*' element={<NoPage />} />
               </Routes>

src/Components/AccountParts/AccountLogin.tsx

@@ -18,6 +18,7 @@ import { useNavigate } from 'react-router-dom';
 import { auth } from '../../Firebase/firebase';
 import { signInWithEmailAndPassword } from 'firebase/auth';
 import { firebaseErrorCodes } from '../../Utilities/Constants';
+import { Link } from 'react-router-dom';
 
 const AccountLogin: React.FC = () => {
   const account = useAppSelector((state) => state.account);
@@ -79,9 +80,9 @@ const AccountLogin: React.FC = () => {
               <Checkbox>Remember me</Checkbox>
             </Form.Item>
 
-            <a className='login-form-forgot' href=''>
+            <Link className='login-form-forgot' to='./forgotpassword'>
               Forgot password
-            </a>
+            </Link>
           </Row>
         </Form.Item>
 

src/Pages/ForgotPassword.tsx

@@ -0,0 +1,75 @@
+import { MailOutlined } from '@ant-design/icons';
+import { Button, Col, Form, Input, Row, Typography } from 'antd';
+import { sendPasswordResetEmail } from 'firebase/auth';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { auth } from '../Firebase/firebase';
+import useNotification from 'antd/es/notification/useNotification';
+
+const ForgotPassword: React.FC = () => {
+  const [resetClicked, setResetClicked] = React.useState(false);
+  const [api, contextHolder] = useNotification();
+
+  const onFinish = async (values: { email: string }) => {
+    try {
+      await sendPasswordResetEmail(auth, values.email);
+      setResetClicked(true);
+    } catch (error) {
+      api.error({
+        message: 'Reset Failed',
+        placement: 'top',
+        description: 'Failed to send the reset email, Please try again later'
+      });
+    }
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Row gutter={[0, 20]} justify={'center'}>
+        <Col xs={24} sm={20} md={15}>
+          <Typography.Text>
+            {resetClicked ? 'Reset Link Sent:' : 'Forgot Password:'}
+          </Typography.Text>
+        </Col>
+        <Col xs={24} sm={20} md={15}>
+          {resetClicked ? (
+            <Typography.Text>
+              We sent a link to your email with instructions to reset your
+              password!
+            </Typography.Text>
+          ) : (
+            <Form onFinish={onFinish}>
+              <Form.Item
+                rules={[
+                  { required: true, message: 'Please input your email!' }
+                ]}
+                name='email'
+              >
+                <Input
+                  prefix={<MailOutlined className='site-form-item-icon' />}
+                  placeholder='Enter Your Email'
+                  type='email'
+                />
+              </Form.Item>
+              <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
+                <Button
+                  type='primary'
+                  htmlType='submit'
+                  className='login-form-button'
+                >
+                  Reset
+                </Button>
+              </Form.Item>
+            </Form>
+          )}
+        </Col>
+        <Col xs={24} sm={20} md={15}>
+          <Link to='/'>Go Back to Login Page</Link>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default ForgotPassword;