Frikky
102 lines
2.6 KiB
React
102 lines
2.6 KiB
React
import React, {useState} from 'react';
|
|
import theme from '../theme.jsx';
|
|
import {isMobile} from "react-device-detect";
|
|
import ReactGA from 'react-ga4';
|
|
|
|
import {TextField, Typography, Button} from '@material-ui/core';
|
|
|
|
const Newsletter = (props) => {
|
|
const { globalUrl, } = props;
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [msg, setMsg] = useState("");
|
|
const [buttonActive, setButtonActive] = useState(true);
|
|
const buttonStyle = {minWidth: 300, borderRadius: 30, height: 60, width: 140, margin: isMobile ? "15px auto 15px auto" : "20px 20px 20px 10px", fontSize: 18,}
|
|
|
|
const newsletterSignup = (inemail) => {
|
|
if (inemail.length < 4) {
|
|
setMsg("Invalid email")
|
|
setButtonActive(true)
|
|
return
|
|
}
|
|
|
|
setButtonActive(false)
|
|
const data = {"email": inemail}
|
|
const url = globalUrl+'/api/v1/functions/newsletter_signup'
|
|
fetch(url, {
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=utf-8',
|
|
},
|
|
})
|
|
.then(response =>
|
|
response.json().then(responseJson => {
|
|
setButtonActive(true)
|
|
setMsg(responseJson["reason"])
|
|
if (responseJson["success"] === false) {
|
|
} else {
|
|
setEmail("")
|
|
}
|
|
}),
|
|
)
|
|
.catch(error => {
|
|
setMsg("Something went wrong: ", error.toString())
|
|
setButtonActive(true)
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div style={{margin: "auto", color: "white", textAlign: "center",}}>
|
|
<Typography variant="h4" style={{marginTop: 35,}}>
|
|
Security Automation Newsletter
|
|
</Typography>
|
|
<Typography variant="h6" style={{color: "#7d7f82", marginTop: 20, }}>
|
|
Defensive security is 99% noise. Join us to sift through it.
|
|
</Typography>
|
|
<div style={{}}>
|
|
<TextField
|
|
style={{minWidth: isMobile ? "90%" : 450, backgroundColor: theme.palette.inputColor, marginTop: 20, borderRadius: 10, }}
|
|
InputProps={{
|
|
style:{
|
|
borderRadius: 10,
|
|
height: 60,
|
|
color: "white",
|
|
},
|
|
}}
|
|
color="primary"
|
|
value={email}
|
|
onChange={(e) => {
|
|
setEmail(e.target.value)
|
|
}}
|
|
placeholder="Your email"
|
|
id="standard-required"
|
|
margin="normal"
|
|
variant="outlined"
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
style={buttonStyle}
|
|
disabled={!buttonActive}
|
|
onClick={() => {
|
|
newsletterSignup(email)
|
|
ReactGA.event({
|
|
category: "newsletter",
|
|
action: `signup_click`,
|
|
label: "",
|
|
})
|
|
}}
|
|
>
|
|
Sign up
|
|
</Button>
|
|
<div/>
|
|
{msg}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
export default Newsletter;
|