friendly-captcha-examples/nextjs/pages/forms/basic.js at main · FriendlyCaptcha/friendly-captcha-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import Head from "next/head";
import Link from "next/link";
import { useRef, useState } from "react";
import FriendlyCaptcha from "../../components/friendlyCaptcha";
import Layout from "../../components/layout";

const handleFormSubmit = async (event, setMessage, resetWidget) => {
  event.preventDefault();

  const res = await fetch("/api/submitBasic", {
    body: JSON.stringify({
      name: event.target.name.value,
      frcCaptchaSolution: event.target["frc-captcha-solution"].value,
    }),
    headers: {
      "Content-Type": "application/json",
    },
    method: "POST",
  });

  const result = await res.json(); // The endpoint currently returns `{msg: "some message"}
  setMessage(`${result.msg} (status ${res.status})`);

  // We should always reset the widget as a solution can not be used twice.
  resetWidget();
};

export default function BasicForm() {
  const [submitButtonEnabled, setSubmitButtonEnabled] = useState(false);
  const [message, setMessage] = useState("");
  const widgetRef = useRef();
  const reset = () => {
    setSubmitButtonEnabled(false);
    if (widgetRef.current) {
      // The type of widgetRef.current is WidgetInstance, see the JS API details here:
      // https://docs.friendlycaptcha.com/#/widget_api?id=javascript-api
      widgetRef.current.reset();
    }
  };

  return (
    <Layout>
      <Head>
        <title>Basic Form Example</title>
      </Head>

      <h1>Basic Form</h1>
      <form className="column-form" onSubmit={(ev) => handleFormSubmit(ev, setMessage, reset)}>
        <label htmlFor="name">Your Name</label>
        <input
          className="mb-2"
          id="name"
          name="name"
          autoComplete="name"
          type="text"
          placeholder="Jane Doe"
          required="1"
        ></input>

        <FriendlyCaptcha
          ref={widgetRef}
          sitekey={process.env.NEXT_PUBLIC_FRIENDLY_CAPTCHA_SITEKEY}
          doneCallback={() => setSubmitButtonEnabled(true)}
          errorCallback={(err) => {
            setMessage("Anti-robot widget issue" + JSON.stringify(err)); // Should really never happen.
            setSubmitButtonEnabled(true);
          }}
        ></FriendlyCaptcha>

        <button className="mt-2" type="submit" disabled={submitButtonEnabled ? undefined : "null"}>
          Submit Form
        </button>
      </form>

      {message ? (
        <div className="card">
          <p>{message}</p>
        </div>
      ) : undefined}

      <div className="mt-2">
        <Link href="/">Back to home</Link>
      </div>
    </Layout>
  );
}