Secure input

This component allows you to create a secure input field. The input field is rendered in an iframe, and the inputted data is sent to the bot via a secure channel. This means that the inputted data is not accessible to the website owner.

1const SecureInput = () => {
2  const [email, setEmail] = useState("");
3  const [password, setPassword] = useState("");
4  const [isLoading, setIsLoading] = useState(false);
5  const [isSuccess, setIsSuccess] = useState(false);
6
7  const handleEmailChange = (event) => {
8    setEmail(event.target.value);
9  };
10
11  const handlePasswordChange = (event
12  const handleSubmit = async (event) => {
13    event.preventDefault();
14    setIsLoading(true);
15
16    try {
17      await new Promise((resolve) => setTimeout(resolve, 2000));
18      setIsSuccess(true);
19    } catch (error) {}
20
21    setIsLoading(false);
22  };
23
24  if (isSuccess) {
25    return (
26      <div className="success-container">
27        ✅
28      </div>
29    );
30  }
31
32  return (
33    <div className="form-container">
34      <form onSubmit={handleSubmit}>
35        <input
36          type="email"
37          id="email"
38          placeholder="Email"
39          className="form-input"
40          autoComplete="email"
41          value={email}
42          onChange={handleEmailChange}
43          required
44          disabled={isLoading}
45        />
46        <input
47          type="password"
48          id="password"
49          placeholder="Password"
50          className="form-input"
51          autoComplete="current-password"
52          value={password}
53          onChange={handlePasswordChange}
54          required
55          disabled={isLoading}
56        />
57        <button type="submit" disabled={isLoading}>
58          {isLoading ? "Loading..." : "Login"}
59        </button>
60      </form>
61    </div>
62  );
63};