From ddcf49e2434ec247f52df41e8893b584c23ef881 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 13 Nov 2025 12:01:32 +0900
Subject: [PATCH] [Refactor] Integrate DeepL authentication key URL and enhance
 OpenWebpage_DeeplAuthKey component to accept props.

---
 src-ui/logics/ui_configs.js                                | 4 ++++
 .../_components/deepl_auth_key/DeeplAuthKey.jsx            | 7 +++----
 .../setting_section/setting_box/_templates/Templates.jsx   | 2 +-
 .../setting_box/translation/Translation.jsx                | 4 ++++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src-ui/logics/ui_configs.js b/src-ui/logics/ui_configs.js
index dc941165..191693c8 100644
--- a/src-ui/logics/ui_configs.js
+++ b/src-ui/logics/ui_configs.js
@@ -128,5 +128,9 @@ export const whisper_weight_type_status = [
     { id: "large-v3-turbo", capacity: "1.58GB"},
 ].map(item => ({ ...item, is_downloaded: false, progress: null }));
 
+
+export const deepl_auth_key_url = "https://www.deepl.com/ja/your-account/keys";
+
+
 export const supporters_data_url = "https://shiinasakamoto.github.io/vrct_supporters/assets/supporters/data.json";
 export const supporters_images_url = "https://ShiinaSakamoto.github.io/vrct_supporters/assets/supporters";
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
index effdd2c9..7c71ffd7 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
@@ -59,12 +59,11 @@ export const DeeplAuthKey = (props) => {
 };
 
 
-export const OpenWebpage_DeeplAuthKey = () => {
-    const { t } = useI18n();
+export const OpenWebpage_DeeplAuthKey = (props) => {
     return (
         <div className={styles.open_webpage_button_wrapper}>
-            <a className={styles.open_webpage_button} href="https://www.deepl.com/ja/your-account/keys" target="_blank" rel="noreferrer" >
-                <p className={styles.open_webpage_text}>{t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}</p>
+            <a className={styles.open_webpage_button} href={props.webpage_url} target="_blank" rel="noreferrer" >
+                <p className={styles.open_webpage_text}>{props.open_webpage_label}</p>
                 <ExternalLink className={styles.external_link_svg} />
             </a>
         </div>
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index 96378587..700b9058 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -148,7 +148,7 @@ export const DeeplAuthKeyContainer = (props) => {
         <TemplatesContainerWrapper>
             <div className={styles.deepl_auth_key_label_section}>
                 <LabelComponent label={props.label} desc={props.desc} />
-                <OpenWebpage_DeeplAuthKey />
+                <OpenWebpage_DeeplAuthKey {...props} />
             </div>
             <DeeplAuthKey {...props} />
         </TemplatesContainerWrapper>
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
index cb5ad232..4f1e27e6 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -22,6 +22,8 @@ import {
     LabelComponent,
 } from "../_components";
 
+import { deepl_auth_key_url } from "@ui_configs";
+
 export const Translation = () => {
     return (
         <>
@@ -230,6 +232,8 @@ const DeeplAuthKey_Box = () => {
                     "config_page.translation.deepl_auth_key.desc",
                     {translator: t("main_page.translator")}
                 )}
+                webpage_url={deepl_auth_key_url}
+                open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
                 variable={input_value}
                 state={currentDeepLAuthKey.state}
                 onChangeFunction={onChangeFunction}