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,145 +145,143 @@ function Register({ requestRegister, requestLogin }) {
   );
 
   return (
-    <AuthInsider>
+    <div className={'register-form'}>
-      <div className={'register-form'}>
+      <div className={'authentication-page__label-section'}>
-        <div className={'authentication-page__label-section'}>
+        <h3>
-          <h3>
+          <T id={'register_a_new_organization'} />
-            <T id={'register_a_new_organization'} />
+        </h3>
-          </h3>
+        <T id={'you_have_a_bigcapital_account'} />
-          <T id={'you_have_a_bigcapital_account'} />
+        <Link to="/auth/login">
-          <Link to="/auth/login">
+          {' '}
-            {' '}
+          <T id={'login'} />
-            <T id={'login'} />
+        </Link>
-          </Link>
+      </div>
-        </div>
 
-        <form onSubmit={handleSubmit} className={'authentication-page__form'}>
+      <form onSubmit={handleSubmit} className={'authentication-page__form'}>
-          
+        
-          <Row className={'name-section'}>
+        <Row className={'name-section'}>
-            <Col md={6}>
+          <Col md={6}>
-              <FormGroup
+            <FormGroup
-                label={<T id={'first_name'} />}
+              label={<T id={'first_name'} />}
+              intent={
+                errors.first_name && touched.first_name && Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage name={'first_name'} {...{ errors, touched }} />
+              }
+              className={'form-group--first-name'}
+            >
+              <InputGroup
                 intent={
                   errors.first_name && touched.first_name && Intent.DANGER
                 }
-                helperText={
+                {...getFieldProps('first_name')}
-                  <ErrorMessage name={'first_name'} {...{ errors, touched }} />
+              />
-                }
+            </FormGroup>
-                className={'form-group--first-name'}
+          </Col>
-              >
-                <InputGroup
-                  intent={
-                    errors.first_name && touched.first_name && Intent.DANGER
-                  }
-                  {...getFieldProps('first_name')}
-                />
-              </FormGroup>
-            </Col>
 
-            <Col md={6}>
+          <Col md={6}>
-              <FormGroup
+            <FormGroup
-                label={<T id={'last_name'} />}
+              label={<T id={'last_name'} />}
-                intent={errors.last_name && touched.last_name && Intent.DANGER}
+              intent={errors.last_name && touched.last_name && Intent.DANGER}
-                helperText={
+              helperText={
-                  <ErrorMessage name={'last_name'} {...{ errors, touched }} />
+                <ErrorMessage name={'last_name'} {...{ errors, touched }} />
+              }
+              className={'form-group--last-name'}
+            >
+              <InputGroup
+                intent={
+                  errors.last_name && touched.last_name && Intent.DANGER
                 }
-                className={'form-group--last-name'}
+                {...getFieldProps('last_name')}
-              >
+              />
-                <InputGroup
+            </FormGroup>
-                  intent={
+          </Col>
-                    errors.last_name && touched.last_name && Intent.DANGER
+        </Row>
-                  }
-                  {...getFieldProps('last_name')}
-                />
-              </FormGroup>
-            </Col>
-          </Row>
 
-          <FormGroup
+        <FormGroup
-            label={<T id={'phone_number'} />}
+          label={<T id={'phone_number'} />}
+          intent={
+            errors.phone_number && touched.phone_number && Intent.DANGER
+          }
+          helperText={
+            <ErrorMessage name={'phone_number'} {...{ errors, touched }} />
+          }
+          className={'form-group--phone-number'}
+        >
+          <InputGroup
             intent={
               errors.phone_number && touched.phone_number && Intent.DANGER
             }
-            helperText={
+            {...getFieldProps('phone_number')}
-              <ErrorMessage name={'phone_number'} {...{ errors, touched }} />
+          />
-            }
+        </FormGroup>
-            className={'form-group--phone-number'}
-          >
-            <InputGroup
-              intent={
-                errors.phone_number && touched.phone_number && Intent.DANGER
-              }
-              {...getFieldProps('phone_number')}
-            />
-          </FormGroup>
 
-          <FormGroup
+        <FormGroup
-            label={<T id={'email'} />}
+          label={<T id={'email'} />}
+          intent={errors.email && touched.email && Intent.DANGER}
+          helperText={
+            <ErrorMessage name={'email'} {...{ errors, touched }} />
+          }
+          className={'form-group--email'}
+        >
+          <InputGroup
             intent={errors.email && touched.email && Intent.DANGER}
-            helperText={
+            {...getFieldProps('email')}
-              <ErrorMessage name={'email'} {...{ errors, touched }} />
+          />
-            }
+        </FormGroup>
-            className={'form-group--email'}
-          >
-            <InputGroup
-              intent={errors.email && touched.email && Intent.DANGER}
-              {...getFieldProps('email')}
-            />
-          </FormGroup>
 
-          <FormGroup
+        <FormGroup
-            label={<T id={'password'} />}
+          label={<T id={'password'} />}
-            labelInfo={passwordRevealerTmp}
+          labelInfo={passwordRevealerTmp}
+          intent={errors.password && touched.password && Intent.DANGER}
+          helperText={
+            <ErrorMessage name={'password'} {...{ errors, touched }} />
+          }
+          className={'form-group--password has-password-revealer'}
+        >
+          <InputGroup
+            lang={true}
+            type={shown ? 'text' : 'password'}
             intent={errors.password && touched.password && Intent.DANGER}
-            helperText={
+            {...getFieldProps('password')}
-              <ErrorMessage name={'password'} {...{ errors, touched }} />
+          />
-            }
+        </FormGroup>
-            className={'form-group--password has-password-revealer'}
+
+        <div className={'register-form__agreement-section'}>
+          <p>
+            <T id={'signing_in_or_creating'} /> <br />
+            <Link>
+              <T id={'terms_conditions'} />
+            </Link>{' '}
+            <T id={'and'} />
+            <Link>
+              {' '}
+              <T id={'privacy_statement'} />
+            </Link>
+          </p>
+        </div>
+
+        <div className={'authentication-page__submit-button-wrap'}>
+          <Button
+            className={'btn-register'}
+            intent={Intent.PRIMARY}
+            type="submit"
+            fill={true}
+            loading={isSubmitting}
           >
-            <InputGroup
+            <T id={'register'} />
-              lang={true}
+          </Button>
-              type={shown ? 'text' : 'password'}
+        </div>
-              intent={errors.password && touched.password && Intent.DANGER}
+      </form>
-              {...getFieldProps('password')}
-            />
-          </FormGroup>
 
-          <div className={'register-form__agreement-section'}>
+      <If condition={isSubmitting}>
-            <p>
+        <div class="authentication-page__loading-overlay">
-              <T id={'signing_in_or_creating'} /> <br />
+          <Spinner size={50} />
-              <Link>
+        </div>
-                <T id={'terms_conditions'} />
+      </If>
-              </Link>{' '}
+    </div>
-              <T id={'and'} />
-              <Link>
-                {' '}
-                <T id={'privacy_statement'} />
-              </Link>
-            </p>
-          </div>
-
-          <div className={'authentication-page__submit-button-wrap'}>
-            <Button
-              className={'btn-register'}
-              intent={Intent.PRIMARY}
-              type="submit"
-              fill={true}
-              loading={isSubmitting}
-            >
-              <T id={'register'} />
-            </Button>
-          </div>
-        </form>
-
-        <If condition={isSubmitting}>
-          <div class="authentication-page__loading-overlay">
-            <Spinner size={50} />
-          </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,67 +1,66 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
 
-// Register Left Sidebar
+.register-page {
-.wizard-left-side {
+  
-  position: fixed;
+  &__right-section {
-  background: #778cab;
+    padding-left: 25%;
-  overflow: auto;
+  }
-  z-index: 1;
-  height: 100%;
-  max-width: 25%;
-  left: 0;
-  top: 0;
 
-  .content {
+  &__left-section{
-    display: flex;
+    position: fixed;
-    flex-direction: column;
+    background: #778cab;
-    color: #ffffff;
+    overflow: auto;
-    padding: 25px;
+    z-index: 1;
-    margin: 0px auto;
+    height: 100%;
-    border: none;
+    max-width: 25%;
-    cursor: pointer;
+    left: 0;
-    .content-logo {
+    top: 0;
-      margin-bottom: 45px;
-    }
-    .content-title {
-      font-size: 25px;
-      font-weight: 700;
-      line-height: normal;
-      margin-bottom: 25px;
-    }
-    .content-text {
-      font-size: 14px;
-    }
-    .content-org {
-      font-size: 14px;
 
-      span > a {
+    .content {
-        text-decoration: underline;
+      display: flex;
-        color: #ffffff;
+      flex-direction: column;
-        margin-left: 5px;
+      color: #ffffff;
+      padding: 25px;
+      margin: 0px auto;
+      border: none;
+      cursor: pointer;
+      .content-logo {
+        margin-bottom: 45px;
       }
-      span ::after {
+      .content-title {
-        border-top: 2px solid #707070;
+        font-size: 25px;
+        font-weight: 700;
+        line-height: normal;
+        margin-bottom: 25px;
       }
-    }
+      .content-text {
-    .content-contact {
-      position: absolute;
-      bottom: 15px;
-      a {
-        text-decoration: none;
-        color: #ffffff;
         font-size: 14px;
       }
+      .content-org {
+        font-size: 14px;
+
+        span > a {
+          text-decoration: underline;
+          color: #ffffff;
+          margin-left: 5px;
+        }
+        span ::after {
+          border-top: 2px solid #707070;
+        }
+      }
+      .content-contact {
+        position: absolute;
+        bottom: 15px;
+        a {
+          text-decoration: none;
+          color: #ffffff;
+          font-size: 14px;
+        }
+      }
     }
   }
 }
-.wizard-right-side {
-  padding-left: 25%;
-}
 
+ 
 // Register Wizard Steps
 .wizard-container {
   width: 80%;