From bb30fdfa1735835b5d51b317d9e3ae0f0d52de30 Mon Sep 17 00:00:00 2001 From: Feifan Zheng <1450849885z@gmail.com> Date: Mon, 3 Apr 2023 12:18:04 +0000 Subject: [PATCH] feat: optimize usage display --- app/components/settings.tsx | 51 ++++++++++++++++++++++++++++++------- app/icons/eye-off.svg | 4 +++ app/icons/eye.svg | 4 +++ app/locales/cn.ts | 1 + app/locales/en.ts | 1 + app/locales/es.ts | 1 + app/locales/it.ts | 1 + app/locales/tw.ts | 1 + app/styles/globals.scss | 3 ++- 9 files changed, 57 insertions(+), 10 deletions(-) create mode 100644 app/icons/eye-off.svg create mode 100644 app/icons/eye.svg diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 4c5adb86..936588b7 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef, useMemo } from "react"; +import { useState, useEffect, useMemo, HTMLProps } from "react"; import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react"; @@ -8,6 +8,8 @@ import ResetIcon from "../icons/reload.svg"; import CloseIcon from "../icons/close.svg"; import ClearIcon from "../icons/clear.svg"; import EditIcon from "../icons/edit.svg"; +import EyeIcon from "../icons/eye.svg"; +import EyeOffIcon from "../icons/eye-off.svg"; import { List, ListItem, Popover, showToast } from "./ui-lib"; @@ -47,6 +49,28 @@ function SettingItem(props: { ); } +function PasswordInput(props: HTMLProps) { + const [visible, setVisible] = useState(false); + + function changeVisibility() { + setVisible(!visible); + } + + return ( + + + : } + onClick={changeVisibility} + /> + + ); +} + export function Settings(props: { closeSettings: () => void }) { const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [config, updateConfig, resetConfig, clearAllData, clearSessions] = @@ -103,6 +127,13 @@ export function Settings(props: { closeSettings: () => void }) { const builtinCount = SearchService.count.builtin; const customCount = promptStore.prompts.size ?? 0; + const showUsage = accessStore.token !== ""; + useEffect(() => { + if (showUsage) { + checkUsage(); + } + }, [showUsage]); + return ( <>
@@ -327,14 +358,14 @@ export function Settings(props: { closeSettings: () => void }) { title={Locale.Settings.AccessCode.Title} subTitle={Locale.Settings.AccessCode.SubTitle} > - { accessStore.updateCode(e.currentTarget.value); }} - > + /> ) : ( <> @@ -344,25 +375,27 @@ export function Settings(props: { closeSettings: () => void }) { title={Locale.Settings.Token.Title} subTitle={Locale.Settings.Token.SubTitle} > - { accessStore.updateToken(e.currentTarget.value); }} - > + /> - {loadingUsage ? ( + {!showUsage || loadingUsage ? (
) : ( + + + \ No newline at end of file diff --git a/app/icons/eye.svg b/app/icons/eye.svg new file mode 100644 index 00000000..b5df29d5 --- /dev/null +++ b/app/icons/eye.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 8f2193b3..49bcce23 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -109,6 +109,7 @@ const cn = { }, IsChecking: "正在检查…", Check: "重新检查", + NoAccess: "输入API Key查看余额", }, AccessCode: { Title: "访问码", diff --git a/app/locales/en.ts b/app/locales/en.ts index d8e9c615..ae8e88c2 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -111,6 +111,7 @@ const en: LocaleType = { }, IsChecking: "Checking...", Check: "Check Again", + NoAccess: "Enter API Key to check balance", }, AccessCode: { Title: "Access Code", diff --git a/app/locales/es.ts b/app/locales/es.ts index 34fcec76..f3714ef3 100644 --- a/app/locales/es.ts +++ b/app/locales/es.ts @@ -111,6 +111,7 @@ const es: LocaleType = { }, IsChecking: "Comprobando...", Check: "Comprobar de nuevo", + NoAccess: "Introduzca la clave API para comprobar el saldo", }, AccessCode: { Title: "Código de acceso", diff --git a/app/locales/it.ts b/app/locales/it.ts index 8c4e0123..c4736c1e 100644 --- a/app/locales/it.ts +++ b/app/locales/it.ts @@ -112,6 +112,7 @@ const it: LocaleType = { }, IsChecking: "Controllando...", Check: "Controlla ancora", + NoAccess: "Inserire la chiave API per controllare il saldo", }, AccessCode: { Title: "Codice d'accesso", diff --git a/app/locales/tw.ts b/app/locales/tw.ts index 3779a567..fff2f15d 100644 --- a/app/locales/tw.ts +++ b/app/locales/tw.ts @@ -109,6 +109,7 @@ const tw: LocaleType = { }, IsChecking: "正在檢查…", Check: "重新檢查", + NoAccess: "輸入API Key查看餘額", }, AccessCode: { Title: "訪問碼", diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 73b9b36f..48f56995 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -184,7 +184,8 @@ input[type="range"]::-webkit-slider-thumb:hover { } input[type="number"], -input[type="text"] { +input[type="text"], +input[type="password"] { appearance: none; border-radius: 10px; border: var(--border-in-light);