WIP Frontend development.

client/src/containers/Authentication/Login.js

@@ -1,45 +1,86 @@
 import * as React from "react";
-import {useForm} from 'react-hook-form';
-import {Link, Redirect} from 'react-router-dom';
-import {Button, InputGroup} from "@blueprintjs/core";
-import {FormattedMessage} from 'react-intl';
+import {Link} from 'react-router-dom';
+import * as Yup from 'yup';
+import {useFormik} from 'formik';
+import {connect} from 'react-redux';
+import {useIntl} from 'react-intl';
+import login from 'store/actions/auth';
+import {Button, InputGroup, Intent, FormGroup} from "@blueprintjs/core";
 
-export default function Login() {
-  const { register, handleSubmit } = useForm()
+const loginValidationSchema = Yup.object().shape({
+  credential: Yup.string().required('Required'),
+  password: Yup.string().required('Required'),
+});
 
-  const onSubmit = () => {};
+function Login({ login }) {
+  const intl = useIntl();
+  const formik = useFormik({
+    initialValues: {
+      credential: '',
+      password: '',
+    },
+    validationSchema: loginValidationSchema,
+    onSubmit: (values) => {
+      login({
+        credential: values.credential,
+        password: values.password,
+      }).then(() => {
+
+      }).catch((errors) => {
+
+      });
+    },
+  });
 
   return (
-    <div class="login-page">
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <InputGroup
-          leftIcon="user"
-          placeholder={<FormattedMessage id="email_or_phone_number" />}
-          large={true}
-          ref={register({ required: true })}
-          className="input-group--email-phone-number"
-          htmlProps={{name: 'email_or_phone_number'}}
-        />
+    <div className="login-page">
+      <form onSubmit={formik.handleSubmit}>
+        <FormGroup
+          className={'form-group--email-phone-number'}
+          intent={formik.errors.credential && Intent.DANGER}
+          helperText={formik.errors.credential && formik.errors.credential}>
 
-        <InputGroup
-          leftIcon="info-sign"
-          placeholder={<FormattedMessage id="password" />}
-          large={true}
-          ref={register({ required: true })}
-          htmlProps={{name: 'password'}}
-          className="input-group--password"
-        />
+          <InputGroup
+            leftIcon="user"
+            placeholder={intl.formatMessage({'id': 'email_or_phone_number'})}
+            large={true}
+            
+            intent={formik.errors.credential && Intent.DANGER}
+            {...formik.getFieldProps('credential')} />
+        </FormGroup>
+
+        <FormGroup
+          className={'form-group--password'}
+          intent={formik.errors.credential && Intent.DANGER}
+          helperText={formik.errors.password && formik.errors.password}>
+
+          <InputGroup
+            leftIcon="info-sign"
+            placeholder={intl.formatMessage({'id': 'password'})}
+            large={true}
+            intent={formik.errors.credential && Intent.DANGER}
+            {...formik.getFieldProps('password')} />
+        </FormGroup>
 
         <Button 
+          type="submit"
           fill={true}
           large={true}>
-          <FormattedMessage id="login" />
+          {intl.formatMessage({'id': 'login '})}
         </Button>
       </form>
 
-      <div class="authentication-page__footer">
-        <Link to="/reset_password"><FormattedMessage id="reset_password" /></Link>
+      <div className="authentication-page__footer">
+        <Link to="/auth/reset_password">
+          {intl.formatMessage({'id': 'reset_password '})}
+        </Link>
       </div>
     </div>
   )
-}
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  login: form => dispatch(login({ form })),
+});
+
+export default connect(null, mapDispatchToProps)(Login);

client/src/containers/Authentication/ResetPassword.js

@@ -22,7 +22,7 @@ export default function Login() {
       </form>
 
       <div class="authentication-page__footer">
-        <Link to="/login"><FormattedMessage id="login" /></Link>
+        <Link to="/auth/login"><FormattedMessage id="login" /></Link>
       </div>
     </div>
   )

client/src/containers/Dashboard/Accounts/AccountsChart.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import {
+  Cell,
+  Column,
+  ColumnHeaderCell,
+  CopyCellsMenuItem,
+  IMenuContext,
+  SelectionModes,
+  Table,
+  Utils,
+} from "@blueprintjs/table";
+
+function RecordSortableColumn() {
+  return (
+    <Menu>
+      <MenuItem
+        icon="sort-asc"
+        text="Sort Wins Asc"
+      />
+      <MenuItem
+        icon="sort-desc"
+        text="Sort Wins Desc"
+      />
+    </Menu>
+  );
+};
+
+export default function AccountsChart() {
+  return (
+    <DashboardActionsBar />
+    <DashboardPageContent>
+    
+    </DashboardPageContent>
+  );
+}