WIP Frontend development.

client/package.json

@@ -31,6 +31,7 @@
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "^1.6.1",
     "file-loader": "4.3.0",
+    "formik": "^2.1.4",
     "fs-extra": "^8.1.0",
     "html-webpack-plugin": "4.0.0-beta.11",
     "identity-obj-proxy": "3.0.0",

client/src/actions/accounts/index.js

@@ -1,2 +0,0 @@
-export const FETCH_ACCOUNTS_CHART = 'FETCH_ACCOUNTS_CHART';
-

client/src/components/App.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {IntlProvider} from 'react-intl';
-// import {Switch} from 'react-router-dom';
+import {connect} from 'react-redux';
 import PrivateRoute from 'components/PrivateRoute';
 import Authentication from 'components/Authentication';
 import Dashboard from 'components/Dashboard/Dashboard';
+// import {isAuthenticated} from 'reducers/authentication'
 import messages from 'lang/en';
 import 'style/App.scss';
 
@@ -12,8 +13,8 @@ function App(props) {
   return (
     <IntlProvider locale={props.locale} messages={messages}>
       <div className="App">
-        <Authentication isAuthenticated={true} />
+        <Authentication isAuthenticated={props.isAuthorized} />
-        <PrivateRoute isAuthenticated={true} component={Dashboard} />
+        <PrivateRoute isAuthenticated={props.isAuthorized} component={Dashboard} />
       </div>
     </IntlProvider>
   );
@@ -23,6 +24,10 @@ App.defaultProps = {
 };
 App.propTypes = {
   locale: PropTypes.string,
+  isAuthorized: PropTypes.bool,
 };
 
-export default App;
+const mapStateToProps = (state) => ({
+  isAuthorized: true,
+});
+export default connect(mapStateToProps)(App);

client/src/components/Authentication.js

@@ -5,10 +5,10 @@ import authenticationRoutes from 'routes/authentication';
 export default function({ isAuthenticated =false, ...rest }) {
   const to = {pathname: '/dashboard/homepage'};
 
-  return isAuthenticated ?
+  return (
-    (
+    <Route path="/auth">
-      <Redirect to={to} />
+      { isAuthenticated ?
-    ) : (
+        (<Redirect to={to} />) : (
         <Switch>
           <div class="authentication-page">
             <div class="authentication-page__form-wrapper">
@@ -22,6 +22,8 @@ export default function({ isAuthenticated =false, ...rest }) {
               ))}
             </div>
           </div>
-    </Switch>
+        </Switch>)
+      }
+    </Route>
   );
 }

client/src/components/Dashboard/Dashboard.js

@@ -1,15 +1,12 @@
 import React from 'react';
-import {Route} from 'react-router-dom';
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 
 export default function() {
   return ( 
     <div className="dashboard" id="dashboard">
-      <Route pathname="/dashboard/">
       <Sidebar />
       <DashboardContent />
-      </Route>
     </div>
   )
 }

client/src/components/Dashboard/DashboardActionsBar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+export default function DashboardActionsBar() {
+  return (
+    <div class="dashboard__actions-bar">
+      
+    </div>
+  )
+}

client/src/components/Dashboard/DashboardContent.js

@@ -1,11 +1,25 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import dashboardRoutes from 'routes/dashboard'
+import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 
 export default function() {
   return (
     <div className="dashboard-content" id="dashboard">
-      <h2>dashboard</h2>
+      <DashboardTopbar pageTitle={"asdad"}/>
+      
+      <Route pathname="/dashboard/">
+        <Switch>
+          { dashboardRoutes.map((route, index) => (
+            <Route
+              key={index}
+              path={route.path}
+              exact={route.exact}
+              component={route.component}
+            />          
+          ))}
+        </Switch>
+      </Route>
     </div>
   )
 }

client/src/components/Dashboard/DashboardPageContent.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function DashboardPageContent({ children }) {
+  return (
+    <div class="dashboard__page-content">
+      { children }
+    </div>
+  )
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Navbar,
+  NavbarGroup,
+  Button,
+  Classes,
+  MenuDivider,
+  MenuItem,
+  Menu,
+  Popover,
+} from '@blueprintjs/core';
+
+export default function DashboardTopbar({ pageTitle }) {
+  const userAvatarDropMenu = (
+    <Menu>
+      <MenuItem icon="graph" text="Graph" />
+      <MenuItem icon="map" text="Map" />
+      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
+      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
+      <MenuDivider />
+      <MenuItem icon="cog" text="Logout" />
+    </Menu>
+  );
+  return (
+    <div class="dashboard__topbar">
+      <h1 class="dashboard__title">{ pageTitle }</h1>
+      
+      <div class="dashboard__topbar-actions">
+        <Navbar class="dashboard__topbar-navbar">
+          <NavbarGroup>
+            <Button className={Classes.MINIMAL} icon="home" text="Home" />
+            <Button className={Classes.MINIMAL} icon="document" text="Files" />
+          </NavbarGroup>
+        </Navbar>
+
+        <div class="dashboard__user">
+          <Popover content={userAvatarDropMenu}>
+            <Button>
+              <div className="user-avatar"></div>
+            </Button>
+          </Popover>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/Sidebar/SidebarHead.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import appMeta from 'config/app';
 
 export default function() {
   return (
@@ -8,11 +9,15 @@ export default function() {
       </div>
 
       <div className="sidebar__head-company-meta">
-        <span className="comapny-name">
+        <div className="comapny-name">
+          { appMeta.app_name } 
+        </div>
 
+        <div className="company-meta">
+          <span class="version">
+          { appMeta.app_version }
           </span>
-
+        </div>
-        <span className="company-meta"></span>
       </div>
     </div>
   );

client/src/components/Sidebar/SidebarMenu.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import {Menu, MenuItem, MenuDivider} from "@blueprintjs/core";
+import {useHistory} from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
 
 export default function SidebarMenu() {
+  let history = useHistory();
+
   const items = sidebarMenuList.map((item) => 
     (item.divider) ? 
       <MenuDivider
@@ -11,7 +14,8 @@ export default function SidebarMenu() {
         icon={item.icon}
         text={item.text}
         label={item.label}
-        disabled={item.disabled} />
+        disabled={item.disabled}
+        onClick={() => { history.push(item.href); }} />
   );
   return (
     <Menu className="sidebar-menu">

client/src/config/app.js

@@ -0,0 +1,4 @@
+export default {
+  "app_name": "Ratteb",
+  "app_version": "0.0.1",
+}

client/src/config/sidebarMenu.js

@@ -6,9 +6,17 @@ export default [
   },
   {
     icon: 'cut',
-    text: 'cut',
+    text: 'Homepage',
-    label: '⌘C',
     disabled: false,
+    href: '/dashboard/homepage',
+  },
+  {
+    divider: true,
+  },
+  {
+    icon: 'cut',
+    text: 'Chart of Accounts',
+    href: '/dashboard/accounts',
     children: [
       {
         icon: 'cut',

client/src/containers/Authentication/Login.js

@@ -1,45 +1,86 @@
 import * as React from "react";
-import {useForm} from 'react-hook-form';
+import {Link} from 'react-router-dom';
-import {Link, Redirect} from 'react-router-dom';
+import * as Yup from 'yup';
-import {Button, InputGroup} from "@blueprintjs/core";
+import {useFormik} from 'formik';
-import {FormattedMessage} from 'react-intl';
+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 loginValidationSchema = Yup.object().shape({
-  const { register, handleSubmit } = useForm()
+  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">
+    <div className="login-page">
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <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="user"
-          placeholder={<FormattedMessage id="email_or_phone_number" />}
+            placeholder={intl.formatMessage({'id': 'email_or_phone_number'})}
             large={true}
-          ref={register({ required: true })}
+            
-          className="input-group--email-phone-number"
+            intent={formik.errors.credential && Intent.DANGER}
-          htmlProps={{name: 'email_or_phone_number'}}
+            {...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={<FormattedMessage id="password" />}
+            placeholder={intl.formatMessage({'id': 'password'})}
             large={true}
-          ref={register({ required: true })}
+            intent={formik.errors.credential && Intent.DANGER}
-          htmlProps={{name: 'password'}}
+            {...formik.getFieldProps('password')} />
-          className="input-group--password"
+        </FormGroup>
-        />
 
         <Button 
+          type="submit"
           fill={true}
           large={true}>
-          <FormattedMessage id="login" />
+          {intl.formatMessage({'id': 'login '})}
         </Button>
       </form>
 
-      <div class="authentication-page__footer">
+      <div className="authentication-page__footer">
-        <Link to="/reset_password"><FormattedMessage id="reset_password" /></Link>
+        <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>
+  );
+}

client/src/lang/en/index.js

@@ -2,4 +2,7 @@
 
 export default {
   'hello_world': 'Hello World',
+  'email_or_phone_number': 'Email or phone number',
+  'password': 'Password',
+  'login': 'Login'
 };

client/src/routes/dashboard.js

@@ -1,18 +1,17 @@
 import Homepage from "containers/Dashboard/Homepage";
-
+import AccountsChart from 'containers/Dashboard/Accounts/AccountsChart';
-// import AccountsChart from 'pages/Dashboard/AccountsChart';
 
 export default [
   {
-    path: '/homepage',
+    path: '/dashboard/homepage',
     component: Homepage,
     exact: true,
   },
-  // {
+  {
-  //   path: '/accounts/list',
+    path: '/dashboard/accounts',
-  //   component: AccountsChart,
+    component: AccountsChart,
-  //   icon: 'cut',
+    icon: 'cut',
-  //   text: 'Chart of Accounts',
+    text: 'Chart of Accounts',
-  //   label: 'Chart of Accounts'
+    label: 'Chart of Accounts'
-  // },
+  },
 ];

client/src/services/ApiService.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export default {
+
+  get(resource, params) {
+    return axios.get(`api/${resource}`, params);
+  },
+
+  post(resource, params) {
+    return axios.post(`api/${resource}`, params);
+  },
+
+  update(resource, slug, params) {
+    return axios.put(`api/${resource}/${slug}`, params);
+  },
+
+  put(resource, params) {
+    return axios.put(`api/${resource}`, params);
+  },
+
+  delete(resource, params) {
+    return axios.delete(`api/${resource}`, params);
+  }
+};

client/src/store/actions/auth.js

@@ -0,0 +1,18 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export default function login({ form }) {
+  return (dispatch) => {
+    ApiService.post('/auth/login', form).then(response => {
+      const { data } = response;
+
+      if (data.token && data.user) {
+        dispatch({
+          type: t.LOGIN_SUCCESS,
+          user: data.user,
+          token: data.token,
+        });
+      }
+    });
+  }
+}

client/src/store/reducers/authentication.js

@@ -16,3 +16,5 @@ export default function authentication(state = {}, action) {
       return state;
   }
 }
+
+export const isAuthenticated = (state) => !!state.token;

client/src/store/reducers/index.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
-// import accounts from './accounts';
 import authentication from './authentication';
+// import accounts from './accounts';
 // import users from './users';
 
 export default combineReducers({

client/src/style/App.scss

@@ -10,7 +10,64 @@
   display: flex;
   height: 100vh;
   
-  &-content{
+
+
+  &__topbar{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #F2EFEF;
+
+    &-actions{
       
     }
+  }
+
+  &__title{
+    font-size: 26px;
+    font-weight: 200;
+  }
+
+  &-content{
+    width: calc(100% - 220px);
+  }
+}
+
+$sidebar-background: #05276E;
+$sidebar-text-color: #fff;
+$sidebar-width: 220px;
+$sidebar-menu-item-color: #fff;
+
+.sidebar{
+  background: $sidebar-background;
+  color: $sidebar-text-color;
+  width: $sidebar-width;
+
+  &__head{
+
+    &-company-meta{
+
+      
+    }
+  }
+
+  &-menu{
+    background: transparent;
+    padding: 0;
+    min-width: $sidebar-width;
+    border-radius: 0;
+
+    .#{$ns}-menu-item{
+      color: $sidebar-menu-item-color;
+      border-radius: 0;
+
+      > .#{$ns}-icon{
+        color: #8186A4;
+      }
+    }
+
+    .#{$ns}-menu-divider{
+      border-top-color: #183C86;
+    }
+  }
 }