[Refactor] Introduce AuthKey component and update related containers and styles.

src-ui/views/app/config_page/setting_section/setting_box/_components/auth_key/AuthKey.jsx

@@ -1,4 +1,4 @@
-import styles from "./DeeplAuthKey.module.scss";
+import styles from "./AuthKey.module.scss";
 import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -6,7 +6,7 @@ import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState, useRef } from "react";
 import { useEffect } from "react";
 
-export const DeeplAuthKey = (props) => {
+export const AuthKey = (props) => {
     const { t } = useI18n();
     const [is_editable, seIsEditable] = useState(false);
     const entryRef = useRef(null);

src-ui/views/app/config_page/setting_section/setting_box/_components/index.js

@@ -1,6 +1,6 @@
 export { ActionButton } from "./action_button/ActionButton";
 export { ComputeDevice } from "./compute_device/ComputeDevice";
-export { DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
+export { AuthKey } from "./auth_key/AuthKey";
 export { DropdownMenu, MultiDropdownMenu } from "./dropdown_menu/DropdownMenu";
 export { Entry } from "./entry/Entry";
 export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";

src-ui/views/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx

@@ -1,4 +1,5 @@
 import styles from "./LabelComponent.module.scss";
+import { _OpenWebpageButton } from "../_atoms/_open_webpage_button/_OpenWebpageButton";
 
 export const LabelComponent = (props) => {
     return (
@@ -8,6 +9,7 @@ export const LabelComponent = (props) => {
                 ? <p className={styles.desc}>{props.desc}</p>
                 : null
             }
+            {props.webpage_url && <_OpenWebpageButton webpage_url={props.webpage_url} open_webpage_label={props.open_webpage_label} /> }
         </div>
     );
 };

src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -12,7 +12,7 @@ import {
     EntryWithSaveButton,
     HotkeysEntry,
     RadioButton,
-    DeeplAuthKey,
+    AuthKey,
     ActionButton,
     ComputeDevice,
     WordFilter,
@@ -22,8 +22,6 @@ import {
 } from "../_components";
 import { Checkbox } from "@common_components";
 
-import { _OpenWebpageButton } from "../_components/_atoms/_open_webpage_button/_OpenWebpageButton";
-
 export const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
@@ -97,7 +95,7 @@ const CommonContainer = ({
     if (label_type === "label_component") {
         return (
             <TemplatesContainerWrapper {...container_wrapper_props}>
-                <LabelComponent label={props.label} desc={props.desc} />
+                <LabelComponent {...props} />
                 <Component {...props} is_break_point={currentIsBreakPoint.data} />
             </TemplatesContainerWrapper>
         );
@@ -110,7 +108,7 @@ const CommonContainer = ({
     } else if (label_type === "label_only") {
         return (
             <TemplatesContainerWrapper {...container_wrapper_props}>
-                <LabelComponent label={props.label} desc={props.desc} />
+                <LabelComponent {...props} />
             </TemplatesContainerWrapper>
         );
     }
@@ -144,15 +142,13 @@ export const RadioButtonContainer = (props) => (
     <CommonContainer Component={RadioButton} {...props} />
 );
 
-export const DeeplAuthKeyContainer = (props) => {
+export const AuthKeyContainer = (props) => {
+    const webpage_settings = {
+        webpage_url: props.webpage_url,
+        open_webpage_label: props.open_webpage_label,
+    };
     return (
-        <TemplatesContainerWrapper>
+        <CommonContainer Component={AuthKey} {...props} {...webpage_settings} />
-            <div className={styles.deepl_auth_key_label_section}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <_OpenWebpageButton {...props} />
-            </div>
-            <DeeplAuthKey {...props} />
-        </TemplatesContainerWrapper>
     );
 };
 

src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -10,7 +10,7 @@ import {
 
 import {
     DownloadModelsContainer,
-    DeeplAuthKeyContainer,
+    AuthKeyContainer,
     MultiDropdownMenuContainer,
 
     useOnMouseLeaveDropdownMenu,
@@ -226,7 +226,7 @@ const DeeplAuthKey_Box = () => {
 
     return (
         <>
-            <DeeplAuthKeyContainer
+            <AuthKeyContainer
                 label={t("config_page.translation.deepl_auth_key.label")}
                 desc={t(
                     "config_page.translation.deepl_auth_key.desc",