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

feat: animating authentication pages.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-10-12 17:27:48 +02:00
parent 918e174f8a
commit f4ea588039
7 changed files with 134 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/components/Authentication.js
View File

@@ -1,13 +1,28 @@
import React from 'react';
import { Redirect, Route, Switch, Link } from 'react-router-dom';
import { Redirect, Route, Switch, Link, useLocation } from 'react-router-dom';
import BodyClassName from 'react-body-classname';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import authenticationRoutes from 'routes/authentication';
import { FormattedMessage as T } from 'react-intl';
import withAuthentication from 'containers/Authentication/withAuthentication';
import { compose } from 'utils';
import Icon from 'components/Icon';
import AuthCopyright from 'containers/Authentication/AuthCopyright';
function PageFade(props) {
return (
<CSSTransition
{...props}
classNames="authTransition"
timeout={500}
/>
);
}
function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
const to = { pathname: '/homepage' };
const location = useLocation();
const locationKey = location.pathname;
return (
<>
@@ -15,27 +30,37 @@ function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
<Redirect to={to} />
) : (
<BodyClassName className={'authentication'}>
<Switch>
<div class="authentication-page">
<Link
to={'bigcapital.io'}
className={'authentication-page__goto-bigcapital'}
>
<T id={'go_to_bigcapital_com'} />
</Link>
<div class="authentication-page">
<Link
to={'bigcapital.io'}
className={'authentication-page__goto-bigcapital'}
>
<T id={'go_to_bigcapital_com'} />
</Link>
<div class="authentication-page__form-wrapper">
{authenticationRoutes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
))}
<div class="authentication-page__form-wrapper">
<div class="authentication-insider">
<div className={'authentication-insider__logo-section'}>
<Icon icon="bigcapital" height={37} width={214} />
</div>
<TransitionGroup>
<PageFade key={locationKey}>
<Switch>
{authenticationRoutes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
))}
</Switch>
</PageFade>
</TransitionGroup>
</div>
</div>
</Switch>
</div>
</BodyClassName>
)}
</>