diff --git a/src/helpers/validate.js b/src/helpers/validate.js index 0b65264..71ef152 100644 --- a/src/helpers/validate.js +++ b/src/helpers/validate.js @@ -1,36 +1,52 @@ /* eslint-disable-next-line max-len */ // ----------------------------------Journal Validation------------------------------ -export const JournalValidation = (title, url, issn, rating, policyTitle, -firstYear, lastYear, policyType, domain, date) =>{ - if(title.length<3 || url.length < 5 || issn.length<1 || rating.length<1 || - date.length<1 || policyTitle.length<1 || firstYear.length<1 || lastYear.length<1 || - policyType.length<1 || domain.length<1 || !date){ - - return false - - } - - return true; - -} +export const JournalValidation = ( + title, + url, + issn, + rating, + policyTitle, + firstYear, + lastYear, + policyType, + domain, + date, +) => { + if ( + title.length < 3 || + url.length < 5 || + issn.length < 1 || + rating.length < 1 || + date.length < 1 || + policyTitle.length < 1 || + firstYear.length < 1 || + lastYear.length < 1 || + policyType.length < 1 || + domain.length < 1 || + !date + ) { + return false; + } + + return true; +}; // ----------------------------------Signup Validation------------------------------ -export const SignupValidation = ({username,email,password}) => { - if(username<1||email<1||password<1) - { - return false; - } - return true; -} +export const SignupValidation = ({ username, email }) => { + if (username < 1 || email < 1) { + return false; + } + + return true; +}; // ----------------------------------Login Validation------------------------------ -export const LoginValidation = ({email,password}) => { - if(email<1||password<1) - { - return false; - } - return true; -} \ No newline at end of file +export const LoginValidation = ({ email, password }) => { + if (email < 1 || password < 1) { + return false; + } + return true; +}; diff --git a/src/pages/Contact.js b/src/pages/Contact.js index 70f7638..3c48994 100644 --- a/src/pages/Contact.js +++ b/src/pages/Contact.js @@ -4,90 +4,82 @@ import { Container, Row, Col, Form, Button } from 'react-bootstrap'; import { ImTwitter, ImMail, ImGithub } from 'react-icons/im'; import { FaGitter } from 'react-icons/fa'; -function Contact(){ - let formIsValid = false +function Contact() { + let formIsValid = false; const [email, setEmailAttr] = useState({ value: '', - focused: false - }) + focused: false, + }); const [subject, setSubjectAttr] = useState({ value: '', - focused: false - }) + focused: false, + }); const [message, setMessageAttr] = useState({ value: '', - focused: false - }) + focused: false, + }); + const setEmailVal = (e) => setEmailAttr((prev) => ({ ...prev, value: e.target.value })); + const setSubjectVal = (e) => setSubjectAttr((prev) => ({ ...prev, value: e.target.value })); + const setMsgVal = (e) => setMessageAttr((prev) => ({ ...prev, value: e.target.value })); - const setEmailVal = e => setEmailAttr(prev => ({ ...prev, value: e.target.value })) - const setSubjectVal = e => setSubjectAttr(prev => ({ ...prev, value: e.target.value })) - const setMsgVal = e => setMessageAttr(prev => ({ ...prev, value: e.target.value })) + const setEmailFocus = () => setEmailAttr((prev) => ({ ...prev, focused: true })); + const setSubjectFocus = () => setSubjectAttr((prev) => ({ ...prev, focused: true })); + const setMsgFocus = () => setMessageAttr((prev) => ({ ...prev, focused: true })); - const setEmailFocus = () => setEmailAttr(prev => ({ ...prev, focused: true })) - const setSubjectFocus = () => setSubjectAttr(prev => ({ ...prev, focused: true })) - const setMsgFocus = () => setMessageAttr(prev => ({ ...prev, focused: true })) + const emailIsValid = !!email.value; + const subjectIsValid = !!subject.value; + const messageIsValid = !!message.value; - const emailIsValid = !!email.value - const subjectIsValid = !!subject.value - const messageIsValid = !!message.value + const emailIsInvalid = email.focused && !emailIsValid; + const subjectIsInvalid = subject.focused && !subjectIsValid; + const messageIsInvalid = message.focused && !messageIsValid; - const emailIsInvalid = email.focused && !emailIsValid - const subjectIsInvalid = subject.focused && !subjectIsValid - const messageIsInvalid = message.focused && !messageIsValid - - formIsValid = emailIsValid && subjectIsValid && messageIsValid + formIsValid = emailIsValid && subjectIsValid && messageIsValid; const formSubmitHandler = (e) => { - e.preventDefault() + e.preventDefault(); if (!formIsValid) { - console.log("INVALID FORM") - return + // console.log('INVALID FORM'); + return; } - console.log("PERFORM NETWORK REQUEST HERE") - setEmailAttr({value:'',focused:false}) - setSubjectAttr({value:'',focused:false}) - setMessageAttr({value:'',focused:false}) - - } + // console.log('PERFORM NETWORK REQUEST HERE'); + setEmailAttr({ value: '', focused: false }); + setSubjectAttr({ value: '', focused: false }); + setMessageAttr({ value: '', focused: false }); + }; return ( -

Contact Us

+

Contact Us

Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:

- - -

- contact@codeisscience.com -

+ style={{ textDecoration: 'none', color: 'inherit' }} + > + +

contact@codeisscience.com

- -

- - GitHub - -

+ +

GitHub

@@ -96,17 +88,13 @@ function Contact(){
- -

- - @codeisscience - -

+ +

@codeisscience

@@ -114,17 +102,13 @@ function Contact(){
-

- - Gitter - -

- +

Gitter

+
@@ -137,11 +121,13 @@ function Contact(){ Email - + placeholder='someone@example.com' + /> {emailIsInvalid &&

Email cannot be empty.

} @@ -151,11 +137,13 @@ function Contact(){ Subject - + placeholder='Code is Science' + /> {subjectIsInvalid &&

Subject cannot be empty.

} @@ -165,12 +153,14 @@ function Contact(){ Message - + placeholder='Enter your message here...' + /> {messageIsInvalid &&

Message cannot be empty.

} @@ -182,14 +172,16 @@ function Contact(){ - + - ) -}; + ); +} -export default Contact \ No newline at end of file +export default Contact; diff --git a/src/pages/SignUp.js b/src/pages/SignUp.js index 6ce825a..7f95b38 100644 --- a/src/pages/SignUp.js +++ b/src/pages/SignUp.js @@ -10,6 +10,7 @@ const SignUp = () => { username: '', email: '', password: '', + confirmPassword: '', }); const [success, setSuccess] = useState(''); const [error, setError] = useState(''); @@ -18,8 +19,19 @@ const SignUp = () => { e.preventDefault(); setSuccess(''); setError(''); + const check = SignupValidation(details); - if (check) { + const regex = /^(?=.*[0-9])(?=.*[!@#$%^&*_])(?=.*[A-Z])[a-zA-Z0-9!@#%^&*_]{8,}$/; + + if (!check) { + setError('Invalid Email/Username'); + } else if (details.password !== details.confirmPassword) { + setError('Passwords do not match'); + } else if (!regex.test(details.password)) { + setError( + 'Use 8 or more characters with a mix of upper and lowercase letters, numbers & symbols', + ); + } else { try { fetch('https://journal-policy-tracker.herokuapp.com/users/register', { method: 'POST', @@ -33,8 +45,6 @@ const SignUp = () => { } catch (err) { setError('Signup Failed'); } - } else { - setError('Invalid Input'); } }; @@ -70,6 +80,19 @@ const SignUp = () => { name='password' onChange={(e) => setDetails({ ...details, password: e.target.value })} /> + + Your password must be 8 or more characters long with a mix of upper and lowercase + letters, numbers & symbols + + + + Confirm Password + setDetails({ ...details, confirmPassword: e.target.value })} + />