diff --git a/jam-ui/src/components/auth/JKRegistrationForm.js b/jam-ui/src/components/auth/JKRegistrationForm.js new file mode 100644 index 000000000..c742a83db --- /dev/null +++ b/jam-ui/src/components/auth/JKRegistrationForm.js @@ -0,0 +1,111 @@ +import React, { Fragment, useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { Link, useHistory } from 'react-router-dom'; +import { toast } from 'react-toastify'; +import { Button, CustomInput, Form, FormGroup, Input, Label } from 'reactstrap'; +import Divider from '../common/Divider'; +import SocialAuthButtons from './SocialAuthButtons'; +import withRedirect from '../../hoc/withRedirect'; +import { useAuth } from '../../context/UserAuth'; +import { useTranslation } from 'react-i18next'; + +const JKRegistrationForm = ({ setRedirect, setRedirectUrl, layout, hasLabel }) => { + // State + const [firstName, setFirstName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isDisabled, setIsDisabled] = useState(true); + + // Context + const { signUp, setCurrentUser } = useAuth(); + + const { t } = useTranslation('auth'); + + const history = useHistory(); + // let { from } = location.state || { from: { pathname: "/" } }; + + // Handler + const handleSubmit = async e => { + e.preventDefault(); + setIsDisabled(true); + try { + const params = { + first_name: firstName, + email, + password, + password_confirmation: password, + terms: true + }; + const response = await signUp(params); + const user = await response.json(); + console.log('_DEBUG_ user', user); + setCurrentUser(user); + toast.success(`Successfully registered as ${firstName}`); + setRedirect(true); + history.push('/download'); + }catch (error) { + console.error(error); + toast.error('An error occurred. Please try again.'); + setIsDisabled(false); + } + }; + + // useEffect(() => { + // setRedirectUrl(`/authentication/${layout}/login`); + // }, [setRedirectUrl, layout]); + + useEffect(() => { + setIsDisabled(!firstName || !email || !password); + }, [firstName, email, password]); + + return ( +
+ + {hasLabel && } + setFirstName(target.value)} /> + + + {hasLabel && } + setEmail(target.value)} + type="email" + /> + + {/*
*/} + + {hasLabel && } + setPassword(target.value)} + type="password" + /> + + + {/*
*/} + + + + + +
+ ); +}; + +JKRegistrationForm.propTypes = { + setRedirect: PropTypes.func.isRequired, + setRedirectUrl: PropTypes.func.isRequired, + layout: PropTypes.string, + hasLabel: PropTypes.bool +}; + +JKRegistrationForm.defaultProps = { + layout: 'basic', + hasLabel: false +}; + +export default withRedirect(JKRegistrationForm); diff --git a/jam-ui/src/components/auth/basic/JKAuthBasicRoutes.js b/jam-ui/src/components/auth/basic/JKAuthBasicRoutes.js index 76ffc4c53..cb83a5e29 100644 --- a/jam-ui/src/components/auth/basic/JKAuthBasicRoutes.js +++ b/jam-ui/src/components/auth/basic/JKAuthBasicRoutes.js @@ -4,7 +4,7 @@ import { Redirect, Route, Switch, withRouter } from 'react-router-dom'; import Login from './Login'; // import Start from './Start'; // import Logout from './Logout'; -// import Registration from './Registration'; +import Registration from './JKRegistration'; import ForgetPassword from './ForgetPassword'; import PasswordReset from './PasswordReset'; import ConfirmMail from './ConfirmMail'; @@ -13,6 +13,7 @@ import ConfirmMail from './ConfirmMail'; const AuthBasicRoutes = ({ match: { url } }) => ( + diff --git a/jam-ui/src/components/auth/basic/JKRegistration.js b/jam-ui/src/components/auth/basic/JKRegistration.js new file mode 100644 index 000000000..cf59878ed --- /dev/null +++ b/jam-ui/src/components/auth/basic/JKRegistration.js @@ -0,0 +1,26 @@ +import React, { Fragment } from 'react'; +import { Col, Row } from 'reactstrap'; +import { Link } from 'react-router-dom'; +import JKRegistrationForm from '../JKRegistrationForm'; +import { useTranslation } from 'react-i18next'; + +const Registration = () => { + const { t } = useTranslation('auth'); + return ( + + + +
Register
+ + +

+ Have an account? Login +

+ +
+ +
+ ); +}; + +export default Registration; diff --git a/jam-ui/src/components/auth/basic/Login.js b/jam-ui/src/components/auth/basic/Login.js index 0ef134aa6..74aba8877 100644 --- a/jam-ui/src/components/auth/basic/Login.js +++ b/jam-ui/src/components/auth/basic/Login.js @@ -15,8 +15,8 @@ const Login = () => {

- or {/* create an account */} - {t('signup')} + or {t('signup')} + {/* {t('signup')} */}

diff --git a/jam-ui/src/components/dashboard/JKDashboardMain.js b/jam-ui/src/components/dashboard/JKDashboardMain.js index aae1045da..a24a4fa5a 100644 --- a/jam-ui/src/components/dashboard/JKDashboardMain.js +++ b/jam-ui/src/components/dashboard/JKDashboardMain.js @@ -44,6 +44,7 @@ import JKEditProfile from '../page/JKEditProfile'; import JKEditAccount from '../page/JKEditAccount'; import JKAccountSubscription from '../page/JKAccountSubscription'; import JKPaymentHistory from '../page/JKPaymentHistory'; +import JKDownload from '../page/JKDownload'; import JKAffiliateProgram from '../affiliate/JKAffiliateProgram'; import JKAffiliatePayee from '../affiliate/JKAffiliatePayee'; @@ -319,6 +320,7 @@ function JKDashboardMain() { + {/*Redirect*/} diff --git a/jam-ui/src/components/page/JKDownload.js b/jam-ui/src/components/page/JKDownload.js new file mode 100644 index 000000000..ea6e52135 --- /dev/null +++ b/jam-ui/src/components/page/JKDownload.js @@ -0,0 +1,9 @@ +import React from 'react' + +const JKDownload = () => { + return ( +
JKDownload
+ ) +} + +export default JKDownload \ No newline at end of file diff --git a/jam-ui/src/services/auth.js b/jam-ui/src/services/auth.js index db3a9a216..dbb9e3042 100644 --- a/jam-ui/src/services/auth.js +++ b/jam-ui/src/services/auth.js @@ -8,7 +8,16 @@ export const checkIsAuthenticated = () => { }) } -export const authSignUp = () => {} +export const authSignUp = (userParams) => { + return new Promise((resolve, reject) => { + apiFetch('/users', { + method: 'POST', + body: JSON.stringify(userParams) + }) + .then(response => resolve(response)) + .catch(error => reject(error)) + }) +} export const authLogin = (credentials) => { return new Promise((resolve, reject) => {