mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 21:30:31 +00:00
WIP/ Feature :Register wizard coding style
This commit is contained in:
elforjani3
@@ -7,23 +7,17 @@ export default function AuthInsider({
|
||||
copyright = true,
|
||||
children,
|
||||
}) {
|
||||
|
||||
return (
|
||||
<div class="authentication-insider">
|
||||
<div className={'authentication-insider__logo-section'}>
|
||||
<Icon
|
||||
icon='bigcapital'
|
||||
height={37}
|
||||
width={214} />
|
||||
</div>
|
||||
|
||||
<div class="authentication-insider__content">
|
||||
{ children }
|
||||
{/* <Icon icon="bigcapital" height={37} width={214} /> */}
|
||||
</div>
|
||||
|
||||
<div class="authentication-insider__content">{children}</div>
|
||||
|
||||
<div class="authentication-insider__footer">
|
||||
<AuthCopyright />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
75
client/src/containers/Authentication/RegisterLeftSidebar.js
Normal file
75
client/src/containers/Authentication/RegisterLeftSidebar.js
Normal file
@@ -0,0 +1,75 @@
|
||||
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 />
|
||||
{/* <RegisterOrganizationForm /> */}
|
||||
{/* <Register /> */}
|
||||
{/* <Login/> */}
|
||||
<RegisterSubscriptionForm />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RegisterLeftSidebar;
|
||||
368
client/src/containers/Authentication/RegisterOrganizationForm.js
Normal file
368
client/src/containers/Authentication/RegisterOrganizationForm.js
Normal file
@@ -0,0 +1,368 @@
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { Row, Col } from 'react-grid-system';
|
||||
import {
|
||||
Button,
|
||||
Intent,
|
||||
FormGroup,
|
||||
MenuItem,
|
||||
Classes,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import moment from 'moment';
|
||||
import classNames from 'classnames';
|
||||
import { TimezonePicker } from '@blueprintjs/timezone';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { momentFormatter, tansformDateValue } from 'utils';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
|
||||
import { ListSelect, ErrorMessage, FieldRequiredHint } from 'components';
|
||||
|
||||
function RegisterOrganizationForm() {
|
||||
const { formatMessage } = useIntl();
|
||||
const [selected, setSelected] = useState();
|
||||
|
||||
const baseCurrency = [
|
||||
{ id: 0, name: 'LYD - Libyan Dinar', value: 'LYD' },
|
||||
{ id: 1, name: 'USD - American Dollar', value: 'USD' },
|
||||
];
|
||||
|
||||
const languages = [
|
||||
{ id: 0, name: 'English', value: 'en' },
|
||||
{ id: 1, name: 'Arabic', value: 'ar' },
|
||||
];
|
||||
|
||||
const fiscalYear = [
|
||||
{
|
||||
id: 0,
|
||||
name: `${formatMessage({ id: 'january' })} - ${formatMessage({
|
||||
id: 'december',
|
||||
})}`,
|
||||
value: 'january',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: `${formatMessage({ id: 'february' })} - ${formatMessage({
|
||||
id: 'january',
|
||||
})}`,
|
||||
value: 'february',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: `${formatMessage({ id: 'march' })} - ${formatMessage({
|
||||
id: 'february',
|
||||
})}`,
|
||||
value: 'March',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: `${formatMessage({ id: 'april' })} - ${formatMessage({
|
||||
id: 'march',
|
||||
})}`,
|
||||
value: 'april',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: `${formatMessage({ id: 'may' })} - ${formatMessage({
|
||||
id: 'april',
|
||||
})}`,
|
||||
value: 'may',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: `${formatMessage({ id: 'june' })} - ${formatMessage({
|
||||
id: 'may',
|
||||
})}`,
|
||||
value: 'june',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: `${formatMessage({ id: 'july' })} - ${formatMessage({
|
||||
id: 'june',
|
||||
})}`,
|
||||
value: 'july',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: `${formatMessage({ id: 'august' })} - ${formatMessage({
|
||||
id: 'july',
|
||||
})}`,
|
||||
value: 'August',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: `${formatMessage({ id: 'september' })} - ${formatMessage({
|
||||
id: 'august',
|
||||
})}`,
|
||||
value: 'september',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: `${formatMessage({ id: 'october' })} - ${formatMessage({
|
||||
id: 'november',
|
||||
})}`,
|
||||
value: 'october',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: `${formatMessage({ id: 'november' })} - ${formatMessage({
|
||||
id: 'october',
|
||||
})}`,
|
||||
value: 'november',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: `${formatMessage({ id: 'december' })} - ${formatMessage({
|
||||
id: 'november',
|
||||
})}`,
|
||||
value: 'december',
|
||||
},
|
||||
];
|
||||
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
date_start: Yup.date().required(),
|
||||
// .label(formatMessage({id:''}))
|
||||
base_currency: Yup.string().required(
|
||||
formatMessage({ id: 'base_currency_' }),
|
||||
),
|
||||
language: Yup.string()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'language' })),
|
||||
fiscal_year: Yup.string()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'fiscal_year_' })),
|
||||
time_zone: Yup.string(),
|
||||
});
|
||||
|
||||
const initialValues = useMemo(() => ({}), []);
|
||||
|
||||
const {
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleSubmit,
|
||||
setFieldValue,
|
||||
getFieldProps,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: (values, { setSubmitting, setErrors }) => {},
|
||||
});
|
||||
|
||||
const onItemsSelect = (filedName) => {
|
||||
return (filed) => {
|
||||
setSelected({
|
||||
...selected,
|
||||
[filedName]: filed,
|
||||
});
|
||||
setFieldValue(filedName, filed.value);
|
||||
};
|
||||
};
|
||||
|
||||
const filterItems = (query, item, _index, exactMatch) => {
|
||||
const normalizedTitle = item.name.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
|
||||
if (exactMatch) {
|
||||
return normalizedTitle === normalizedQuery;
|
||||
} else {
|
||||
return normalizedTitle.indexOf(normalizedQuery) >= 0;
|
||||
}
|
||||
};
|
||||
|
||||
const onItemRenderer = (item, { handleClick }) => (
|
||||
<MenuItem key={item.id} text={item.name} onClick={handleClick} />
|
||||
);
|
||||
|
||||
const handleTimeZoneChange = useCallback(
|
||||
(time_zone) => {
|
||||
setFieldValue('time_zone', time_zone);
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
const handleDateChange = useCallback(
|
||||
(date_filed) => (date) => {
|
||||
const formatted = moment(date).format('YYYY-MM-DD');
|
||||
setFieldValue(date_filed, formatted);
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={'register-organizaton-form'}>
|
||||
<div className={'register-org-title'}>
|
||||
<h2>
|
||||
<T id={'let_s_get_started'} />
|
||||
</h2>
|
||||
<p>
|
||||
<T id={'tell_the_system_a_little_bit_about_your_organization'} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onClick={handleSubmit}>
|
||||
<h3>
|
||||
<T id={'organization_details'} />
|
||||
</h3>
|
||||
|
||||
{/* financial starting date */}
|
||||
<FormGroup
|
||||
label={<T id={'financial_starting_date'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={errors.date_start && touched.date_start && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name={'date_start'} />
|
||||
}
|
||||
>
|
||||
<DateInput
|
||||
fill={true}
|
||||
{...momentFormatter('MMMM Do YYYY')}
|
||||
value={tansformDateValue(values.date_start)}
|
||||
onChange={handleDateChange('date_start')}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
<Row>
|
||||
{/* base currency */}
|
||||
<Col width={300}>
|
||||
<FormGroup
|
||||
label={<T id={'base_currency'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames(
|
||||
'form-group--base-currency',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
intent={
|
||||
errors.base_currency && touched.base_currency && Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage name={'base_currency'} {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<ListSelect
|
||||
items={baseCurrency}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
itemRenderer={onItemRenderer}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('base_currency')}
|
||||
itemPredicate={filterItems}
|
||||
selectedItem={values.base_currency}
|
||||
selectedItemProp={'value'}
|
||||
// defaultText={<T id={'select_base_currency'} />}
|
||||
defaultText={'LYD - Libyan Dinar'}
|
||||
labelProp={'name'}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
{/* language */}
|
||||
<Col width={300}>
|
||||
<FormGroup
|
||||
label={<T id={'language'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames(
|
||||
'form-group--language',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
intent={errors.language && touched.language && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name={'language'} {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<ListSelect
|
||||
items={languages}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
itemRenderer={onItemRenderer}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('language')}
|
||||
itemPredicate={filterItems}
|
||||
selectedItem={values.language}
|
||||
selectedItemProp={'value'}
|
||||
defaultText={'English'}
|
||||
// defaultText={<T id={'select_language'} />}
|
||||
labelProp={'name'}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
{/* fiscal Year */}
|
||||
<FormGroup
|
||||
label={<T id={'fiscal_year'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames(
|
||||
'form-group--fiscal_year',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name={'fiscal_year'} />
|
||||
}
|
||||
>
|
||||
<ListSelect
|
||||
items={fiscalYear}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
itemRenderer={onItemRenderer}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('fiscal_year')}
|
||||
itemPredicate={filterItems}
|
||||
selectedItem={values.fiscal_year}
|
||||
selectedItemProp={'value'}
|
||||
defaultText={'January - December'}
|
||||
// defaultText={<T id={'select_fiscal_year'} />}
|
||||
labelProp={'name'}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* Time zone */}
|
||||
<FormGroup
|
||||
label={<T id={'time_zone'} />}
|
||||
className={classNames(
|
||||
'form-group--time-zone',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
intent={errors.time_zone && touched.time_zone && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage {...{ errors, touched }} name={'time_zone'} />
|
||||
}
|
||||
>
|
||||
<TimezonePicker
|
||||
value={values.time_zone}
|
||||
onChange={handleTimeZoneChange}
|
||||
valueDisplayFormat="composite"
|
||||
showLocalTimezone={true}
|
||||
placeholder={<T id={'select_time_zone'} />}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<p className={'register-org-note'}>
|
||||
<T
|
||||
id={
|
||||
'note_you_can_change_your_preferences_later_in_dashboard_if_needed'
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<div className={'register-org-button'}>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
// loading={isSubmitting}
|
||||
>
|
||||
<T id={'save_continue'} />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RegisterOrganizationForm;
|
||||
@@ -0,0 +1,40 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { Button, Intent } from '@blueprintjs/core';
|
||||
import BillingTab from 'containers/Subscriptions/BillingTab';
|
||||
|
||||
function RegisterSubscriptionForm({}) {
|
||||
const ValidationSchema = Yup.object().shape({});
|
||||
|
||||
const initialValues = useMemo(() => ({}), []);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: (values, { setSubmitting, setErrors }) => {},
|
||||
});
|
||||
return (
|
||||
<div className={'register-subscription-form'}>
|
||||
<form className={'billing-form'}>
|
||||
<BillingTab formik={formik} />
|
||||
|
||||
<div className={'subscribe-button'}>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
loading={formik.isSubmitting}
|
||||
>
|
||||
<T id={'subscribe'} />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RegisterSubscriptionForm;
|
||||
17
client/src/containers/Authentication/RegisterWizardPage.js
Normal file
17
client/src/containers/Authentication/RegisterWizardPage.js
Normal file
@@ -0,0 +1,17 @@
|
||||
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;
|
||||
36
client/src/containers/Authentication/RegisterWizardSteps.js
Normal file
36
client/src/containers/Authentication/RegisterWizardSteps.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
|
||||
function RegisterWizardSteps() {
|
||||
return (
|
||||
<div>
|
||||
<div className={'wizard-container'}>
|
||||
<ul className={'wizard-wrapper'}>
|
||||
<li>
|
||||
<p className={'wizard-info'}>
|
||||
<T id={'organization_register'} />
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className={'wizard-info'}>
|
||||
<T id={'payment_or_trial'} />
|
||||
</p>
|
||||
</li>
|
||||
<li className="complete">
|
||||
<p className={'wizard-info'}>
|
||||
<T id={'getting_started'} />
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p className={'wizard-info'}>
|
||||
<T id={'initializing'} />
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RegisterWizardSteps;
|
||||
@@ -121,7 +121,8 @@ function BillingTab({ formik }) {
|
||||
</p>
|
||||
<div className={'payment-method-continer'} ref={billingRef}>
|
||||
<a
|
||||
href={'#'}
|
||||
href={'#!'}
|
||||
formik={formik}
|
||||
id={'monthly'}
|
||||
className={'period-container billing-selected'}
|
||||
>
|
||||
@@ -135,7 +136,7 @@ function BillingTab({ formik }) {
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href={'#'} id={'yearly'} className={'period-container'}>
|
||||
<a href={'#!'} id={'yearly'} className={'period-container'}>
|
||||
<span className={'bg-period'}>
|
||||
<T id={'yearly'} />
|
||||
</span>
|
||||
|
||||
@@ -740,4 +740,25 @@ export default {
|
||||
sell_account: 'Sell Account',
|
||||
cost_account: 'Cost Account',
|
||||
inventory_account: 'Inventory Account',
|
||||
|
||||
register_a_new_organization_now: 'Register a New Organization now!.',
|
||||
you_have_a_bigcapital_account: 'You have a Bigcapital account ',
|
||||
contact_us_technical_support: 'Contact us - Technical Support',
|
||||
let_s_get_started: 'Let’s Get Started',
|
||||
tell_the_system_a_little_bit_about_your_organization:
|
||||
'Tell the system a little bit about your organization.',
|
||||
organization_details: 'Organization details',
|
||||
financial_starting_date: 'Financial starting date ',
|
||||
base_currency: 'Base Currency',
|
||||
note_you_can_change_your_preferences_later_in_dashboard_if_needed:
|
||||
'Note: You can change your preferences later in dashboard, if needed.',
|
||||
save_continue: 'Save & Continue',
|
||||
organization_register: 'Organization Register',
|
||||
getting_started: 'Getting started',
|
||||
payment_or_trial: 'Payment or trial',
|
||||
initializing: 'Initializing',
|
||||
fiscal_year_: 'Fiscal year',
|
||||
welcome: 'Welcome ',
|
||||
sign_out: 'Sign out',
|
||||
we_re_here_to_help: 'We’re Here to Help!',
|
||||
};
|
||||
|
||||
@@ -12,7 +12,7 @@ export default [
|
||||
{
|
||||
path: `${BASE_URL}/register`,
|
||||
component: LazyLoader({
|
||||
loader: () => import('containers/Authentication/Register'),
|
||||
loader: () => import('containers/Authentication/Register'),
|
||||
}),
|
||||
},
|
||||
{
|
||||
@@ -33,4 +33,10 @@ export default [
|
||||
loader: () => import('containers/Authentication/InviteAccept'),
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: `${BASE_URL}/wizard`,
|
||||
component: LazyLoader({
|
||||
loader: () => import('containers/Authentication/RegisterWizardPage'),
|
||||
}),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -63,12 +63,14 @@ $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';
|
||||
|
||||
// Views
|
||||
@import 'views/filter-dropdown';
|
||||
@import 'views/filter-dropdown';
|
||||
@import 'views/sidebar';
|
||||
@import 'pages/estimate';
|
||||
|
||||
|
||||
.App {
|
||||
min-width: 960px;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,28 @@
|
||||
|
||||
|
||||
.authentication-insider{
|
||||
.authentication-insider {
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&__logo-section{
|
||||
&__logo-section {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
&__content{
|
||||
&__content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__footer{
|
||||
.auth-copyright{
|
||||
&__footer {
|
||||
.auth-copyright {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.bp3-icon-bigcapital{
|
||||
.bp3-icon-bigcapital {
|
||||
margin-top: 9px;
|
||||
|
||||
svg{
|
||||
path{
|
||||
fill: #A3A3A3;
|
||||
svg {
|
||||
path {
|
||||
fill: #a3a3a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -33,54 +31,55 @@
|
||||
}
|
||||
|
||||
.authentication-page {
|
||||
|
||||
&__goto-bigcapital{
|
||||
&__goto-bigcapital {
|
||||
position: fixed;
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
||||
.bp3-input {
|
||||
min-height: 40px;
|
||||
border: 2px solid #E3E3E3;
|
||||
min-height: 38px;
|
||||
// border: 2px solid #E3E3E3;
|
||||
}
|
||||
.bp3-form-group{
|
||||
margin-bottom: 25px;
|
||||
// .bp3-form-group{
|
||||
// margin-bottom: 25px;
|
||||
|
||||
&.bp3-intent-danger{
|
||||
.bp3-input{
|
||||
border-color: #eea9a9;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &.bp3-intent-danger{
|
||||
// .bp3-input{
|
||||
// border-color: #eea9a9;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.bp3-form-group.has-password-revealer{
|
||||
|
||||
.bp3-label{
|
||||
.bp3-form-group.has-password-revealer {
|
||||
.bp3-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.password-revealer{
|
||||
.text{
|
||||
.password-revealer {
|
||||
.text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button.bp3-fill.bp3-intent-primary{
|
||||
.bp3-button.bp3-fill.bp3-intent-primary {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__label-section{
|
||||
&__label-section {
|
||||
margin-bottom: 34px;
|
||||
color: #555;
|
||||
|
||||
h3{
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #444;
|
||||
|
||||
h3 {
|
||||
// font-weight: 500;
|
||||
font-weight: 400;
|
||||
// font-size: 28px;
|
||||
font-size: 22px;
|
||||
// color: #444;
|
||||
color: #555555;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
@@ -92,24 +91,24 @@
|
||||
|
||||
&__form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 415px;
|
||||
padding: 15px;
|
||||
// max-width: 415px;
|
||||
// padding: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__footer-links{
|
||||
&__footer-links {
|
||||
padding: 9px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-align: center;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
a{
|
||||
a {
|
||||
color: #0052cc;
|
||||
}
|
||||
}
|
||||
|
||||
&__loading-overlay{
|
||||
&__loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -132,9 +131,11 @@
|
||||
// Login Form
|
||||
// ------------------------------
|
||||
.login-form {
|
||||
|
||||
.checkbox{
|
||||
&--remember-me{
|
||||
width: 690px;
|
||||
margin: 0px auto;
|
||||
padding: 85px 50px;
|
||||
.checkbox {
|
||||
&--remember-me {
|
||||
margin: -4px 0 28px 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -143,10 +144,13 @@
|
||||
|
||||
// Register Form
|
||||
.register-form {
|
||||
width: 690px;
|
||||
margin: 0px auto;
|
||||
padding: 85px 50px;
|
||||
|
||||
&__agreement-section {
|
||||
margin-top: -10px;
|
||||
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-top: -10px;
|
||||
@@ -166,7 +170,6 @@
|
||||
}
|
||||
|
||||
.invite-form {
|
||||
|
||||
&__statement-section {
|
||||
margin-top: -10px;
|
||||
p {
|
||||
@@ -176,8 +179,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.authentication-page__loading-overlay{
|
||||
.authentication-page__loading-overlay {
|
||||
background: rgba(252, 253, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,20 +34,20 @@
|
||||
.plan-header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.plan-name {
|
||||
background: #3657ff;
|
||||
border-radius: 3px;
|
||||
padding: 1px 8px 1px 8px;
|
||||
padding: 2px 8px 2px 8px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 16px;
|
||||
height: 21px;
|
||||
}
|
||||
.plan-description {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 2em;
|
||||
line-height: 1.8rem;
|
||||
|
||||
&.plan-description ul {
|
||||
list-style: none;
|
||||
@@ -113,10 +113,10 @@
|
||||
.bg-title {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #666666;
|
||||
}
|
||||
.bg-message {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 23px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.license-container {
|
||||
@@ -139,9 +139,11 @@
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #444444;
|
||||
}
|
||||
p {
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
83
client/src/style/pages/register-organizaton.scss
Normal file
83
client/src/style/pages/register-organizaton.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.register-organizaton-form {
|
||||
width: 690px;
|
||||
margin: 0px auto;
|
||||
padding: 80px 50px;
|
||||
|
||||
.register-org-title {
|
||||
margin-bottom: 30px;
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
line-height: 2em;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #888888;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bp3-form-group {
|
||||
.bp3-input-group {
|
||||
.bp3-input {
|
||||
position: relative;
|
||||
width: 619px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--base-currency,
|
||||
.form-group--language {
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
min-width: 300px;
|
||||
min-height: 38px;
|
||||
}
|
||||
}
|
||||
.form-group--language {
|
||||
margin-left: 18px;
|
||||
}
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
min-width: 619px;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.form-group--time-zone {
|
||||
.bp3-text-muted {
|
||||
color: #000000;
|
||||
}
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-org-note {
|
||||
width: 618px;
|
||||
font-size: 14px;
|
||||
line-height: 2.7rem;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 3px solid #f5f5f5;
|
||||
}
|
||||
.register-org-button {
|
||||
.bp3-button {
|
||||
background-color: #0052cc;
|
||||
width: 174px;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
125
client/src/style/pages/register-wizard-page.scss
Normal file
125
client/src/style/pages/register-wizard-page.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
* {
|
||||
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;
|
||||
|
||||
.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;
|
||||
|
||||
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%;
|
||||
margin: 60px auto;
|
||||
|
||||
.wizard-wrapper li {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
width: 25%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-size: 15px;
|
||||
}
|
||||
.wizard-wrapper li::before {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
content: '';
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 0 auto 10px auto;
|
||||
border-radius: 50%;
|
||||
background-color: #75859c;
|
||||
}
|
||||
.wizard-wrapper li::after {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: #75859c;
|
||||
top: 6px;
|
||||
left: -50%;
|
||||
z-index: -1;
|
||||
}
|
||||
.wizard-wrapper li:first-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wizard-wrapper > li.complete::before {
|
||||
background-color: #75859c;
|
||||
}
|
||||
|
||||
.wizard-wrapper > li.complete ~ li::before {
|
||||
background: #ebebeb;
|
||||
}
|
||||
|
||||
.wizard-wrapper > li.complete ~ li::after {
|
||||
background: #ebebeb;
|
||||
}
|
||||
.wizard-wrapper > li.complete p.wizard-info {
|
||||
color: #004dd0;
|
||||
}
|
||||
}
|
||||
|
||||
// @import './billing.scss';
|
||||
|
||||
//Register Subscription form
|
||||
.register-subscription-form {
|
||||
padding-top: 50px;
|
||||
}
|
||||
Reference in New Issue
Block a user