Merge pull request 'Fix contact form' (#9) from fixes-13122025-2 into main

Reviewed-on: #9

src/components/footer/index.tsx

@@ -1,35 +1,13 @@
-import React, { useState } from 'react'
-
+import React from 'react'
 import { Section } from '../shared'
 import { SolidButton } from '../shared/styledComponents'
 import { StyledHeading, StyledDesc, InputStyled, StyledAnchor } from './style'
 
-const Footer = () => {
-  const [email, setEmail] = useState('')
-  const [emailError, setEmailError] = useState('')
-
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    setEmail(value)
-
-    if (
-      value &&
-      (value.toLowerCase().includes('@gmail.com') ||
-        value.toLowerCase().includes('@googlemail.com'))
-    ) {
-      setEmailError('Gmail addresses are not allowed.')
-    } else {
-      setEmailError('')
-    }
+const anchorStyles = {
+  color: '#888'
 }
 
-  const handleSubmit = (e: React.FormEvent) => {
-    if (emailError) {
-      e.preventDefault()
-    }
-  }
-
-  return (
+const Footer = () => (
   <Section bottomArrow={false}>
     <div className="row">
       <div className="col-md-3 me-md-5">
@@ -37,8 +15,14 @@ const Footer = () => {
         <StyledDesc>
           Data Controller is a product of 4GL Apps, a brand of Bowe IO Ltd,
           which is a UK company with a focus on SAS Software,{' '}
-            <StyledAnchor href="https://sasapps.io">Apps</StyledAnchor>, and
-            Services.
+          <StyledAnchor
+            href="https://sasapps.io"
+            target="_blank"
+            rel="noopener"
+          >
+            Apps
+          </StyledAnchor>
+          , and Services.
         </StyledDesc>
       </div>
       <div className="col-md-3">
@@ -47,7 +31,6 @@ const Footer = () => {
           className="kwes-form"
           method="POST"
           action="https://kwes.io/api/foreign/forms/mxKuyK4lxZWnG2WNH3ga"
-            onSubmit={handleSubmit}
         >
           <div className="mb-3">
             <InputStyled
@@ -56,21 +39,8 @@ const Footer = () => {
               className="form-control"
               aria-describedby="emailHelp"
               placeholder="Email Address*"
-                value={email}
-                onChange={handleEmailChange}
               required
             />
-              {emailError && (
-                <div
-                  style={{
-                    color: 'red',
-                    fontSize: '0.875rem',
-                    marginTop: '0.25rem'
-                  }}
-                >
-                  {emailError}
-                </div>
-              )}
           </div>
           <div className="mb-3">
             <InputStyled
@@ -96,13 +66,18 @@ const Footer = () => {
         <StyledHeading>Other Resources</StyledHeading>
         <StyledDesc>
           Visit our educational and fun SAS® software quiz{' '}
-            <StyledAnchor href="https://sasensei.com">Sasensei</StyledAnchor>{' '}
+          <StyledAnchor
+            href="https://sasensei.com"
+            target="_blank"
+            rel="noopener"
+          >
+            Sasensei
+          </StyledAnchor>{' '}
           and test your knowledge of SAS topics.
         </StyledDesc>
       </div>
     </div>
   </Section>
 )
-}
 
 export default Footer

src/pages/contact.tsx

@@ -37,10 +37,28 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
 
   const [name, setName] = useState<string>()
   const [email, setEmail] = useState<string>()
+  const [emailError, setEmailError] = useState<boolean>(false)
   const [subject, setSubject] = useState<string>()
   const [message, setMessage] = useState<string>()
   const [notification, setNotification] = useState<string>()
 
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setEmail(value)
+
+    if (
+      value &&
+      (value.toLowerCase().includes('@gmail.com') ||
+        value.toLowerCase().includes('@googlemail.com'))
+    ) {
+      setEmailError(true)
+      setNotification('Gmail addresses are not allowed.')
+    } else {
+      setEmailError(false)
+      setNotification(undefined)
+    }
+  }
+
   const getBorderStyle = (value: string | undefined) =>
     value === undefined ? {} : value ? {} : { border: '1px solid red' }
 
@@ -66,6 +84,11 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
               onSubmit={async (evt) => {
                 evt.preventDefault()
 
+                // Prevent sending if emailError is set
+                if (emailError) {
+                  return
+                }
+
                 if (name && email && subject && message) {
                   const res = await nostrController
                     .sendDM(
@@ -121,10 +144,7 @@ Message: ${message}`
                   name="email"
                   rules="required|email"
                   aria-describedby="emailHelp"
-                  onChange={(evt) => {
-                    setEmail(evt.target.value)
-                    setNotification(undefined)
-                  }}
+                  onChange={handleEmailChange}
                   style={getBorderStyle(email)}
                 />
                 <div id="emailHelp" className="form-text">