wip new signup and download pages

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 (
+    <Form onSubmit={handleSubmit}>
+      <FormGroup>
+        {hasLabel && <Label>Name</Label>}
+        <Input placeholder={!hasLabel ? 'First Name' : ''} value={firstName} onChange={({ target }) => setFirstName(target.value)} />
+      </FormGroup>
+      <FormGroup>
+        {hasLabel && <Label>Email address</Label>}
+        <Input
+          placeholder={!hasLabel ? 'Email address' : ''}
+          value={email}
+          onChange={({ target }) => setEmail(target.value)}
+          type="email"
+        />
+      </FormGroup>
+      {/* <div className="form-row"> */}
+        <FormGroup>
+          {hasLabel && <Label>Password</Label>}
+          <Input
+            placeholder={!hasLabel ? 'Password' : ''}
+            value={password}
+            onChange={({ target }) => setPassword(target.value)}
+            type="password"
+          />
+        </FormGroup>
+
+      {/* </div> */}
+
+      <FormGroup>
+        <Button color="primary" block className="mt-3" disabled={isDisabled}>
+          Register
+        </Button>
+      </FormGroup>
+
+    </Form>
+  );
+};
+
+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);

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 } }) => (
   <Switch>
     <Route path={`${url}/login`} exact component={Login} />
+    <Route path={`${url}/signup`} exact component={Registration} />
     <Route path={`${url}/forget-password`} exact component={ForgetPassword} />
     <Route path={`${url}/confirm-mail`} exact component={ConfirmMail} />
     <Route path={`${url}/reset_password_token`} exact component={PasswordReset} />

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 (
+    <Fragment>
+      <Row className="text-left">
+        <Col>
+          <h5 id="modalLabel">Register</h5>
+        </Col>
+        <Col xs="auto">
+          <p className="fs--1 text-600">
+            Have an account? <Link to="/authentication/basic/login">Login</Link>
+          </p>
+        </Col>
+      </Row>
+      <JKRegistrationForm />
+    </Fragment>
+  );
+};
+
+export default Registration;

jam-ui/src/components/auth/basic/Login.js

@@ -15,8 +15,8 @@ const Login = () => {
         </Col>
         <Col xs="auto">
           <p className="fs--1 text-600">
-            or {/* <Link to="/authentication/basic/register">create an account</Link> */}
-            <a href={`${process.env.REACT_APP_CLIENT_BASE_URL}/signup`}>{t('signup')}</a>
+            or <Link to="/authentication/basic/signup">{t('signup')}</Link>
+            {/* <a href={`${process.env.REACT_APP_CLIENT_BASE_URL}/signup`}>{t('signup')}</a> */}
           </p>
         </Col>
       </Row>

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() {
           <PrivateRoute path="/shopping-cart" component={JKShoppingCart} />
           <PrivateRoute path="/checkout/success" component={JKCheckoutSuccess} />
           <PrivateRoute path="/checkout" component={JKCheckout} />
+          <PrivateRoute path="/download" component={JKDownload} />
           <PrivateRoute path="/applaunch" component={JKAppLaunch} />
           {/*Redirect*/}
           <Redirect to="/errors/404" />

jam-ui/src/components/page/JKDownload.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const JKDownload = () => {
+  return (
+    <div>JKDownload</div>
+  )
+}
+
+export default JKDownload

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) => {