diff options
author | Jeff <jeffkleinaitis@gmail.com> | 2024-04-09 15:12:50 -0400 |
---|---|---|
committer | Jeff <jeffkleinaitis@gmail.com> | 2024-04-09 15:12:50 -0400 |
commit | 9ac6e1ddef7a1a9f277b9736fee08d97247adab2 (patch) | |
tree | b2b5ce4599514ba744744ba3f0d6f64de7c2602e /src/components/FlexibleForm.js | |
parent | 102324996e227e1e9bf70a1641afb7b438d56276 (diff) |
refactor: Remove NextJS from project
Diffstat (limited to 'src/components/FlexibleForm.js')
-rw-r--r-- | src/components/FlexibleForm.js | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/src/components/FlexibleForm.js b/src/components/FlexibleForm.js new file mode 100644 index 0000000..831f972 --- /dev/null +++ b/src/components/FlexibleForm.js @@ -0,0 +1,82 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +import logo from "../assets/img/logo.svg"; + +const FlexibleForm = ({ data, onSuccess }) => { + const handleSubmit = async (event) => { + event.preventDefault(); + const formData = new FormData(event.target); + + try { + const response = await fetch(process.env.NEXT_PUBLIC_HOST + data.formAction, { + method: data.formMethod, + body: JSON.stringify(Object.fromEntries(formData)), + headers: { + 'Content-Type': 'application/json' + }, + }); + + const token = response.headers.get('Authorization'); + onSuccess(token); + + } catch (error) { + console.error('Error submitting form:', error); + } + } + + return ( + <div className="flex flex-col items-center justify-center min-h-screen"> + <div className="mt-8 sm:w-full sm:max-w-md border rounded-lg p-6 border-gray-300 shadow-lg"> + <Link to="/"> + <span className="flex justify-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100"> + <span> + <img + src={logo} + alt="heart shaped handshake logo" + width="128" + height="128" + className="w-20" + /> + </span> + </span> + </Link> + <h3 className="text-3xl mt-3 text-center font-bold leading-snug text-gray-800 lg:text-4xl dark:text-white"> + {data.title} + </h3> + <p className="mt-2 text-lg text-center leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300"> + {data.subtitle} + </p> + <form onSubmit={handleSubmit} className="mt-5 space-y-3"> + {data.formFields.map((field, index) => ( + <div key={index}> + <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-gray-900">{field.label}</label> + <input + id={field.name} + name={field.name} + type={field.type} + autoComplete={field.autoComplete} + required={field.required} + className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + /> + </div> + ))} + <button type="submit" className="w-full rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> + {data.ctaText || "Submit"} + </button> + </form> + {data.underneathButton && ( + <div className="mt-3 text-center"> + <a href={data.underneathButton.url} className="text-sm text-indigo-600 hover:text-indigo-500">{data.underneathButton.text}</a> + </div> + )} + {data.ctaLink && ( + <p className="mt-10 text-center text-sm text-gray-500"> + {data.ctaLink.text} <a href={data.ctaLink.url} className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">{data.ctaLink.linkText}</a> + </p> + )} + </div> + </div> + ); +}; + +export default FlexibleForm; |