mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
Merge branch 'RegisterWizard' of https://github.com/abouolia/Bigcapital into RegisterWizard
This commit is contained in:
elforjani3
@@ -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">
|
||||
<Link
|
||||
to={'bigcapital.io'}
|
||||
className={'authentication-page__goto-bigcapital'}
|
||||
>
|
||||
<T id={'go_to_bigcapital_com'} />
|
||||
</Link>
|
||||
<div class="authentication-page">
|
||||
<Link
|
||||
to={'bigcapital.io'}
|
||||
className={'authentication-page__goto-bigcapital'}
|
||||
>
|
||||
<T id={'go_to_bigcapital_com'} />
|
||||
</Link>
|
||||
|
||||
<div class="authentication-page__form-wrapper">
|
||||
{authenticationRoutes.map((route, index) => (
|
||||
<Route
|
||||
key={index}
|
||||
path={route.path}
|
||||
exact={route.exact}
|
||||
component={route.component}
|
||||
/>
|
||||
))}
|
||||
<div class="authentication-page__form-wrapper">
|
||||
<div class="authentication-insider">
|
||||
<div className={'authentication-insider__logo-section'}>
|
||||
<Icon icon="bigcapital" height={37} width={214} />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -8,13 +8,12 @@ export default function AuthInsider({
|
||||
children,
|
||||
}) {
|
||||
return (
|
||||
<div class="authentication-insider">
|
||||
<div className={'authentication-insider__logo-section'}>
|
||||
<Icon icon="bigcapital" height={37} width={214} />
|
||||
<div class="authentication-insider__content">
|
||||
|
||||
<div class="authentication-insider__form">
|
||||
{ children }
|
||||
</div>
|
||||
|
||||
<div class="authentication-insider__content">{ children }</div>
|
||||
|
||||
<div class="authentication-insider__footer">
|
||||
<AuthCopyright />
|
||||
</div>
|
||||
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user