From f449464022c7a89e050ff082c3e70e711ce70c1d Mon Sep 17 00:00:00 2001
From: Julian Bilcke <julian.bilcke@gmail.com>
Date: Sun, 31 Mar 2024 00:22:21 +0100
Subject: [PATCH] put the OpenAI token behind a password field (best for
 screencasts)

---
 bun.lockb                              | Bin 99523 -> 99523 bytes
 src/app/settings/page.tsx              |  10 ++++++++--
 src/components/inputs/SettingInput.tsx |   3 +++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 34b7e7ea20937310c2873dd964b6bbc0b8ee45c6..05f3e8f3e7289592eb1c8d365cc4f4872ff8ef25 100755
GIT binary patch
delta 25
gcmX@y$#%GttziozFF!kDoVlKXp7C}Oe#Z5s0BI}-Q2+n{

delta 25
dcmX@y$#%GttziozFF!jI0~l-<;b&Z53IJRq1^xg4

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index d9a99a2..ef2de71 100644
--- 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
index 4a9216a..58536e5 100644
--- 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)