PromucFlow_constructor/app/client/src/pages/UserAuth/index.tsx
2019-12-16 08:49:10 +00:00

44 lines
1.4 KiB
TypeScript

import React from "react";
import { Switch, Route, useRouteMatch, useLocation } from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import Login from "./Login";
import Centered from "components/designSystems/appsmith/CenteredWrapper";
import { AuthContainer, AuthCard } from "./StyledComponents";
import SignUp from "./SignUp";
import ForgotPassword from "./ForgotPassword";
import ResetPassword from "./ResetPassword";
export const UserAuth = () => {
const { path } = useRouteMatch();
const location = useLocation();
return (
<AuthContainer>
<Centered>
<AuthCard>
<TransitionGroup>
<CSSTransition key={location.key} classNames="fade" timeout={300}>
<Switch location={location}>
<Route exact path={`${path}/login`} component={Login} />
<Route exact path={`${path}/signup`} component={SignUp} />
<Route
exact
path={`${path}/resetPassword`}
component={ResetPassword}
/>
<Route
exact
path={`${path}/forgotPassword`}
component={ForgotPassword}
/>
</Switch>
</CSSTransition>
</TransitionGroup>
</AuthCard>
</Centered>
</AuthContainer>
);
};
export default UserAuth;