From f4ab0731313623c5e1e26984ac9d83252bd52c4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ade=E3=80=8C=E3=81=82=E3=81=A7=E3=80=8DFisher?=
 <noreply@shiran.ai>
Date: Wed, 11 Dec 2024 15:35:40 +0100
Subject: [PATCH] add textfield

---
 src/components/TextField.tsx | 33 +++++++++++++++++++++++++++++++++
 src/pages/Parameters.tsx     |  9 ++++++---
 2 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TextField.tsx

diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
new file mode 100644
index 0000000..8f3c87f
--- /dev/null
+++ b/src/components/TextField.tsx
@@ -0,0 +1,33 @@
+import { useRef } from "react";
+import type { AriaTextFieldProps } from "react-aria";
+import { useTextField } from "react-aria";
+import styled from "@emotion/styled";
+import { withFormStyling, type FormProps } from "../style/form";
+
+const Input = styled.input<FormProps>(withFormStyling);
+
+export function TextField(props: AriaTextFieldProps) {
+  const { label } = props;
+  const ref = useRef(null);
+  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(
+    props,
+    ref,
+  );
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <label {...labelProps}>{label}</label>
+      <Input {...inputProps} ref={ref} />
+      {props.description && (
+        <div {...descriptionProps} style={{ fontSize: 12 }}>
+          {props.description}
+        </div>
+      )}
+      {isInvalid && (
+        <div {...errorMessageProps} style={{ color: "red", fontSize: 12 }}>
+          {validationErrors.join(" ")}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/Parameters.tsx b/src/pages/Parameters.tsx
index 2f3046d..d8dbf2b 100644
--- a/src/pages/Parameters.tsx
+++ b/src/pages/Parameters.tsx
@@ -14,8 +14,9 @@ import { type FormProps, withFormStyling } from "../style/form";
 import { Palette } from "../style/palette";
 import { hasBackend } from "../utils/realm";
 import { type ProviderType, providers } from "./NewExperiment";
+import { TextField } from "../components/TextField";
+
 
-const Input = styled.input<FormProps>(withFormStyling);
 
 const StyledForm = styled.form`
   display: flex;
@@ -99,11 +100,12 @@ const ModalContent = ({ children, close }: PropsWithChildren<{ close: () => void
         </Select>
       </p>
       <p>
-        <Input
+        <TextField
           type="password"
+          label="Token"
           placeholder={hasBackend() ? "Token or 1password reference" : "Token"}
           value={token}
-          onChange={(e) => setToken(e.target.value)}
+          onChange={(e) => setToken(e)}
         />
       </p>
       <Actions>
@@ -126,6 +128,7 @@ export default function Configure() {
   const [isDarkMode, setIsDarkMode] = useAtom(isDarkModeAtom);
   const [experimentLayout, setExperimentLayout] = useAtom(experimentLayoutAtom);
   const [tokens, setTokens] = useAtom(tokensAtom);
+  
   return (
     <>
       <StyledForm