- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -1,110 +1,108 @@
-import { LockOutlined, UserOutlined } from "@ant-design/icons";
-import { Button, Form, Input } from "antd";
+import {LockOutlined, UserOutlined} from "@ant-design/icons";
+import {Button, Form, Input} from "antd";
 import queryString from "query-string";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Link, Redirect, useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import React, {useEffect} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Link, useLocation, useNavigate} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 import RomeLogo from "../../assets/RomeOnlineBlue.png";
-import {
-  emailSignInStart,
-  sendPasswordReset,
-} from "../../redux/user/user.actions";
-import {
-  selectCurrentUser,
-  selectLoginLoading,
-  selectSignInError,
-} from "../../redux/user/user.selectors";
+import {emailSignInStart, sendPasswordReset,} from "../../redux/user/user.actions";
+import {selectCurrentUser, selectLoginLoading, selectSignInError,} from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import "./sign-in-form.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  signInError: selectSignInError,
-  loginLoading: selectLoginLoading,
+    currentUser: selectCurrentUser,
+    signInError: selectSignInError,
+    loginLoading: selectLoginLoading,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  emailSignInStart: (email, password) =>
-    dispatch(emailSignInStart({ email, password })),
-  sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
+    emailSignInStart: (email, password) =>
+        dispatch(emailSignInStart({email, password})),
+    sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
 });
 
 export function SignInComponent({
-  emailSignInStart,
-  currentUser,
-  signInError,
-  sendPasswordReset,
-  loginLoading,
-}) {
-  const { redirect } = queryString.parse(useLocation().search);
+                                    emailSignInStart,
+                                    currentUser,
+                                    signInError,
+                                    sendPasswordReset,
+                                    loginLoading,
+                                }) {
+    const {redirect} = queryString.parse(useLocation().search);
+    const navigate = useNavigate();
 
-  const { t } = useTranslation();
-  const handleFinish = (values) => {
-    const { email, password } = values;
-    emailSignInStart(email, password);
-  };
-  const [form] = Form.useForm();
+    const {t} = useTranslation();
+    const handleFinish = (values) => {
+        const {email, password} = values;
+        emailSignInStart(email, password);
+    };
+    const [form] = Form.useForm();
 
-  if (currentUser.authorized === true)
-    return <Redirect to={redirect || "/manage"} />;
+    useEffect(() => {
+        if (currentUser.authorized === true) {
+            navigate(redirect || "/manage/");
+        }
+    }, [currentUser, redirect, navigate]);
 
-  return (
-    <div className="login-container">
-      <div className="login-logo-container">
-        <img src={RomeLogo} width={200} alt="Rome Online" />
-      </div>
-      <Form onFinish={handleFinish} form={form} size="large">
-        <Form.Item
-          name="email"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required", { label: "Email" }),
-            },
-          ]}
-        >
-          <Input
-            prefix={<UserOutlined />}
-            placeholder={t("general.labels.username")}
-          />
-        </Form.Item>
-        <Form.Item
-          name="password"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required", { label: "Password" }),
-            },
-          ]}
-        >
-          <Input
-            prefix={<LockOutlined />}
-            type="password"
-            placeholder={t("general.labels.password")}
-          />
-        </Form.Item>
-        {signInError ? (
-          <AlertComponent
-            type="error"
-            message={t(`users.errors.signinerror.${signInError.code}`)}
-          />
-        ) : null}
-        <Button
-          className="login-btn"
-          type="primary"
-          htmlType="submit"
-          loading={loginLoading}
-        >
-          {t("general.actions.login")}
-        </Button>
-      </Form>
-      <Link to={"/resetpassword"}>
-        <Button>{t("general.actions.resetpassword")}</Button>
-      </Link>
-    </div>
-  );
+
+    return (
+        <div className="login-container">
+            <div className="login-logo-container">
+                <img src={RomeLogo} width={200} alt="Rome Online"/>
+            </div>
+            <Form onFinish={handleFinish} form={form} size="large">
+                <Form.Item
+                    name="email"
+                    rules={[
+                        {
+                            required: true,
+                            message: t("general.validation.required", {label: "Email"}),
+                        },
+                    ]}
+                >
+                    <Input
+                        prefix={<UserOutlined/>}
+                        placeholder={t("general.labels.username")}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="password"
+                    rules={[
+                        {
+                            required: true,
+                            message: t("general.validation.required", {label: "Password"}),
+                        },
+                    ]}
+                >
+                    <Input
+                        prefix={<LockOutlined/>}
+                        type="password"
+                        placeholder={t("general.labels.password")}
+                    />
+                </Form.Item>
+                {signInError ? (
+                    <AlertComponent
+                        type="error"
+                        message={t(`users.errors.signinerror.${signInError.code}`)}
+                    />
+                ) : null}
+                <Button
+                    className="login-btn"
+                    type="primary"
+                    htmlType="submit"
+                    loading={loginLoading}
+                >
+                    {t("general.actions.login")}
+                </Button>
+            </Form>
+            <Link to={"/resetpassword"}>
+                <Button>{t("general.actions.resetpassword")}</Button>
+            </Link>
+        </div>
+    );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(SignInComponent);