+
+ );
+};
+
+export default APIKeyCard;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/components/CreateAPIKey/CreateAPIKey.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/components/CreateAPIKey/CreateAPIKey.js
new file mode 100644
index 00000000..094580de
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/components/CreateAPIKey/CreateAPIKey.js
@@ -0,0 +1,142 @@
+import React, {useState} from 'react';
+import classes from "./CreateAPIKey.module.css";
+import {Trans, useTranslation} from "react-i18next";
+import TextInput from "../../../../../../../../../../../../components/TextInput/TextInput";
+import {images} from "../../../../../../../../../../../../assets/images";
+import Button from "../../../../../../../../../../../../components/Button/Button";
+import {createAPIKey} from "js-api-client";
+import {toast} from "react-hot-toast";
+import ResultPage from "./components/ResultPage/ResultPage";
+import {useGetAPIKeyList} from "../../../../../../../../../../../../queries/hooks/useGetAPIKeyList";
+
+const CreateAPIKey = () => {
+
+ const {t} = useTranslation();
+
+ const [isLoading, setIsLoading] = useState(false)
+ const [apiKeyResult, setApikeyResult] = useState(null)
+
+ const {refetch} = useGetAPIKeyList()
+
+ const [apiKey, setApiKey] = useState({
+ label: {value: "", error: []},
+ allowedIPs: {value: "", error: []},
+ expiration: {value: "", error: []},
+ });
+
+ console.log("setApikeyResult", apiKeyResult)
+
+ const dates = [
+ {value: "ONE_MONTH", label: t('APIKey.ONE_MONTH')},
+ {value: "THREE_MONTHS", label: t('APIKey.THREE_MONTHS')},
+ {value: "SIX_MONTHS", label: t('APIKey.SIX_MONTHS')},
+ {value: "ONE_YEAR", label: t('APIKey.ONE_YEAR')},
+ ]
+
+ const createAPIKeyHandler = async (e) => {
+ e.preventDefault()
+ if (isLoading) return
+
+ if (apiKey.label.value === "") {
+ return setApiKey({...apiKey, label : { ...apiKey.label, error: [t('APIKey.emptyLabel')]}})
+ }
+
+ setIsLoading(true)
+ const apiKeyData = {
+ label: apiKey.label.value.length <= 0 ? null : apiKey.label.value,
+ expiration: apiKey.expiration.value.length <= 0 ? null : apiKey.expiration.value ,
+ allowedIPs: apiKey.allowedIPs.value.length <= 0 ? null : apiKey.allowedIPs.value
+ }
+ createAPIKey(apiKeyData).then((res) => {
+ setApikeyResult(res.data)
+ refetch()
+ setApiKey({
+ label: {value: "", error: []},
+ allowedIPs: {value: "", error: []},
+ expiration: {value: "", error: []},
+ })
+ }).catch((error) => {
+
+ console.log("e" , error.response.data.code)
+
+ if (error.response.data.code === 7007) {
+ return toast.error(t('APIKey.reachedLimit'));
+ }
+
+ toast.error(t('error'));
+ }).finally(() => setIsLoading(false))
+ }
+
+ const submitButtonTextHandler = () => {
+ if (isLoading) return
+
+
+ {t('APIKey.label')}:
+ {data?.label}
+
+ {/*
+ {t('APIKey.apiKey')}:
+ {data?.key}
+ copyToClipboard(data?.key, e)}
+ customClass={`hover-text cursor-pointer mr-025`}
+ />
+
*/}
+
+ {t('APIKey.expiration')}:
+ {data?.expirationTime ? moment(data.expirationTime).locale(i18n.language === "fa" ? "fa" : "en", i18n.language === "fa" ? fa : "").fromNow(true) : "---"}
+
+
+
+
+ {isLoading ?
+ 
:
+ <>
+ {textHandler(data.enabled)}
+ |
+
+ deleteFunc(data.key)}>
+ {t('APIKey.delete')}
+
+
+
+ }
+
+
+
+
+ {t('APIKey.apiKey')}:
+
+
+
+ {data?.key}
+ copyToClipboard(data?.key, e)}
+ customClass={`hover-text cursor-pointer mr-025`}
+ />
+
+
+
+
+
+
+ {t('APIKey.allowedIPs')}:
+
+
+ {data?.allowedIPs ? data?.allowedIPs?.split(",").map((name , index) =>
+ {name} ) : "---"}
+
+
+
+
+
+
+
+
+
+
+ {apiKeyResult !== null &&
+
+
+
+
+
+
+ {t("APIKey.title")}
+
+
+
+ );
+};
+
+export default ResultPage;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/components/CreateAPIKey/components/ResultPage/ResultPage.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/components/CreateAPIKey/components/ResultPage/ResultPage.module.css
new file mode 100644
index 00000000..eb457239
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/components/CreateAPIKey/components/ResultPage/ResultPage.module.css
@@ -0,0 +1,36 @@
+.container{
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ /*background-color: #0304038f;*/
+ background-color: rgba(0, 0, 0, 0.66);
+ z-index: 6;
+ right: 0;
+}
+.content{
+ position: fixed;
+ top: 9%;
+ left: 31.5%;
+ width: 37%;
+ height: 82%;
+ background-color: var(--cardBody);
+ z-index: 7;
+}
+.content img{
+ width: 4vw;
+}
+.thisButton {
+ background-color: var(--orange);
+ color: #000 !important;
+}
+
+.thisInput :global(.lead) {
+ width: 20%;
+}
+.thisInput :global(input) {
+ width: 70%;
+}
+.thisInput :global(.after) {
+ width: 10%;
+}
diff --git a/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/SettingsSubMenu/SettingsSubMenu.js b/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/SettingsSubMenu/SettingsSubMenu.js
index a2e2d8cf..0d0de0a1 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/SettingsSubMenu/SettingsSubMenu.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/SettingsSubMenu/SettingsSubMenu.js
@@ -84,6 +84,32 @@ const SettingsSubMenu = () => {
+
+
+ {/*
*/}
+ {t("APIKey.success")}
+ {t("APIKey.warning")}
+
+
+
+
+
+
+
+
+
+
+
+ copyToClipboard(data.secret, e)}
+ customClass={`hover-text cursor-pointer mr-025`}
+ />
+ }
+ value={data.secret}
+ type="readOnly"
+ customClass={`${classes.thisInput} width-100 mt-2`}
+ />
+
+
+
+
+
+
+ copyToClipboard(data.apiKey, e)}
+ customClass={`hover-text cursor-pointer mr-025`}
+ />
+ }
+ value={data.apiKey}
+ type="readOnly"
+ customClass={`width-100 ${classes.thisInput} mt-2`}
+ />
+
+
+
+
+
+
+
+
+ {t("APIKey.title")}
+
+
+
+
+ {t("APIKey.create")}
+
+ {/*
+ {t("APIKey.enable")}
+
+
+ {t("APIKey.disable")}
+
+
+ {t("APIKey.delete")}
+ */}
+
+