2020-01-18 02:07:52 +05:30
|
|
|
import React, { ComponentType, ReactNode, useCallback, useState } from 'react';
|
|
|
|
|
import { Route, Switch, Redirect, RouteComponentProps } from 'react-router-dom';
|
|
|
|
|
|
2019-12-08 00:32:00 +05:30
|
|
|
import AppInfo from 'app/components/auth/appInfo/AppInfo';
|
|
|
|
|
import PanelTransition from 'app/components/auth/PanelTransition';
|
|
|
|
|
import Register from 'app/components/auth/register/Register';
|
|
|
|
|
import Login from 'app/components/auth/login/Login';
|
|
|
|
|
import Permissions from 'app/components/auth/permissions/Permissions';
|
|
|
|
|
import ChooseAccount from 'app/components/auth/chooseAccount/ChooseAccount';
|
|
|
|
|
import Activation from 'app/components/auth/activation/Activation';
|
|
|
|
|
import ResendActivation from 'app/components/auth/resendActivation/ResendActivation';
|
|
|
|
|
import Password from 'app/components/auth/password/Password';
|
|
|
|
|
import AcceptRules from 'app/components/auth/acceptRules/AcceptRules';
|
|
|
|
|
import ForgotPassword from 'app/components/auth/forgotPassword/ForgotPassword';
|
|
|
|
|
import RecoverPassword from 'app/components/auth/recoverPassword/RecoverPassword';
|
|
|
|
|
import Mfa from 'app/components/auth/mfa/Mfa';
|
|
|
|
|
import Finish from 'app/components/auth/finish/Finish';
|
2020-01-18 02:07:52 +05:30
|
|
|
|
2020-07-22 15:31:12 +05:30
|
|
|
import { useReduxSelector } from 'app/functions';
|
2020-01-18 02:07:52 +05:30
|
|
|
import { Factory } from 'app/components/auth/factory';
|
2017-05-26 00:41:57 +05:30
|
|
|
|
2016-01-04 02:48:42 +05:30
|
|
|
import styles from './auth.scss';
|
|
|
|
|
|
2018-01-01 22:54:14 +05:30
|
|
|
// TODO: after migrating to new react router (posibly) this view started remounting
|
|
|
|
|
// after route change e.g. /login -> /password which results in state dropping
|
|
|
|
|
// we should find why this view is remounting or move isSidebarHidden into store
|
|
|
|
|
// so that it persist disregarding remounts
|
|
|
|
|
let isSidebarHiddenCache = false;
|
|
|
|
|
|
2020-01-18 02:07:52 +05:30
|
|
|
const AuthPage: ComponentType = () => {
|
2020-05-24 04:38:24 +05:30
|
|
|
const [isSidebarHidden, setIsSidebarHidden] = useState<boolean>(isSidebarHiddenCache);
|
2020-07-22 15:31:12 +05:30
|
|
|
const client = useReduxSelector((state) => state.auth.client);
|
2019-11-27 14:33:32 +05:30
|
|
|
|
2020-05-24 04:38:24 +05:30
|
|
|
const goToAuth = useCallback(() => {
|
|
|
|
|
isSidebarHiddenCache = true;
|
|
|
|
|
setIsSidebarHidden(true);
|
|
|
|
|
}, []);
|
2019-11-27 14:33:32 +05:30
|
|
|
|
2020-05-24 04:38:24 +05:30
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<div className={isSidebarHidden ? styles.hiddenSidebar : styles.sidebar}>
|
|
|
|
|
<AppInfo {...client} onGoToAuth={goToAuth} />
|
|
|
|
|
</div>
|
2019-11-27 14:33:32 +05:30
|
|
|
|
2020-05-24 04:38:24 +05:30
|
|
|
<div className={styles.content} data-e2e-content>
|
|
|
|
|
<Switch>
|
|
|
|
|
<Route path="/login" render={renderPanelTransition(Login)} />
|
|
|
|
|
<Route path="/mfa" render={renderPanelTransition(Mfa)} />
|
|
|
|
|
<Route path="/password" render={renderPanelTransition(Password)} />
|
|
|
|
|
<Route path="/register" render={renderPanelTransition(Register)} />
|
|
|
|
|
<Route path="/activation/:key?" render={renderPanelTransition(Activation)} />
|
|
|
|
|
<Route path="/resend-activation" render={renderPanelTransition(ResendActivation)} />
|
|
|
|
|
<Route path="/oauth/permissions" render={renderPanelTransition(Permissions)} />
|
|
|
|
|
<Route path="/choose-account" render={renderPanelTransition(ChooseAccount)} />
|
|
|
|
|
<Route path="/oauth/choose-account" render={renderPanelTransition(ChooseAccount)} />
|
|
|
|
|
<Route path="/oauth/finish" component={Finish} />
|
|
|
|
|
<Route path="/accept-rules" render={renderPanelTransition(AcceptRules)} />
|
|
|
|
|
<Route path="/forgot-password" render={renderPanelTransition(ForgotPassword)} />
|
|
|
|
|
<Route path="/recover-password/:key?" render={renderPanelTransition(RecoverPassword)} />
|
|
|
|
|
<Redirect to="/404" />
|
|
|
|
|
</Switch>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2020-01-18 02:07:52 +05:30
|
|
|
};
|
2016-02-23 11:27:16 +05:30
|
|
|
|
2020-05-24 04:38:24 +05:30
|
|
|
function renderPanelTransition(factory: Factory): (props: RouteComponentProps<any>) => ReactNode {
|
|
|
|
|
const { Title, Body, Footer, Links } = factory();
|
2019-11-27 14:33:32 +05:30
|
|
|
|
2020-05-24 04:38:24 +05:30
|
|
|
return (props) => (
|
|
|
|
|
<PanelTransition
|
|
|
|
|
key="panel-transition"
|
|
|
|
|
Title={<Title />}
|
|
|
|
|
Body={<Body {...props} />}
|
|
|
|
|
Footer={<Footer />}
|
|
|
|
|
Links={<Links />}
|
|
|
|
|
/>
|
|
|
|
|
);
|
2017-05-26 00:41:57 +05:30
|
|
|
}
|
|
|
|
|
|
2020-01-18 02:07:52 +05:30
|
|
|
export default AuthPage;
|
