Create site with contact form and email verification

This commit removes the redundant logo.svg file. It then adds several new components including 'footer', 'contact_form', 'home', 'verify_email' in forms/src/components directory. It also includes associated CSS files for styling these components. Updates have also been made in the index.html file for SEO metadata. Changes made aim to enhance functionality and improve user interface.

src/components/verify_email/ThankYou.css

@@ -0,0 +1,7 @@
+.field {
+    margin-bottom: 20px
+}
+
+.header {
+    font-size: 20px;
+}

src/components/verify_email/VerifyMail.css

@@ -0,0 +1,5 @@
+form {
+    max-width: 600px;
+    margin: auto;
+    padding: 20px;
+}

src/components/verify_email/thank_you.tsx

@@ -0,0 +1,37 @@
+import {FC, useState} from "react";
+import {useLocation} from "react-router-dom";
+
+const ThankYou: FC = () => {
+    const location = useLocation();
+    const [code, setCode] = useState('000000');
+    type DynamicFormData = {
+        [key: string]: string;
+    };
+
+    if (location.state === null || location.state.formData === undefined) {
+        return (
+            <div className="container">
+                <p>Are you in the right place? It doesn't look like you completed a form or an email verification!</p>
+            </div>
+        )
+    }
+
+    const formData: DynamicFormData = location.state.formData;
+
+    return (
+        <div className="container">
+            <p>Thank you for completing the form and verifying your email! This is the data you entered:</p>
+            <div>
+                {Object.entries(formData).map(([key, value]) => (
+                    <div className="field">
+                        <p className="header">{key}</p>
+                        <p>{value}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+
+export default ThankYou;

src/components/verify_email/verify_mail.tsx

@@ -0,0 +1,83 @@
+import {FC, useState} from "react";
+import {useLocation, useNavigate} from "react-router-dom";
+
+interface VerificationData {
+    eMail: string;
+    code: string;
+}
+
+const VerifyMail: FC = () => {
+    const navigate = useNavigate()
+    const location = useLocation();
+    const [code, setCode] = useState('000000');
+
+    if (location.state === null || location.state.email === undefined) {
+        return (
+            <div className="container">
+                <p>Are you in the right place? It doesn't look like you have an email to verify!</p>
+            </div>
+        )
+    }
+    const email = location.state.email;
+
+    function setFormData(data: DynamicFormData) {
+        console.log("Setting form data")
+        navigate('/thank-you', {
+            state: {
+                formData: data
+            }
+        });
+    }
+
+    type DynamicFormData = {
+        [key: string]: string;
+    };
+
+
+    const handleCodeSubmit = async () => {
+        const verificationData: VerificationData = {
+            code: code,
+            eMail: email
+        }
+        console.log(verificationData);
+        fetch('http://localhost:8080/api/verify_email/form', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(verificationData)
+        })
+            .then(response => {
+                if (!response.ok) {
+                    //TODO fix error and make message here?
+                    response.json().then(result => console.log(result))
+                    throw new Error('Invalid code');
+                }
+                //TODO check if its json if not its just text we need to handle and put in a p tag
+                return response.json()
+            })
+            .then((data: DynamicFormData) => {
+                setFormData(data);
+            })
+            .catch(error => {
+                console.error('Received an unexpected error: ' + error);
+            })
+    }
+
+    return (
+        <div className="container">
+            <p>Hi, you just completed a form and need to verify your email ({email}).</p>
+            <p>Please check your email for a verification code and enter it below:</p>
+            <input
+                type="text"
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                className="verification-code-input"
+            />
+            <button onClick={handleCodeSubmit} className="submit-button">Submit Code</button>
+
+        </div>
+    )
+}
+
+export default VerifyMail