mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
WIP / Design login and register page.
This commit is contained in:
elforjani3
@@ -1,5 +1,5 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { submitResetPassword } from 'store/resetPassword/resetPassword.action';
|
||||
import { submitResetPassword } from 'store/authentication/authentication.actions';
|
||||
|
||||
export const mapStateToProps = (state, props) => {
|
||||
return {};
|
||||
@@ -7,7 +7,7 @@ export const mapStateToProps = (state, props) => {
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
requestResetPassword: (password) =>
|
||||
dispatch(submitResetPassword({password})),
|
||||
dispatch(submitResetPassword({ password })),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
13
client/src/connectors/SendResetPassword.connect.js
Normal file
13
client/src/connectors/SendResetPassword.connect.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { submitSendResetPassword } from 'store/authentication/authentication.actions';
|
||||
|
||||
export const mapStateToProps = (state, props) => {
|
||||
return {};
|
||||
};
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
requestSendResetPassword: (email) =>
|
||||
dispatch(submitSendResetPassword({ email })),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps);
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { useIntl } from 'react-intl';
|
||||
@@ -13,8 +13,14 @@ import {
|
||||
Intent,
|
||||
FormGroup,
|
||||
HTMLSelect,
|
||||
Icon,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
import { Row, Col } from 'react-grid-system';
|
||||
import IconLog from 'components/Icon';
|
||||
import Copyright from './copyright';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function Invite({ requestSubmitInvite }) {
|
||||
const intl = useIntl();
|
||||
let params = useParams('accept/:token');
|
||||
@@ -23,18 +29,12 @@ function Invite({ requestSubmitInvite }) {
|
||||
|
||||
const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/;
|
||||
|
||||
const language = useMemo(() => [
|
||||
{ value: null, label: 'Select Country' },
|
||||
{ value: 'Arabic', label: 'Arabic' },
|
||||
{ value: 'English', label: 'English' },
|
||||
], []);
|
||||
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
first_name: Yup.string().required(),
|
||||
last_name: Yup.string().required(),
|
||||
email: Yup.string().email().required(),
|
||||
phone_number: Yup.string().matches(phoneRegExp).required(),
|
||||
language: Yup.string().required(),
|
||||
password: Yup.string()
|
||||
.min(4, 'Password has to be longer than 4 characters!')
|
||||
.required('Password is required!'),
|
||||
@@ -51,122 +51,175 @@ function Invite({ requestSubmitInvite }) {
|
||||
}),
|
||||
[]
|
||||
);
|
||||
const {
|
||||
handleSubmit,
|
||||
errors,
|
||||
values,
|
||||
touched,
|
||||
getFieldProps,
|
||||
} = useFormik({
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
requestSubmitInvite(values, token).then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'success',
|
||||
requestSubmitInvite(values, token)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'success',
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
|
||||
|
||||
const [shown, setShown] = useState(false);
|
||||
|
||||
const passwordRevealer = () => {
|
||||
setShown(!shown);
|
||||
};
|
||||
return (
|
||||
<div className={'invite-form'}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<FormGroup
|
||||
label={'First Name'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--first_name'}
|
||||
intent={errors.first_name && touched.first_name && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'first_name'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.first_name && touched.first_name && Intent.DANGER}
|
||||
{...getFieldProps('first_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
<IconLog
|
||||
className={'invite-form__icon-section'}
|
||||
icon='bigcapital'
|
||||
iconSize={150}
|
||||
/>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={'invite-form__label-section'}>
|
||||
<h3>Welcome to Bigcapital</h3>
|
||||
<p>
|
||||
Enter your personal information <b>{'Organization Name'}</b>{' '}
|
||||
Organization.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FormGroup
|
||||
label={'Last Name'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--last_name'}
|
||||
intent={errors.last_name && touched.last_name && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'last_name'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.last_name && touched.last_name && Intent.DANGER}
|
||||
{...getFieldProps('last_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
<Row>
|
||||
<Col md={6}>
|
||||
<FormGroup
|
||||
label={'First Name'}
|
||||
className={'form-group--first_name'}
|
||||
intent={
|
||||
formik.errors.first_name &&
|
||||
formik.touched.first_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'first_name'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.first_name &&
|
||||
formik.touched.first_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('first_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={6}>
|
||||
<FormGroup
|
||||
label={'Last Name'}
|
||||
className={'form-group--last_name'}
|
||||
intent={
|
||||
formik.errors.last_name &&
|
||||
formik.touched.last_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'last_name'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.last_name &&
|
||||
formik.touched.last_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('last_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Phone Number'}
|
||||
className={'form-group--phone_number'}
|
||||
intent={
|
||||
formik.errors.phone_number &&
|
||||
formik.touched.phone_number &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'phone_number'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.phone_number &&
|
||||
formik.touched.phone_number &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('phone_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<FormGroup
|
||||
label={'Phone Number'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--phone_number'}
|
||||
intent={errors.phone_number && touched.phone_number && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'phone_number'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
|
||||
{...getFieldProps('phone_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Language'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--language'}
|
||||
intent={(errors.language && touched.language) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'language'} />}
|
||||
>
|
||||
<HTMLSelect
|
||||
fill={true}
|
||||
options={language}
|
||||
{...getFieldProps('language')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
{/* <FormGroup
|
||||
label={'Email'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--email'}
|
||||
intent={(errors.email && touched.email) && Intent.DANGER}
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'email'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
{...getFieldProps('email')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</FormGroup> */}
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={
|
||||
<span onClick={() => passwordRevealer()}>
|
||||
<Icon icon='eye-open' />
|
||||
Show
|
||||
</span>
|
||||
}
|
||||
className={'form-group--password'}
|
||||
intent={
|
||||
formik.errors.password && formik.touched.password && Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'password'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={shown ? 'text' : 'password'}
|
||||
intent={
|
||||
formik.errors.password &&
|
||||
formik.touched.password &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--password'}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'password'} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={'password'}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
{...getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div class='form__floating-footer'>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
Invite
|
||||
<div className={'invite-form__statement-section'}>
|
||||
<p>
|
||||
You email address is <b>{'xxx@gamil.com'},</b> <br />
|
||||
You will use this address to sign in to Bigcapital.
|
||||
</p>
|
||||
<p>
|
||||
By signing in or creating an account, you agree with our <br />
|
||||
<Link>Terms & Conditions</Link> and <Link> Privacy Statement</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div class='invite-form__floating-footer'>
|
||||
<Button
|
||||
className={'btn-invite'}
|
||||
intent={Intent.PRIMARY}
|
||||
type='submit'
|
||||
>
|
||||
Create Account
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<Copyright />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,42 +1,47 @@
|
||||
import React, { useEffect } from "react";
|
||||
import {Link, useHistory} from 'react-router-dom';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import * as Yup from 'yup';
|
||||
import {useFormik} from 'formik';
|
||||
import {connect} from 'react-redux';
|
||||
import {useIntl} from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import { connect } from 'react-redux';
|
||||
import { useIntl } from 'react-intl';
|
||||
import {
|
||||
Button,
|
||||
InputGroup,
|
||||
Intent,
|
||||
FormGroup,
|
||||
} from "@blueprintjs/core";
|
||||
Checkbox,
|
||||
Icon,
|
||||
} from '@blueprintjs/core';
|
||||
import login from 'store/authentication/authentication.actions';
|
||||
import {hasErrorType, isAuthenticated} from 'store/authentication/authentication.reducer';
|
||||
import {
|
||||
hasErrorType,
|
||||
isAuthenticated,
|
||||
} from 'store/authentication/authentication.reducer';
|
||||
import AuthenticationToaster from 'components/AppToaster';
|
||||
import t from 'store/types';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import IconLog from 'components/Icon';
|
||||
import Copyright from './copyright';
|
||||
|
||||
const ERRORS_TYPES = {
|
||||
INVALID_DETAILS: 'INVALID_DETAILS',
|
||||
USER_INACTIVE: 'USER_INACTIVE',
|
||||
};
|
||||
function Login({
|
||||
login,
|
||||
errors,
|
||||
clearErrors,
|
||||
hasError,
|
||||
}) {
|
||||
function Login({ login, errors, clearErrors, hasError }) {
|
||||
const intl = useIntl();
|
||||
const history = useHistory();
|
||||
|
||||
|
||||
const [shown, setShown] = useState(false);
|
||||
|
||||
// Validation schema.
|
||||
const loginValidationSchema = Yup.object().shape({
|
||||
crediential: Yup
|
||||
.string()
|
||||
.required(intl.formatMessage({'id': 'required'}))
|
||||
.email(intl.formatMessage({id: 'invalid_email_or_phone_numner'})),
|
||||
password: Yup
|
||||
.string()
|
||||
.required(intl.formatMessage({id: 'required'}))
|
||||
const loginValidationSchema =
|
||||
Yup.object().shape({
|
||||
crediential: Yup.string()
|
||||
.required(intl.formatMessage({ id: 'required' }))
|
||||
.email(intl.formatMessage({ id: 'invalid_email_or_phone_numner' })),
|
||||
password: Yup.string()
|
||||
.required(intl.formatMessage({ id: 'required' }))
|
||||
.min(4),
|
||||
});
|
||||
|
||||
@@ -65,11 +70,13 @@ function Login({
|
||||
}
|
||||
if (hasError(ERRORS_TYPES.USER_INACTIVE)) {
|
||||
toastBuilders.push({
|
||||
message: intl.formatMessage({ id: 'the_user_has_been_suspended_from_admin' }),
|
||||
message: intl.formatMessage({
|
||||
id: 'the_user_has_been_suspended_from_admin',
|
||||
}),
|
||||
intent: Intent.WARNING,
|
||||
});
|
||||
}
|
||||
toastBuilders.forEach(builder => {
|
||||
toastBuilders.forEach((builder) => {
|
||||
AuthenticationToaster.show(builder);
|
||||
});
|
||||
}, [hasError, intl]);
|
||||
@@ -81,53 +88,87 @@ function Login({
|
||||
}
|
||||
});
|
||||
|
||||
const passwordRevealer = () => {
|
||||
setShown(!shown);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<div className='login-form'>
|
||||
<IconLog
|
||||
className={'login-form__icon-section'}
|
||||
icon='bigcapital'
|
||||
iconSize={150}
|
||||
/>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<FormGroup
|
||||
className={'form-group--crediential'}
|
||||
intent={formik.errors.crediential && Intent.DANGER}
|
||||
helperText={formik.errors.crediential && formik.errors.crediential}>
|
||||
<div className={'login-form__label-section'}>
|
||||
<h3>Log in</h3>
|
||||
Need a Bigcapital account ?
|
||||
<Link to='/auth/register'> Create an account</Link>
|
||||
</div>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Email or Phone Number'}
|
||||
intent={
|
||||
formik.errors.crediential &&
|
||||
formik.touched.crediential &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'crediential'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.crediential &&
|
||||
formik.touched.crediential &&
|
||||
Intent.DANGER
|
||||
}
|
||||
large={true}
|
||||
{...formik.getFieldProps('crediential')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={
|
||||
<span onClick={() => passwordRevealer()}>
|
||||
<Icon icon='eye-open' />
|
||||
Show
|
||||
</span>
|
||||
}
|
||||
intent={
|
||||
formik.errors.password && formik.touched.password && Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'password'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
large={true}
|
||||
intent={
|
||||
formik.errors.password &&
|
||||
formik.touched.password &&
|
||||
Intent.DANGER
|
||||
}
|
||||
type={shown ? 'text' : 'password'}
|
||||
{...formik.getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className={'login-form__checkbox-section'}>
|
||||
<Checkbox>Keep me logged in</Checkbox>
|
||||
</div>
|
||||
|
||||
<InputGroup
|
||||
leftIcon="user"
|
||||
placeholder={intl.formatMessage({'id': 'email_or_phone_number'})}
|
||||
large={true}
|
||||
intent={formik.errors.crediential && Intent.DANGER}
|
||||
{...formik.getFieldProps('crediential')} />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
className={'form-group--password'}
|
||||
intent={formik.errors.password && Intent.DANGER}
|
||||
helperText={formik.errors.password && formik.errors.password}>
|
||||
|
||||
<InputGroup
|
||||
leftIcon="info-sign"
|
||||
placeholder={intl.formatMessage({'id': 'password'})}
|
||||
large={true}
|
||||
intent={formik.errors.password && Intent.DANGER}
|
||||
type={"password"}
|
||||
{...formik.getFieldProps('password')} />
|
||||
</FormGroup>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
fill={true}
|
||||
large={true}>
|
||||
{intl.formatMessage({'id': 'login '})}
|
||||
</Button>
|
||||
<div className={'login-form__floating-footer-section'}>
|
||||
<Button
|
||||
className={'btn-login'}
|
||||
type={'submit'}
|
||||
intent={Intent.PRIMARY}
|
||||
fill={true}
|
||||
lang={true}
|
||||
>
|
||||
{intl.formatMessage({ id: 'Log in' })}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="authentication-page__footer">
|
||||
<Link to="/auth/send_reset_password">
|
||||
{intl.formatMessage({'id': 'reset_password '})}
|
||||
</Link>
|
||||
|
||||
<Link to="/auth/register">
|
||||
{intl.formatMessage({'id': 'register '})}
|
||||
</Link>
|
||||
</div>
|
||||
<Copyright />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -138,8 +179,8 @@ const mapStateToProps = (state) => ({
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
login: form => dispatch(login({ form })),
|
||||
login: (form) => dispatch(login({ form })),
|
||||
clearErrors: () => dispatch({ type: t.LOGIN_CLEAR_ERRORS }),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Login);
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Login);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { useIntl } from 'react-intl';
|
||||
@@ -8,20 +8,27 @@ import {
|
||||
Intent,
|
||||
FormGroup,
|
||||
HTMLSelect,
|
||||
Icon,
|
||||
} from '@blueprintjs/core';
|
||||
import RegisterFromConnect from 'connectors/RegisterForm.connect';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { compose, regExpCollection } from 'utils';
|
||||
import { compose } from 'utils';
|
||||
import { Row, Col } from 'react-grid-system';
|
||||
import IconLog from 'components/Icon';
|
||||
import Copyright from './copyright';
|
||||
import { Link } from 'react-router-dom';
|
||||
// import { compose, regExpCollection } from 'utils';
|
||||
|
||||
function Register({
|
||||
requestSubmitRegister,
|
||||
}) {
|
||||
function Register({ requestSubmitRegister }) {
|
||||
const intl = useIntl();
|
||||
const Country = useMemo(() => [
|
||||
{ value: null, label: 'Select Country' },
|
||||
{ value: 'libya', label: 'Libya' },
|
||||
], []);
|
||||
const Country = useMemo(
|
||||
() => [
|
||||
{ value: null, label: 'Select Country' },
|
||||
{ value: 'libya', label: 'Libya' },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
organization_name: Yup.string().required(),
|
||||
@@ -29,32 +36,28 @@ function Register({
|
||||
last_name: Yup.string().required(),
|
||||
email: Yup.string().email().required(),
|
||||
phone_number: Yup.string()
|
||||
.matches(regExpCollection.phoneNumber)
|
||||
.matches()
|
||||
.required(intl.formatMessage({ id: 'required' })),
|
||||
password: Yup.string()
|
||||
.min(4, 'Password has to be longer than 8 characters!')
|
||||
.required('Password is required!'),
|
||||
country: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
// country: Yup.string().required(intl.formatMessage({ id: 'required' })),
|
||||
});
|
||||
|
||||
const initialValues = useMemo(() => ({
|
||||
organization_name: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone_number: '',
|
||||
password: '',
|
||||
country: '',
|
||||
}), []);
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
organization_name: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone_number: '',
|
||||
password: '',
|
||||
// country: '',
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const {
|
||||
getFieldProps,
|
||||
getFieldMeta,
|
||||
errors,
|
||||
values,
|
||||
touched,
|
||||
handleSubmit,
|
||||
} = useFormik({
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
initialValues: {
|
||||
@@ -76,120 +79,173 @@ function Register({
|
||||
|
||||
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
|
||||
|
||||
const [shown, setShown] = useState(false);
|
||||
|
||||
const passwordRevealer = () => {
|
||||
setShown(!shown);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={'register-form'}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<FormGroup
|
||||
label={'Organization Name'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--name'}
|
||||
intent={
|
||||
(errors.organization_name && touched.organization_name) &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'organization_name'} />}
|
||||
>
|
||||
<InputGroup
|
||||
<IconLog
|
||||
className={'register-form__icon-section'}
|
||||
icon='bigcapital'
|
||||
iconSize={150}
|
||||
/>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={'register-form__label-section'}>
|
||||
<h3>
|
||||
Register a New <br />
|
||||
Organization.
|
||||
</h3>
|
||||
You have a bigcapital account ?<Link to='/auth/login'> Login</Link>
|
||||
</div>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Organization Name'}
|
||||
className={'form-group--name'}
|
||||
intent={
|
||||
(errors.organization_name &&
|
||||
touched.organization_name) &&
|
||||
formik.errors.organization_name &&
|
||||
formik.touched.organization_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...getFieldProps('organization_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
helperText={<ErrorMessage {...formik} name={'organization_name'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.organization_name &&
|
||||
formik.touched.organization_name &&
|
||||
formik.Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('organization_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<Row className={'name-section'}>
|
||||
<Col md={6}>
|
||||
<FormGroup
|
||||
label={'First Name'}
|
||||
intent={
|
||||
formik.errors.first_name &&
|
||||
formik.touched.first_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'first_name'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.first_name &&
|
||||
formik.touched.first_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('first_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={6}>
|
||||
<FormGroup
|
||||
label={'Last Name'}
|
||||
intent={
|
||||
formik.errors.last_name &&
|
||||
formik.touched.last_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'last_name'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.last_name &&
|
||||
formik.touched.last_name &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('last_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<FormGroup
|
||||
label={'First Name'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--first_name'}
|
||||
intent={(errors.first_name && touched.first_name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'first_name'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.first_name && touched.first_name && Intent.DANGER}
|
||||
{...getFieldProps('first_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Last Name'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--last_name'}
|
||||
intent={errors.last_name && touched.last_name && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'last_name'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.last_name && touched.last_name && Intent.DANGER}
|
||||
{...getFieldProps('last_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Country'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--country'}
|
||||
intent={(errors.country && touched.country) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'country'} />}
|
||||
>
|
||||
<HTMLSelect
|
||||
fill={true}
|
||||
options={Country}
|
||||
{...getFieldProps('country')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Phone Number'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--phone_number'}
|
||||
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'phone_number'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
|
||||
{...getFieldProps('phone_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Email'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--email'}
|
||||
intent={(errors.email && touched.email) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'email'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
{...getFieldProps('email')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--password'}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'password'} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={'password'}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
{...getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div class='form__floating-footer'>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Phone Number'}
|
||||
intent={
|
||||
formik.errors.phone_number &&
|
||||
formik.touched.phone_number &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'phone_number'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.phone_number &&
|
||||
formik.touched.phone_number &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('phone_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Email'}
|
||||
intent={
|
||||
formik.errors.email && formik.touched.email && Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'email'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.email && formik.touched.email && Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('email')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={
|
||||
<span onClick={() => passwordRevealer()}>
|
||||
<Icon icon='eye-open' />
|
||||
Show
|
||||
</span>
|
||||
}
|
||||
className={'form-group--password'}
|
||||
intent={
|
||||
formik.errors.password && formik.touched.password && Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'password'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={shown ? 'text' : 'password'}
|
||||
intent={
|
||||
formik.errors.password &&
|
||||
formik.touched.password &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className={'register-form__statement-section'}>
|
||||
<p>
|
||||
By signing in or creating an account, you agree with our <br />
|
||||
<Link>Terms & Conditions</Link> and <Link> Privacy Statement</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div className={'register-form__floating-footer-section'}>
|
||||
<Button
|
||||
className={'btn-register'}
|
||||
intent={Intent.PRIMARY}
|
||||
type='submit'
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<Copyright />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
RegisterFromConnect,
|
||||
)(Register);
|
||||
export default compose(RegisterFromConnect)(Register);
|
||||
|
||||
@@ -12,11 +12,12 @@ import {
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { compose } from 'utils';
|
||||
import SendResetPasswordConnect from 'connectors/ResetPassword.connect';
|
||||
import ResetPasswordConnect from 'connectors/ResetPassword.connect';
|
||||
import Icon from 'components/Icon';
|
||||
import Copyright from './copyright';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function ResetPassword({
|
||||
requestSendResetPassword,
|
||||
}) {
|
||||
function ResetPassword({ requestSendResetPassword }) {
|
||||
const intl = useIntl();
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
password: Yup.string()
|
||||
@@ -27,19 +28,15 @@ function ResetPassword({
|
||||
.required('Confirm Password is required'),
|
||||
});
|
||||
|
||||
const initialValues = useMemo(() => ({
|
||||
password: '',
|
||||
confirm_password: '',
|
||||
}), []);
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
password: '',
|
||||
confirm_password: '',
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const {
|
||||
errors,
|
||||
values,
|
||||
touched,
|
||||
getFieldMeta,
|
||||
getFieldProps,
|
||||
handleSubmit,
|
||||
} = useFormik({
|
||||
const formik= useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
initialValues: {
|
||||
@@ -62,52 +59,66 @@ function ResetPassword({
|
||||
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
|
||||
|
||||
return (
|
||||
<div className={'sendRestPassword-form'}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--password'}
|
||||
intent={errors.password && touched.password && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'password'} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={'password'}
|
||||
intent={errors.password && touched.password && Intent.DANGER}
|
||||
{...getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Confirm Password'}
|
||||
labelInfo={requiredSpan}
|
||||
className={'form-group--confirm_password'}
|
||||
intent={
|
||||
errors.confirm_password && touched.confirm_password && Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'confirm_password'} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={'password'}
|
||||
<div className={'submit-np-form'}>
|
||||
<div>
|
||||
<Icon
|
||||
className={'submit-np-form__icon-section'}
|
||||
icon='bigcapital'
|
||||
iconSize={150}
|
||||
/>
|
||||
</div>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={'submit-np-form__label-section'}>
|
||||
<h3>Choose a new password</h3>
|
||||
You remembered your password ? <Link to='/auth/login'>Login</Link>
|
||||
</div>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
intent={formik.errors.password && formik.touched.password && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'password'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={'password'}
|
||||
intent={formik.errors.password && formik.touched.password && Intent.DANGER}
|
||||
{...formik.getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'New Password'}
|
||||
labelInfo={'(again):'}
|
||||
intent={
|
||||
errors.confirm_password &&
|
||||
touched.confirm_password &&
|
||||
formik.errors.confirm_password &&
|
||||
formik.touched.confirm_password &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...getFieldProps('confirm_password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
helperText={<ErrorMessage name={'confirm_password'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={'password'}
|
||||
intent={
|
||||
formik.errors.confirm_password &&
|
||||
formik.touched.confirm_password &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...formik.getFieldProps('confirm_password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div class='form__floating-footer'>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
Reset Password
|
||||
<div class='submit-np-form__floating-footer-section'>
|
||||
<Button className={'btn-new'} intent={Intent.PRIMARY} type='submit'>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<Copyright />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(SendResetPasswordConnect)(ResetPassword);
|
||||
export default compose(ResetPasswordConnect)(ResetPassword);
|
||||
|
||||
@@ -1,29 +1,114 @@
|
||||
import * as React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button, InputGroup } from '@blueprintjs/core';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import Icon from 'components/Icon';
|
||||
import Copyright from './copyright';
|
||||
import SendResetPasswordConnect from 'connectors/SendResetPassword.connect';
|
||||
import { compose } from 'utils';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
|
||||
export default function SendResetPassword() {
|
||||
function SendResetPassword({ requestSendResetPassword }) {
|
||||
const intl = useIntl();
|
||||
|
||||
const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/;
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
// Validation schema.
|
||||
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
crediential: Yup.string('')
|
||||
.required(intl.formatMessage({ id: 'required' }))
|
||||
.email(intl.formatMessage({ id: 'invalid_email_or_phone_numner' })),
|
||||
});
|
||||
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
crediential: '',
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
// Formik validation
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
requestSendResetPassword(values.crediential)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message:
|
||||
'Check your email for a link to reset your password. If it doesn’t appear within a few minutes, check your spam folder.',
|
||||
});
|
||||
history.push('/auth/login');
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div class='login-page'>
|
||||
<form>
|
||||
<InputGroup
|
||||
leftIcon='user'
|
||||
placeholder={<FormattedMessage id='email_or_phone_number' />}
|
||||
large={true}
|
||||
className='input-group--email'
|
||||
/>
|
||||
|
||||
<Button fill={true} large={true}>
|
||||
<FormattedMessage id='send_reset_password' />
|
||||
</Button>
|
||||
<div class='reset-form'>
|
||||
<Icon
|
||||
className={'reset-form__icon-section'}
|
||||
icon='bigcapital'
|
||||
iconSize={150}
|
||||
/>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<div className={'reset-form__label-section'}>
|
||||
<h3>You Can't login ?</h3>
|
||||
<p>We'll send a recovery link to your email</p>
|
||||
</div>
|
||||
<div>
|
||||
<FormGroup
|
||||
label={'Email or Phone Number'}
|
||||
intent={
|
||||
formik.errors.crediential &&
|
||||
formik.touched.crediential &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'crediential'} {...formik} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
formik.errors.crediential &&
|
||||
formik.touched.crediential &&
|
||||
Intent.DANGER
|
||||
}
|
||||
large={true}
|
||||
{...formik.getFieldProps('crediential')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className={'reset-form__floating-section'}>
|
||||
<Button
|
||||
className={'btn-send'}
|
||||
type={'submit'}
|
||||
intent={Intent.PRIMARY}
|
||||
fill={true}
|
||||
>
|
||||
{intl.formatMessage({ id: 'Send Reset Password Mail' })}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class='authentication-page__footer'>
|
||||
<div class='reset-form__footer-section'>
|
||||
<Link to='/auth/login'>
|
||||
<FormattedMessage id='login' />
|
||||
<FormattedMessage id='Return to log in' />
|
||||
</Link>
|
||||
</div>
|
||||
<Copyright />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(SendResetPasswordConnect)(SendResetPassword);
|
||||
|
||||
79
client/src/containers/Authentication/copyright.js
Normal file
79
client/src/containers/Authentication/copyright.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'react-grid-system';
|
||||
|
||||
function Copyright() {
|
||||
return (
|
||||
<Row className={'copyright-page'}>
|
||||
<Col md={12}>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='180'
|
||||
height='18'
|
||||
viewBox='0 0 195 18'
|
||||
>
|
||||
<text
|
||||
data-name='© 2001–2020 All Rights Reserved. '
|
||||
transform='translate(0 13)'
|
||||
fill='#666'
|
||||
font-size='13'
|
||||
font-family='SegoeUI, Segoe UI'
|
||||
>
|
||||
<tspan x='0' y='2'>
|
||||
© 2001–2020 All Rights Reserved.
|
||||
</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
</Col>
|
||||
<Col md={12}>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='121'
|
||||
height='20'
|
||||
viewBox='0 0 121.499 26'
|
||||
>
|
||||
<g
|
||||
id='Component_2_5'
|
||||
data-name='Component 2 – 5'
|
||||
transform='translate(29.499 3)'
|
||||
>
|
||||
<text
|
||||
id='Bigcapital.'
|
||||
transform='translate(0 18)'
|
||||
fill='#a3a3a3'
|
||||
font-size='18'
|
||||
font-family='SegoeUI-Bold, Segoe UI'
|
||||
font-weight='700'
|
||||
// letter-spacing='-0.005em'
|
||||
line-height='14'
|
||||
>
|
||||
<tspan x='0' y='0'>
|
||||
Bigcapital
|
||||
</tspan>
|
||||
<tspan y='0' font-size='14'>
|
||||
.
|
||||
</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<rect
|
||||
id='Rectangle_107'
|
||||
data-name='Rectangle 107'
|
||||
width='2.919'
|
||||
height='16.053'
|
||||
transform='translate(21.566 10.444) rotate(45)'
|
||||
fill='#a3a3a3'
|
||||
/>
|
||||
<rect
|
||||
id='Rectangle_108'
|
||||
data-name='Rectangle 108'
|
||||
width='2.919'
|
||||
height='16.053'
|
||||
transform='translate(11.351 11.903) rotate(45)'
|
||||
fill='#a3a3a3'
|
||||
/>
|
||||
</svg>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default Copyright;
|
||||
@@ -4,34 +4,49 @@ import t from 'store/types';
|
||||
export default function login({ form }) {
|
||||
return (dispatch) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
ApiService.post('auth/login', form).then(response => {
|
||||
const { data } = response;
|
||||
ApiService.post('auth/login', form)
|
||||
.then((response) => {
|
||||
const { data } = response;
|
||||
|
||||
dispatch({ type: t.LOGIN_CLEAR_ERRORS });
|
||||
if (data.token && data.user) {
|
||||
dispatch({
|
||||
type: t.LOGIN_SUCCESS,
|
||||
payload: {
|
||||
user: data.user,
|
||||
token: data.token,
|
||||
},
|
||||
});
|
||||
}
|
||||
resolve(response);
|
||||
}).catch((error) => {
|
||||
const { response } = error;
|
||||
const { data } = response;
|
||||
const { errors } = data;
|
||||
dispatch({ type: t.LOGIN_CLEAR_ERRORS });
|
||||
if (data.token && data.user) {
|
||||
dispatch({
|
||||
type: t.LOGIN_SUCCESS,
|
||||
payload: {
|
||||
user: data.user,
|
||||
token: data.token,
|
||||
},
|
||||
});
|
||||
}
|
||||
resolve(response);
|
||||
})
|
||||
.catch((error) => {
|
||||
const { response } = error;
|
||||
const { data } = response;
|
||||
const { errors } = data;
|
||||
|
||||
dispatch({type: t.LOGIN_CLEAR_ERRORS});
|
||||
dispatch({ type: t.LOGIN_CLEAR_ERRORS });
|
||||
|
||||
if (errors){
|
||||
dispatch({
|
||||
type: t.LOGIN_FAILURE, errors,
|
||||
});
|
||||
}
|
||||
reject(error);
|
||||
});
|
||||
if (errors) {
|
||||
dispatch({
|
||||
type: t.LOGIN_FAILURE,
|
||||
errors,
|
||||
});
|
||||
}
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const submitResetPassword = (password) => {
|
||||
return (dispatch) => {
|
||||
return ApiService.post('auth/reset_password', password);
|
||||
};
|
||||
};
|
||||
|
||||
export const submitSendResetPassword = (email) => {
|
||||
return (dispatch) => {
|
||||
return ApiService.post('auth/send_reset_password', email);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import './normalize.scss';
|
||||
|
||||
@import "./normalize.scss";
|
||||
$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
|
||||
0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
|
||||
|
||||
$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
|
||||
|
||||
@import "@blueprintjs/core/src/common/_variables.scss";
|
||||
@import '@blueprintjs/core/src/common/_variables.scss';
|
||||
// @import "@blueprintjs/core/src/common/colors.scss";
|
||||
|
||||
$menu-item-color-hover: $light-gray4;
|
||||
@@ -12,52 +12,62 @@ $menu-item-color-active: $light-gray3;
|
||||
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
|
||||
|
||||
// Blueprint framework.
|
||||
@import "@blueprintjs/core/src/blueprint.scss";
|
||||
@import "@blueprintjs/datetime/src/blueprint-datetime.scss";
|
||||
@import '@blueprintjs/core/src/blueprint.scss';
|
||||
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';
|
||||
|
||||
@import "basscss";
|
||||
@import 'basscss';
|
||||
|
||||
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
|
||||
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
|
||||
|
||||
@import "functions";
|
||||
@import 'functions';
|
||||
|
||||
// Objects
|
||||
@import "objects/form";
|
||||
@import "objects/typography";
|
||||
@import "objects/buttons";
|
||||
@import 'objects/form';
|
||||
@import 'objects/typography';
|
||||
@import 'objects/buttons';
|
||||
|
||||
// Components
|
||||
@import "components/data-table";
|
||||
@import "components/dialog";
|
||||
|
||||
// Pages
|
||||
@import "pages/dashboard";
|
||||
@import "pages/accounts-chart";
|
||||
@import "pages/authentication";
|
||||
@import "pages/expense-form";
|
||||
@import "pages/financial-statements";
|
||||
@import "pages/make-journal-entries";
|
||||
@import "pages/preferences";
|
||||
@import "pages/view-form";
|
||||
@import "pages/manual-journals";
|
||||
@import "pages/item-category";
|
||||
@import "pages/items";
|
||||
@import "pages/currency";
|
||||
// Views
|
||||
@import "views/filter-dropdown";
|
||||
@import "views/sidebar";
|
||||
@import 'components/data-table';
|
||||
@import 'components/dialog';
|
||||
|
||||
.#{$ns}-tooltip{
|
||||
// Pages
|
||||
@import 'pages/dashboard';
|
||||
@import 'pages/accounts-chart';
|
||||
@import 'pages/authentication';
|
||||
@import 'pages/expense-form';
|
||||
@import 'pages/financial-statements';
|
||||
@import 'pages/make-journal-entries';
|
||||
@import 'pages/preferences';
|
||||
@import 'pages/view-form';
|
||||
@import 'pages/manual-journals';
|
||||
@import 'pages/item-category';
|
||||
@import 'pages/items';
|
||||
@import 'pages/currency';
|
||||
// Views
|
||||
@import 'views/filter-dropdown';
|
||||
@import 'views/sidebar';
|
||||
|
||||
.#{$ns}-tooltip {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
[data-icon='bigcapital'] {
|
||||
path{
|
||||
path {
|
||||
fill: #004dd0;
|
||||
}
|
||||
.path-1,
|
||||
.path-13{
|
||||
.path-13 {
|
||||
fill: #2d95fd;
|
||||
}
|
||||
}
|
||||
}
|
||||
.App {
|
||||
background-color: #fcfdff;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
// font-size: calc(10px + 2vmin);
|
||||
// color: white;
|
||||
}
|
||||
|
||||
@@ -1,26 +1,266 @@
|
||||
|
||||
|
||||
.authentication-page{
|
||||
&__form-wrapper{
|
||||
.authentication-page {
|
||||
&__form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
max-width: 450px;
|
||||
padding: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-page{
|
||||
// Login Form
|
||||
.login-form {
|
||||
width: 385px;
|
||||
|
||||
.input-group{
|
||||
&--email-phone-number{
|
||||
margin-bottom: 1rem;
|
||||
&__icon-section {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__label-section {
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
&--password{
|
||||
margin-bottom: 1rem;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #0040bd;
|
||||
}
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.bp3-form-group {
|
||||
.bp3-form-content {
|
||||
width: 384px;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
.bp3-icon-eye-open {
|
||||
display: inline-block;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 auto;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0px 5px 0px 265px;
|
||||
}
|
||||
|
||||
&__checkbox-section {
|
||||
margin: -10px 0 30px 0px;
|
||||
}
|
||||
|
||||
&__floating-footer-section {
|
||||
margin: 0px 0px 24px 0px;
|
||||
|
||||
.btn-login {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0052cc;
|
||||
min-height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__footer{
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
|
||||
//Register Form
|
||||
|
||||
.register-form {
|
||||
width: 384px;
|
||||
|
||||
&__icon-section {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__label-section {
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
margin-bottom: 35px;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #0040bd;
|
||||
}
|
||||
}
|
||||
.bp3-input {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
&__statement-section {
|
||||
margin-top: -10px;
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
.bp3-icon-eye-open {
|
||||
display: inline-block;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 auto;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0px 5px 0px 265px;
|
||||
}
|
||||
|
||||
&__floating-footer-section {
|
||||
margin: 25px 0px 25px 0px;
|
||||
|
||||
.btn-register {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0052cc;
|
||||
min-height: 45px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Send Reset Form
|
||||
|
||||
.reset-form {
|
||||
width: 385px;
|
||||
&__icon-section {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__label-section {
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&__footer-section {
|
||||
padding: 14px 16px;
|
||||
border-top: 1px solid #ececec;
|
||||
margin: 0px 0px 25px auto;
|
||||
border-bottom: 1px solid #ececec;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #0040bd;
|
||||
}
|
||||
}
|
||||
|
||||
&__floating-section {
|
||||
margin: 30px 0px 25px auto;
|
||||
|
||||
.btn-send {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0052cc;
|
||||
min-height: 45px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset New Password Form
|
||||
|
||||
.submit-np-form {
|
||||
width: 384px;
|
||||
|
||||
&__icon-section {
|
||||
margin: 0 auto;
|
||||
}
|
||||
&__label-section {
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #0040bd;
|
||||
}
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.bp3-input {
|
||||
min-height: 40px;
|
||||
}
|
||||
&__floating-footer-section {
|
||||
margin: 20px 0px 30px auto;
|
||||
|
||||
.btn-new {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0052cc;
|
||||
min-height: 45px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Invite Accept Form
|
||||
|
||||
.invite-form {
|
||||
width: 384px;
|
||||
|
||||
&__icon-section {
|
||||
margin: 0 auto;
|
||||
}
|
||||
&__label-section {
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.bp3-input {
|
||||
min-height: 40px;
|
||||
}
|
||||
.bp3-icon-eye-open {
|
||||
display: inline-block;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 auto;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0px 5px 0px 265px;
|
||||
}
|
||||
|
||||
&__statement-section {
|
||||
margin-top: -10px;
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&__floating-footer {
|
||||
margin: 20px 0px 20px auto;
|
||||
|
||||
.btn-invite {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0052cc;
|
||||
min-height: 45px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-icon-bigcapital {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Copyright Page
|
||||
.copyright-page {
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user