[Update] Config Page: Translation Tab: DeeplAuthKey. to be editable when input box is empty.

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}>

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);