diff --git a/client/src/components/Authentication.js b/client/src/components/Authentication.js index 8b6e39cfa..e34d636e6 100644 --- a/client/src/components/Authentication.js +++ b/client/src/components/Authentication.js @@ -1,13 +1,28 @@ import React from 'react'; -import { Redirect, Route, Switch, Link } from 'react-router-dom'; +import { Redirect, Route, Switch, Link, useLocation } from 'react-router-dom'; import BodyClassName from 'react-body-classname'; +import { TransitionGroup, CSSTransition } from 'react-transition-group'; import authenticationRoutes from 'routes/authentication'; import { FormattedMessage as T } from 'react-intl'; import withAuthentication from 'containers/Authentication/withAuthentication'; import { compose } from 'utils'; +import Icon from 'components/Icon'; +import AuthCopyright from 'containers/Authentication/AuthCopyright'; + +function PageFade(props) { + return ( + + ); +} function AuthenticationWrapper({ isAuthorized = false, ...rest }) { const to = { pathname: '/homepage' }; + const location = useLocation(); + const locationKey = location.pathname; return ( <> @@ -15,27 +30,37 @@ function AuthenticationWrapper({ isAuthorized = false, ...rest }) { ) : ( - -
- - - +
+ + + -
- {authenticationRoutes.map((route, index) => ( - - ))} +
+
+
+ +
+ + + + + {authenticationRoutes.map((route, index) => ( + + ))} + + +
- +
)} diff --git a/client/src/containers/Authentication/AuthInsider.js b/client/src/containers/Authentication/AuthInsider.js index be0ee3601..5626f58a1 100644 --- a/client/src/containers/Authentication/AuthInsider.js +++ b/client/src/containers/Authentication/AuthInsider.js @@ -8,13 +8,12 @@ export default function AuthInsider({ children, }) { return ( -
-
- +
+ +
+ { children }
-
{ children }
- diff --git a/client/src/containers/Setup/SetupInitializingForm.js b/client/src/containers/Setup/SetupInitializingForm.js index bbae58a09..d907a38b7 100644 --- a/client/src/containers/Setup/SetupInitializingForm.js +++ b/client/src/containers/Setup/SetupInitializingForm.js @@ -1,5 +1,6 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useQuery } from 'react-query'; +import { withWizard } from 'react-albus' import withOrganizationActions from 'containers/Organization/withOrganizationActions'; import withOrganization from 'containers/Organization/withOrganization' @@ -13,11 +14,19 @@ function SetupInitializingForm({ // #withOrganizationActions requestOrganizationBuild, + + wizard: { next }, }) { - const requestBuildOrgnization = useQuery( + const { isSuccess } = useQuery( ['build-tenant'], () => requestOrganizationBuild(), ); + useEffect(() => { + if (isSuccess) { + next(); + } + }, [isSuccess, next]); + return (

You organization is initializin...

@@ -26,5 +35,6 @@ function SetupInitializingForm({ } export default compose( - withOrganizationActions + withOrganizationActions, + withWizard, )(SetupInitializingForm); \ No newline at end of file diff --git a/client/src/containers/Setup/SetupRightSection.js b/client/src/containers/Setup/SetupRightSection.js index 645ef849a..96ff6499d 100644 --- a/client/src/containers/Setup/SetupRightSection.js +++ b/client/src/containers/Setup/SetupRightSection.js @@ -31,8 +31,8 @@ function SetupRightSection ({ const handleSkip = useCallback(({ step, push }) => { const scenarios = [ { condition: !hasSubscriptions, redirectTo: 'subscription' }, - // { condition: , redirectTo: 'initializing' } - { condition: !hasSubscriptions, redirectTo: 'organization' }, + { condition: hasSubscriptions && !isOrganizationInitialized, redirectTo: 'initializing' }, + { condition: hasSubscriptions && !isOrganizationSeeded, redirectTo: 'organization' }, ]; const scenario = scenarios.find((scenario) => scenario.condition); diff --git a/client/src/style/App.scss b/client/src/style/App.scss index 520ce34f1..b7dccb871 100644 --- a/client/src/style/App.scss +++ b/client/src/style/App.scss @@ -63,8 +63,8 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, @import 'pages/exchange-rate'; @import 'pages/customer'; @import 'pages/billing'; -@import 'pages/register-wizard-page.scss'; -@import 'pages/register-organizaton.scss'; +@import 'pages/register-wizard-page'; +@import 'pages/register-organizaton'; // Views @import 'views/filter-dropdown'; diff --git a/client/src/style/pages/authentication.scss b/client/src/style/pages/authentication.scss index 81e1c4e75..da1b2bb82 100644 --- a/client/src/style/pages/authentication.scss +++ b/client/src/style/pages/authentication.scss @@ -1,12 +1,14 @@ + + .authentication-insider { width: 384px; margin: 0 auto; margin-bottom: 40px; - margin-top: 40px; + padding-top: 80px; &__logo-section { text-align: center; - margin-bottom: 61px; + margin-bottom: 60px; } &__content { @@ -32,11 +34,43 @@ } } + +.authTransition{ + + &-enter { + opacity: 0; + } + + &-enter-active { + opacity: 1; + transition: opacity 250ms ease-in-out; + } + + &-enter-done { + opacity: 1; + } + + &-exit { + opacity: 1; + } + + &-exit-active { + opacity: 0.5; + transition: opacity 250ms ease-in-out; + } + &-exit-active { + opacity: 0; + display: none; + } + +} + + .authentication-page { &__goto-bigcapital { position: fixed; - margin-top: 40px; - margin-left: 40px; + margin-top: 30px; + margin-left: 30px; color: #777; } @@ -46,12 +80,6 @@ } .bp3-form-group { margin-bottom: 25px; - - &.bp3-intent-danger { - .bp3-input { - border-color: #eea9a9; - } - } } .bp3-form-group.has-password-revealer { @@ -72,16 +100,13 @@ } &__label-section { - margin-bottom: 29px; + margin-bottom: 30px; color: #555; h3 { - // font-weight: 500; - font-weight: 400; - // font-size: 28px; + font-weight: 500; font-size: 22px; - // color: #444; - color: #555555; + color: #444; margin: 0 0 12px; } @@ -93,8 +118,6 @@ &__form-wrapper { width: 100%; - // max-width: 415px; - // padding: 15px; margin: 0 auto; } @@ -139,48 +162,52 @@ .checkbox { &--remember-me { - margin: -4px 0 28px 0px; + margin: -6px 0 26px 0px; font-size: 14px; } } } - // // Register Form - // .register-form { - // // width: 690px; - // // margin: 0px auto; - // // padding: 85px 50px; - + // Register form + // ---------------------------- + .register-form { - // &__agreement-section { - // margin-top: -10px; + &__agreement-section { + margin-top: -10px; - // p { - // font-size: 13px; - // margin-top: -10px; - // margin-bottom: 24px; - // line-height: 1.65; - // } - // } + p { + font-size: 13px; + margin-top: -10px; + margin-bottom: 24px; + line-height: 1.65; + } + } - // &__submit-button-wrap { - // margin: 25px 0px 25px 0px; + &__submit-button-wrap { + margin: 25px 0px 25px 0px; - // .bp3-button { - // min-height: 45px; - // background-color: #0052cc; - // } - // } - // } + .bp3-button { + min-height: 45px; + background-color: #0052cc; + } + } + } + // Send reset password + // ---------------------------- .send-reset-password { .form-group--crediential { margin-bottom: 36px; } } + + // Invite form. + // ---------------- .invite-form { + &__statement-section { margin-top: -10px; + p { font-size: 13px; margin-bottom: 20px; diff --git a/client/src/style/pages/register-wizard-page.scss b/client/src/style/pages/register-wizard-page.scss index 67ebe31fa..977b27aa2 100644 --- a/client/src/style/pages/register-wizard-page.scss +++ b/client/src/style/pages/register-wizard-page.scss @@ -1,128 +1,5 @@ -.register-page { - .bp3-input { - min-height: 40px; - border: 1px solid #ced4da; - } - .bp3-form-group { - margin-bottom: 23px; - &.bp3-intent-danger { - .bp3-input { - border-color: #eea9a9; - } - } - } - .bp3-form-group.has-password-revealer { - .bp3-label { - display: flex; - justify-content: space-between; - } - - .password-revealer { - .text { - font-size: 12px; - } - } - } - - .bp3-button.bp3-fill.bp3-intent-primary { - font-size: 16px; - } - - &__label-section { - margin-bottom: 29px; - color: #555; - - h3 { - // font-weight: 500; - font-weight: 400; - // font-size: 28px; - font-size: 22px; - // color: #444; - color: #555555; - margin: 0 0 12px; - } - - a { - text-decoration: underline; - color: #0040bd; - } - } - - &__form-wrapper { - width: 100%; - // max-width: 415px; - // padding: 15px; - margin: 0 auto; - } - - &__footer-links { - padding: 9px; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; - text-align: center; - margin-bottom: 1.2rem; - - a { - color: #0052cc; - } - } - - &__loading-overlay { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: rgba(252, 253, 255, 0.5); - display: flex; - justify-content: center; - } - - &__submit-button-wrap { - margin: 0px 0px 24px 0px; - - .bp3-button { - background-color: #0052cc; - min-height: 45px; - } - } - - &-form { - width: 800px; - margin: 0 auto; - - // width: 690px; - // padding: 85px 60px; - // padding: 85px 105px; - - // Register Form - .register-form { - padding: 85px 105px; - - &__agreement-section { - margin-top: -10px; - - p { - font-size: 13px; - margin-top: -10px; - margin-bottom: 24px; - line-height: 1.65; - } - } - - &__submit-button-wrap { - margin: 25px 0px 25px 0px; - - .bp3-button { - min-height: 45px; - background-color: #0052cc; - } - } - } - } -} .setup-page { @@ -186,7 +63,6 @@ } - .setup-page-steps { &-container {