dc/datacontroller.io
5
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Fix contact form' (#9) from fixes-13122025-2 into main
Some checks failed
publish / Build-and-publish (push) Failing after 1m14s
Details

Browse Source 
Reviewed-on: #9
This commit was merged in pull request #9.
This commit is contained in:
sead
2025-12-13 17:17:22 +00:00
parent 0ed1caa651 8434c781d6
commit a95d63d12e
2 changed files with 100 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/components/footer/index.tsx
View File

@@ -1,108 +1,83 @@
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 handleSubmit = (e: React.FormEvent) => {
if (emailError) {
e.preventDefault()
}
}
return (
<Section bottomArrow={false}>
<div className="row">
<div className="col-md-3 me-md-5">
<StyledHeading>Data Controller</StyledHeading>
<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.
</StyledDesc>
</div>
<div className="col-md-3">
<StyledHeading>Newsletter</StyledHeading>
<form
className="kwes-form"
method="POST"
action="https://kwes.io/api/foreign/forms/mxKuyK4lxZWnG2WNH3ga"
onSubmit={handleSubmit}
>
<div className="mb-3">
<InputStyled
type="email"
name="email"
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
type="text"
name="name"
className="form-control"
placeholder="First Name"
required
/>
</div>
<div className="mb-3">
<InputStyled
type="text"
name="lastName"
className="form-control"
placeholder="Last Name"
/>
</div>
<SolidButton>Subscribe</SolidButton>
</form>
</div>
<div className="col-md-3">
<StyledHeading>Other Resources</StyledHeading>
<StyledDesc>
Visit our educational and fun SAS® software quiz{' '}
<StyledAnchor href="https://sasensei.com">Sasensei</StyledAnchor>{' '}
and test your knowledge of SAS topics.
</StyledDesc>
</div>
</div>
</Section>
)
const anchorStyles = {
color: '#888'
}
const Footer = () => (
<Section bottomArrow={false}>
<div className="row">
<div className="col-md-3 me-md-5">
<StyledHeading>Data Controller</StyledHeading>
<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"
target="_blank"
rel="noopener"
>
Apps
</StyledAnchor>
, and Services.
</StyledDesc>
</div>
<div className="col-md-3">
<StyledHeading>Newsletter</StyledHeading>
<form
className="kwes-form"
method="POST"
action="https://kwes.io/api/foreign/forms/mxKuyK4lxZWnG2WNH3ga"
>
<div className="mb-3">
<InputStyled
type="email"
name="email"
className="form-control"
aria-describedby="emailHelp"
placeholder="Email Address*"
required
/>
</div>
<div className="mb-3">
<InputStyled
type="text"
name="name"
className="form-control"
placeholder="First Name"
required
/>
</div>
<div className="mb-3">
<InputStyled
type="text"
name="lastName"
className="form-control"
placeholder="Last Name"
/>
</div>
<SolidButton>Subscribe</SolidButton>
</form>
</div>
<div className="col-md-3">
<StyledHeading>Other Resources</StyledHeading>
<StyledDesc>
Visit our educational and fun SAS® software quiz{' '}
<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

28
src/pages/contact.tsx
View File

@@ -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">