From 952d8835a3b21c27bd991f568903557b94246f52 Mon Sep 17 00:00:00 2001
From: glay <glay.guo@gmail.com>
Date: Wed, 6 Nov 2024 09:44:36 +0800
Subject: [PATCH] =?UTF-8?q?=09=E4=BF=AE=E6=94=B9=EF=BC=9A=20=20=20=20=20ap?=
 =?UTF-8?q?p/components/settings.tsx=20=09=E4=BF=AE=E6=94=B9=EF=BC=9A=20?=
 =?UTF-8?q?=20=20=20=20app/components/ui-lib.tsx=20=09=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=EF=BC=9A=20=20=20=20=20app/constant.ts=20=09=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=EF=BC=9A=20=20=20=20=20app/utils/encryption.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/settings.tsx |  3 +++
 app/components/ui-lib.tsx   | 25 ++++++++++++++++++++++++-
 app/constant.ts             |  4 ++--
 app/utils/encryption.ts     |  7 +++++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 0bd570826..f4d8c5373 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -997,6 +997,7 @@ export function Settings() {
               (access) => (access.awsAccessKey = e.currentTarget.value),
             );
           }}
+          maskWhenShow={true}
         />
       </ListItem>
       <ListItem
@@ -1013,6 +1014,7 @@ export function Settings() {
               (access) => (access.awsSecretKey = e.currentTarget.value),
             );
           }}
+          maskWhenShow={true}
         />
       </ListItem>
       <ListItem
@@ -1029,6 +1031,7 @@ export function Settings() {
               (access) => (access.awsSessionToken = e.currentTarget.value),
             );
           }}
+          maskWhenShow={true}
         />
       </ListItem>
     </>
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 4af37dbba..e0228d97f 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -11,6 +11,7 @@ import MaxIcon from "../icons/max.svg";
 import MinIcon from "../icons/min.svg";
 
 import Locale from "../locales";
+import { maskSensitiveValue } from "../utils/encryption";
 
 import { createRoot } from "react-dom/client";
 import React, {
@@ -266,13 +267,32 @@ export function Input(props: InputProps) {
 }
 
 export function PasswordInput(
-  props: HTMLProps<HTMLInputElement> & { aria?: string },
+  props: HTMLProps<HTMLInputElement> & {
+    aria?: string;
+    maskWhenShow?: boolean; // New prop to control masking behavior
+  },
 ) {
   const [visible, setVisible] = useState(false);
+  const [displayValue, setDisplayValue] = useState(props.value as string);
+
+  useEffect(() => {
+    if (props.maskWhenShow && visible && props.value) {
+      setDisplayValue(maskSensitiveValue(props.value as string));
+    } else {
+      setDisplayValue(props.value as string);
+    }
+  }, [visible, props.value, props.maskWhenShow]);
+
   function changeVisibility() {
     setVisible(!visible);
   }
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  };
+
   return (
     <div className={"password-input-container"}>
       <IconButton
@@ -283,6 +303,8 @@ export function PasswordInput(
       />
       <input
         {...props}
+        value={displayValue}
+        onChange={handleChange}
         type={visible ? "text" : "password"}
         className={"password-input"}
       />
@@ -543,6 +565,7 @@ export function Selector<T>(props: {
     </div>
   );
 }
+
 export function FullScreen(props: any) {
   const { children, right = 10, top = 10, ...rest } = props;
   const ref = useRef<HTMLDivElement>();
diff --git a/app/constant.ts b/app/constant.ts
index d15a2fe79..4c2730d4d 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -121,8 +121,8 @@ export enum ServiceProvider {
   Stability = "Stability",
   Iflytek = "Iflytek",
   XAI = "XAI",
-  Bedrock = "Bedrock",
   ChatGLM = "ChatGLM",
+  Bedrock = "Bedrock",
 }
 
 // Google API safety settings, see https://ai.google.dev/gemini-api/docs/safety-settings
@@ -136,7 +136,6 @@ export enum GoogleSafetySettingsThreshold {
 
 export enum ModelProvider {
   Stability = "Stability",
-  Bedrock = "Bedrock",
   GPT = "GPT",
   GeminiPro = "GeminiPro",
   Claude = "Claude",
@@ -148,6 +147,7 @@ export enum ModelProvider {
   Iflytek = "Iflytek",
   XAI = "XAI",
   ChatGLM = "ChatGLM",
+  Bedrock = "Bedrock",
 }
 
 export const Stability = {
diff --git a/app/utils/encryption.ts b/app/utils/encryption.ts
index 76ceed68b..ef750d9ab 100644
--- a/app/utils/encryption.ts
+++ b/app/utils/encryption.ts
@@ -8,6 +8,7 @@ if (!SECRET_KEY || SECRET_KEY.length < 32) {
     "ENCRYPTION_KEY environment variable must be set with at least 32 characters",
   );
 }
+
 export function encrypt(data: string): string {
   try {
     return AES.encrypt(data, SECRET_KEY).toString();
@@ -26,3 +27,9 @@ export function decrypt(encryptedData: string): string {
     return encryptedData; // Fallback to the original data if decryption fails
   }
 }
+
+export function maskSensitiveValue(value: string): string {
+  if (!value) return "";
+  if (value.length <= 4) return value;
+  return "*".repeat(value.length - 4) + value.slice(-4);
+}