103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { compose } from 'recompose';
|
|
import { withRouter, RouteComponentProps, Redirect } from 'react-router';
|
|
import { Switch, Route, Link } from 'react-router-dom';
|
|
import { AppState } from 'store/reducers';
|
|
import { authActions } from 'modules/auth';
|
|
import Loader from 'components/Loader';
|
|
import ExceptionPage from 'components/ExceptionPage';
|
|
import SignIn from './SignIn';
|
|
import SignUp from './SignUp';
|
|
import AccountRecovery from './AccountRecovery';
|
|
import './index.less';
|
|
|
|
interface StateProps {
|
|
authUser: AppState['auth']['user'];
|
|
isCheckingUser: AppState['auth']['isCheckingUser'];
|
|
}
|
|
|
|
type Props = StateProps & RouteComponentProps<any>;
|
|
|
|
class AuthFlow extends React.Component<Props> {
|
|
renderRecover = () => (
|
|
<>
|
|
<h1 className="AuthFlow-title">Account Recovery</h1>
|
|
<p className="AuthFlow-subtitle">Please enter your details below</p>
|
|
<div className="AuthFlow-content">
|
|
<AccountRecovery />
|
|
</div>
|
|
<div className="AuthFlow-bottom">
|
|
Already have an account?{' '}
|
|
<Link to={`${this.props.match.url}/sign-in`}>Sign in</Link>.
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
renderSignUp = () => (
|
|
<>
|
|
<h1 className="AuthFlow-title">Create your Account</h1>
|
|
<p className="AuthFlow-subtitle">Please enter your details below</p>
|
|
<div className="AuthFlow-content">
|
|
<SignUp />
|
|
</div>
|
|
<div className="AuthFlow-bottom">
|
|
Already have an account?{' '}
|
|
<Link to={`${this.props.match.url}/sign-in`}>Sign in</Link>.
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
renderSignIn = () => (
|
|
<>
|
|
<h1 className="AuthFlow-title">Sign in</h1>
|
|
<div className="AuthFlow-content">
|
|
<SignIn matchUrl={this.props.match.url} />
|
|
</div>
|
|
<div className="AuthFlow-bottom">
|
|
No account?{' '}
|
|
<Link to={`${this.props.match.url}/sign-up`}>Create a new account</Link>.
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
render() {
|
|
const { isCheckingUser, match } = this.props;
|
|
|
|
if (isCheckingUser) {
|
|
return <Loader size="large" />;
|
|
}
|
|
|
|
return (
|
|
<div className="AuthFlow">
|
|
<Switch>
|
|
<Route
|
|
exact={true}
|
|
path={`${match.path}`}
|
|
render={() => <Redirect to={`${match.path}/sign-in`} />}
|
|
/>
|
|
<Route path={`${match.path}/sign-in`} render={this.renderSignIn} />
|
|
<Route path={`${match.path}/sign-up`} render={this.renderSignUp} />
|
|
<Route path={`${match.path}/recover`} render={this.renderRecover} />
|
|
<Route render={() => <ExceptionPage code="404" desc="Bad auth URL path" />} />
|
|
</Switch>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const withConnect = connect<StateProps, {}, {}, AppState>(
|
|
state => ({
|
|
authUser: state.auth.user,
|
|
isCheckingUser: state.auth.isCheckingUser,
|
|
}),
|
|
{
|
|
checkUser: authActions.checkUser,
|
|
},
|
|
);
|
|
|
|
export default compose<Props, {}>(
|
|
withRouter,
|
|
withConnect,
|
|
)(AuthFlow);
|