WIP [Issue 161] Hook up FE to the new auth endpoints

src/App.js

@@ -10,11 +10,13 @@ import Nav from './pages/pageSections/Nav';
 import Footer from './pages/pageSections/Footer';
 import LoginForm from './components/Auth/LoginForm.js';
 import SignUpForm from './components/Auth/SignUpForm.js';
+import Register from './components/Auth/Register.js';
 import Connect from './pages/Connect';
 import Profile from './pages/Profile';
-import ResourceSubmit from './pages/Resources/ResourceSubmit';
-import ResourcePage from './pages/Resources/ResourcePage.js';
+import SubmitResource from './components/Resources/submitResource';
+import ResourcePage from './components/Resources/ResourcePage.js';
 import PrivateRoute from './PrivateRoute';
+import VerifyEmail from './components/Auth/VerifyEmail';
 
 function App() {
   const [authTokens, setAuthTokens] = useState(
@@ -45,6 +47,13 @@ function App() {
             <Route path="/signup">
               <SignUpForm />
             </Route>
+            <Route path="/register">
+              <Register />
+            </Route>
+            <Route
+              path="/verify-email/:key"
+              render={matchProps => <VerifyEmail matchProps={matchProps} />}
+            />
             <Route path="/connect">
               <Connect />
             </Route>

src/components/Auth/Register.js

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { registerUser } from '../../utils/queries';
+import { Link, Redirect } from 'react-router-dom';
+import { Box, Button, TextField } from '@material-ui/core/';
+import { useAuth } from './AuthContext';
+import { validationResolver, defaultValues } from './Register.schema';
+import { Form, Field } from '../form';
+
+const Register = ({ toggleActiveForm }) => {
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const referer = '/profile';
+  const auth = useAuth();
+
+  const onSubmit = ({ username, email, password, passwordConfirmation }) => {
+    console.log('#GC SUBMIT', {
+      username,
+      email,
+      password,
+      passwordConfirmation,
+    });
+    //registerUser(data);
+  };
+
+  if (isLoggedIn) {
+    return <Redirect to={referer} />;
+  }
+
+  if (auth && auth.authTokens) {
+    return <p>Welcome!</p>;
+  }
+
+  return (
+    <Box
+      component={Form}
+      display="flex"
+      flexWrap="wrap"
+      noValidate
+      autoComplete="off"
+      onSubmit={onSubmit}
+      data-testid="signupForm"
+      validationResolver={validationResolver}
+      defaultValues={defaultValues}
+    >
+      <Box component="h1" fontSize={18}>
+        Create an account
+      </Box>
+      <Field
+        as={TextField}
+        fullWidth
+        variant="outlined"
+        margin="dense"
+        name="username"
+        label="Username*"
+        id="username"
+      />
+      <Field
+        as={TextField}
+        fullWidth
+        variant="outlined"
+        margin="dense"
+        name="email"
+        label="Email*"
+        id="email"
+      />
+      <Field
+        as={TextField}
+        fullWidth
+        variant="outlined"
+        margin="dense"
+        name="password"
+        label="Password*"
+        type="text"
+        id="password1"
+      />
+      <Field
+        as={TextField}
+        fullWidth
+        variant="outlined"
+        margin="dense"
+        name="passwordConfirmation"
+        label="Password Confirmation*"
+        type="text"
+        id="password2"
+      />
+
+      {errorMessage && <Box color="error.main"> {errorMessage}</Box>}
+
+      <Box width="100%" marginTop={2}>
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          data-testid="submitButton"
+        >
+          Sign Up
+        </Button>
+      </Box>
+      <p>
+        Already have an account?
+        {toggleActiveForm ? (
+          <Box
+            component="button"
+            color="primary.main"
+            padding={0}
+            marginLeft={1}
+            border={0}
+            bgcolor="transparent"
+            fontSize={16}
+            onClick={toggleActiveForm}
+          >
+            Log in
+          </Box>
+        ) : (
+          <Link to="/login"> Log in</Link>
+        )}
+        .
+      </p>
+    </Box>
+  );
+};
+
+const { func } = PropTypes;
+
+Register.propTypes = {
+  toggleActiveForm: func,
+};
+
+export default Register;

src/components/Auth/Register.schema.js

@@ -0,0 +1,30 @@
+import Joi from '@hapi/joi';
+import { createValidationResolver } from '../form';
+
+const schema = Joi.object({
+  username: Joi.string()
+    .required()
+    .trim()
+    .label('Username'),
+  email: Joi.string()
+    .required()
+    .trim()
+    .label('Email'),
+  password: Joi.string()
+    .required()
+    .label('Password'),
+  passwordConfirmation: Joi.string()
+    .required()
+    .label('Password Confirmation')
+    .valid(Joi.ref('password')),
+});
+
+const defaultValues = {
+  username: '',
+  email: '',
+  password: '',
+  passwordConfirmation: '',
+};
+
+const validationResolver = createValidationResolver(schema);
+export { validationResolver, schema, defaultValues };

src/components/Auth/VerifyEmail.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from 'react-query';
+import { verifyEmail } from '../../utils/queries';
+
+function VerifyEmail({ matchProps }) {
+  console.log(matchProps);
+  const key = matchProps.match.params.key;
+  console.log(key);
+  const { isLoading, data, error } = useQuery(['key', key], verifyEmail);
+  console.log(isLoading);
+  console.log(data);
+  console.log(error);
+  return <h1>verify email</h1>;
+}
+
+VerifyEmail.propTypes = {
+  matchProps: PropTypes.object,
+};
+
+export default VerifyEmail;

src/utils/queries.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const API_URL = '/api/v1';
+const API_URL = 'http://localhost:8000/api/v1';
 
 const getResource = async (_key, id) => {
   const { data } = await axios.get(`${API_URL}/resources/${id}`);
@@ -12,4 +12,25 @@ const getResources = async searchTerm => {
   return data;
 };
 
-export { getResource, getResources };
+const registerUser = async (_key, user) => {
+  const { username, password1, email, password2 } = user;
+  const { data } = await axios.post(`${API_URL}/auth/registration`, {
+    username,
+    email,
+    password1,
+    password2,
+  });
+  return data;
+};
+
+const verifyEmail = async (_key, apiKey) => {
+  const { data } = await axios.post(
+    `${API_URL}/auth/registration/verify-email`,
+    {
+      key: apiKey,
+    }
+  );
+  return data;
+};
+
+export { getResource, getResources, verifyEmail, registerUser };