{t("dropdown.settings")}
diff --git a/client/src/common/components/LanguageDialog/styles.sass b/client/src/common/components/LanguageDialog/styles.sass index 57d6a60c..462e858b 100644 --- a/client/src/common/components/LanguageDialog/styles.sass +++ b/client/src/common/components/LanguageDialog/styles.sass @@ -22,7 +22,7 @@ border-radius: 0.5rem &:hover - background-color: $light-gray + background-color: $darker-gray img width: 2rem @@ -38,6 +38,9 @@ background-color: $light-gray color: $white + &:hover + background-color: $light-gray + @media screen and (max-height: 425px) .language-chooser-dialog height: 15rem diff --git a/client/src/common/components/ProviderDialog/ProviderDialog.jsx b/client/src/common/components/ProviderDialog/ProviderDialog.jsx new file mode 100644 index 00000000..bd79c505 --- /dev/null +++ b/client/src/common/components/ProviderDialog/ProviderDialog.jsx @@ -0,0 +1,138 @@ +import {DialogContext, DialogProvider} from "@/common/contexts/Dialog"; +import {t} from "i18next"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faClose} from "@fortawesome/free-solid-svg-icons"; +import "./styles.sass"; +import React, {useContext, useEffect, useState} from "react"; +import OoklaImage from "./assets/img/ookla.webp"; +import LibreImage from "./assets/img/libre.webp"; +import CloudflareImage from "./assets/img/cloudflare.webp"; +import {jsonRequest, patchRequest} from "@/common/utils/RequestUtil"; +import {Trans} from "react-i18next"; +import {ConfigContext} from "@/common/contexts/Config"; + +const providers = [ + {id: "ookla", name: "Ookla", image: OoklaImage}, + {id: "libre", name: "LibreSpeed", image: LibreImage}, + {id: "cloudflare", name: "Cloudflare", image: CloudflareImage} +] + + +export const Dialog = () => { + const close = useContext(DialogContext); + const [config, reloadConfig] = useContext(ConfigContext); + const [provider, setProvider] = useState(config.provider || "ookla"); + + const [licenseAccepted, setLicenseAccepted] = useState(false); + const [licenseError, setLicenseError] = useState(false); + + const [ooklaServers, setOoklaServers] = useState({}); + const [libreServers, setLibreServers] = useState({}); + + const [serverId, setServerId] = useState("none"); + + useEffect(() => { + jsonRequest("/info/server/ookla").then((response) => { + setOoklaServers(response); + }); + jsonRequest("/info/server/libre").then((response) => { + setLibreServers(response); + }); + }, []); + + useEffect(() => { + if (config[provider + "Id"]) setServerId(config[provider + "Id"]); + }, [provider]); + + useEffect(() => { + if (serverId === "") setServerId("none"); + }, [serverId]); + + const update = async () => { + if (provider === "ookla" && !licenseAccepted) { + setLicenseError(true); + return; + } + + await patchRequest("/config/provider", {value: provider}); + + if (serverId !== config[provider + "Id"] && provider !== "cloudflare") { + await patchRequest("/config/" + provider + "Id", {value: serverId}); + } + + reloadConfig(); + + close(); + } + + return ( + <> +
+ close()}/>
+
+ {t("update.provider_title")}
+
+
+
+ {providers.map((current, index) => (
+
+ {provider !== "cloudflare" && setProvider(current.id)}>
+ 
+
+ ))}
+ {current.name}
+
+
}
+ {provider === "cloudflare" &&
+
+ {t("dialog.provider.server")}
+ +
+
+ {t("dialog.provider.server_id")}
+ setServerId(e.target.value)}/> +
+
}
+ {t("dialog.provider.cloudflare_note")}
+
+
+
+ )
+}
+
+export const ProviderDialog = (props) => {
+ return (
+ <>
+
+ {provider === "ookla" && <>
+ setLicenseAccepted(e.target.checked)}/>
+
+ }
+
+
+
+