From b8060010d638a9a8566994a01929d01760a31ca9 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 10 Oct 2020 15:05:18 +0200 Subject: [PATCH] feat: fix register page layout. --- client/src/common/classes.js | 8 + client/src/common/errors.js | 0 client/src/components/App.js | 5 + .../containers/Authentication/AuthInsider.js | 4 +- client/src/containers/Authentication/Login.js | 2 +- .../Register/RegisterLeftSection.js | 57 ++++ .../RegisterOrganizationForm.js | 2 +- .../Authentication/Register/RegisterPage.js | 14 + .../Register/RegisterRightSection.js | 26 ++ .../RegisterSubscriptionForm.js | 0 .../RegisterUserForm.js} | 249 +++++++++--------- .../{ => Register}/RegisterWizardSteps.js | 2 +- .../Authentication/RegisterLeftSidebar.js | 75 ------ .../Authentication/RegisterWizardPage.js | 17 -- .../Sales/Estimate/EntriesItemsTable.js | 2 +- client/src/routes/authentication.js | 14 +- client/src/routes/register.js | 23 ++ .../src/style/pages/register-wizard-page.scss | 105 ++++---- 18 files changed, 315 insertions(+), 290 deletions(-) create mode 100644 client/src/common/classes.js create mode 100644 client/src/common/errors.js create mode 100644 client/src/containers/Authentication/Register/RegisterLeftSection.js rename client/src/containers/Authentication/{ => Register}/RegisterOrganizationForm.js (99%) create mode 100644 client/src/containers/Authentication/Register/RegisterPage.js create mode 100644 client/src/containers/Authentication/Register/RegisterRightSection.js rename client/src/containers/Authentication/{ => Register}/RegisterSubscriptionForm.js (100%) rename client/src/containers/Authentication/{Register.js => Register/RegisterUserForm.js} (50%) rename client/src/containers/Authentication/{ => Register}/RegisterWizardSteps.js (94%) delete mode 100644 client/src/containers/Authentication/RegisterLeftSidebar.js delete mode 100644 client/src/containers/Authentication/RegisterWizardPage.js create mode 100644 client/src/routes/register.js diff --git a/client/src/common/classes.js b/client/src/common/classes.js new file mode 100644 index 000000000..eeb71cf89 --- /dev/null +++ b/client/src/common/classes.js @@ -0,0 +1,8 @@ + +const CLASSES = { + DATATABLE_EDITOR: 'DATATABLE_EDITOR' +}; + +export { + CLASSES, +} \ No newline at end of file diff --git a/client/src/common/errors.js b/client/src/common/errors.js new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/components/App.js b/client/src/components/App.js index d4e0add38..51c3a8acb 100644 --- a/client/src/components/App.js +++ b/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 }) { + + + + diff --git a/client/src/containers/Authentication/AuthInsider.js b/client/src/containers/Authentication/AuthInsider.js index 8e52a4b28..be0ee3601 100644 --- a/client/src/containers/Authentication/AuthInsider.js +++ b/client/src/containers/Authentication/AuthInsider.js @@ -10,10 +10,10 @@ export default function AuthInsider({ return (
- {/* */} +
-
{children}
+
{ children }
diff --git a/client/src/containers/Authentication/Login.js b/client/src/containers/Authentication/Login.js index ccdcda0ad..9dc911ab9 100644 --- a/client/src/containers/Authentication/Login.js +++ b/client/src/containers/Authentication/Login.js @@ -103,7 +103,7 @@ function Login({

- +
diff --git a/client/src/containers/Authentication/Register/RegisterLeftSection.js b/client/src/containers/Authentication/Register/RegisterLeftSection.js new file mode 100644 index 000000000..3524a385e --- /dev/null +++ b/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 ( +
+
+
+ +
+ +

+ +

+ +

+ +

+ +
+ + + {org}, + + + + + + +
+ + +
+
+ ) +} \ No newline at end of file diff --git a/client/src/containers/Authentication/RegisterOrganizationForm.js b/client/src/containers/Authentication/Register/RegisterOrganizationForm.js similarity index 99% rename from client/src/containers/Authentication/RegisterOrganizationForm.js rename to client/src/containers/Authentication/Register/RegisterOrganizationForm.js index b35ae69ee..3f155608e 100644 --- a/client/src/containers/Authentication/RegisterOrganizationForm.js +++ b/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 }) { diff --git a/client/src/containers/Authentication/Register/RegisterPage.js b/client/src/containers/Authentication/Register/RegisterPage.js new file mode 100644 index 000000000..f8a3f350c --- /dev/null +++ b/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 ( +
+ + +
+ ); +} + +export default RegisterWizardPage; diff --git a/client/src/containers/Authentication/Register/RegisterRightSection.js b/client/src/containers/Authentication/Register/RegisterRightSection.js new file mode 100644 index 000000000..3f3231e26 --- /dev/null +++ b/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 ( +
+ + +
+ + { registerRoutes.map((route, index) => ( + + )) } + +
+
+ ) +} \ No newline at end of file diff --git a/client/src/containers/Authentication/RegisterSubscriptionForm.js b/client/src/containers/Authentication/Register/RegisterSubscriptionForm.js similarity index 100% rename from client/src/containers/Authentication/RegisterSubscriptionForm.js rename to client/src/containers/Authentication/Register/RegisterSubscriptionForm.js diff --git a/client/src/containers/Authentication/Register.js b/client/src/containers/Authentication/Register/RegisterUserForm.js similarity index 50% rename from client/src/containers/Authentication/Register.js rename to client/src/containers/Authentication/Register/RegisterUserForm.js index 2f15d64c7..d2d05892b 100644 --- a/client/src/containers/Authentication/Register.js +++ b/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 './withAuthenticationActions'; +import withAuthenticationActions from 'containers/Authentication/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 ( - -
-
-

- -

- - - {' '} - - -
+
+
+

+ +

+ + + {' '} + + +
- - - - - } + + + + + } + intent={ + errors.first_name && touched.first_name && Intent.DANGER + } + helperText={ + + } + className={'form-group--first-name'} + > + - } - className={'form-group--first-name'} - > - - - + {...getFieldProps('first_name')} + /> + + - - } - intent={errors.last_name && touched.last_name && Intent.DANGER} - helperText={ - + + } + intent={errors.last_name && touched.last_name && Intent.DANGER} + helperText={ + + } + className={'form-group--last-name'} + > + - - - - + {...getFieldProps('last_name')} + /> + + + - } + } + intent={ + errors.phone_number && touched.phone_number && Intent.DANGER + } + helperText={ + + } + className={'form-group--phone-number'} + > + - } - className={'form-group--phone-number'} - > - - + {...getFieldProps('phone_number')} + /> + - } + } + intent={errors.email && touched.email && Intent.DANGER} + helperText={ + + } + className={'form-group--email'} + > + - } - className={'form-group--email'} - > - - + {...getFieldProps('email')} + /> + - } - labelInfo={passwordRevealerTmp} + } + labelInfo={passwordRevealerTmp} + intent={errors.password && touched.password && Intent.DANGER} + helperText={ + + } + className={'form-group--password has-password-revealer'} + > + - } - className={'form-group--password has-password-revealer'} + {...getFieldProps('password')} + /> + + +
+

+
+ + + {' '} + + + {' '} + + +

+
+ +
+ +
+ -
-

-
- - - {' '} - - - {' '} - - -

-
- -
- -
- - - -
- -
- -
- + +
+ +
+ +
); } -export default compose(withAuthenticationActions)(Register); +export default compose(withAuthenticationActions)(RegisterUserForm); diff --git a/client/src/containers/Authentication/RegisterWizardSteps.js b/client/src/containers/Authentication/Register/RegisterWizardSteps.js similarity index 94% rename from client/src/containers/Authentication/RegisterWizardSteps.js rename to client/src/containers/Authentication/Register/RegisterWizardSteps.js index f49c5e3cc..3d390ffaf 100644 --- a/client/src/containers/Authentication/RegisterWizardSteps.js +++ b/client/src/containers/Authentication/Register/RegisterWizardSteps.js @@ -3,7 +3,7 @@ import { FormattedMessage as T, useIntl } from 'react-intl'; function RegisterWizardSteps() { return ( -
+
  • diff --git a/client/src/containers/Authentication/RegisterLeftSidebar.js b/client/src/containers/Authentication/RegisterLeftSidebar.js deleted file mode 100644 index fd3982581..000000000 --- a/client/src/containers/Authentication/RegisterLeftSidebar.js +++ /dev/null @@ -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 ( -
    -
    -
    -
    -
    - -
    -

    - -

    - -

    - -

    -
    - - - {org}, - - - - - - -
    - - -
    -
    -
    -
    -
    - {/* */} - {/* */} - {/* */} - - {/* */} -
    -
    -
    - ); -} - -export default RegisterLeftSidebar; diff --git a/client/src/containers/Authentication/RegisterWizardPage.js b/client/src/containers/Authentication/RegisterWizardPage.js deleted file mode 100644 index 1ac0adca0..000000000 --- a/client/src/containers/Authentication/RegisterWizardPage.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Redirect, Route, Switch, Link } from 'react-router-dom'; -import RegisterLeftSidebar from './RegisterLeftSidebar'; - -function RegisterWizardPage() { - return ( - <> - -
    - -
    -     - - ); -} - -export default RegisterWizardPage; diff --git a/client/src/containers/Sales/Estimate/EntriesItemsTable.js b/client/src/containers/Sales/Estimate/EntriesItemsTable.js index 44192fcad..aeee8505e 100644 --- a/client/src/containers/Sales/Estimate/EntriesItemsTable.js +++ b/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 { diff --git a/client/src/routes/authentication.js b/client/src/routes/authentication.js index 1d9e11b0a..a4d1c32ac 100644 --- a/client/src/routes/authentication.js +++ b/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'), - }), - }, + } ]; diff --git a/client/src/routes/register.js b/client/src/routes/register.js new file mode 100644 index 000000000..44277cd21 --- /dev/null +++ b/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'), + }), + }, +]; diff --git a/client/src/style/pages/register-wizard-page.scss b/client/src/style/pages/register-wizard-page.scss index 3e316f569..57407a948 100644 --- a/client/src/style/pages/register-wizard-page.scss +++ b/client/src/style/pages/register-wizard-page.scss @@ -1,67 +1,66 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} -// Register Left Sidebar -.wizard-left-side { - position: fixed; - background: #778cab; - overflow: auto; - z-index: 1; - height: 100%; - max-width: 25%; - left: 0; - top: 0; +.register-page { + + &__right-section { + padding-left: 25%; + } - .content { - display: flex; - flex-direction: column; - color: #ffffff; - padding: 25px; - margin: 0px auto; - border: none; - cursor: pointer; - .content-logo { - 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; + &__left-section{ + position: fixed; + background: #778cab; + overflow: auto; + z-index: 1; + height: 100%; + max-width: 25%; + left: 0; + top: 0; - span > a { - text-decoration: underline; - color: #ffffff; - margin-left: 5px; + .content { + display: flex; + flex-direction: column; + color: #ffffff; + padding: 25px; + margin: 0px auto; + border: none; + cursor: pointer; + .content-logo { + margin-bottom: 45px; } - span ::after { - border-top: 2px solid #707070; + .content-title { + font-size: 25px; + font-weight: 700; + line-height: normal; + margin-bottom: 25px; } - } - .content-contact { - position: absolute; - bottom: 15px; - a { - text-decoration: none; - color: #ffffff; + .content-text { 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%;