From a37341ff000c2a81deced915341d2bf00c6c9085 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 18 Feb 2020 02:31:42 +0200 Subject: [PATCH] WIP Frontend development. --- client/package.json | 1 + client/src/actions/accounts/index.js | 2 - client/src/components/App.js | 13 ++- client/src/components/Authentication.js | 38 +++---- client/src/components/Dashboard/Dashboard.js | 7 +- .../Dashboard/DashboardActionsBar.js | 10 ++ .../components/Dashboard/DashboardContent.js | 16 ++- .../Dashboard/DashboardPageContent.js | 9 ++ .../components/Dashboard/DashboardTopbar.js | 46 +++++++++ client/src/components/Sidebar/SidebarHead.js | 13 ++- client/src/components/Sidebar/SidebarMenu.js | 6 +- client/src/config/app.js | 4 + client/src/config/sidebarMenu.js | 12 ++- client/src/containers/Authentication/Login.js | 99 +++++++++++++------ .../Authentication/ResetPassword.js | 2 +- .../Dashboard/Accounts/AccountsChart.js | 37 +++++++ client/src/lang/en/index.js | 3 + client/src/routes/dashboard.js | 19 ++-- client/src/services/ApiService.js | 24 +++++ client/src/store/actions/auth.js | 18 ++++ client/src/store/actions/index.js | 0 client/src/store/reducers/authentication.js | 6 +- client/src/store/reducers/index.js | 2 +- client/src/style/App.scss | 57 +++++++++++ 24 files changed, 364 insertions(+), 80 deletions(-) delete mode 100644 client/src/actions/accounts/index.js create mode 100644 client/src/components/Dashboard/DashboardActionsBar.js create mode 100644 client/src/components/Dashboard/DashboardPageContent.js create mode 100644 client/src/components/Dashboard/DashboardTopbar.js create mode 100644 client/src/config/app.js create mode 100644 client/src/containers/Dashboard/Accounts/AccountsChart.js create mode 100644 client/src/services/ApiService.js create mode 100644 client/src/store/actions/auth.js create mode 100644 client/src/store/actions/index.js diff --git a/client/package.json b/client/package.json index 4400335dd..b48eaceca 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/actions/accounts/index.js b/client/src/actions/accounts/index.js deleted file mode 100644 index c39948bba..000000000 --- a/client/src/actions/accounts/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export const FETCH_ACCOUNTS_CHART = 'FETCH_ACCOUNTS_CHART'; - diff --git a/client/src/components/App.js b/client/src/components/App.js index 35f6808e5..778fb89ff 100644 --- a/client/src/components/App.js +++ b/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 (
- - + +
); @@ -23,6 +24,10 @@ App.defaultProps = { }; App.propTypes = { locale: PropTypes.string, + isAuthorized: PropTypes.bool, }; -export default App; \ No newline at end of file +const mapStateToProps = (state) => ({ + isAuthorized: true, +}); +export default connect(mapStateToProps)(App); \ No newline at end of file diff --git a/client/src/components/Authentication.js b/client/src/components/Authentication.js index 18f549c74..1854985f5 100644 --- a/client/src/components/Authentication.js +++ b/client/src/components/Authentication.js @@ -5,23 +5,25 @@ import authenticationRoutes from 'routes/authentication'; export default function({ isAuthenticated =false, ...rest }) { const to = {pathname: '/dashboard/homepage'}; - return isAuthenticated ? - ( - - ) : ( - -
-
- { authenticationRoutes.map((route, index) => ( - - ))} -
-
- + return ( + + { isAuthenticated ? + () : ( + +
+
+ { authenticationRoutes.map((route, index) => ( + + ))} +
+
+ ) + } + ); } \ No newline at end of file diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js index dc4ea4b9a..3b6078945 100644 --- a/client/src/components/Dashboard/Dashboard.js +++ b/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 (
- - - - + +
) } \ No newline at end of file diff --git a/client/src/components/Dashboard/DashboardActionsBar.js b/client/src/components/Dashboard/DashboardActionsBar.js new file mode 100644 index 000000000..95cebb510 --- /dev/null +++ b/client/src/components/Dashboard/DashboardActionsBar.js @@ -0,0 +1,10 @@ +import React from 'react'; + + +export default function DashboardActionsBar() { + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/client/src/components/Dashboard/DashboardContent.js b/client/src/components/Dashboard/DashboardContent.js index d5287ff4b..7277308ae 100644 --- a/client/src/components/Dashboard/DashboardContent.js +++ b/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 (
-

dashboard

+ + + + + { dashboardRoutes.map((route, index) => ( + + ))} + +
) } \ No newline at end of file diff --git a/client/src/components/Dashboard/DashboardPageContent.js b/client/src/components/Dashboard/DashboardPageContent.js new file mode 100644 index 000000000..f3e938628 --- /dev/null +++ b/client/src/components/Dashboard/DashboardPageContent.js @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function DashboardPageContent({ children }) { + return ( +
+ { children } +
+ ) +} \ No newline at end of file diff --git a/client/src/components/Dashboard/DashboardTopbar.js b/client/src/components/Dashboard/DashboardTopbar.js new file mode 100644 index 000000000..6b7c15f00 --- /dev/null +++ b/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 = ( + + + + + + + + + ); + return ( +
+

{ pageTitle }

+ +
+ + + + +
+
+ + ); +} \ No newline at end of file diff --git a/client/src/components/Sidebar/SidebarHead.js b/client/src/components/Sidebar/SidebarHead.js index 070b79900..37639d7e2 100644 --- a/client/src/components/Sidebar/SidebarHead.js +++ b/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() {
- +
+ { appMeta.app_name } +
- - - +
+ + { appMeta.app_version } + +
); diff --git a/client/src/components/Sidebar/SidebarMenu.js b/client/src/components/Sidebar/SidebarMenu.js index d767ec8ff..0db9e2514 100644 --- a/client/src/components/Sidebar/SidebarMenu.js +++ b/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) ? + disabled={item.disabled} + onClick={() => { history.push(item.href); }} /> ); return ( diff --git a/client/src/config/app.js b/client/src/config/app.js new file mode 100644 index 000000000..a077f1106 --- /dev/null +++ b/client/src/config/app.js @@ -0,0 +1,4 @@ +export default { + "app_name": "Ratteb", + "app_version": "0.0.1", +} \ No newline at end of file diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js index c98507547..442232653 100644 --- a/client/src/config/sidebarMenu.js +++ b/client/src/config/sidebarMenu.js @@ -6,9 +6,17 @@ export default [ }, { icon: 'cut', - text: 'cut', - label: '⌘C', + text: 'Homepage', disabled: false, + href: '/dashboard/homepage', + }, + { + divider: true, + }, + { + icon: 'cut', + text: 'Chart of Accounts', + href: '/dashboard/accounts', children: [ { icon: 'cut', diff --git a/client/src/containers/Authentication/Login.js b/client/src/containers/Authentication/Login.js index ade529812..2d9c171cc 100644 --- a/client/src/containers/Authentication/Login.js +++ b/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 ( -