97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { ChangeEvent, useRef, useState } from "react";
|
|
import { CheckboxInput, Input, Submit } from "./form";
|
|
import { FloatingLabel } from "../floating-label";
|
|
|
|
export default function ContactForm() {
|
|
const [anon, setAnon] = useState(false);
|
|
const formRef = useRef<HTMLFormElement | null>(null);
|
|
const [status, setStatus] = useState<'success' | 'loading' | 'failed' | 'idle'>('idle');
|
|
const [errorMsg, setErrorMsg] = useState("");
|
|
|
|
const statusMsg = {
|
|
success: 'Sended!',
|
|
loading: 'Sending...',
|
|
failed: 'Failed :(',
|
|
idle: 'Send!'
|
|
}
|
|
|
|
const send = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setStatus('idle');
|
|
setErrorMsg('');
|
|
|
|
if (status == 'loading' || !formRef.current) return;
|
|
|
|
const formData = new FormData(formRef.current);
|
|
|
|
const data = {
|
|
anon,
|
|
name: formData.get('name')?.toString(),
|
|
email: formData.get('email')?.toString(),
|
|
message: formData.get('message')!.toString()
|
|
}
|
|
|
|
if ((data.name && data.email) && (data.name.length < 1 || data.email.length < 1) && !data.anon) {
|
|
setErrorMsg("Name and email are required. If you prefer not to provide them, check the box to send anonymously.");
|
|
return;
|
|
}
|
|
|
|
if (data.message.length < 1) {
|
|
setErrorMsg("What do you want to tell me???");
|
|
return;
|
|
}
|
|
|
|
setStatus('loading');
|
|
//process
|
|
|
|
await new Promise(res => setTimeout(res, 2000));
|
|
setStatus('success');
|
|
}
|
|
|
|
return (
|
|
<form action="POST" className="space-y-4" ref={formRef} onSubmit={send}>
|
|
<FloatingLabel placeholder="Leave an anonymous message, but I won't answer it">
|
|
<CheckboxInput
|
|
name="anon"
|
|
placeholder="Send anonymously🤫"
|
|
onChange={setAnon}
|
|
/>
|
|
</FloatingLabel>
|
|
{!anon && <>
|
|
<label className="block" htmlFor="contact-name">
|
|
<div className="mb-2">Name</div>
|
|
<Input
|
|
id="contact-name"
|
|
className="w-full"
|
|
name="name"
|
|
type="text"
|
|
placeholder="Any name you want me to know"
|
|
/>
|
|
</label>
|
|
<label className="block" htmlFor="contact-email">
|
|
<div className="mb-2">Email</div>
|
|
<Input
|
|
id="contact-email"
|
|
className="w-full"
|
|
name="email"
|
|
type="email"
|
|
/>
|
|
</label>
|
|
</>}
|
|
<label className="block" htmlFor="contact-msg">
|
|
<div className="mb-2">Message</div>
|
|
<textarea
|
|
name="message"
|
|
id="contact-msg"
|
|
className="max-h-96 h-32 w-full p-3 bg-background border border-primary"
|
|
placeholder="Tell me something cool, or ask question"
|
|
/>
|
|
</label>
|
|
<div className="text-primary">{errorMsg}</div>
|
|
<Submit className="w-full">{statusMsg[status]}</Submit>
|
|
</form>
|
|
);
|
|
}
|