Merge branch 'RegisterWizard' of https://github.com/abouolia/Bigcapital into RegisterWizard

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 (
+    <CSSTransition
+      {...props}
+      classNames="authTransition"
+      timeout={500}
+    />
+  );
+}
 
 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 }) {
         <Redirect to={to} />
       ) : (
         <BodyClassName className={'authentication'}>
-          <Switch>
+          <div class="authentication-page">
-            <div class="authentication-page">
+            <Link
-              <Link
+              to={'bigcapital.io'}
-                to={'bigcapital.io'}
+              className={'authentication-page__goto-bigcapital'}
-                className={'authentication-page__goto-bigcapital'}
+            >
-              >
+              <T id={'go_to_bigcapital_com'} />
-                <T id={'go_to_bigcapital_com'} />
+            </Link>
-              </Link>
 
-              <div class="authentication-page__form-wrapper">
+            <div class="authentication-page__form-wrapper">
-                {authenticationRoutes.map((route, index) => (
+              <div class="authentication-insider">
-                  <Route
+                <div className={'authentication-insider__logo-section'}>
-                    key={index}
+                  <Icon icon="bigcapital" height={37} width={214} />
-                    path={route.path}
+                </div>
-                    exact={route.exact}
+
-                    component={route.component}
+                <TransitionGroup>
-                  />
+                  <PageFade key={locationKey}>
-                ))}
+                    <Switch>
+                      {authenticationRoutes.map((route, index) => (
+                        <Route
+                          key={index}
+                          path={route.path}
+                          exact={route.exact}
+                          component={route.component}
+                        />
+                      ))}
+                    </Switch>
+                  </PageFade>
+                </TransitionGroup>                
               </div>
             </div>
-          </Switch>
+          </div>
         </BodyClassName>
       )}
     </>

client/src/containers/Authentication/AuthInsider.js

@@ -8,13 +8,12 @@ export default function AuthInsider({
   children,
 }) {
   return (
-    <div class="authentication-insider">
+    <div class="authentication-insider__content">
-      <div className={'authentication-insider__logo-section'}>
+      
-        <Icon icon="bigcapital" height={37} width={214} />
+      <div class="authentication-insider__form">
+        { children }
       </div>
 
-      <div class="authentication-insider__content">{ children }</div>
-
       <div class="authentication-insider__footer">
         <AuthCopyright />
       </div>

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 (
     <div class="setup-initializing-form">
       <h1>You organization is initializin...</h1>
@@ -26,5 +35,6 @@ function SetupInitializingForm({
 }
 
 export default compose(
-  withOrganizationActions
+  withOrganizationActions,
+  withWizard,
 )(SetupInitializingForm);

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 && !isOrganizationInitialized, redirectTo: 'initializing' },
-      { condition: !hasSubscriptions, redirectTo: 'organization' },
+      { condition: hasSubscriptions && !isOrganizationSeeded, redirectTo: 'organization' },
     ];
     const scenario = scenarios.find((scenario) => scenario.condition);
 

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-wizard-page';
-@import 'pages/register-organizaton.scss';
+@import 'pages/register-organizaton';
 
 // Views
   @import 'views/filter-dropdown';

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-top: 30px;
-    margin-left: 40px;
+    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: 500;
-      font-weight: 400;
-      // font-size: 28px;
       font-size: 22px;
-      // color: #444;
+      color: #444;
-      color: #555555;
       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
-  // .register-form {
+  // ----------------------------
-  //   // width: 690px;
+  .register-form {
-  //   // margin: 0px auto;
-  //   // padding: 85px 50px;
- 
 
-  //   &__agreement-section {
+    &__agreement-section {
-  //     margin-top: -10px;
+      margin-top: -10px;
 
-  //     p {
+      p {
-  //       font-size: 13px;
+        font-size: 13px;
-  //       margin-top: -10px;
+        margin-top: -10px;
-  //       margin-bottom: 24px;
+        margin-bottom: 24px;
-  //       line-height: 1.65;
+        line-height: 1.65;
-  //     }
+      }
-  //   }
+    }
 
-  //   &__submit-button-wrap {
+    &__submit-button-wrap {
-  //     margin: 25px 0px 25px 0px;
+      margin: 25px 0px 25px 0px;
 
-  //     .bp3-button {
+      .bp3-button {
-  //       min-height: 45px;
+        min-height: 45px;
-  //       background-color: #0052cc;
+        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;

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 {