diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
index dc6f4309..e8bba371 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
import React, { useRef, forwardRef, useImperativeHandle } from "react";
import styles from "./_Entry.module.scss";
@@ -9,6 +10,9 @@ const _Entry = forwardRef((props, ref) => {
inputRef.current.focus();
}
}));
+ const input_class_names = clsx(styles.entry_input_area, {
+ [styles.is_disabled]: props.is_disabled
+ });
return (
@@ -18,7 +22,7 @@ const _Entry = forwardRef((props, ref) => {
>
props.onChange(e)}
/>
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
index dc2ac749..c9744de6 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
@@ -16,4 +16,9 @@
height: 100%;
font-size: 1.4rem;
resize: none;
+ color: var(--dark_basic_text_color);
+ &.is_disabled {
+ color: var(--dark_500_color);
+ pointer-events: none;
+ }
}
\ No newline at end of file
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 00e56333..42401b7a 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
@@ -1,6 +1,7 @@
import styles from "./DeeplAuthKey.module.scss";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
+import CircularProgress from "@mui/material/CircularProgress";
import ExternalLink from "@images/external_link.svg?react";
import { _Entry } from "../_atoms/_entry/_Entry";
import { useState, useRef } from "react";
@@ -29,11 +30,22 @@ export const DeeplAuthKey = (props) => {
}
}, [props.variable]);
+ const is_disabled = props.state === "pending";
+
+ const save_button_class_names = clsx(styles.save_button, {
+ [styles.is_disabled]: is_disabled
+ });
+
return (
- <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable}/>
-
+ <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/>
+
{is_editable
? null
:
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
index 6e5a3411..575ec8bc 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
@@ -44,17 +44,25 @@
.save_button {
padding: 0.8rem 1.2rem;
background-color: var(--primary_600_color);
- color: var(--dark_basic_text_color);
- font-size: 1.4rem;
border-radius: 0.4rem;
text-align: center;
flex-shrink: 0;
+ min-width: 5.4rem;
&:hover {
background-color: var(--primary_500_color);
}
&:active {
background-color: var(--primary_700_color);
}
+ &.is_disabled {
+ pointer-events: none;
+ background-color: var(--primary_800_color);
+ }
+}
+
+.save_button_label {
+ color: var(--dark_basic_text_color);
+ font-size: 1.4rem;
}
.open_webpage_button_wrapper {
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
index d2378d03..929f8975 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
@@ -1,4 +1,5 @@
.container {
+
}
.entry_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 7ff8a104..724e73b3 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
@@ -124,6 +124,7 @@ const DeeplAuthKey_Box = () => {
{translator: t("main_page.translator")}
)}
variable={input_value}
+ state={currentDeepLAuthKey.state}
onChangeFunction={onChangeFunction}
saveFunction={saveFunction}
/>