68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { Switch, useRouteMatch, useLocation } from "react-router-dom";
|
|
import Login from "./Login";
|
|
import Centered from "components/designSystems/appsmith/CenteredWrapper";
|
|
import { animated, useTransition } from "react-spring";
|
|
import { AuthContainer, AuthCard } from "./StyledComponents";
|
|
import SignUp from "./SignUp";
|
|
import ForgotPassword from "./ForgotPassword";
|
|
import ResetPassword from "./ResetPassword";
|
|
import CreatePassword from "./CreatePassword";
|
|
import AppRoute from "pages/common/AppRoute";
|
|
const AnimatedAuthCard = animated(AuthContainer);
|
|
export const UserAuth = () => {
|
|
const { path } = useRouteMatch();
|
|
const location = useLocation();
|
|
const transitions = useTransition(location, location => location.pathname, {
|
|
from: { opacity: 0, transform: "translate3d(50%,0,0)" },
|
|
enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
|
|
leave: { opacity: 0, transform: "translate3d(-50%,0,0)" },
|
|
reset: true,
|
|
});
|
|
const renderTransitions = transitions.map(
|
|
({ item: location, props, key }) => (
|
|
<AnimatedAuthCard key={key} style={props}>
|
|
<Centered>
|
|
<AuthCard>
|
|
<Switch location={location}>
|
|
<AppRoute
|
|
exact
|
|
path={`${path}/login`}
|
|
component={Login}
|
|
name={"Login"}
|
|
/>
|
|
<AppRoute
|
|
exact
|
|
path={`${path}/signup`}
|
|
component={SignUp}
|
|
name={"SignUp"}
|
|
/>
|
|
<AppRoute
|
|
exact
|
|
path={`${path}/resetPassword`}
|
|
component={ResetPassword}
|
|
name={"ResetPassword"}
|
|
/>
|
|
<AppRoute
|
|
exact
|
|
path={`${path}/forgotPassword`}
|
|
component={ForgotPassword}
|
|
name={"ForgotPassword"}
|
|
/>
|
|
<AppRoute
|
|
exact
|
|
path={`${path}/createPassword`}
|
|
component={CreatePassword}
|
|
name={"CreatePassword"}
|
|
/>
|
|
</Switch>
|
|
</AuthCard>
|
|
</Centered>
|
|
</AnimatedAuthCard>
|
|
),
|
|
);
|
|
return <React.Fragment>{renderTransitions}</React.Fragment>;
|
|
};
|
|
|
|
export default UserAuth;
|