QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 21:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP Frontend structure & authentication.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-02-17 00:15:07 +02:00
parent b3849e55e9
commit e5c78fe555
56 changed files with 3539 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/App.js Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import {IntlProvider} from 'react-intl';
// import {Switch} from 'react-router-dom';
import PrivateRoute from 'components/PrivateRoute';
import Authentication from 'components/Authentication';
import Dashboard from 'components/Dashboard/Dashboard';
import messages from 'lang/en';
import 'style/App.scss';
function App(props) {
return (
<IntlProvider locale={props.locale} messages={messages}>
<div className="App">
<Authentication isAuthenticated={true} />
<PrivateRoute isAuthenticated={true} component={Dashboard} />
</div>
</IntlProvider>
);
}
App.defaultProps = {
locale: 'en',
};
App.propTypes = {
locale: PropTypes.string,
};
export default App;

27
client/src/components/Authentication.js Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import authenticationRoutes from 'routes/authentication';
export default function({ isAuthenticated =false, ...rest }) {
const to = {pathname: '/dashboard/homepage'};
return isAuthenticated ?
(
<Redirect to={to} />
) : (
<Switch>
<div class="authentication-page">
<div class="authentication-page__form-wrapper">
{ authenticationRoutes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
))}
</div>
</div>
</Switch>
);
}

15
client/src/components/Dashboard/Dashboard.js Normal file
View File

@@ -0,0 +1,15 @@
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>
)
}

11
client/src/components/Dashboard/DashboardContent.js Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import dashboardRoutes from 'routes/dashboard'
export default function() {
return (
<div className="dashboard-content" id="dashboard">
<h2>dashboard</h2>
</div>
)
}

18
client/src/components/DashboardContent/index.js
View File

@@ -1,18 +0,0 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import dashboardRoutes from 'routes/dashboard'
export default function() {
return (
<Switch>
{ dashboardRoutes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
))}
</Switch>
)
}

33
client/src/components/PrivateRoute.js Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';
const propTypes = {
isAuthenticated: PropTypes.bool,
component: PropTypes.func.isRequired
};
function PrivateRoute({
component: Component,
isAuthenticated = false,
...rest
}) {
return (
<Route
{...rest}
render={_props =>
isAuthenticated ? (<Component {..._props} />) :
(
<Redirect
to={{
pathname: '/auth/login',
}}
/>
)}
/>
);
}
PrivateRoute.propTypes = propTypes;
export default PrivateRoute;

9
client/src/components/Sideabr/SidebarContainer.js
View File

@@ -1,9 +0,0 @@
export default function() {
return (
<div class="sidebar" id="sidebar">
</div>
)
};

19
client/src/components/Sideabr/SidebarHead.js
View File

@@ -1,19 +0,0 @@
import React from 'react';
export default function() {
return (
<div class="sidebar__head">
<div class="sidebar__head-logo">
</div>
<div class="sidebar__head-company-meta">
<span class="comapny-name">
</span>
<span class="company-meta"></span>
</div>
</div>
);
};

30
client/src/components/Sideabr/index.js
View File

@@ -1,30 +0,0 @@
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
import SidebarContainer from './SidebarContainer';
import SidebarHead from './SidebarHead';
import sidebarRoutes from '../../routes/sidebar';
export default function Sidebar() {
return (
<SidebarContainer>
<SidebarHead />
<div className="sidebar__menu">
<Menu>
{ sidebarRoutes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
children={<route.sidebar />}
/>
))}
</Menu>
</div>
</SidebarContainer>
)
}

16
client/src/components/Sidebar/Sidebar.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import SidebarContainer from 'components/Sidebar/SidebarContainer';
import SidebarHead from 'components/Sidebar/SidebarHead';
import SidebarMenu from 'components/Sidebar/SidebarMenu';
export default function Sidebar() {
return (
<SidebarContainer>
<SidebarHead />
<div className="sidebar__menu">
<SidebarMenu />
</div>
</SidebarContainer>
)
}

9
client/src/components/Sidebar/SidebarContainer.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
export default function SidebarContainer(props) {
return (
<div className="sidebar" id="sidebar">
{props.children}
</div>
)
}

19
client/src/components/Sidebar/SidebarHead.js Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
export default function() {
return (
<div className="sidebar__head">
<div className="sidebar__head-logo">
</div>
<div className="sidebar__head-company-meta">
<span className="comapny-name">
</span>
<span className="company-meta"></span>
</div>
</div>
);
};

21
client/src/components/Sidebar/SidebarMenu.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import {Menu, MenuItem, MenuDivider} from "@blueprintjs/core";
import sidebarMenuList from 'config/sidebarMenu';
export default function SidebarMenu() {
const items = sidebarMenuList.map((item) =>
(item.divider) ?
<MenuDivider
title={item.title} /> :
<MenuItem
icon={item.icon}
text={item.text}
label={item.label}
disabled={item.disabled} />
);
return (
<Menu className="sidebar-menu">
{items}
</Menu>
)
};