Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Work on using form manager to send forms as emails #31

Merged
merged 2 commits into from
Mar 19, 2024
Merged

Work on using form manager to send forms as emails #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efa55b9
Adding reCaptcha v2 functionality, unable to test locally because of …
SevLG Mar 19, 2024
2397eb7
Merge branch 'form_manager' into pre-dev
SevLG Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 58 additions & 1 deletion pmp-frontend-app/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions pmp-frontend-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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",
Expand Down
61 changes: 44 additions & 17 deletions pmp-frontend-app/src/components/ContactFormComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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: "",
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion pmp-frontend-app/src/pages/ContactPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>
Expand Down
Loading