mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 13:50:31 +00:00
WIP / Design login and register page.
This commit is contained in:
elforjani3
@@ -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;
|
||||
Reference in New Issue
Block a user