From c5928e4d80749c3eed6dd94ccb00db1261d7b12c Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Fri, 17 Nov 2023 16:41:39 +0700
Subject: [PATCH 1/2] use type password on api key input

---
 app/components/APIKeyInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/APIKeyInput.tsx b/app/components/APIKeyInput.tsx
index 8725b420..3afc16a6 100644
--- a/app/components/APIKeyInput.tsx
+++ b/app/components/APIKeyInput.tsx
@@ -16,6 +16,7 @@ export function APIKeyInput() {
 			<div className="your-own-api-key__inner">
 				<div className="input__wrapper">
 					<input
+						type="password"
 						id="openai_key_risky_but_cool"
 						defaultValue={localStorage.getItem('makeitreal_key') ?? ''}
 						onChange={handleChange}

From a24d695277995708bbf502ea18042042e988c4aa Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Fri, 17 Nov 2023 20:01:38 +0700
Subject: [PATCH 2/2] use text blur to hide API key

---
 app/components/APIKeyInput.tsx | 1 -
 app/globals.css                | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/APIKeyInput.tsx b/app/components/APIKeyInput.tsx
index 3afc16a6..8725b420 100644
--- a/app/components/APIKeyInput.tsx
+++ b/app/components/APIKeyInput.tsx
@@ -16,7 +16,6 @@ export function APIKeyInput() {
 			<div className="your-own-api-key__inner">
 				<div className="input__wrapper">
 					<input
-						type="password"
 						id="openai_key_risky_but_cool"
 						defaultValue={localStorage.getItem('makeitreal_key') ?? ''}
 						onChange={handleChange}
diff --git a/app/globals.css b/app/globals.css
index 387f8d99..a630b338 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -110,3 +110,8 @@
 	justify-content: center;
 	cursor: pointer;
 }
+
+#openai_key_risky_but_cool:focus {
+	color: transparent;
+	text-shadow: 0 0 8px rgba(0,0,0,0.5);
+}
\ No newline at end of file