Web: Client: add confirm wrapper

This commit is contained in:
Viktor Fomin 2022-07-25 23:02:52 +03:00
parent 6f156d449a
commit 55624e0d9f
2 changed files with 78 additions and 49 deletions

View File

@ -0,0 +1,26 @@
import React from "react";
import styled, { css } from "styled-components";
import { isIOS, isFirefox, isMobileOnly } from "react-device-detect";
const StyledWrapper = styled.div`
height: ${isIOS && !isFirefox ? "calc(var(--vh, 1vh) * 100)" : "100vh"};
width: 100vw;
z-index: 0;
display: flex;
flex-direction: row;
box-sizing: border-box;
${isMobileOnly &&
css`
height: auto;
min-height: 100%;
width: 100%;
`}
`;
const ConfirmWrapper = (props) => {
const { children, className } = props;
return <StyledWrapper className={className}>{children}</StyledWrapper>;
};
export default ConfirmWrapper;

View File

@ -1,6 +1,7 @@
import React, { lazy } from "react"; import React, { lazy } from "react";
import { Switch } from "react-router-dom"; import { Switch } from "react-router-dom";
import ConfirmRoute from "../../../helpers/confirmRoute"; import ConfirmRoute from "../../../helpers/confirmRoute";
import ConfirmWrapper from "./ConfirmWrapper";
const ActivateUserForm = lazy(() => import("./sub-components/activateUser")); const ActivateUserForm = lazy(() => import("./sub-components/activateUser"));
const CreateUserForm = lazy(() => import("./sub-components/createUser")); const CreateUserForm = lazy(() => import("./sub-components/createUser"));
@ -19,56 +20,58 @@ const Confirm = ({ match }) => {
//console.log("Confirm render"); //console.log("Confirm render");
const path = match.path; const path = match.path;
return ( return (
<Switch> <ConfirmWrapper className="with-background-pattern">
<ConfirmRoute <Switch>
forUnauthorized <ConfirmRoute
path={`${path}/LinkInvite`} forUnauthorized
component={CreateUserForm} path={`${path}/LinkInvite`}
/> component={CreateUserForm}
<ConfirmRoute />
forUnauthorized <ConfirmRoute
path={`${path}/Activation`} forUnauthorized
component={ActivateUserForm} path={`${path}/Activation`}
/> component={ActivateUserForm}
<ConfirmRoute />
exact <ConfirmRoute
path={`${path}/EmailActivation`} exact
component={ActivateEmailForm} path={`${path}/EmailActivation`}
/> component={ActivateEmailForm}
<ConfirmRoute />
exact <ConfirmRoute
path={`${path}/EmailChange`} exact
component={ChangeEmailForm} path={`${path}/EmailChange`}
/> component={ChangeEmailForm}
<ConfirmRoute />
forUnauthorized <ConfirmRoute
path={`${path}/PasswordChange`} forUnauthorized
component={ChangePasswordForm} path={`${path}/PasswordChange`}
/> component={ChangePasswordForm}
<ConfirmRoute />
exact <ConfirmRoute
path={`${path}/ProfileRemove`} exact
component={ProfileRemoveForm} path={`${path}/ProfileRemove`}
/> component={ProfileRemoveForm}
<ConfirmRoute />
exact <ConfirmRoute
path={`${path}/PhoneActivation`} exact
component={ChangePhoneForm} path={`${path}/PhoneActivation`}
/> component={ChangePhoneForm}
<ConfirmRoute />
exact <ConfirmRoute
path={`${path}/PortalOwnerChange`} exact
component={ChangeOwnerForm} path={`${path}/PortalOwnerChange`}
/> component={ChangeOwnerForm}
<ConfirmRoute exact path={`${path}/TfaAuth`} component={TfaAuthForm} /> />
<ConfirmRoute <ConfirmRoute exact path={`${path}/TfaAuth`} component={TfaAuthForm} />
exact <ConfirmRoute
path={`${path}/TfaActivation`} exact
component={TfaActivationForm} path={`${path}/TfaActivation`}
/> component={TfaActivationForm}
/>
{/* <Route component={Error404} /> */} {/* <Route component={Error404} /> */}
</Switch> </Switch>
</ConfirmWrapper>
); );
}; };