From 7fed4667eefd1b824b01e1feb9387382e48c396d Mon Sep 17 00:00:00 2001 From: Linda Peng Date: Mon, 28 Sep 2020 18:36:41 -0700 Subject: [PATCH 1/5] verify email skeleton --- src/App.js | 5 +++++ src/components/Auth/VerifyEmail.js | 21 +++++++++++++++++++++ src/utils/queries.js | 11 +++++++++-- 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 src/components/Auth/VerifyEmail.js diff --git a/src/App.js b/src/App.js index d0097a2..ba7fd92 100644 --- a/src/App.js +++ b/src/App.js @@ -14,6 +14,7 @@ import Profile from './components/Profile'; 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( @@ -44,6 +45,10 @@ function App() { + } + /> diff --git a/src/components/Auth/VerifyEmail.js b/src/components/Auth/VerifyEmail.js new file mode 100644 index 0000000..f92e8d9 --- /dev/null +++ b/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

verify email

; +} + +VerifyEmail.propTypes = { + matchProps: PropTypes.object, +}; + +export default VerifyEmail; diff --git a/src/utils/queries.js b/src/utils/queries.js index 5a6d85a..b369801 100644 --- a/src/utils/queries.js +++ b/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,11 @@ const getResources = async searchTerm => { return data; }; -export { getResource, getResources }; +const verifyEmail = async (_key, apiKey) => { + const { data } = await axios.post(`${API_URL}/registration/verify-email`, { + key: apiKey, + }); + return data; +}; + +export { getResource, getResources, verifyEmail }; From 31abf6a9ad9a321f31e050e977df7be9031fc6bc Mon Sep 17 00:00:00 2001 From: Linda Peng Date: Wed, 30 Sep 2020 18:04:16 -0700 Subject: [PATCH 2/5] Create a new register component and verify email function --- src/App.js | 4 ++++ src/utils/queries.js | 22 ++++++++++++++++++---- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index ba7fd92..81bbb00 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import Home from './components/Home'; import Nav from './components/Nav'; import LoginForm from './components/Auth/LoginForm.js'; import SignUpForm from './components/Auth/SignUpForm.js'; +import Register from './components/Auth/Register.js'; import Coworking from './components/Coworking'; import Profile from './components/Profile'; import SubmitResource from './components/Resources/submitResource'; @@ -45,6 +46,9 @@ function App() { + + + } diff --git a/src/utils/queries.js b/src/utils/queries.js index b369801..d205573 100644 --- a/src/utils/queries.js +++ b/src/utils/queries.js @@ -12,11 +12,25 @@ const getResources = async searchTerm => { return data; }; -const verifyEmail = async (_key, apiKey) => { - const { data } = await axios.post(`${API_URL}/registration/verify-email`, { - key: apiKey, +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; }; -export { getResource, getResources, verifyEmail }; +const verifyEmail = async (_key, apiKey) => { + const { data } = await axios.post( + `${API_URL}/auth/registration/verify-email`, + { + key: apiKey, + } + ); + return data; +}; + +export { getResource, verifyEmail, registerUser }; From 049ac8a03abb59ea2d2759a2f6b194f49ddc5fdf Mon Sep 17 00:00:00 2001 From: Linda Peng Date: Wed, 30 Sep 2020 18:04:29 -0700 Subject: [PATCH 3/5] Check up register component --- src/components/Auth/Register.js | 132 ++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 src/components/Auth/Register.js diff --git a/src/components/Auth/Register.js b/src/components/Auth/Register.js new file mode 100644 index 0000000..d4b4df2 --- /dev/null +++ b/src/components/Auth/Register.js @@ -0,0 +1,132 @@ +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 './SignUpForm.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, password1, password2 }) => { + const data = { + username, + password1, + password2, + email, + }; + console.log('ON SUBMIT FIRE'); + console.log(data); + registerUser(data); + }; + + if (isLoggedIn) { + return ; + } + + if (auth && auth.authTokens) { + return

Welcome!

; + } + + return ( + + + Create an account + + + + + + + {errorMessage && {errorMessage}} + + + + +

+ Already have an account? + {toggleActiveForm ? ( + + Log in + + ) : ( + Log in + )} + . +

+ + ); +}; + +const { func } = PropTypes; + +Register.propTypes = { + toggleActiveForm: func, +}; + +export default Register; From b01340c4b0b3850915d5b8f14ff7b89775a513f5 Mon Sep 17 00:00:00 2001 From: Linda Peng Date: Wed, 21 Oct 2020 21:47:58 -0700 Subject: [PATCH 4/5] Export getResources --- src/utils/queries.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/queries.js b/src/utils/queries.js index d205573..8173ceb 100644 --- a/src/utils/queries.js +++ b/src/utils/queries.js @@ -33,4 +33,4 @@ const verifyEmail = async (_key, apiKey) => { return data; }; -export { getResource, verifyEmail, registerUser }; +export { getResource, getResources, verifyEmail, registerUser }; From 364035f2a1c7d781ae5bda6911b528139846a6ba Mon Sep 17 00:00:00 2001 From: Gaurav Chikhale Date: Thu, 1 Oct 2020 16:36:17 -0400 Subject: [PATCH 5/5] Fix validation warnings --- src/components/Auth/Register.js | 24 ++++++++++----------- src/components/Auth/Register.schema.js | 30 ++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 13 deletions(-) create mode 100644 src/components/Auth/Register.schema.js diff --git a/src/components/Auth/Register.js b/src/components/Auth/Register.js index d4b4df2..313281d 100644 --- a/src/components/Auth/Register.js +++ b/src/components/Auth/Register.js @@ -4,7 +4,7 @@ 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 './SignUpForm.schema'; +import { validationResolver, defaultValues } from './Register.schema'; import { Form, Field } from '../form'; const Register = ({ toggleActiveForm }) => { @@ -13,16 +13,14 @@ const Register = ({ toggleActiveForm }) => { const referer = '/profile'; const auth = useAuth(); - const onSubmit = ({ username, email, password1, password2 }) => { - const data = { + const onSubmit = ({ username, email, password, passwordConfirmation }) => { + console.log('#GC SUBMIT', { username, - password1, - password2, email, - }; - console.log('ON SUBMIT FIRE'); - console.log(data); - registerUser(data); + password, + passwordConfirmation, + }); + //registerUser(data); }; if (isLoggedIn) { @@ -71,8 +69,8 @@ const Register = ({ toggleActiveForm }) => { fullWidth variant="outlined" margin="dense" - name="password1" - label="Password1*" + name="password" + label="Password*" type="text" id="password1" /> @@ -81,8 +79,8 @@ const Register = ({ toggleActiveForm }) => { fullWidth variant="outlined" margin="dense" - name="password2" - label="Password2*" + name="passwordConfirmation" + label="Password Confirmation*" type="text" id="password2" /> diff --git a/src/components/Auth/Register.schema.js b/src/components/Auth/Register.schema.js new file mode 100644 index 0000000..828a943 --- /dev/null +++ b/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 };