From 9c5625ac85106299abeaea8e1edb2353384e6373 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 6 Dec 2024 13:59:06 +0900
Subject: [PATCH] [Update] Config Page: Translation Tab: DeeplAuthKey. to be
 editable when input box is empty.

---
 .../_components/deepl_auth_key/DeeplAuthKey.jsx            | 7 +++++++
 .../setting_box/translation/Translation.jsx                | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
index 0a1dea91..00e56333 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
@@ -4,6 +4,7 @@ import clsx from "clsx";
 import ExternalLink from "@images/external_link.svg?react";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState, useRef } from "react";
+import { useEffect } from "react";
 
 export const DeeplAuthKey = (props) => {
     const { t } = useTranslation();
@@ -22,6 +23,12 @@ export const DeeplAuthKey = (props) => {
         props.saveFunction();
     };
 
+    useEffect(() => {
+        if (props.variable === "" || props.variable === null) {
+            seIsEditable(true);
+        }
+    }, [props.variable]);
+
     return (
         <div className={styles.container}>
             <div className={styles.entry_section_wrapper}>
diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
index e0f02565..7ff8a104 100644
--- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -98,9 +98,9 @@ const CTranslation2ComputeDevice_Box = () => {
 };
 
 const DeeplAuthKey_Box = () => {
-    const [input_value, seInputValue] = useState("");
     const { t } = useTranslation();
     const { currentDeepLAuthKey, setDeepLAuthKey, deleteDeepLAuthKey } = useDeepLAuthKey();
+    const [input_value, seInputValue] = useState(currentDeepLAuthKey.data);
 
     const onChangeFunction = (value) => {
         seInputValue(value);