110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useMediaQuery } from "react-responsive";
|
|
import { Form, Input, Button, Card, Flex, message } from "antd";
|
|
import TurnstileModal from "../components/TurnstileModal";
|
|
import { ArrowRightOutlined } from "@ant-design/icons";
|
|
const ContactView = ({ setCurrentView }) => {
|
|
const isMobile = useMediaQuery({ maxWidth: 600 });
|
|
const [turnstileOpen, setTurnstileOpen] = useState(false);
|
|
const [email, setEmail] = useState("");
|
|
const handleSubmit = async (token) => {
|
|
if (!token) {
|
|
setTurnstileOpen(true); // Open Turnstile modal
|
|
return;
|
|
}
|
|
|
|
console.log("Got token", token);
|
|
console.log("Got email", email);
|
|
|
|
try {
|
|
const response = await fetch("https://web.tombutcher.work/api/contact", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email, token }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
message.success("Message sent successfully!");
|
|
} else {
|
|
message.error("Verification failed. Try again.");
|
|
}
|
|
} catch (error) {
|
|
message.error("Error sending request.");
|
|
}
|
|
};
|
|
return (
|
|
<div className="tbview">
|
|
<Card
|
|
className={"tbcard"}
|
|
title="Contact"
|
|
style={{
|
|
width: isMobile ? "100%" : "70%",
|
|
height: isMobile ? "100%" : "70%",
|
|
}}
|
|
actions={[
|
|
<Button
|
|
className={"tbbutton"}
|
|
key="back"
|
|
onClick={() => setCurrentView("index")}
|
|
icon={
|
|
<img
|
|
src="https://cdn.tombutcher.work/icons/web/w-back.svg"
|
|
alt="Back"
|
|
style={{ height: "14px", marginBottom: "1px" }}
|
|
/>
|
|
}
|
|
>
|
|
Back
|
|
</Button>,
|
|
]}
|
|
>
|
|
<div style={{ minWidth: isMobile ? "100%" : "70%" }}>
|
|
<p>Enter your email below and I will be in contact:</p>
|
|
<Form
|
|
layout="vertical"
|
|
onFinish={() => {
|
|
handleSubmit();
|
|
}}
|
|
style={{ paddingBottom: "5px" }}
|
|
>
|
|
<Form.Item
|
|
name="email"
|
|
rules={[{ required: true, message: "Please enter your email" }]}
|
|
style={{ marginBottom: "8px" }}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
>
|
|
<Flex gap="small">
|
|
<Input
|
|
type="email"
|
|
placeholder="example@example.com"
|
|
style={{ flex: 1 }}
|
|
/>
|
|
<Button type="primary" htmlType="submit">
|
|
<ArrowRightOutlined />
|
|
</Button>
|
|
</Flex>
|
|
</Form.Item>
|
|
</Form>
|
|
<p>
|
|
I'm often busy, but I'll make sure to get back to you
|
|
within 48 hours!
|
|
</p>
|
|
<p style={{ marginBottom: "0px", color: "rgb(255 255 255 / 50%)" }}>
|
|
By clicking the submit button, you consent to your email address and
|
|
certain browser-related details (such as an approximate geographical
|
|
location based on your IP) being sent exclusively to me via email.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
<TurnstileModal
|
|
open={turnstileOpen}
|
|
onClose={() => setTurnstileOpen(false)}
|
|
onSuccess={handleSubmit} // Sends token to handleSubmit
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactView;
|