put the OpenAI token behind a password field (best for screencasts)

jbilcke · Mar 30, 2024 · f449464 · f449464
1 parent 3eff932
commit f449464
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
@@ -16,6 +16,11 @@ export type SpecializedField =
       placeholder: string
       defaultValue: string
     }
+  | {
+      type: 'password'
+      placeholder: string
+      defaultValue: string
+    }
   | {
       type: 'boolean'
       defaultValue: boolean
@@ -96,7 +101,7 @@ const fields: Partial<SettingsFields> & MiscPanelFields = {
     label: 'API Key',
     description: '',
     placeholder: 'Enter your OpenAI API access key',
-    type: 'text',
+    type: 'password',
     defaultValue: '',
   },
   openAIModel: {
@@ -188,9 +193,10 @@ function Favorites() {
                 <div className="text-xl mb-2">{label}</div>
               )}
               <div className="flex flex-row">
-                {field.type === 'text' ? (
+                {field.type === 'text' || field.type === 'password' ? (
                   <SettingInput
                     placeholder={field.placeholder}
+                    type={field.type}
                     onChange={(newValue) => {
                       console.log('changed!')
                       setSettings((settings) => ({

diff --git a/src/components/inputs/SettingInput.tsx b/src/components/inputs/SettingInput.tsx
@@ -1,17 +1,20 @@
 export const SettingInput = ({
   onChange,
   onSubmit,
+  type = "text",
   placeholder,
   value,
 }: {
   onChange?: (value: string) => void
   onSubmit?: (value: string) => void
+  type: "text" | "password"
   placeholder?: string
   value?: string
 }) => (
   <input
     className="font-sans grow text-sm px-6 h-11 items-center rounded-full bg-white shadow-noogle text-toolbar-text placeholder-gray-400 active:outline-0 focus:outline-0 active:focus:outline-0"
     onChange={(e) => onChange?.(e.currentTarget.value)}
+    type={type}
     onKeyDown={(e) => {
       if (e.key === 'Enter') {
         onSubmit?.(e.currentTarget.value)