initial commit

client/src/Forms/Contact/Confirmation/ConfirmationModal.tsx

@@ -0,0 +1,32 @@
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+
+interface ConfirmationModalProps {
+  name: string;
+  show: boolean;
+  onHide: () => void;
+}
+
+function ConfirmationModal(props: ConfirmationModalProps) {
+  return (
+    <Modal
+      {...props}
+      size="sm"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
+      <Modal.Body className="d-flex flex-column align-items-center justify-content-center">
+        <p>Thank you for your message, {props.name}!</p>
+        <Button
+          className="contact-button"
+          variant="primary"
+          onClick={props.onHide}
+        >
+          Close
+        </Button>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+export default ConfirmationModal;

client/src/Forms/Contact/ContactForm.css

@@ -0,0 +1,13 @@
+#contact {
+  padding-top: 70px;
+  margin-top: -70px;
+  margin-bottom: 200px;
+}
+
+.contact-title {
+  margin-bottom: 6rem;
+}
+
+.contact-text {
+  color: var(--group-info-color);
+}

client/src/Forms/Contact/ContactForm.tsx

@@ -0,0 +1,105 @@
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import { postMessage } from "../../api";
+import { useState } from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import "./ContactForm.css";
+import ConfirmationModal from "./Confirmation/ConfirmationModal";
+import EmailSignupButton from "../../EmailSignupButton/EmailSignupButton";
+
+function ContactForm() {
+  const [confirmationModalShow, setConfirmationModalShow] = useState(false);
+  const [form, setForm] = useState<{ [key: string]: string }>({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  const handleFormChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setForm({ ...form, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    postMessage(form.name, form.email, form.message)
+      .then(() => {
+        setConfirmationModalShow(true);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  const handleFormReset = () => {
+    setForm({ name: "", email: "", message: "" });
+    setConfirmationModalShow(false);
+  };
+
+  return (
+    <Container id="contact">
+      <Row className="justify-content-center text-end">
+        <Col xs={12} md={8} lg={6}>
+          <Form
+            className="contact-text"
+            id="contact-form"
+            onSubmit={handleSubmit}
+          >
+            <h3 className="display-3 contact-title">Contact Us</h3>
+            <Form.Group className="mb-3" controlId="formBasicName">
+              <Form.Control
+                type="text"
+                placeholder="Enter name"
+                required
+                name="name"
+                value={form.name}
+                onChange={handleFormChange}
+                autoComplete="name"
+              />
+            </Form.Group>
+            <Form.Group className="mb-3" controlId="formBasicEmail">
+              <Form.Control
+                type="email"
+                placeholder="Enter email"
+                required
+                name="email"
+                value={form.email}
+                onChange={handleFormChange}
+                autoComplete="email"
+              />
+            </Form.Group>
+
+            <Form.Group className="mb-3" controlId="formBasicMessage">
+              <Form.Label>Message</Form.Label>
+              <Form.Control
+                as="textarea"
+                rows={3}
+                required
+                name="message"
+                placeholder="Enter message"
+                value={form.message}
+                onChange={handleFormChange}
+              />
+            </Form.Group>
+            <Button variant="primary" type="submit">
+              Submit
+            </Button>
+          </Form>
+          <ConfirmationModal
+            show={confirmationModalShow}
+            onHide={handleFormReset}
+            name={form.name}
+          />
+        </Col>
+      </Row>
+      <Row className="justify-content-center">
+        <Container className="mt-5 text-center">
+          <EmailSignupButton />
+        </Container>
+      </Row>
+    </Container>
+  );
+}
+
+export default ContactForm;