Added log rocket + analytics to ensure functionality

src/components/pages/sign-in/sign-in.page.jsx

@@ -5,8 +5,10 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import ImEXOnlineLogo from "../../../assets/logo192.png";
 import { emailSignInStart } from "../../../redux/user/user.actions";
+import { sendPasswordReset } from "../../../redux/user/user.actions";
 import {
   selectLoginLoading,
+  selectPasswordReset,
   selectSignInError,
 } from "../../../redux/user/user.selectors";
 import "./sign-in.page.styles.scss";
@@ -14,20 +16,33 @@ import "./sign-in.page.styles.scss";
 const mapStateToProps = createStructuredSelector({
   signInError: selectSignInError,
   loginLoading: selectLoginLoading,
+  passwordReset: selectPasswordReset,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   emailSignInStart: (email, password) =>
     dispatch(emailSignInStart({ email, password })),
+  sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
 });
 
-export function SignInPage({ emailSignInStart, signInError, loginLoading }) {
+export function SignInPage({
+  emailSignInStart,
+  signInError,
+  loginLoading,
+  sendPasswordReset,
+  passwordReset,
+}) {
   const handleFinish = (values) => {
     const { email, password } = values;
     emailSignInStart(email, password);
   };
   const [form] = Form.useForm();
 
+  const handleReset = () => {
+    const email = form.getFieldValue("email");
+    sendPasswordReset(email);
+  };
+
   return (
     <div className="login-container">
       <div className="login-logo-container">
@@ -35,10 +50,16 @@ export function SignInPage({ emailSignInStart, signInError, loginLoading }) {
         <Typography.Title>ImEX RPS</Typography.Title>
       </div>
       <Form onFinish={handleFinish} form={form} size="large">
-        <Form.Item name="email" rules={[{ required: true }]}>
+        <Form.Item
+          name="email"
+          rules={[{ required: true, message: "Please enter a valid email." }]}
+        >
           <Input prefix={<UserOutlined />} placeholder="Email" />
         </Form.Item>
-        <Form.Item name="password" rules={[{ required: true }]}>
+        <Form.Item
+          name="password"
+          rules={[{ required: true, message: "Please enter your password." }]}
+        >
           <Input
             prefix={<LockOutlined />}
             type="password"
@@ -46,7 +67,7 @@ export function SignInPage({ emailSignInStart, signInError, loginLoading }) {
           />
         </Form.Item>
         {signInError ? (
-          <Alert type="error" message={signInError.message} />
+          <Alert type="error" message={signInError.messagePretty} />
         ) : null}
         <Button
           className="login-btn"
@@ -56,7 +77,21 @@ export function SignInPage({ emailSignInStart, signInError, loginLoading }) {
         >
           Login
         </Button>
+        <Form.Item shouldUpdate>
+          {() => {
+            return (
+              <Button
+                className="login-btn"
+                disabled={!form.getFieldValue("email")}
+                onClick={handleReset}
+              >
+                Reset Password
+              </Button>
+            );
+          }}
+        </Form.Item>
       </Form>
+      {passwordReset.error && <div>{passwordReset.error}</div>}
     </div>
   );
 }