Merge pull request 'Fix contact form' (#9) from fixes-13122025-2 into main
Some checks failed
publish / Build-and-publish (push) Failing after 1m14s
Some checks failed
publish / Build-and-publish (push) Failing after 1m14s
Reviewed-on: #9
This commit was merged in pull request #9.
This commit is contained in:
@@ -1,108 +1,83 @@
|
|||||||
import React, { useState } from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
import { Section } from '../shared'
|
import { Section } from '../shared'
|
||||||
import { SolidButton } from '../shared/styledComponents'
|
import { SolidButton } from '../shared/styledComponents'
|
||||||
import { StyledHeading, StyledDesc, InputStyled, StyledAnchor } from './style'
|
import { StyledHeading, StyledDesc, InputStyled, StyledAnchor } from './style'
|
||||||
|
|
||||||
const Footer = () => {
|
const anchorStyles = {
|
||||||
const [email, setEmail] = useState('')
|
color: '#888'
|
||||||
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 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
|
export default Footer
|
||||||
|
|||||||
@@ -37,10 +37,28 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
|
|||||||
|
|
||||||
const [name, setName] = useState<string>()
|
const [name, setName] = useState<string>()
|
||||||
const [email, setEmail] = useState<string>()
|
const [email, setEmail] = useState<string>()
|
||||||
|
const [emailError, setEmailError] = useState<boolean>(false)
|
||||||
const [subject, setSubject] = useState<string>()
|
const [subject, setSubject] = useState<string>()
|
||||||
const [message, setMessage] = useState<string>()
|
const [message, setMessage] = useState<string>()
|
||||||
const [notification, setNotification] = 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) =>
|
const getBorderStyle = (value: string | undefined) =>
|
||||||
value === undefined ? {} : value ? {} : { border: '1px solid red' }
|
value === undefined ? {} : value ? {} : { border: '1px solid red' }
|
||||||
|
|
||||||
@@ -66,6 +84,11 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
|
|||||||
onSubmit={async (evt) => {
|
onSubmit={async (evt) => {
|
||||||
evt.preventDefault()
|
evt.preventDefault()
|
||||||
|
|
||||||
|
// Prevent sending if emailError is set
|
||||||
|
if (emailError) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (name && email && subject && message) {
|
if (name && email && subject && message) {
|
||||||
const res = await nostrController
|
const res = await nostrController
|
||||||
.sendDM(
|
.sendDM(
|
||||||
@@ -121,10 +144,7 @@ Message: ${message}`
|
|||||||
name="email"
|
name="email"
|
||||||
rules="required|email"
|
rules="required|email"
|
||||||
aria-describedby="emailHelp"
|
aria-describedby="emailHelp"
|
||||||
onChange={(evt) => {
|
onChange={handleEmailChange}
|
||||||
setEmail(evt.target.value)
|
|
||||||
setNotification(undefined)
|
|
||||||
}}
|
|
||||||
style={getBorderStyle(email)}
|
style={getBorderStyle(email)}
|
||||||
/>
|
/>
|
||||||
<div id="emailHelp" className="form-text">
|
<div id="emailHelp" className="form-text">
|
||||||
|
|||||||
Reference in New Issue
Block a user