From 88b911bfc23f1a750c9b9a42b50668d6a7e44738 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 4 Aug 2024 09:12:39 +0900
Subject: [PATCH] [Update/Refactor] Config Window: Add DeeplAuthKey. Refactor:
 Separate entry component.

---
 src-ui/assets/external_link.svg               |  1 +
 .../setting_box/Appearance/Appearance.jsx     |  5 ++-
 .../setting_box/appearance/Appearance.jsx     |  5 ++-
 .../setting_box/components/_atoms/_Entry.jsx  | 28 ++++++++++++++++
 .../components/_atoms/_Entry.module.scss      | 15 +++++++++
 .../deepl_auth_key/DeeplAuthKey.jsx           | 18 ++++++++++
 .../deepl_auth_key/DeeplAuthKey.module.scss   | 33 +++++++++++++++++++
 .../setting_box/components/entry/Entry.jsx    | 19 ++++-------
 .../components/entry/Entry.module.scss        | 15 ---------
 .../setting_box/components/useSettingBox.jsx  | 11 +++++++
 10 files changed, 120 insertions(+), 30 deletions(-)
 create mode 100644 src-ui/assets/external_link.svg
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss

diff --git a/src-ui/assets/external_link.svg b/src-ui/assets/external_link.svg
new file mode 100644
index 00000000..70a71891
--- /dev/null
+++ b/src-ui/assets/external_link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd"><path d="M14 4h-13v18h20v-11h1v12h-22v-20h14v1zm10 5h-1v-6.293l-11.646 11.647-.708-.708 11.647-11.646h-6.293v-1h8v8z"/></svg>
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
index 2a0c6678..dc8ee21a 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
@@ -11,6 +11,7 @@ export const Appearance = () => {
         EntryContainer,
         ThresholdContainer,
         RadioButtonContainer,
+        DeeplAuthKeyContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -35,9 +36,11 @@ export const Appearance = () => {
 
             <RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
 
-            <EntryContainer label="Transparent" desc="description" switchbox_id="entry_id_1"/>
+            <EntryContainer width="20rem" label="Transparent" desc="description" switchbox_id="entry_id_1"/>
 
             <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
+
+            <DeeplAuthKeyContainer label="Transparent" desc="description"/>
         </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
index 2a0c6678..dc8ee21a 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
@@ -11,6 +11,7 @@ export const Appearance = () => {
         EntryContainer,
         ThresholdContainer,
         RadioButtonContainer,
+        DeeplAuthKeyContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -35,9 +36,11 @@ export const Appearance = () => {
 
             <RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
 
-            <EntryContainer label="Transparent" desc="description" switchbox_id="entry_id_1"/>
+            <EntryContainer width="20rem" label="Transparent" desc="description" switchbox_id="entry_id_1"/>
 
             <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
+
+            <DeeplAuthKeyContainer label="Transparent" desc="description"/>
         </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx
new file mode 100644
index 00000000..5a5a3f6f
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import styles from "./_Entry.module.scss";
+
+export const _Entry = ({ width, onChange, initialValue = "" }) => {
+    const [input_value, setInputValue] = useState(initialValue);
+
+    const onChangeFunction = (e) => {
+        setInputValue(e.currentTarget.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+
+    return (
+        <div className={styles.entry_container}>
+            <div
+                className={styles.entry_wrapper}
+                style={{ width }}
+            >
+                <input
+                    className={styles.entry_input_area}
+                    value={input_value}
+                    onChange={onChangeFunction}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss
new file mode 100644
index 00000000..9ffa70c2
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss
@@ -0,0 +1,15 @@
+.entry_wrapper {
+    width: 10rem;
+    height: 100%;
+    padding: 0.6rem;
+    background-color: var(--dark_875_color);
+    border: 0.1rem solid var(--dark_750_color);
+    border-radius: 0.4rem;
+}
+
+.entry_input_area {
+    width: 100%;
+    height: 100%;
+    font-size: 1.4rem;
+    resize: none;
+}
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
new file mode 100644
index 00000000..7b781178
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
@@ -0,0 +1,18 @@
+import styles from "./DeeplAuthKey.module.scss";
+
+import clsx from "clsx";
+import ExternalLink from "@images/external_link.svg?react";
+import { _Entry } from "../_atoms/_Entry";
+
+export const DeeplAuthKey = () => {
+
+    return (
+        <div className={styles.container}>
+            <_Entry width="34rem"/>
+            <div className={styles.open_webpage_button}>
+                <p className={styles.open_webpage_text}>Open DeepL Account Webpage</p>
+                <ExternalLink className={styles.external_link_svg} />
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss
new file mode 100644
index 00000000..6980d6f4
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss
@@ -0,0 +1,33 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+.open_webpage_button {
+    padding: 0.6rem 1.2rem;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_825_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.open_webpage_text {
+    font-size: 1.4rem;
+    color: var(--dark_basic_text_color);
+}
+
+.external_link_svg {
+    color: var(--dark_500_color);
+    width: 1.8rem;
+}
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx
index b8ce35f0..45cfffea 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx
@@ -1,22 +1,15 @@
-import { useState } from "react";
 import styles from "./Entry.module.scss";
+import { _Entry } from "../_atoms/_Entry";
 
-export const Entry = (props) => {
-    const [input_value, setInputValue] = useState();
+export const Entry = ({width}) => {
 
-    const onChangeFunction = (e) => {
-        setInputValue(e.currentTarget.value);
+    const handleInputChange = (e) => {
+        console.log(e.currentTarget.value);
     };
 
-
     return (
         <div className={styles.entry_container}>
-            <div className={styles.entry_wrapper}>
-                <input
-                    className={styles.entry_input_area}
-                    onChange={onChangeFunction}
-                />
-            </div>
+            <_Entry width={width} onChange={handleInputChange} initialValue="" />
         </div>
     );
-};
+};
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss
index 9ffa70c2..e69de29b 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss
@@ -1,15 +0,0 @@
-.entry_wrapper {
-    width: 10rem;
-    height: 100%;
-    padding: 0.6rem;
-    background-color: var(--dark_875_color);
-    border: 0.1rem solid var(--dark_750_color);
-    border-radius: 0.4rem;
-}
-
-.entry_input_area {
-    width: 100%;
-    height: 100%;
-    font-size: 1.4rem;
-    resize: none;
-}
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
index 218ced2f..e5adcc35 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
@@ -9,6 +9,7 @@ import { Switchbox } from "./switchbox/Switchbox";
 import { Entry } from "./entry/Entry";
 import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 import { RadioButton } from "./radio_button/RadioButton";
+import { DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
 
 export const useSettingBox = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -85,6 +86,15 @@ export const useSettingBox = () => {
         );
     };
 
+    const DeeplAuthKeyContainer = (props) => {
+        return (
+            <div className={styles.container}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <DeeplAuthKey {...props}/>
+            </div>
+        );
+    };
+
     return {
         DropdownMenuContainer,
         SliderContainer,
@@ -93,5 +103,6 @@ export const useSettingBox = () => {
         EntryContainer,
         ThresholdContainer,
         RadioButtonContainer,
+        DeeplAuthKeyContainer,
     };
 };
\ No newline at end of file