Finished password reset functionality BOD-165

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

@@ -1,12 +1,15 @@
 import { LockOutlined } from "@ant-design/icons";
-import { Button, Form, Input } 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 { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import ImEXOnlineLogo from "../../assets/logo240.png";
 import { validatePasswordResetStart } from "../../redux/user/user.actions";
 import { selectPasswordReset } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
+import "./user-validate-pw-reset.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   passwordReset: selectPasswordReset,
@@ -21,34 +24,56 @@ export function UserValidatePwReset({
   validatePasswordReset,
   oobCode,
 }) {
-  console.log("UserValidatePwReset -> oobCode", oobCode);
   const { t } = useTranslation();
 
   const handleFinish = (values) => {
     validatePasswordReset({ code: oobCode, password: values.password });
   };
 
+  if (passwordReset.success)
+    return (
+      <Result
+        status="success"
+        title={t("general.labels.passwordresetvalidatesuccess")}
+        subTitle={t("general.labels.passwordresetvalidatesuccess_sub")}
+        extra={[
+          <Link to={`/manage`}>
+            <Button>{t("general.labels.signin")}</Button>
+          </Link>,
+        ]}
+      />
+    );
+
   return (
-    <div>
-      <Form onFinish={handleFinish}>
+    <div className="reset-container">
+      <div className="reset-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.resetpasswordvalidate")}
+      </Typography.Title>
+
+      <Form onFinish={handleFinish} size="large" layout="vertical">
         <Form.Item
           label={t("general.labels.password")}
-          name='password'
+          name="password"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input
             prefix={<LockOutlined />}
-            type='password'
+            type="password"
             placeholder={t("general.labels.password")}
           />
         </Form.Item>
         <Form.Item
           label={t("general.labels.confirmpassword")}
-          name='password-confirm'
+          name="password-confirm"
           dependencies={["password"]}
           rules={[
             {
@@ -63,17 +88,20 @@ export function UserValidatePwReset({
                 return Promise.reject(t("general.labels.passwordsdonotmatch"));
               },
             }),
-          ]}>
+          ]}
+        >
           <Input
             prefix={<LockOutlined />}
-            type='password'
+            type="password"
             placeholder={t("general.labels.password")}
           />
         </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 type="primary" className="reset-btn" htmlType="submit">
+          {t("general.actions.submit")}
+        </Button>
       </Form>
     </div>
   );