secure input

packages/website/src/content/03-10-secure-input.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { PageTitle } from "../components/PageTitle";
+import { PageContent } from "../components/PageContent";
+import { InlineWidget, Item } from "../components/InlineWidget";
+import { disclaimerSnippet } from "../snippets";
+import SecureInput from "../custom-components/SecureInput";
+
+export const content = `
+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.
+
+~~~js
+${disclaimerSnippet}
+~~~
+`;
+
+export const WebWidgetComponentsSecureInput = () => {
+  const [submitted, setSubmitted] = useState(false);
+
+  const items: Item[][] = [
+    [
+      {
+        type: "custom",
+        element: <SecureInput />,
+      },
+    ],
+  ];
+
+  if (submitted) {
+    items.push([
+      {
+        type: "bot",
+        message: `Thank you! You're now logged in.`,
+      },
+    ]);
+  }
+
+  return (
+    <>
+      <PageTitle pretitle="Web widget components" title="Secure input" />
+      <InlineWidget className="mb-8" items={items} />
+      <PageContent md={content} />
+    </>
+  );
+};

packages/website/src/custom-components/SecureInput.css

@@ -0,0 +1,66 @@
+.form-container,
+.success-container {
+  height: 168px;
+  padding: 20px;
+  background: #efefef;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.form-container form {
+  margin: 0;
+}
+
+.form-container form > input {
+  margin-bottom: 10px;
+}
+
+.success-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkmark-icon {
+  height: 50px;
+  width: auto;
+}
+
+.checkmark-icon path {
+  fill: green;
+}
+
+input {
+  width: 100%;
+  padding: 5px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.form-container [type="submit"] {
+  display: block;
+  width: 100%;
+  background-color: rgba(38, 99, 218, 1);
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: none;
+  color: #fff;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-weight: 600;
+  cursor: pointer;
+  letter-spacing: 0.05rem;
+}
+
+.form-container [type="submit"]:hover {
+  background-color: rgba(30, 86, 196, 1);
+}
+
+.form-container [type="submit"]:disabled {
+  background-color: #cccccc;
+}

packages/website/src/custom-components/SecureInput.tsx

@@ -0,0 +1,72 @@
+import React, { useState, ChangeEvent, FormEvent } from "react";
+import "./SecureInput.css";
+import checkmarkIcon from "./checkmark.svg";
+
+const SecureInput: React.FC = () => {
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isSuccess, setIsSuccess] = useState<boolean>(false);
+
+  const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setEmail(event.target.value);
+  };
+
+  const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value);
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      setIsSuccess(true);
+    } catch (error) {
+      console.error("Error:", error);
+    }
+
+    setIsLoading(false);
+  };
+
+  if (isSuccess) {
+    return (
+      <div className="success-container">
+        <img className="checkmark-icon" src={checkmarkIcon} alt="checkmark" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="form-container">
+      <form onSubmit={handleSubmit}>
+        <input
+          type="email"
+          id="email"
+          placeholder="Email"
+          className="form-input"
+          value={email}
+          onChange={handleEmailChange}
+          required
+          disabled={isLoading}
+        />
+        <input
+          type="password"
+          id="password"
+          placeholder="Password"
+          className="form-input"
+          value={password}
+          onChange={handlePasswordChange}
+          required
+          disabled={isLoading}
+        />
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? "Loading..." : "Login"}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default SecureInput;

packages/website/src/routes.tsx

@@ -18,6 +18,8 @@ import { WebWidgetComponentsFeedbackForm } from "./content/03-05-feedback-form";
 import { WebWidgetComponentsDatePicker } from "./content/03-06-datepicker";
 import { WebWidgetComponentsFileUpload } from "./content/03-07-file-upload";
 import { WebWidgetComponentsAddressInput } from "./content/03-08-address-input";
+import { WebWidgetComponentsVideoPlayer } from "./content/03-09-video-player";
+import { WebWidgetComponentsSecureInput } from "./content/03-10-secure-input";
 // 4
 import { CustomWidgetsGettingStarted } from "./content/04-01-custom-widgets-getting-started";
 import { CustomWidgetsReact } from "./content/04-02-custom-widgets-react";
@@ -29,7 +31,6 @@ import { HeadlessApi } from "./content/05-02-headless-api";
 import { MultimodalSetup } from "./content/06-01-multimodal-setup";
 import { MultimodalApiReference } from "./content/06-02-multimodal-api-reference";
 import { MultimodalTryLive } from "./content/06-03-multimodal-try-live";
-import { WebWidgetComponentsVideoPlayer } from "./content/03-09-video-player";
 
 export const routes: {
   heading: string;
@@ -109,6 +110,11 @@ export const routes: {
         url: "/widget-components/file-upload",
         element: <WebWidgetComponentsFileUpload />,
       },
+      {
+        label: "Secure input",
+        url: "/widget-components/secure-input",
+        element: <WebWidgetComponentsSecureInput />,
+      },
       {
         label: "Video player",
         url: "/widget-components/video-player",