feat: fix register page layout.

client/src/common/classes.js

@@ -0,0 +1,8 @@
+
+const CLASSES = {
+  DATATABLE_EDITOR: 'DATATABLE_EDITOR'
+};
+
+export {
+  CLASSES,
+}

client/src/components/App.js

@@ -9,6 +9,7 @@ import PrivateRoute from 'components/PrivateRoute';
 import Authentication from 'components/Authentication';
 import Dashboard from 'components/Dashboard/Dashboard';
 import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
+import RegisterWizardPage from 'containers/Authentication/Register/RegisterPage';
 
 import messages from 'lang/en';
 import 'style/App.scss';
@@ -31,6 +32,10 @@ function App({ locale }) {
                 <Authentication />
               </Route>
 
+              <Route path={'/register'}>
+                <RegisterWizardPage />
+              </Route>
+
               <Route path={'/'}>
                 <PrivateRoute component={Dashboard} />
               </Route>

client/src/containers/Authentication/AuthInsider.js

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

client/src/containers/Authentication/Login.js

@@ -103,7 +103,7 @@ function Login({
         <div className={'authentication-page__label-section'}>
           <h3><T id={'log_in'} /></h3>
           <T id={'need_bigcapital_account'} />
-          <Link to='/auth/register'> <T id={'create_an_account'} /></Link>
+          <Link to='/register'> <T id={'create_an_account'} /></Link>
         </div>
 
         <form onSubmit={handleSubmit} className={'authentication-page__form'}>

client/src/containers/Authentication/Register/RegisterLeftSection.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Icon } from 'components';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function RegisterLeftSection({
+
+}) {
+  const [org] = useState('LibyanSpider');
+
+  return (
+    <section className={'register-page__left-section'}>
+      <div className={'content'}>
+        <div className={'content-logo'}>
+          <Icon
+            icon={'bigcapital'}
+            width={165}
+            height={28}
+            className="bigcapital--alt"
+          />
+        </div>
+
+        <h1 className={'content-title'}>
+          <T id={'register_a_new_organization_now'} />
+        </h1>
+
+        <p className={'content-text'}>
+          <T id={'you_have_a_bigcapital_account'} />
+        </p>
+
+        <div className={'content-org'}>
+          <span>
+            <T id={'welcome'} />
+            {org},
+          </span>
+          <span>
+            <a href={'#!'}>
+              <T id={'sign_out'} />
+            </a>
+          </span>
+        </div>
+
+        <div className={'content-contact'}>
+          <a href={'#!'}>
+            <p>
+              <T id={'we_re_here_to_help'} /> {'+21892-791-8381'}
+            </p>
+          </a>
+          <a href={'#!'}>
+            <p>
+              <T id={'contact_us_technical_support'} />
+            </p>
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}

client/src/containers/Authentication/Register/RegisterOrganizationForm.js

@@ -21,7 +21,7 @@ import AppToaster from 'components/AppToaster';
 import { ListSelect, ErrorMessage, FieldRequiredHint } from 'components';
 import { useHistory } from 'react-router-dom';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
-import withRegisterOrganizationActions from './withRegisterOrganizationActions';
+import withRegisterOrganizationActions from 'containers/Authentication/withRegisterOrganizationActions';
 import { compose, optionsMapToArray } from 'utils';
 
 function RegisterOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {

client/src/containers/Authentication/Register/RegisterPage.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import RegisterRightSection from './RegisterRightSection';
+import RegisterLeftSection from './RegisterLeftSection';
+
+function RegisterWizardPage() {
+  return (
+    <div class="register-page">    
+      <RegisterLeftSection />
+      <RegisterRightSection />
+    </div>
+  );
+}
+
+export default RegisterWizardPage;

client/src/containers/Authentication/Register/RegisterRightSection.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import RegisterWizardSteps from './RegisterWizardSteps';
+import registerRoutes from 'routes/register';
+
+export default function RegisterRightSection () {
+
+  return (
+    <section className={'register-page__right-section'}>
+      <RegisterWizardSteps />
+
+      <div class="register-page-form">
+        <Switch>
+          { registerRoutes.map((route, index) => (
+            <Route
+              exact={route.exact}
+              key={index}
+              path={`${route.path}`}
+              component={route.component}
+            />
+          )) }
+        </Switch>
+      </div>
+    </section>
+  )
+}

client/src/containers/Authentication/Register/RegisterUserForm.js

@@ -17,12 +17,11 @@ import AppToaster from 'components/AppToaster';
 import ErrorMessage from 'components/ErrorMessage';
 import Icon from 'components/Icon';
 import { If } from 'components';
-import AuthInsider from 'containers/Authentication/AuthInsider';
+import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
-import withAuthenticationActions from './withAuthenticationActions';
 
 import { compose } from 'utils';
 
-function Register({ requestRegister, requestLogin }) {
+function RegisterUserForm({ requestRegister, requestLogin }) {
   const { formatMessage } = useIntl();
   const history = useHistory();
   const [shown, setShown] = useState(false);
@@ -146,7 +145,6 @@ function Register({ requestRegister, requestLogin }) {
   );
 
   return (
-    <AuthInsider>
     <div className={'register-form'}>
       <div className={'authentication-page__label-section'}>
         <h3>
@@ -283,8 +281,7 @@ function Register({ requestRegister, requestLogin }) {
         </div>
       </If>
     </div>
-    </AuthInsider>
   );
 }
 
-export default compose(withAuthenticationActions)(Register);
+export default compose(withAuthenticationActions)(RegisterUserForm);

client/src/containers/Authentication/Register/RegisterWizardSteps.js

@@ -3,7 +3,7 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function RegisterWizardSteps() {
   return (
-    <div>
+    <div className={'register-wizard-steps'}>
       <div className={'wizard-container'}>
         <ul className={'wizard-wrapper'}>
           <li>

client/src/containers/Authentication/RegisterLeftSidebar.js

@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-import Icon from 'components/Icon';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import RegisterWizardSteps from './RegisterWizardSteps';
-import RegisterOrganizationForm from './RegisterOrganizationForm';
-import Register from './Register';
-import Login from './Login';
-import RegisterSubscriptionForm from './RegisterSubscriptionForm';
-
-function RegisterLeftSidebar() {
-  const { formatMessage } = useIntl();
-  const [org] = useState('LibyanSpider');
-
-  console.log(org, 'EE');
-  return (
-    <div>
-      <section>
-        <div className={'wizard-left-side'}>
-          <div className={'content'}>
-            <div className={'content-logo'}>
-              <Icon
-                icon={'bigcapital'}
-                width={165}
-                height={28}
-                className="bigcapital--alt"
-              />
-            </div>
-            <h1 className={'content-title'}>
-              <T id={'register_a_new_organization_now'} />
-            </h1>
-
-            <p className={'content-text'}>
-              <T id={'you_have_a_bigcapital_account'} />
-            </p>
-            <div className={'content-org'}>
-              <span>
-                <T id={'welcome'} />
-                {org},
-              </span>
-              <span>
-                <a href={'#!'}>
-                  <T id={'sign_out'} />
-                </a>
-              </span>
-            </div>
-
-            <div className={'content-contact'}>
-              <a href={'#!'}>
-                <p>
-                  <T id={'we_re_here_to_help'} /> {'+21892-791-8381'}
-                </p>
-              </a>
-              <a href={'#!'}>
-                <p>
-                  <T id={'contact_us_technical_support'} />
-                </p>
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section>
-        <div className={'wizard-right-side'}>
-          {/* <RegisterWizardSteps /> */}
-          {/* <Register /> */}
-          {/* <Login/> */}
-          <RegisterOrganizationForm />
-          {/* <RegisterSubscriptionForm /> */}
-        </div>
-      </section>
-    </div>
-  );
-}
-
-export default RegisterLeftSidebar;

client/src/containers/Authentication/RegisterWizardPage.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Redirect, Route, Switch, Link } from 'react-router-dom';
-import RegisterLeftSidebar from './RegisterLeftSidebar';
-
-function RegisterWizardPage() {
-  return (
-    <>
-      <Switch>
-        <div>
-          <RegisterLeftSidebar />
-        </div>
-      </Switch>
-    </>
-  );
-}
-
-export default RegisterWizardPage;

client/src/containers/Sales/Estimate/EntriesItemsTable.js

@@ -3,7 +3,7 @@ import { omit } from 'lodash';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
-import CLASSES from 'components/classes';
+import { CLASSES } from 'common/classes';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
 import {

client/src/routes/authentication.js

@@ -9,12 +9,6 @@ export default [
       loader: () => import('containers/Authentication/Login'),
     }),
   },
-  {
-    path: `${BASE_URL}/register`,
-    component: LazyLoader({
-      loader: () => import('containers/Authentication/Register'),
-    }),
-  },
   {
     path: `${BASE_URL}/send_reset_password`,
     component: LazyLoader({
@@ -32,11 +26,5 @@ export default [
     component: LazyLoader({
       loader: () => import('containers/Authentication/InviteAccept'),
     }),
-  },
+  }
-  {
-    path: `${BASE_URL}/wizard`,
-    component: LazyLoader({
-      loader: () => import('containers/Authentication/RegisterWizardPage'),
-    }),
-  },
 ];

client/src/routes/register.js

@@ -0,0 +1,23 @@
+import LazyLoader from 'components/LazyLoader';
+
+export default [
+  
+  {
+    path: '/register/subscription',
+    component: LazyLoader({
+      loader: () => import('containers/Authentication/Register/RegisterSubscriptionForm'),
+    }),
+  },
+  {
+    path: '/register/organization',
+    component: LazyLoader({
+      loader: () => import('containers/Authentication/Register/RegisterOrganizationForm'),
+    }),
+  },
+  {
+    path: `/`,
+    component: LazyLoader({
+      loader: () => import('containers/Authentication/Register/RegisterUserForm'),
+    }),
+  },
+];

client/src/style/pages/register-wizard-page.scss

@@ -1,11 +1,11 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
 
-// Register Left Sidebar
+.register-page {
-.wizard-left-side {
+  
+  &__right-section {
+    padding-left: 25%;
+  }
+
+  &__left-section{
     position: fixed;
     background: #778cab;
     overflow: auto;
@@ -57,10 +57,9 @@
         }
       }
     }
+  }
 }
-.wizard-right-side {
+
-  padding-left: 25%;
-}
  
 // Register Wizard Steps
 .wizard-container {