Finished password reset functionality BOD-165

client/src/components/user-request-pw-reset/user-request-pw-reset.styles.scss

@@ -0,0 +1,29 @@
+.login-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 2rem;
+    form {
+      width: 75vw;
+      max-width: 20rem;
+    }
+  }
+  
+  .login-logo-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2rem;
+    h1 {
+      text-align: center;
+      margin: 1rem;
+    }
+  }
+  
+  //Required as it is position inside form.
+  .login-btn {
+    margin: 1.5rem 0rem;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  

client/src/components/user-request-pw-reset/user-request-reset-pw.component.jsx

@@ -1,12 +1,13 @@
-import { Button, Form, Result } from "antd";
+import { Button, Form, Input, Result, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import ImEXOnlineLogo from "../../assets/logo240.png";
 import { sendPasswordReset } from "../../redux/user/user.actions";
 import { selectPasswordReset } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
-import EmailFormItemComponent from "../form-items-formatted/email-form-item.component";
+import "./user-request-pw-reset.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   passwordReset: selectPasswordReset,
@@ -28,11 +29,14 @@ export function UserRequestResetPw({ passwordReset, sendPasswordReset }) {
   if (passwordReset.success)
     return (
       <Result
-        status='success'
+        status="success"
         title={t("general.labels.passwordresetsuccess")}
         subTitle={t("general.labels.passwordresetsuccess_sub")}
         extra={[
-          <Button onClick={() => sendPasswordReset(passwordReset.email)}>
+          <Button
+            key="send-again"
+            onClick={() => sendPasswordReset(passwordReset.email)}
+          >
             {t("general.labels.sendagain")}
           </Button>,
         ]}
@@ -40,24 +44,33 @@ export function UserRequestResetPw({ passwordReset, sendPasswordReset }) {
     );
 
   return (
-    <div>
-      <Form onFinish={handleFinish}>
+    <div className="login-container">
+      <div className="login-logo-container">
+        <img src={ImEXOnlineLogo} height="100" width="100" alt="ImEX Online" />
+        <Typography.Title>{t("titles.app")}</Typography.Title>
+      </div>
+      <Typography.Title level={3}>{t("titles.resetpassword")}</Typography.Title>
+
+      <Form layout="vertical" size="large" onFinish={handleFinish}>
         <Form.Item
           label={t("general.labels.email")}
-          name='email'
+          name="email"
           rules={[
             {
               type: "email",
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
-          <EmailFormItemComponent />
+          ]}
+        >
+          <Input />
         </Form.Item>
         {passwordReset.error ? (
-          <AlertComponent message={passwordReset.error} type='warning' />
+          <AlertComponent message={passwordReset.error} type="warning" />
         ) : null}
-        <Button htmlType='submit'>{t("general.actions.submit")}</Button>
+        <Button className="login-btn" type="primary" htmlType="submit">
+          {t("general.actions.submit")}
+        </Button>
       </Form>
     </div>
   );