Fixed up general layout of manage page + root + styled login page.

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

@@ -1,17 +1,20 @@
 import { LockOutlined, UserOutlined } from "@ant-design/icons";
-import { Button, Form, Input } from "antd";
+import { Button, Form, Input, Typography } from "antd";
 import React from "react";
 import { useApolloClient } from "react-apollo";
 import { connect } from "react-redux";
 import { Redirect } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import Logo from "../../assets/logo240.png";
+import ImEXOnlineLogo from "../../assets/logo240.png";
 import { UPSERT_USER } from "../../graphql/user.queries";
 import { emailSignInStart } from "../../redux/user/user.actions";
 import {
   selectCurrentUser,
   selectSignInError,
 } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+import "./sign-in-form.styles.scss";
+import AlertComponent from "../alert/alert.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -23,16 +26,18 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(emailSignInStart({ email, password })),
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(function SignInComponent({ emailSignInStart, currentUser, signInError }) {
+export function SignInComponent({
+  emailSignInStart,
+  currentUser,
+  signInError,
+}) {
   const apolloClient = useApolloClient();
-
+  const { t } = useTranslation();
   const handleFinish = (values) => {
     const { email, password } = values;
     emailSignInStart(email, password);
   };
+  const [form] = Form.useForm();
 
   if (currentUser.authorized === true) {
     apolloClient
@@ -49,38 +54,48 @@ export default connect(
       });
   }
 
+  const handleLogin = () => {
+    form.submit();
+  };
+
+  if (currentUser.authorized === true) return <Redirect to='/manage' />;
   return (
-    <div style={{ width: "450px" }}>
-      {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
-
-      <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
-
-      <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>
+      <Form onFinish={handleFinish} form={form} size='large'>
         <Form.Item
-          name="email"
-          rules={[{ required: true, message: "Please input your email!" }]}
-        >
+          name='email'
+          rules={[
+            { required: true, message: t("general.validation.required") },
+          ]}>
           <Input
-            prefix={<UserOutlined className="site-form-item-icon" />}
-            placeholder="Username"
+            prefix={<UserOutlined />}
+            placeholder={t("general.labels.username")}
           />
         </Form.Item>
         <Form.Item
-          name="password"
-          rules={[{ required: true, message: "Please input your Password!" }]}
-        >
+          name='password'
+          rules={[
+            { required: true, message: t("general.validation.required") },
+          ]}>
           <Input
-            prefix={<LockOutlined className="site-form-item-icon" />}
-            type="password"
-            placeholder="Password"
+            prefix={<LockOutlined />}
+            type='password'
+            placeholder={t("general.labels.password")}
           />
         </Form.Item>
-        <Button type="primary" htmlType="submit">
-          Log in
+        {signInError ? (
+          <AlertComponent type='error' message={signInError.message} />
+        ) : null}
+        <Button className='login-btn' type='primary' htmlType='submit'>
+          {t("general.actions.login")}
         </Button>
-
-        {signInError ? <div>{signInError.message}</div> : null}
       </Form>
     </div>
   );
-});
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignInComponent);