From b16a998f98457e851081eb8b5bd2119182231242 Mon Sep 17 00:00:00 2001
From: Zoheb Ahmed <zohebcool1542@gmail.com>
Date: Wed, 20 Apr 2022 15:03:05 +0530
Subject: [PATCH 1/2] Added validation checks to password field in sign up form

---
 src/helpers/validate.js | 70 +++++++++++++++++++++++++----------------
 src/pages/SignUp.js     | 60 +++++++++++++++++++++++++++++++++--
 2 files changed, 100 insertions(+), 30 deletions(-)

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/SignUp.js b/src/pages/SignUp.js
index a1d5fe0..7dc8cd7 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 })}
             />
+            <Form.Text id='passwordHelpBlock' muted style={{ fontSize: '12px' }}>
+              Your password must be 8 or more characters long with a mix of upper and lowercase
+              letters, numbers &amp; symbols
+            </Form.Text>
+          </Form.Group>
+          <Form.Group className='mb-3' controlId='formBasicConfirmPassword'>
+            <Form.Label>Confirm Password</Form.Label>
+            <Form.Control
+              type='password'
+              placeholder='Confirm password'
+              name='confirmPassword'
+              onChange={(e) => setDetails({ ...details, confirmPassword: e.target.value })}
+            />
           </Form.Group>
           <Button variant='primary' type='submit'>
             Sign Up
@@ -81,3 +104,34 @@ const SignUp = () => {
 };
 
 export default SignUp;
+
+// if (details.password !== details.confirmPassword) {
+//   // console.log('password do not match');
+//   setError('Passwords do not match');
+// } else {
+//   const regex = /^(?=.*[0-9])(?=.*[!@#$%^&*_])(?=.*[A-Z])[a-zA-Z0-9!@#%^&*_]{8,}$/;
+//   if (!regex.test(details.password))
+//     setError(
+//       'Use 8 or more characters with a mix of upper and lowercase letters, numbers & symbols',
+//     );
+//   else {
+//     const check = SignupValidation(details);
+//     if (check) {
+//       try {
+//         fetch('https://journal-policy-tracker.herokuapp.com/users/register', {
+//           method: 'POST',
+//           headers: { 'Content-Type': 'application/json' },
+//           body: JSON.stringify(details),
+//         });
+//         setSuccess('Signup Successful');
+//         setTimeout(() => {
+//           window.location.href = '/login';
+//         }, 800);
+//       } catch (err) {
+//         setError('Signup Failed');
+//       }
+//     } else {
+//       setError('Invalid Email/Username');
+//     }
+//   }
+// }

From 6e05e74e83b7ea999f98346fad8ef0c257947390 Mon Sep 17 00:00:00 2001
From: Zoheb Ahmed <zohebcool1542@gmail.com>
Date: Tue, 10 May 2022 17:39:38 +0530
Subject: [PATCH 2/2] bug fixes of contact page

---
 src/pages/Contact.js | 150 ++++++++++++++++++++-----------------------
 1 file changed, 71 insertions(+), 79 deletions(-)

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 (
     <Container>
-      <h1 className="mt-4">Contact Us</h1>
+      <h1 className='mt-4'>Contact Us</h1>
       <p className='mt-p'>
         Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:
       </p>
       <Row className='contact-card-one'>
         <Col md={6}>
           <div className='contact-card' style={{ color: '#E74D3C' }}>
-             <a
+            <a
               href='mailto:contact@codeisscience.com'
-              style={{ 'text-decoration': 'none', color: 'inherit' }}
-              >
-            <ImMail size={150} />
-            <p>
-              <a href='mailto:contact@codeisscience.com'>contact@codeisscience.com</a>
-            </p>
+              style={{ textDecoration: 'none', color: 'inherit' }}
+            >
+              <ImMail size={150} />
+              <p style={{ color: '#0D6EFD' }}>contact@codeisscience.com</p>
             </a>
           </div>
         </Col>
         <Col md={6}>
           <div className='contact-card' style={{ color: '#4C4C4D' }}>
             <a
-            href='https://github.com/codeisscience'
-            target='_blank'
-            rel='noreferrer'
-            style={{ 'text-decoration': 'none', color: 'inherit' }}
+              href='https://github.com/codeisscience'
+              target='_blank'
+              rel='noreferrer'
+              style={{ textDecoration: 'none', color: 'inherit' }}
             >
-            <ImGithub size={150} />
-            <p>
-              <a href='https://github.com/codeisscience' target='_blank' rel='noreferrer'>
-                GitHub
-              </a>
-            </p>
+              <ImGithub size={150} />
+              <p style={{ color: '#0D6EFD' }}>GitHub</p>
             </a>
           </div>
         </Col>
@@ -96,17 +88,13 @@ function Contact(){
         <Col md={6}>
           <div className='contact-card' style={{ color: '#3D9DD9' }}>
             <a
-            href='https://twitter.com/codeisscience'
-            target='_blank'
-            rel='noreferrer'
-            style={{ 'text-decoration': 'none', color: 'inherit' }}
+              href='https://twitter.com/codeisscience'
+              target='_blank'
+              rel='noreferrer'
+              style={{ textDecoration: 'none', color: 'inherit' }}
             >
-            <ImTwitter size={150} />
-            <p>
-              <a href='https://twitter.com/codeisscience' target='_blank' rel='noreferrer'>
-                @codeisscience
-              </a>
-            </p>
+              <ImTwitter size={150} />
+              <p style={{ color: '#0D6EFD' }}>@codeisscience</p>
             </a>
           </div>
         </Col>
@@ -114,17 +102,13 @@ function Contact(){
           <div className='contact-card' style={{ color: '#4C4C4D' }}>
             <FaGitter size={150} />
             <a
-            href='https://gitter.im/codeisscience/Lobby'
-            target='_blank'
-            rel='noreferrer'
-            style={{ 'text-decoration': 'none', color: 'inherit' }}
+              href='https://gitter.im/codeisscience/Lobby'
+              target='_blank'
+              rel='noreferrer'
+              style={{ textDecoration: 'none', color: 'inherit' }}
             >
-              <p>
-              <a href='https://gitter.im/codeisscience/Lobby' target='_blank' rel='noreferrer'>
-                Gitter
-              </a>
-            </p>
-             </a>
+              <p style={{ color: '#0D6EFD' }}>Gitter</p>
+            </a>
           </div>
         </Col>
       </Row>
@@ -137,11 +121,13 @@ function Contact(){
                 Email
               </Form.Label>
               <Col sm={10}>
-                <Form.Control type='email'
+                <Form.Control
+                  type='email'
                   value={email.value}
                   onChange={setEmailVal}
                   onBlur={setEmailFocus}
-                  placeholder='someone@example.com' />
+                  placeholder='someone@example.com'
+                />
                 {emailIsInvalid && <p className='invalidInput'>Email cannot be empty.</p>}
               </Col>
             </Form.Group>
@@ -151,11 +137,13 @@ function Contact(){
                 Subject
               </Form.Label>
               <Col sm={10}>
-                <Form.Control type='text'
+                <Form.Control
+                  type='text'
                   value={subject.value}
                   onChange={setSubjectVal}
                   onBlur={setSubjectFocus}
-                  placeholder='Code is Science' />
+                  placeholder='Code is Science'
+                />
                 {subjectIsInvalid && <p className='invalidInput'>Subject cannot be empty.</p>}
               </Col>
             </Form.Group>
@@ -165,12 +153,14 @@ function Contact(){
                 Message
               </Form.Label>
               <Col sm={10}>
-                <Form.Control as="textarea"
+                <Form.Control
+                  as='textarea'
                   value={message.value}
                   rows={3}
                   onChange={setMsgVal}
                   onBlur={setMsgFocus}
-                  placeholder="Enter your message here..." />
+                  placeholder='Enter your message here...'
+                />
                 {messageIsInvalid && <p className='invalidInput'>Message cannot be empty.</p>}
               </Col>
             </Form.Group>
@@ -182,14 +172,16 @@ function Contact(){
 
             <Form.Group as={Row} className='mt-3'>
               <Col sm={{ span: 10, offset: 2 }}>
-                <Button type='submit' disabled={!formIsValid}>Send</Button>
+                <Button type='submit' disabled={!formIsValid}>
+                  Send
+                </Button>
               </Col>
             </Form.Group>
           </Form>
         </Col>
       </Row>
     </Container>
-  )
-};
+  );
+}
 
-export default Contact
\ No newline at end of file
+export default Contact;