login step refactor

public/locales/en/translations.json

@@ -19,6 +19,7 @@
   },
   "Login": {
     "Username": "Username",
-    "Password": "Password"
+    "Password": "Password",
+    "Label": "Login"
   }
 }

public/locales/ro/translations.json

@@ -10,6 +10,7 @@
   },
   "Login": {
     "Username": "Utilizator",
-    "Password": "Parolă"
+    "Password": "Parolă",
+    "Label": "Autentificare"
   }
 }

src/features/login/components/LoginComponent.js

@@ -1,12 +1,9 @@
-import React, { useContext } from "react";
+import React from "react";
+import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
-import { TextField, InputAdornment } from "@material-ui/core";
+import { TextField, InputAdornment, Button } from "@material-ui/core";
 import { AccountCircleOutlined } from "@material-ui/icons";
 import PasswordField from "../../../components/common/inputs/PasswordField";
-import {
-  ApplicationStateContext,
-  ApplicationDispatchContext
-} from "../../../state/ApplicationContexts";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(theme => ({
@@ -16,25 +13,18 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const LoginComponent = () => {
+const LoginComponent = ({ credentials, onChange, onLogin }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
-  const state = useContext(ApplicationStateContext);
-  const dispatchActions = useContext(ApplicationDispatchContext);
-
-  const handleChange = prop => event => {
-    dispatchActions.onCredentialsChange(prop, event.target.value);
-  };
-
   return (
     <div>
       <TextField
         className={classes.field}
         id="username"
         label={t("Login.Username")}
-        onChange={handleChange("userName")}
+        onChange={onChange("userName")}
-        value={state.credentials.userName}
+        value={credentials.userName}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
@@ -48,11 +38,21 @@ const LoginComponent = () => {
         id="password"
         label={t("Login.Password")}
         className={classes.field}
-        onChange={handleChange("password")}
+        onChange={onChange("password")}
-        value={state.credentials.password}
+        value={credentials.password}
       />
+      <br />
+      <Button variant="contained" color="primary" onClick={onLogin}>
+        {t("Login.Label")}
+      </Button>
     </div>
   );
 };
 
+LoginComponent.propTypes = {
+  credentials: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onLogin: PropTypes.func.isRequired
+};
+
 export default LoginComponent;

src/features/login/components/LoginContainer.js

@@ -1,11 +1,18 @@
 import React, { useContext } from "react";
 import LoginComponent from "./LoginComponent";
-import Button from "@material-ui/core/Button";
 import { authenticate } from "../../../utils/identity";
-import { ApplicationStateContext } from "../../../state/ApplicationContexts";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../../../state/ApplicationContexts";
 
 const LoginContainer = () => {
   const state = useContext(ApplicationStateContext);
+  const dispatchActions = useContext(ApplicationDispatchContext);
+
+  const handleChange = prop => event => {
+    dispatchActions.onCredentialsChange(prop, event.target.value);
+  };
 
   const handleLogin = async () => {
     const { userName, password } = state.credentials;
@@ -14,10 +21,11 @@ const LoginContainer = () => {
 
   return (
     <>
-      <LoginComponent />
+      <LoginComponent
-      <Button variant="contained" color="primary" onClick={handleLogin}>
+        credentials={state.credentials}
-        Login
+        onChange={handleChange}
-      </Button>
+        onLogin={handleLogin}
+      />
     </>
   );
 };