@translationstudio/translationstudio-strapi-extension 2.1.0 → 4.0.0

package/dist/_chunks/App-Cc3EklWX.mjs

@@ -0,0 +1,331 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { getFetchClient, Page } from "@strapi/strapi/admin";
+import { Routes, Route } from "react-router-dom";
+import { Main, Box, Alert, Grid, Typography, TextInput, Switch, Button } from "@strapi/design-system";
+import { useState, useCallback, useEffect } from "react";
+import { T as TranslationstudioLogo } from "./index-ChM8Lw4L.mjs";
+const apiService = {
+  async loadLicense(get) {
+    try {
+      const response = await get("/translationstudio/getLicense");
+      return response.data?.license || "";
+    } catch (err) {
+      console.error(err);
+      return "";
+    }
+  },
+  async loadDevUrl(get) {
+    try {
+      const response = await get("/translationstudio/devurl");
+      return response.data?.url || "";
+    } catch (err) {
+      console.error(err);
+      return "";
+    }
+  },
+  async updateDevUrl(post, url) {
+    try {
+      const response = await post("/translationstudio/devurl", { url });
+      return response.data?.success || false;
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+};
+const styles = {
+  textInput: {
+    width: "90%",
+    display: "inline-block"
+  },
+  button: {
+    backgroundColor: "#e94642",
+    border: "none",
+    paddingTop: "0.6em",
+    paddingBottom: "0.6em"
+  },
+  tab: {
+    color: "#e94642",
+    cursor: "pointer",
+    textDecoration: "none",
+    fontSize: "18px",
+    fontWeight: "600"
+  },
+  activeTab: {
+    textDecoration: "underline"
+  },
+  inactiveTab: {
+    opacity: 0.7
+  },
+  alert: {
+    position: "fixed",
+    top: "10%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex: 10,
+    minWidth: "400px",
+    maxWidth: "90%"
+  }
+};
+const SettingsPage = () => {
+  const [licenseValue, setLicenseValue] = useState("");
+  const [tokenValue, setTokenValue] = useState("");
+  const [devUrl, setDevUrl] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingToken, setIsLoadingToken] = useState(false);
+  const [showDevOptions, setShowDevOptions] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
+  const [alertType, setAlertType] = useState("success");
+  const [alertMessage, setAlertMessage] = useState("");
+  const { get, post } = getFetchClient();
+  const displayAlert = useCallback((variant, message) => {
+    const defaultMessage = variant === "success" ? "License saved" : "Error saving license";
+    setAlertType(variant);
+    setAlertMessage(message || defaultMessage);
+    setShowAlert(true);
+    setTimeout(() => setShowAlert(false), 5e3);
+  }, []);
+  useEffect(() => {
+    const loadInitialData = async () => {
+      setIsLoading(true);
+      try {
+        const [license, devUrlData] = await Promise.all([
+          apiService.loadLicense(get),
+          apiService.loadDevUrl(get)
+        ]);
+        if (license) setLicenseValue(license);
+        if (devUrlData) {
+          setDevUrl(devUrlData);
+          setShowDevOptions(true);
+        }
+      } catch (err) {
+        console.error("Failed to load initial data:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadInitialData();
+  }, [setIsLoading, setDevUrl, setLicenseValue, setShowDevOptions]);
+  useEffect(() => {
+    const fetchToken = async () => {
+      setIsLoadingToken(true);
+      try {
+        const response = await get("/translationstudio/getToken");
+        setTokenValue(response.data?.token || "");
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsLoadingToken(false);
+      }
+    };
+    fetchToken();
+  }, []);
+  const handleLicenseChange = useCallback((e) => {
+    setLicenseValue(e.target.value.trim());
+  }, []);
+  const handleSaveLicense = useCallback(async () => {
+    try {
+      await post("/translationstudio/setLicense", { license: licenseValue });
+      displayAlert("success");
+    } catch (err) {
+      console.error(err);
+      displayAlert("danger");
+    }
+  }, [post, licenseValue, displayAlert]);
+  const handleGenerateToken = useCallback(async () => {
+    setIsLoadingToken(true);
+    try {
+      const response = await post("/translationstudio/generateToken");
+      if (response.data?.token) {
+        setTokenValue(response.data.token);
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsLoadingToken(false);
+    }
+  }, [post]);
+  const handleUpdateUrl = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      await apiService.updateDevUrl(post, devUrl);
+      if (devUrl === "") setShowDevOptions(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [post, devUrl]);
+  const handleDevOptionsToggle = useCallback(
+    (val) => {
+      if (val) {
+        setShowDevOptions(val);
+      } else {
+        apiService.updateDevUrl(post, "").finally(() => setShowDevOptions(val));
+      }
+    },
+    [post]
+  );
+  const ActionButton = ({
+    onClick,
+    disabled,
+    loading,
+    children,
+    icon
+  }) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick,
+      disabled,
+      loading,
+      style: styles.button,
+      size: "L",
+      startIcon: icon,
+      children
+    }
+  );
+  const LinkText = ({ href, children }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: { textDecoration: "none", color: "#e94642" },
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs(Main, { children: [
+    showAlert && /* @__PURE__ */ jsx(Box, { style: styles.alert, children: /* @__PURE__ */ jsx(Alert, { closeLabel: "Close", variant: alertType, onClose: () => setShowAlert(false), children: alertMessage }) }),
+    /* @__PURE__ */ jsx(Box, { padding: 10, style: { minHeight: "90vh", marginTop: "5vh" }, children: /* @__PURE__ */ jsxs(Grid.Root, { children: [
+      /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsx(Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsx(
+        "picture",
+        {
+          style: {
+            width: "150px",
+            height: "auto",
+            display: "inline-block"
+          },
+          children: /* @__PURE__ */ jsx(TranslationstudioLogo, {})
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingTop: "2em" }, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "translationstudio License" }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingBottom: "1em" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "charlie", children: [
+          "You can create or revoke a license at",
+          " ",
+          /* @__PURE__ */ jsx(LinkText, { href: "https://account.translationstudio.tech/", children: "account.translationstudio.tech" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 10, children: /* @__PURE__ */ jsx("div", { style: { display: "block", width: "95%" }, children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            name: "jwt-token",
+            label: "JWT Token",
+            placeholder: "Paste your Strapi translationstudio license into this field and click save to apply it to this project",
+            value: licenseValue,
+            onChange: handleLicenseChange,
+            disabled: isLoading,
+            style: styles.textInput
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 2, children: /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            onClick: handleSaveLicense,
+            disabled: isLoading,
+            icon: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M21,20V8.414a1,1,0,0,0-.293-.707L16.293,3.293A1,1,0,0,0,15.586,3H4A1,1,0,0,0,3,4V20a1,1,0,0,0,1,1H20A1,1,0,0,0,21,20ZM9,8h6V6h1v3H8V6H9ZM8,18V14h8v4Z",
+                fill: "currentColor"
+              }
+            ) }),
+            children: "Save license"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingTop: "3em" }, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Authorize translationstudio requests" }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingBottom: "1em" }, children: /* @__PURE__ */ jsx(Typography, { variant: "charlie", children: "When translationstudio connects with this plugin it will use the following access key to authorize itself." }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 10, children: /* @__PURE__ */ jsx("div", { style: { display: "block", width: "95%" }, children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            name: "access-token",
+            label: "Access Key",
+            placeholder: "Generate an access key to validate incoming requests",
+            value: tokenValue,
+            onChange: () => {
+            },
+            disabled: true,
+            style: styles.textInput
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 2, children: /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            onClick: handleGenerateToken,
+            disabled: isLoadingToken,
+            loading: isLoadingToken,
+            icon: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M12 4V1L8 5L12 9V6C15.31 6 18 8.69 18 12C18 13.01 17.75 13.97 17.3 14.8L18.76 16.26C19.54 15.03 20 13.57 20 12C20 7.58 16.42 4 12 4ZM12 18C8.69 18 6 15.31 6 12C6 10.99 6.25 10.03 6.7 9.2L5.24 7.74C4.46 8.97 4 10.43 4 12C4 16.42 7.58 20 12 20V23L16 19L12 15V18Z",
+                fill: "currentColor"
+              }
+            ) }),
+            children: isLoadingToken ? "Generating..." : tokenValue ? "New access key" : "Create access key"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingTop: "5em" }, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Customization" }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingBottom: "1em" }, children: /* @__PURE__ */ jsx(Typography, { variant: "charlie", children: "You will not need these settings, but you might want to customize your translationstudio instance." }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: showDevOptions,
+            onCheckedChange: () => handleDevOptionsToggle(!showDevOptions),
+            onLabel: "Use custom translationstudio URL",
+            offLabel: "Custom translationstudio URL is currently disabled (default)",
+            visibleLabels: true
+          }
+        ) }),
+        showDevOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingTop: "2em" }, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Use custom translationstudio URL." }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingBottom: "1em" }, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", children: "This is usually only necessary for development purposes." }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 10, children: /* @__PURE__ */ jsx("div", { style: { display: "block", width: "95%" }, children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              onChange: (e) => setDevUrl(e.target.value.trim()),
+              name: "devurl",
+              label: "Custom translationstudio url",
+              placeholder: "Paste your custom translationstudio url here",
+              value: devUrl,
+              style: styles.textInput
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 2, children: /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              onClick: handleUpdateUrl,
+              disabled: isLoading,
+              loading: isLoading,
+              icon: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 5V19L19 12L8 5Z", fill: "currentColor" }) }),
+              children: "Update URL"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingTop: "4em" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "sigma", style: { textAlign: "right" }, children: [
+          "If you do not have a translationstudio account, please create one at",
+          " ",
+          /* @__PURE__ */ jsx(LinkText, { href: "https://account.translationstudio.tech/", children: "account.translationstudio.tech" }),
+          ". You can find further information at",
+          " ",
+          /* @__PURE__ */ jsx(LinkText, { href: "https://www.translationstudio.tech/", children: "translationstudio.tech" })
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+};
+const App = () => {
+  return /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(SettingsPage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] });
+};
+export {
+  App
+};