mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 12:50:38 +00:00
Merge remote-tracking branch 'origin/feature/login/registerPage'
This commit is contained in:
Ahmed Bouhuolia
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { Router, Switch } from 'react-router';
|
||||
import { Router, Switch, Redirect } from 'react-router';
|
||||
import { createBrowserHistory } from 'history';
|
||||
import PrivateRoute from 'components/PrivateRoute';
|
||||
import Authentication from 'components/Authentication';
|
||||
|
||||
@@ -1,29 +1,38 @@
|
||||
import React from 'react';
|
||||
import { Redirect, Route, Switch } from 'react-router-dom';
|
||||
import { Redirect, Route, Switch, Link } from 'react-router-dom';
|
||||
import BodyClassName from 'react-body-classname';
|
||||
import authenticationRoutes from 'routes/authentication';
|
||||
|
||||
export default function({ isAuthenticated =false, ...rest }) {
|
||||
const to = {pathname: '/dashboard/homepage'};
|
||||
|
||||
return (
|
||||
<Route path="/auth">
|
||||
{ (isAuthenticated) ?
|
||||
(<Redirect to={to} />) : (
|
||||
<Switch>
|
||||
<div class="authentication-page">
|
||||
<div class="authentication-page__form-wrapper">
|
||||
{ authenticationRoutes.map((route, index) => (
|
||||
<Route
|
||||
key={index}
|
||||
path={route.path}
|
||||
exact={route.exact}
|
||||
component={route.component}
|
||||
/>
|
||||
))}
|
||||
<BodyClassName className={'authentication'}>
|
||||
<Route path="/auth">
|
||||
{ (isAuthenticated) ?
|
||||
(<Redirect to={to} />) : (
|
||||
<Switch>
|
||||
<div class="authentication-page">
|
||||
<Link
|
||||
to={'bigcapital.io'}
|
||||
className={'authentication-page__goto-bigcapital'}>
|
||||
← 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>
|
||||
</div>
|
||||
</div>
|
||||
</Switch>)
|
||||
}
|
||||
</Route>
|
||||
</Switch>)
|
||||
}
|
||||
</Route>
|
||||
</BodyClassName>
|
||||
);
|
||||
}
|
||||
24
client/src/connectors/Authentication.connect.js
Normal file
24
client/src/connectors/Authentication.connect.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import {
|
||||
login,
|
||||
resetPassword,
|
||||
sendResetPassword,
|
||||
inviteAccept,
|
||||
register,
|
||||
inviteMetaByToken,
|
||||
} from 'store/authentication/authentication.actions';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
requestLogin: (form) => dispatch(login({ form })),
|
||||
requestRegister: (form) => dispatch(register({ form })),
|
||||
requestSendResetPassword: (email) => dispatch(sendResetPassword({ email })),
|
||||
requestResetPassword: (form, token) => dispatch(resetPassword({ form, token })),
|
||||
requestInviteAccept: (form, token) => dispatch(inviteAccept({ form, token })),
|
||||
requestInviteMetaByToken: (token) => dispatch(inviteMetaByToken({ token })),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps);
|
||||
@@ -1,13 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { submitInvite, submitSendInvite } from 'store/Invite/invite.action';
|
||||
|
||||
export const mapStateToProps = (state, props) => {
|
||||
return {};
|
||||
};
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
requestSubmitInvite: (form, token) => dispatch(submitInvite({ form, token })),
|
||||
requestSendInvite: (form) => dispatch(submitSendInvite({ form })),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps);
|
||||
@@ -1,13 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { submitResetPassword } from 'store/resetPassword/resetPassword.action';
|
||||
|
||||
export const mapStateToProps = (state, props) => {
|
||||
return {};
|
||||
};
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
requestResetPassword: (password) =>
|
||||
dispatch(submitResetPassword({password})),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps);
|
||||
16
client/src/containers/Authentication/AuthCopyright.js
Normal file
16
client/src/containers/Authentication/AuthCopyright.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import Icon from 'components/Icon';
|
||||
|
||||
function AuthCopyright() {
|
||||
return (
|
||||
<div class="auth-copyright">
|
||||
<div class="auth-copyright__text">
|
||||
© 2001–2020 All Rights Reserved.
|
||||
</div>
|
||||
|
||||
<Icon width={122} height={22} icon={'bigcapital'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AuthCopyright;
|
||||
29
client/src/containers/Authentication/AuthInsider.js
Normal file
29
client/src/containers/Authentication/AuthInsider.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import Icon from 'components/Icon';
|
||||
import AuthCopyright from './AuthCopyright';
|
||||
|
||||
export default function AuthInsider({
|
||||
logo = true,
|
||||
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 }
|
||||
</div>
|
||||
|
||||
<div class="authentication-insider__footer">
|
||||
<AuthCopyright />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,174 +1,227 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { useIntl } from 'react-intl';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { compose } from 'utils';
|
||||
import InviteFormConnect from 'connectors/InviteForm.connect';
|
||||
import AuthenticationConnect from 'connectors/Authentication.connect';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import {
|
||||
Button,
|
||||
InputGroup,
|
||||
Intent,
|
||||
FormGroup,
|
||||
HTMLSelect,
|
||||
Position,
|
||||
Spinner,
|
||||
} from '@blueprintjs/core';
|
||||
import Icon from 'components/Icon';
|
||||
import { Row, Col } from 'react-grid-system';
|
||||
import AuthInsider from 'containers/Authentication/AuthInsider';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import useAsync from 'hooks/async';
|
||||
|
||||
function Invite({ requestSubmitInvite }) {
|
||||
function Invite({
|
||||
requestInviteAccept,
|
||||
requestInviteMetaByToken,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
let params = useParams('accept/:token');
|
||||
|
||||
const { token } = params;
|
||||
|
||||
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 { token } = useParams();
|
||||
const history = useHistory();
|
||||
const [shown, setShown] = useState(false);
|
||||
const passwordRevealer = useCallback(() => { setShown(!shown); }, [shown]);
|
||||
|
||||
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(),
|
||||
phone_number: Yup.string().matches().required(),
|
||||
password: Yup.string()
|
||||
.min(4, 'Password has to be longer than 4 characters!')
|
||||
.required('Password is required!'),
|
||||
});
|
||||
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone_number: '',
|
||||
language: '',
|
||||
password: '',
|
||||
}),
|
||||
[]
|
||||
);
|
||||
const inviteMeta = useAsync(() => {
|
||||
return requestInviteMetaByToken(token);
|
||||
});
|
||||
|
||||
const inviteErrors = inviteMeta.error || [];
|
||||
const inviteValue = {
|
||||
organization_name: '',
|
||||
invited_email: '',
|
||||
...inviteMeta.value ?
|
||||
inviteMeta.value.data.data : {},
|
||||
};
|
||||
|
||||
if (inviteErrors.find(e => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
|
||||
AppToaster.show({
|
||||
message: 'An unexpected error occurred',
|
||||
intent: Intent.DANGER,
|
||||
position: Position.BOTTOM,
|
||||
});
|
||||
history.push('/auth/login');
|
||||
}
|
||||
|
||||
const initialValues = useMemo(() => ({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
phone_number: '',
|
||||
password: '',
|
||||
}), []);
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
errors,
|
||||
values,
|
||||
touched,
|
||||
errors,
|
||||
handleSubmit,
|
||||
getFieldProps,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
requestSubmitInvite(values, token).then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'success',
|
||||
onSubmit: (values, { setSubmitting, setErrors }) => {
|
||||
requestInviteAccept(values, token)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: `Congrats! Your account has been created and invited to
|
||||
<strong>${inviteValue.organization_name}</strong> organization successfully.`,
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((errors) => {
|
||||
if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
|
||||
AppToaster.show({
|
||||
message: 'An unexpected error occurred',
|
||||
intent: Intent.DANGER,
|
||||
position: Position.BOTTOM,
|
||||
});
|
||||
history.push('/auth/login');
|
||||
}
|
||||
if (errors.find(e => e.type === 'PHONE_MUMNER.ALREADY.EXISTS')){
|
||||
setErrors({
|
||||
phone_number: 'This phone number is used in another account.'
|
||||
});
|
||||
}
|
||||
setSubmitting(false);
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
|
||||
|
||||
const passwordRevealerTmp = useMemo(() => (
|
||||
<span class="password-revealer" onClick={() => passwordRevealer()}>
|
||||
{(shown) ? (
|
||||
<><Icon icon='eye-slash' /> <span class="text">Hide</span></>
|
||||
) : (
|
||||
<><Icon icon='eye' /> <span class="text">Show</span></>
|
||||
)}
|
||||
</span>), [shown, passwordRevealer]);
|
||||
|
||||
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>
|
||||
|
||||
<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={'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
|
||||
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'>
|
||||
Invite
|
||||
</Button>
|
||||
<AuthInsider>
|
||||
<div className={'invite-form'}>
|
||||
<div className={'authentication-page__label-section'}>
|
||||
<h3>Welcome to Bigcapital</h3>
|
||||
<p>
|
||||
Enter your personal information <b>{ inviteValue.organization_name }</b>{' '}
|
||||
Organization.
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Row>
|
||||
<Col md={6}>
|
||||
<FormGroup
|
||||
label={'First Name'}
|
||||
className={'form-group--first_name'}
|
||||
intent={(errors.first_name && touched.first_name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'first_name'} {...{errors, touched}} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.first_name && touched.first_name) &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...getFieldProps('first_name')} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col md={6}>
|
||||
<FormGroup
|
||||
label={'Last Name'}
|
||||
className={'form-group--last_name'}
|
||||
intent={(errors.last_name && touched.last_name) &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={<ErrorMessage name={'last_name'} {...{errors, touched}} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.last_name && touched.last_name) && Intent.DANGER}
|
||||
{...getFieldProps('last_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<FormGroup
|
||||
label={'Phone Number'}
|
||||
className={'form-group--phone_number'}
|
||||
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'phone_number'} {...{errors, touched}} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
|
||||
{...getFieldProps('phone_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={passwordRevealerTmp}
|
||||
className={'form-group--password has-password-revealer'}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={shown ? 'text' : 'password'}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
{...getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div className={'invite-form__statement-section'}>
|
||||
<p>
|
||||
You email address is <b>{ inviteValue.invited_email },</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 className={'authentication-page__submit-button-wrap'}>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type='submit'
|
||||
fill={true}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
Create Account
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{ inviteMeta.pending && (
|
||||
<div class="authentication-page__loading-overlay">
|
||||
<Spinner size={40} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AuthInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(InviteFormConnect)(Invite);
|
||||
export default compose(AuthenticationConnect)(Invite);
|
||||
|
||||
@@ -1,135 +1,169 @@
|
||||
import React, { useEffect } from "react";
|
||||
import {Link, useHistory} from 'react-router-dom';
|
||||
import React, { useEffect, useMemo, 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";
|
||||
import login from 'store/authentication/authentication.actions';
|
||||
import {hasErrorType} from 'store/authentication/authentication.reducer';
|
||||
Checkbox,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import AuthenticationToaster from 'components/AppToaster';
|
||||
import t from 'store/types';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import AuthInsider from 'containers/Authentication/AuthInsider';
|
||||
import Icon from 'components/Icon';
|
||||
import AuthenticationConnect from 'connectors/Authentication.connect';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const ERRORS_TYPES = {
|
||||
INVALID_DETAILS: 'INVALID_DETAILS',
|
||||
USER_INACTIVE: 'USER_INACTIVE',
|
||||
};
|
||||
function Login({
|
||||
login,
|
||||
requestLogin,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const history = useHistory();
|
||||
const [shown, setShown] = useState(false);
|
||||
const passwordRevealer = () => { setShown(!shown); };
|
||||
|
||||
// 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),
|
||||
});
|
||||
|
||||
// Formik validation schema and submit handler.
|
||||
const formik = useFormik({
|
||||
const {
|
||||
values,
|
||||
touched,
|
||||
errors,
|
||||
handleSubmit,
|
||||
getFieldProps,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
initialValues: {
|
||||
crediential: '',
|
||||
password: '',
|
||||
},
|
||||
validationSchema: loginValidationSchema,
|
||||
onSubmit: async (values) => {
|
||||
login({
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
requestLogin({
|
||||
crediential: values.crediential,
|
||||
password: values.password,
|
||||
}).then(() => {
|
||||
history.go('/dashboard/homepage');
|
||||
setSubmitting(false);
|
||||
}).catch((errors) => {
|
||||
const toastBuilders = [];
|
||||
if (errors.find((e) => e.type === ERRORS_TYPES.INVALID_DETAILS)) {
|
||||
toastBuilders.push({
|
||||
message: intl.formatMessage({ id: 'invalid_email_or_phone_numner' }),
|
||||
intent: Intent.WARNING,
|
||||
message: `The email and password you entered did not match our records.
|
||||
Please double-check and try again.`,
|
||||
intent: Intent.DANGER,
|
||||
position: Position.BOTTOM,
|
||||
});
|
||||
}
|
||||
if (errors.find((e) => e.type === ERRORS_TYPES.USER_INACTIVE)) {
|
||||
toastBuilders.push({
|
||||
message: intl.formatMessage({ id: 'the_user_has_been_suspended_from_admin' }),
|
||||
intent: Intent.WARNING,
|
||||
intent: Intent.DANGER,
|
||||
});
|
||||
}
|
||||
toastBuilders.forEach(builder => {
|
||||
AuthenticationToaster.show(builder);
|
||||
});
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const passwordRevealerTmp = useMemo(() => (
|
||||
<span class="password-revealer" onClick={() => passwordRevealer()}>
|
||||
{(shown) ? (
|
||||
<><Icon icon='eye-slash' /> <span class="text">Hide</span></>
|
||||
) : (
|
||||
<><Icon icon='eye' /> <span class="text">Show</span></>
|
||||
)}
|
||||
</span>), [shown, passwordRevealer]);
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<FormGroup
|
||||
className={'form-group--crediential'}
|
||||
intent={formik.errors.crediential && Intent.DANGER}
|
||||
helperText={formik.errors.crediential && formik.errors.crediential}>
|
||||
<AuthInsider>
|
||||
<div className='login-form'>
|
||||
<div className={'authentication-page__label-section'}>
|
||||
<h3>Log in</h3>
|
||||
Need a Bigcapital account ?
|
||||
<Link to='/auth/register'> Create an account</Link>
|
||||
</div>
|
||||
|
||||
<InputGroup
|
||||
leftIcon="user"
|
||||
placeholder={intl.formatMessage({'id': 'email_or_phone_number'})}
|
||||
large={true}
|
||||
intent={formik.errors.crediential && Intent.DANGER}
|
||||
{...formik.getFieldProps('crediential')} />
|
||||
</FormGroup>
|
||||
<form onSubmit={handleSubmit} className={'authentication-page__form'}>
|
||||
<FormGroup
|
||||
label={'Email or Phone Number'}
|
||||
intent={(errors.crediential && touched.crediential) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'crediential'} {...{errors, touched}} />}
|
||||
className={'form-group--crediential'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.crediential && touched.crediential) && Intent.DANGER}
|
||||
large={true}
|
||||
placeholder={'name@company.com'}
|
||||
{...getFieldProps('crediential')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={passwordRevealerTmp}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
|
||||
className={'form-group--password has-password-revealer'}
|
||||
>
|
||||
<InputGroup
|
||||
large={true}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
type={shown ? 'text' : 'password'}
|
||||
placeholder={'password'}
|
||||
{...getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div className={'login-form__checkbox-section'}>
|
||||
<Checkbox
|
||||
large={true}
|
||||
className={'checkbox--remember-me'}>
|
||||
Keep me logged in
|
||||
</Checkbox>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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 className={'authentication-page__submit-button-wrap'}>
|
||||
<Button
|
||||
type={'submit'}
|
||||
intent={Intent.PRIMARY}
|
||||
fill={true}
|
||||
lang={true}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{intl.formatMessage({ id: 'Log in' })}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="authentication-page__footer-links">
|
||||
<Link to={'/auth/send_reset_password'}>Forget my password</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
hasError: (errorType) => hasErrorType(state, errorType),
|
||||
errors: state.authentication.errors,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
login: form => dispatch(login({ form })),
|
||||
clearErrors: () => dispatch({ type: t.LOGIN_CLEAR_ERRORS }),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Login);
|
||||
export default compose(
|
||||
AuthenticationConnect
|
||||
)(Login);
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { useIntl } from 'react-intl';
|
||||
@@ -7,21 +7,24 @@ import {
|
||||
InputGroup,
|
||||
Intent,
|
||||
FormGroup,
|
||||
HTMLSelect,
|
||||
Spinner
|
||||
} from '@blueprintjs/core';
|
||||
import RegisterFromConnect from 'connectors/RegisterForm.connect';
|
||||
import { Row, Col } from 'react-grid-system';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import AuthenticationConnect from 'connectors/Authentication.connect';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import AuthInsider from 'containers/Authentication/AuthInsider';
|
||||
import { compose } from 'utils';
|
||||
import Icon from 'components/Icon';
|
||||
|
||||
function Register({
|
||||
requestSubmitRegister,
|
||||
requestRegister,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const Country = useMemo(() => [
|
||||
{ value: null, label: 'Select Country' },
|
||||
{ value: 'libya', label: 'Libya' },
|
||||
], []);
|
||||
const history = useHistory();
|
||||
const [shown, setShown] = useState(false);
|
||||
const passwordRevealer = useCallback(() => { setShown(!shown); }, [shown]);
|
||||
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
organization_name: Yup.string().required(),
|
||||
@@ -29,11 +32,11 @@ function Register({
|
||||
last_name: Yup.string().required(),
|
||||
email: Yup.string().email().required(),
|
||||
phone_number: Yup.string()
|
||||
.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' })),
|
||||
});
|
||||
|
||||
const initialValues = useMemo(() => ({
|
||||
@@ -43,29 +46,31 @@ function Register({
|
||||
email: '',
|
||||
phone_number: '',
|
||||
password: '',
|
||||
country: '',
|
||||
}), []);
|
||||
|
||||
const {
|
||||
getFieldProps,
|
||||
getFieldMeta,
|
||||
errors,
|
||||
values,
|
||||
touched,
|
||||
values,
|
||||
setFieldValue,
|
||||
handleSubmit,
|
||||
getFieldProps,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
country: 'libya'
|
||||
},
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
requestSubmitRegister(values)
|
||||
requestRegister(values)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'success',
|
||||
});
|
||||
setSubmitting(false);
|
||||
history.push('/auth/login');
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
@@ -73,122 +78,140 @@ function Register({
|
||||
},
|
||||
});
|
||||
|
||||
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
|
||||
const passwordRevealerTmp = useMemo(() => (
|
||||
<span class="password-revealer" onClick={() => passwordRevealer()}>
|
||||
{(shown) ? (
|
||||
<><Icon icon='eye-slash' /> <span class="text">Hide</span></>
|
||||
) : (
|
||||
<><Icon icon='eye' /> <span class="text">Show</span></>
|
||||
)}
|
||||
</span>), [shown, passwordRevealer]);
|
||||
|
||||
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
|
||||
intent={
|
||||
(errors.organization_name &&
|
||||
touched.organization_name) &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...getFieldProps('organization_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<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'>
|
||||
Register
|
||||
</Button>
|
||||
<AuthInsider>
|
||||
<div className={'register-form'}>
|
||||
<div className={'authentication-page__label-section'}>
|
||||
<h3>
|
||||
Register a New <br />Organization.
|
||||
</h3>
|
||||
You have a bigcapital account ?<Link to='/auth/login'> Login</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className={'authentication-page__form'}>
|
||||
<FormGroup
|
||||
label={'Organization Name'}
|
||||
className={'form-group--name'}
|
||||
intent={(errors.organization_name && touched.organization_name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage {...{errors, touched}} name={'organization_name'} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.organization_name && touched.organization_name) && Intent.DANGER}
|
||||
{...getFieldProps('organization_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<Row className={'name-section'}>
|
||||
<Col md={6}>
|
||||
<FormGroup
|
||||
label={'First Name'}
|
||||
intent={(errors.first_name && touched.first_name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'first_name'} {...{errors, touched}} />}
|
||||
className={'form-group--first-name'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.first_name && touched.first_name) && Intent.DANGER}
|
||||
{...getFieldProps('first_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
<Col md={6}>
|
||||
<FormGroup
|
||||
label={'Last Name'}
|
||||
intent={(errors.last_name && touched.last_name) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'last_name'} {...{errors, touched}} />}
|
||||
className={'form-group--last-name'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.last_name && touched.last_name) && Intent.DANGER}
|
||||
{...getFieldProps('last_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<FormGroup
|
||||
label={'Phone Number'}
|
||||
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'phone_number'} {...{errors, touched}} />}
|
||||
className={'form-group--phone-number'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
(errors.phone_number && touched.phone_number) &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...getFieldProps('phone_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Email'}
|
||||
intent={(errors.email && touched.email) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'email'} {...{errors, touched}} />}
|
||||
className={'form-group--email'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.email && touched.email) && Intent.DANGER}
|
||||
{...getFieldProps('email')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
labelInfo={passwordRevealerTmp}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
|
||||
className={'form-group--password has-password-revealer'}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={shown ? 'text' : 'password'}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
{...getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div className={'register-form__agreement-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={'authentication-page__submit-button-wrap'}>
|
||||
<Button
|
||||
className={'btn-register'}
|
||||
intent={Intent.PRIMARY}
|
||||
type='submit'
|
||||
fill={true}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{ isSubmitting && (
|
||||
<div class="authentication-page__loading-overlay">
|
||||
<Spinner size={50} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AuthInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
RegisterFromConnect,
|
||||
AuthenticationConnect,
|
||||
)(Register);
|
||||
|
||||
@@ -7,17 +7,22 @@ import {
|
||||
InputGroup,
|
||||
Intent,
|
||||
FormGroup,
|
||||
HTMLSelect,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { Link, useParams, useHistory } from 'react-router-dom';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { compose } from 'utils';
|
||||
import SendResetPasswordConnect from 'connectors/ResetPassword.connect';
|
||||
import AuthenticationConnect from 'connectors/Authentication.connect';
|
||||
import AuthInsider from 'containers/Authentication/AuthInsider';
|
||||
|
||||
function ResetPassword({
|
||||
requestSendResetPassword,
|
||||
requestResetPassword,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
const { token } = useParams();
|
||||
const history = useHistory();
|
||||
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
password: Yup.string()
|
||||
.min(4, 'Password has to be longer than 4 characters!')
|
||||
@@ -33,12 +38,13 @@ function ResetPassword({
|
||||
}), []);
|
||||
|
||||
const {
|
||||
errors,
|
||||
values,
|
||||
touched,
|
||||
getFieldMeta,
|
||||
getFieldProps,
|
||||
values,
|
||||
errors,
|
||||
handleSubmit,
|
||||
setFieldValue,
|
||||
getFieldProps,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
@@ -46,68 +52,84 @@ function ResetPassword({
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
requestSendResetPassword(values.password)
|
||||
requestResetPassword(values, token)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: 'success',
|
||||
message: 'The password for your account was successfully updated.',
|
||||
intent: Intent.DANGER,
|
||||
position: Position.BOTTOM,
|
||||
});
|
||||
history.push('/auth/login');
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
.catch((errors) => {
|
||||
if (errors.find(e => e.type === 'TOKEN_INVALID')) {
|
||||
AppToaster.show({
|
||||
message: 'An unexpected error occurred',
|
||||
intent: Intent.DANGER,
|
||||
position: Position.BOTTOM,
|
||||
});
|
||||
history.push('/auth/login');
|
||||
}
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
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'}
|
||||
intent={
|
||||
errors.confirm_password &&
|
||||
touched.confirm_password &&
|
||||
Intent.DANGER
|
||||
}
|
||||
{...getFieldProps('confirm_password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div class='form__floating-footer'>
|
||||
<Button intent={Intent.PRIMARY} type='submit'>
|
||||
Reset Password
|
||||
</Button>
|
||||
<AuthInsider>
|
||||
<div className={'submit-np-form'}>
|
||||
<div className={'authentication-page__label-section'}>
|
||||
<h3>Choose a new password</h3>
|
||||
You remembered your password ? <Link to='/auth/login'>Login</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<FormGroup
|
||||
label={'Password'}
|
||||
intent={(errors.password && touched.password) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
|
||||
className={'form-group--password'}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={'password'}
|
||||
intent={errors.password && touched.password && Intent.DANGER}
|
||||
{...getFieldProps('password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={'New Password'}
|
||||
labelInfo={'(again):'}
|
||||
intent={(errors.confirm_password && touched.confirm_password) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'confirm_password'} {...{errors, touched}} />}
|
||||
className={'form-group--confirm-password'}
|
||||
>
|
||||
<InputGroup
|
||||
lang={true}
|
||||
type={'password'}
|
||||
intent={(errors.confirm_password && touched.confirm_password) && Intent.DANGER}
|
||||
{...getFieldProps('confirm_password')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div className={'authentication-page__submit-button-wrap'}>
|
||||
<Button
|
||||
fill={true}
|
||||
className={'btn-new'}
|
||||
intent={Intent.PRIMARY}
|
||||
type='submit'
|
||||
loading={isSubmitting}>
|
||||
Submit new password
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AuthInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(SendResetPasswordConnect)(ResetPassword);
|
||||
export default compose(
|
||||
AuthenticationConnect,
|
||||
)(ResetPassword);
|
||||
|
||||
@@ -1,29 +1,114 @@
|
||||
import * as React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button, InputGroup } from '@blueprintjs/core';
|
||||
import React, { useMemo } 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 AuthenticationConnect from 'connectors/Authentication.connect';
|
||||
import { compose } from 'utils';
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import AuthInsider from 'containers/Authentication/AuthInsider';
|
||||
|
||||
export default function SendResetPassword() {
|
||||
function SendResetPassword({
|
||||
requestSendResetPassword,
|
||||
}) {
|
||||
const intl = useIntl();
|
||||
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 {
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleSubmit,
|
||||
getFieldProps,
|
||||
setFieldValue,
|
||||
isSubmitting,
|
||||
} = 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.`,
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
history.push('/auth/login');
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((errors) => {
|
||||
if (errors.find(e => e.type === 'EMAIL.NOT.REGISTERED')){
|
||||
AppToaster.show({
|
||||
message: 'We couldn\'t find your account with that email',
|
||||
intent: Intent.DANGER,
|
||||
});
|
||||
}
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div class='login-page'>
|
||||
<form>
|
||||
<InputGroup
|
||||
leftIcon='user'
|
||||
placeholder={<FormattedMessage id='email_or_phone_number' />}
|
||||
large={true}
|
||||
className='input-group--email'
|
||||
/>
|
||||
<AuthInsider>
|
||||
<div class='reset-form'>
|
||||
<div className={'authentication-page__label-section'}>
|
||||
<h3>Reset Your Password</h3>
|
||||
<p>Enter your email address and we’ll send you a link to reset your password.</p>
|
||||
</div>
|
||||
|
||||
<Button fill={true} large={true}>
|
||||
<FormattedMessage id='send_reset_password' />
|
||||
</Button>
|
||||
</form>
|
||||
<form onSubmit={handleSubmit} className={'send-reset-password'}>
|
||||
<FormGroup
|
||||
label={'Email or Phone Number'}
|
||||
intent={(errors.crediential && touched.crediential) && Intent.DANGER}
|
||||
helperText={<ErrorMessage name={'crediential'} {...{errors, touched}} />}
|
||||
className={'form-group--crediential'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={(errors.crediential && touched.crediential) && Intent.DANGER}
|
||||
large={true}
|
||||
{...getFieldProps('crediential')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div class='authentication-page__footer'>
|
||||
<Link to='/auth/login'>
|
||||
<FormattedMessage id='login' />
|
||||
</Link>
|
||||
<div className={'authentication-page__submit-button-wrap'}>
|
||||
<Button
|
||||
type={'submit'}
|
||||
intent={Intent.PRIMARY}
|
||||
fill={true}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{intl.formatMessage({ id: 'Send password reset link' })}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class='authentication-page__footer-links'>
|
||||
<Link to='/auth/login'>
|
||||
<FormattedMessage id='Return to log in' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
AuthenticationConnect,
|
||||
)(SendResetPassword);
|
||||
|
||||
@@ -103,7 +103,6 @@ function BalanceSheetTable({
|
||||
onFetchData && onFetchData();
|
||||
}, [onFetchData]);
|
||||
|
||||
|
||||
// Calculates the default expanded rows of balance sheet table.
|
||||
const expandedRows = useMemo(() =>
|
||||
defaultExpanderReducer(balanceSheetAccounts, 1),
|
||||
|
||||
@@ -25,7 +25,7 @@ export default [
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: `${BASE_URL}/reset_password`,
|
||||
path: `${BASE_URL}/reset_password/:token`,
|
||||
name: 'auth.send.reset_password',
|
||||
component: LazyLoader({
|
||||
loader: () => import('containers/Authentication/ResetPassword'),
|
||||
|
||||
@@ -124,5 +124,13 @@ export default {
|
||||
'M302.06,38.87V31.79h7.17v7.08Z',
|
||||
],
|
||||
viewBox: '0 0 309.09 42.89',
|
||||
},
|
||||
'eye': {
|
||||
path: ['M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z'],
|
||||
viewBox: '0 0 576 512',
|
||||
},
|
||||
'eye-slash': {
|
||||
path: ['M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z'],
|
||||
viewBox: '0 0 640 512',
|
||||
}
|
||||
}
|
||||
@@ -1,30 +1,73 @@
|
||||
import ApiService from 'services/ApiService';
|
||||
import t from 'store/types';
|
||||
|
||||
export default function login({ form }) {
|
||||
export function login({ form }) {
|
||||
return (dispatch) => new Promise((resolve, reject) => {
|
||||
ApiService.post('auth/login', form).then((response) => {
|
||||
const { data } = response;
|
||||
|
||||
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;
|
||||
|
||||
reject(errors);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export const register = ({ form }) => {
|
||||
return (dispatch) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
ApiService.post('auth/login', form).then(response => {
|
||||
const { data } = response;
|
||||
ApiService.post('auth/register', form)
|
||||
.then((response) => { resolve(response); })
|
||||
.catch(error => { reject(error.response.data.errors || []); })
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
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;
|
||||
export const resetPassword = ({ form, token }) => {
|
||||
return (dispatch) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
ApiService.post(`auth/reset/${token}`, form)
|
||||
.then((response) => { resolve(response); })
|
||||
.catch(error => { reject(error.response.data.errors || []); })
|
||||
})
|
||||
};
|
||||
};
|
||||
|
||||
reject(errors);
|
||||
});
|
||||
});
|
||||
}
|
||||
export const sendResetPassword = (email) => {
|
||||
return (dispatch) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
ApiService.post('auth/send_reset_password', email)
|
||||
.then((response) => { resolve(response); })
|
||||
.catch(error => { reject(error.response.data.errors || []); })
|
||||
})
|
||||
};
|
||||
};
|
||||
|
||||
export const inviteAccept = ({ form, token }) => {
|
||||
return (dispatch) => new Promise((resolve, reject) => {
|
||||
ApiService.post(`invite/accept/${token}`, { ...form })
|
||||
.then((response) => { resolve(response); })
|
||||
.catch((error) => { reject(error.response.data.errors || []) });
|
||||
});
|
||||
};
|
||||
|
||||
export const inviteMetaByToken = ({ token }) => {
|
||||
return (dispatch) => new Promise((resolve, reject) => {
|
||||
ApiService.get(`invite/invited/${token}`)
|
||||
.then((response) => { resolve(response); })
|
||||
.catch((error) => { reject(error.response.data.errors || []) });
|
||||
});
|
||||
}
|
||||
@@ -55,20 +55,18 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
[data-icon='bigcapital'] {
|
||||
path{
|
||||
path {
|
||||
fill: #004dd0;
|
||||
}
|
||||
.path-1,
|
||||
.path-13{
|
||||
.path-13 {
|
||||
fill: #2d95fd;
|
||||
}
|
||||
}
|
||||
|
||||
.bigcapital--alt{
|
||||
|
||||
|
||||
svg{
|
||||
path,
|
||||
.path-13,
|
||||
@@ -77,3 +75,11 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
}
|
||||
}
|
||||
}
|
||||
// =======
|
||||
body.authentication {
|
||||
background-color: #fcfdff;
|
||||
}
|
||||
|
||||
.bp3-toast{
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -190,6 +190,16 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
|
||||
}
|
||||
}
|
||||
|
||||
&.bp3-large .#{$ns}-control-indicator {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&::before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover .#{$ns}-control-indicator {
|
||||
|
||||
@@ -1,26 +1,183 @@
|
||||
|
||||
|
||||
.authentication-page{
|
||||
&__form-wrapper{
|
||||
.authentication-insider{
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&__logo-section{
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
&__content{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__footer{
|
||||
.auth-copyright{
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.bp3-icon-bigcapital{
|
||||
margin-top: 9px;
|
||||
|
||||
svg{
|
||||
path{
|
||||
fill: #A3A3A3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.authentication-page {
|
||||
|
||||
&__goto-bigcapital{
|
||||
position: fixed;
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.bp3-input {
|
||||
min-height: 40px;
|
||||
border: 2px solid #E3E3E3;
|
||||
}
|
||||
.bp3-form-group{
|
||||
margin-bottom: 25px;
|
||||
|
||||
&.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: 34px;
|
||||
color: #555;
|
||||
|
||||
h3{
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #444;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #0040bd;
|
||||
}
|
||||
}
|
||||
|
||||
&__form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
max-width: 415px;
|
||||
padding: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-page{
|
||||
&__footer-links{
|
||||
padding: 9px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-align: center;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
.input-group{
|
||||
&--email-phone-number{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
&--password{
|
||||
margin-bottom: 1rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// Login Form
|
||||
// ------------------------------
|
||||
.login-form {
|
||||
|
||||
.checkbox{
|
||||
&--remember-me{
|
||||
margin: -4px 0 28px 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__footer{
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
|
||||
// Register Form
|
||||
.register-form {
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-form {
|
||||
|
||||
&__statement-section {
|
||||
margin-top: -10px;
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
|
||||
.authentication-page__loading-overlay{
|
||||
background: rgba(252, 253, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user