Merge pull request #31 from ScilifelabDataCentre/pre-dev

Work on using form manager to send forms as emails
ScilifelabDataCentre · Mar 19, 2024 · 1ae131c · 1ae131c
2 parents 3280856 + 2397eb7
commit 1ae131c
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 19 deletions.
diff --git a/pmp-frontend-app/package-lock.json b/pmp-frontend-app/package-lock.json
diff --git a/pmp-frontend-app/package.json b/pmp-frontend-app/package.json
@@ -15,6 +15,7 @@
     "js-cookie": "^3.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.3",
     "remark-gfm": "^4.0.0"
@@ -23,6 +24,7 @@
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
+    "@types/react-google-recaptcha": "^2.1.9",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/pmp-frontend-app/src/components/ContactFormComponent.tsx b/pmp-frontend-app/src/components/ContactFormComponent.tsx
@@ -1,5 +1,6 @@
-import { ChangeEvent, FormEvent, ReactElement, useState } from "react";
+import { ChangeEvent, ReactElement, useState } from "react";
 import React from "react";
+import ReCAPTCHA from "react-google-recaptcha";
 
 export default function ContactFormComponent(): ReactElement {
     const [inputFields, setInputFields] = useState({
@@ -12,33 +13,41 @@ export default function ContactFormComponent(): ReactElement {
         email: "",
         message: ""
     });
+    const [recaptchaPassed, setRecaptchaPassed] = useState(false);
 
-    const messageCharLimit = 800;
+    const messageCharLimit = 1000;
 
-    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        let validForm = true;
+    function checkFormFilled(): boolean {
+        let key: keyof typeof inputFields;
+        for (key in inputFields) {
+            if (!inputFields[key]) {
+                return false;
+            }
+        }
+        return true;  
+    }
+
+    function checkValidForm(): boolean {
         let key: keyof typeof errors;
         for (key in errors) {
             if (errors[key]) {
-                validForm = false;
+                return false;
             }
         }
-        if (validForm) {
-            console.log("Valid form:");
-            console.log(inputFields);
-         }
-         else { 
-            console.log("Non valid form.");
-            console.log(errors);
-         }
-    };
+        return true;    
+    }
 
     function handleChange(e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) { 
         setInputFields({ ...inputFields, [e.target.name]: e.target.value});
     }
 
+    function onChangeRecaptcha() {
+        setRecaptchaPassed(true);
+    }
+
+
     React.useEffect(() =>{
+        // form validation
         let errors_tmp = {
             name: "",
             email: "",
@@ -60,7 +69,7 @@ export default function ContactFormComponent(): ReactElement {
 
     return(
         <div className="bg-white bg-opacity-95 rounded-[10px] shadow border-2 border-zinc-300">
-            <form onSubmit={handleSubmit} className="bg-white">
+            <form action="https://forms.dc.scilifelab.se/api/v1/form/VLtfHqlxZxY84EM7/incoming" method="POST" accept-charset="utf-8">
                 <div className="flex flex-col space-y-8 py-10 px-12 pb-10">
                     <div className="flex flex-row space-x-36">
                         <div className="flex flex-col space-y-2">
@@ -97,6 +106,7 @@ export default function ContactFormComponent(): ReactElement {
                                 </p>
                                 ) : null}
                         </div>
+                        <input type='hidden' name='origin' value='precision-medicine-portal-contact' hidden aria-labelledby="precision-medicine-portal-contact"></input>
                     </div>
                     <div className="flex flex-col space-y-2">
                         <label>Message</label>
@@ -116,8 +126,25 @@ export default function ContactFormComponent(): ReactElement {
                                 {errors.message}
                             </p> }
                     </div>
+                    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+                    <div className="g-recaptcha" data-sitekey="6Lcf2Z0pAAAAADHiZZR3snpGetHNmO0TLvdBgfEU"></div>
+                    <ReCAPTCHA
+                        sitekey="Your client site key"
+                        onChange={onChangeRecaptcha}
+                    />
                     <div className="flex flex-col items-center">
-                        <button className="btn btn-wide bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300">Submit</button>
+                        {(checkFormFilled() && checkValidForm()) ?
+                            (recaptchaPassed ? 
+                                <input type="submit" value="Submit" className="btn btn-wide bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300" />
+                                :
+                                <>
+                                    <p className="error text-red-400">Please tick 'I'm not a robot' above the 'Submit' button.</p>
+                                    <div className='btn btn-wide bg-zinc-300 text-gray-500 cursor-not-allowed'>Submit</div>
+                                </>
+                            )
+                            :
+                            <div className='btn btn-wide bg-zinc-300 text-gray-500 cursor-not-allowed'>Submit</div>
+                        }
                     </div>
                 </div>
             </form>

diff --git a/pmp-frontend-app/src/pages/ContactPage.tsx b/pmp-frontend-app/src/pages/ContactPage.tsx
@@ -4,6 +4,7 @@ import { BODY_CLASSES, H_1 } from '../constants';
 import { ILink } from '../interfaces/types';
 import { Link } from 'react-router-dom';
 import { ContactPageContent } from '../content/content';
+import ContactFormComponent from '../components/ContactFormComponent';
 
 export default function ContactPage(): ReactElement {
     TrackPageViewIfEnabled();
@@ -25,7 +26,7 @@ export default function ContactPage(): ReactElement {
             <div className={H_1}>Contact</div>
             <div className="divider">{ContactPageContent.content[0].header}</div>
             <p>{ContactPageContent.content[0].body}</p>
-            {/*<ContactFormComponent />*/}
+            <ContactFormComponent />
             <div className="divider">{ContactPageContent.content[1].header}</div>
             <p>{ContactPageContent.content[1].body}</p>
         </div>