@translationstudio/translationstudio-strapi-extension 1.1.0 → 1.1.3

package/README.md

@@ -22,7 +22,7 @@ Follow these steps:
 
 1. run `npm install -g yalc` in this folder
 2. run `npm install` (if there are errors, add `--legacy-peer-deps`)
-3. run `npm run:watch link` in this folder
+3. run `npm run watch:link` in this folder
 4. Create a new strapi project and enter the folder
 5. run `npx yalc add --link _translationstudio-strapi-extension_`
 6. start strapi in development mode

package/dist/_chunks/{App-jiozoQyG.mjs → App-Cq1SRR-L.mjs}

@@ -1,36 +1,76 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+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, Flex, Typography, Textarea, Button } from "@strapi/design-system";
+import { Main, Box, Alert, Grid, Typography, TextInput, Button, Switch } from "@strapi/design-system";
 import { useState, useEffect } from "react";
+import { ArrowClockwise, Play } from "@strapi/icons";
 const TSlogoFarbig = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201444.47%20635.72'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:%23e94642;}.cls-2{fill:%23231f20;}.cls-3{fill:%23a51d78;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-2'%20d='M1151.68,294.37c34.28,0,50.11,19.74,50.11,59.01v56.4c0,6.94-3.91,10.85-10.85,10.85h-2.6c-6.94,0-10.84-3.9-10.84-10.85v-54.45c0-27.12-10.41-39.91-33.41-39.91s-32.97,15.4-32.97,42.74v51.63c0,6.94-3.91,10.85-10.85,10.85h-2.6c-6.94,0-10.85-3.9-10.85-10.85v-102.39c0-6.94,3.91-10.85,10.85-10.85h2.6c6.94,0,10.85,3.91,10.85,10.85v12.34c5.64-14.39,19.73-25.36,40.56-25.36h0Z'/%3e%3cpath%20class='cls-2'%20d='M0,313.78v55.76c0,37.96,14.53,51.2,46.42,51.2h0c1.96,0,4.12-.03,6.29-.22,6.9-.65,9.8-4.45,9.11-11.07-.61-5.88-4.99-8.24-11.71-8.24-18.88,0-25.6-8.9-25.6-34.49v-52.94h25.81c6.94,0,10.85-3.47,10.85-9.54s-3.9-9.33-10.85-9.33H24.51v-15.83c0-7.59-4.34-11.28-11.93-9.55l-3.04,.65c-6.29,1.3-9.54,5.21-9.54,11.71v31.89Z'/%3e%3cpath%20class='cls-2'%20d='M139.49,295.02c7.38,0,11.06,4.77,10.2,11.71l-.22,1.74c-.65,6.94-4.77,9.54-11.93,9.54-20.39,.43-30.16,15.19-30.16,41.22v50.55c0,6.94-3.9,10.85-10.85,10.85h-2.6c-6.94,0-10.85-3.9-10.85-10.85v-102.39c0-6.94,3.9-10.85,10.85-10.85h2.6c6.94,0,10.85,3.69,10.85,10.41v10.41c3.91-11.07,13.89-22.34,32.1-22.34h0Z'/%3e%3cpath%20class='cls-2'%20d='M259.67,358.59c0-27.12-15.84-43.82-38.83-43.82s-38.4,16.49-38.4,43.82,15.62,44.04,38.83,44.04,38.4-16.7,38.4-44.04m-101.53,0c0-42.74,26.03-64.43,56.84-64.43,19.52,0,36.88,9.54,44.04,26.69v-13.45c0-6.94,3.9-10.85,10.85-10.85h2.6c6.94,0,10.85,3.9,10.85,10.85v102.18c0,6.94-3.9,10.85-10.85,10.85h-2.6c-6.94,0-10.85-3.9-10.85-10.85v-12.58c-6.94,16.7-24.51,26.47-43.82,26.47-30.81,0-57.06-21.91-57.06-64.87'/%3e%3cpath%20class='cls-2'%20d='M380.06,294.37c34.28,0,50.11,19.74,50.11,59.01v56.4c0,6.94-3.91,10.85-10.85,10.85h-2.6c-6.94,0-10.85-3.9-10.85-10.85v-54.45c0-27.12-10.41-39.91-33.41-39.91s-32.98,15.4-32.98,42.74v51.63c0,6.94-3.9,10.85-10.85,10.85h-2.6c-6.94,0-10.85-3.9-10.85-10.85v-102.39c0-6.94,3.91-10.85,10.85-10.85h2.6c6.94,0,10.85,3.91,10.85,10.85v12.34c5.64-14.39,19.73-25.36,40.57-25.36h0Z'/%3e%3cpath%20class='cls-2'%20d='M508.94,422.81c-20.8,0-42.78-8.33-53.19-21.48-4.44-5.61-2.26-11.49,4.99-13.67l2.17-.65c4.75-1.43,8.02-1.28,14.32,4.36,8.65,7.74,20.41,10.61,31.71,10.61,18.05,0,28.81-6.44,28.81-17.36,0-28.63-80.45-5.9-80.45-54.24,0-22.87,23.1-36.01,49.75-36.01,16.09,0,36.22,6.5,47,17.79,5.1,5.33,3.34,11.34-3.68,13.45l-2.17,.65c-5.86,1.76-8.85-.39-14.53-3.84-8.11-4.92-16.87-8.09-26.22-8.09-15.64,0-26.27,5.18-26.27,14.91,0,27.74,81.1,4.51,81.1,54.72,0,23.06-22.28,38.83-53.32,38.83h0Z'/%3e%3cpath%20class='cls-2'%20d='M585.05,409.79v-142.75c0-6.94,3.9-10.85,10.85-10.85h2.82c6.94,0,10.85,3.9,10.85,10.85v142.75c0,6.94-3.91,10.85-10.85,10.85h-2.82c-6.94,0-10.85-3.91-10.85-10.85'/%3e%3cpath%20class='cls-2'%20d='M737.56,358.59c0-27.12-15.84-43.82-38.84-43.82s-38.4,16.49-38.4,43.82,15.62,44.04,38.83,44.04,38.4-16.7,38.4-44.04m-101.53,0c0-42.74,26.03-64.43,56.84-64.43,19.52,0,36.88,9.54,44.04,26.69v-13.45c0-6.94,3.9-10.85,10.85-10.85h2.6c6.94,0,10.85,3.9,10.85,10.85v102.18c0,6.94-3.9,10.85-10.85,10.85h-2.6c-6.94,0-10.85-3.9-10.85-10.85v-12.58c-6.94,16.7-24.51,26.47-43.82,26.47-30.81,0-57.06-21.91-57.06-64.87'/%3e%3cpath%20class='cls-2'%20d='M800.25,315.42v55.76c0,37.96,14.53,51.2,46.42,51.2h0c1.95,0,4.12-.03,6.29-.22,6.89-.65,9.8-4.45,9.11-11.07-.61-5.88-4.99-8.24-11.71-8.24-18.87,0-25.6-8.9-25.6-34.49v-52.94h25.81c6.94,0,10.85-3.47,10.85-9.55s-3.91-9.33-10.85-9.33h-25.81v-15.83c0-7.59-4.34-11.28-11.93-9.54l-3.04,.65c-6.29,1.3-9.55,5.21-9.55,11.71v31.89Z'/%3e%3cpath%20class='cls-2'%20d='M883.72,409.79v-102.4c0-6.94,3.83-10.85,10.65-10.85h2.77c6.82,0,10.65,3.9,10.65,10.85v102.4c0,6.94-3.83,10.85-10.65,10.85h-2.77c-6.81,0-10.65-3.91-10.65-10.85m-2.05-142.96c0-8.24,6.08-13.02,14.32-13.02,7.59,0,14.32,4.77,14.32,13.02s-6.72,13.02-14.32,13.02c-8.24,0-14.32-4.77-14.32-13.02'/%3e%3cpath%20class='cls-2'%20d='M1036.06,358.59c0-27.12-15.62-43.82-38.62-43.82s-38.4,16.49-38.4,43.82,15.4,44.04,38.61,44.04,38.4-16.7,38.4-44.04m-101.31,0c0-44.69,31.02-64.43,62.69-64.43s62.91,19.74,62.91,64.43-31.02,64.87-62.7,64.87-62.91-19.74-62.91-64.87'/%3e%3cpath%20class='cls-2'%20d='M555.77,635.72c-20.98,0-43.14-8.4-53.65-21.66-4.48-5.66-2.27-11.59,5.03-13.78l2.19-.66c4.79-1.44,8.09-1.29,14.43,4.4,8.73,7.81,20.59,10.69,31.98,10.69,18.2,0,29.05-6.49,29.05-17.5,0-28.88-81.14-5.95-81.14-54.7,0-23.07,23.3-36.31,50.17-36.31,16.23,0,36.53,6.55,47.41,17.94,5.14,5.38,3.37,11.43-3.72,13.56l-2.19,.66c-5.91,1.77-8.92-.39-14.66-3.87-8.18-4.96-17.02-8.16-26.45-8.16-15.78,0-26.5,5.22-26.5,15.04,0,27.98,81.79,4.55,81.79,55.18,0,23.26-22.47,39.16-53.78,39.16h0Z'/%3e%3cpath%20class='cls-2'%20d='M639.98,526.42v56.23c0,38.29,14.66,51.63,46.82,51.63h0c1.97,0,4.16-.03,6.34-.22,6.96-.66,9.89-4.49,9.19-11.16-.61-5.93-5.03-8.31-11.81-8.31-19.03,0-25.82-8.97-25.82-34.79v-53.38h26.03c7,0,10.94-3.5,10.94-9.63s-3.94-9.41-10.94-9.41h-26.03v-15.97c0-7.66-4.38-11.38-12.03-9.63l-3.06,.66c-6.34,1.31-9.63,5.25-9.63,11.81v32.16Z'/%3e%3cpath%20class='cls-2'%20d='M826.59,508.39c7,0,10.94,3.94,10.94,10.94v103.27c0,7-3.94,10.94-10.94,10.94h-2.62c-7,0-10.94-3.94-10.94-10.94v-12.45c-5.69,14.51-19.9,25.57-40.91,25.57-34.57,0-50.54-19.91-50.54-59.51v-56.89c0-7,3.94-10.93,10.94-10.93h2.63c7,0,10.94,3.93,10.94,10.93v54.92c0,27.35,10.5,40.26,33.69,40.26s33.26-15.53,33.26-43.1v-52.07c0-7,3.94-10.93,10.94-10.93h2.62Z'/%3e%3cpath%20class='cls-2'%20d='M967.71,570.31c0-27.35-15.75-44.19-39.16-44.19s-38.72,16.63-38.72,44.19,15.75,44.41,39.16,44.41,38.72-16.85,38.72-44.41m-102.39,0c0-43.1,26.25-64.98,57.32-64.98,19.69,0,37.41,9.63,44.41,26.91v-54.26c0-7,3.94-10.94,10.94-10.94h2.62c7,0,10.94,3.94,10.94,10.94v143.74c0,7-3.94,10.94-10.94,10.94h-2.62c-7,0-10.94-3.94-10.94-10.94v-12.69c-7,16.85-24.72,26.69-44.19,26.69-31.07,0-57.54-22.09-57.54-65.41'/%3e%3cpath%20class='cls-2'%20d='M1023.66,623.38v-103.27c0-7,3.87-10.94,10.74-10.94h2.79c6.87,0,10.74,3.94,10.74,10.94v103.27c0,7-3.87,10.94-10.74,10.94h-2.79c-6.87,0-10.74-3.94-10.74-10.94m-2.07-144.18c0-8.31,6.13-13.13,14.44-13.13,7.66,0,14.44,4.81,14.44,13.13s-6.78,13.13-14.44,13.13c-8.31,0-14.44-4.81-14.44-13.13'/%3e%3cpath%20class='cls-2'%20d='M1177.29,570.31c0-27.35-15.75-44.19-38.94-44.19s-38.72,16.63-38.72,44.19,15.53,44.41,38.94,44.41,38.72-16.85,38.72-44.41m-102.17,0c0-45.07,31.29-64.98,63.23-64.98s63.45,19.91,63.45,64.98-31.29,65.41-63.23,65.41-63.45-19.91-63.45-65.41'/%3e%3cpath%20class='cls-3'%20d='M1366.99,177.21c7.75,6.65,16.32,15.32,24.3,26.23,19.82,27.08,29.56,59.09,28.94,95.13-.29,16.74-3.42,30.61-9.31,41.23-.55,1-1.14,1.99-1.74,2.94-1.17,1.86-2.46,3.67-3.82,5.37-3.28,4.11-7.15,7.78-11.48,10.91-.85,.61-1.73,1.21-2.61,1.79-1.77,1.14-3.63,2.22-5.54,3.2-2.85,1.46-5.89,2.76-9.03,3.84-2.08,.72-4.25,1.36-6.44,1.91-6.58,1.65-13.54,2.48-20.67,2.48-19.29,0-36.82-6.22-49.35-17.5-14.34-12.91-21.61-31.67-21.61-55.75,0-30.01,11.74-53.91,31.41-63.94,15.09-7.69,29.61-15.71,41.22-29.17,7.24-8.39,12.46-17.89,15.72-28.67m-14.08-37.87c-3.24,0-6.11,2.04-6.11,5.55h0c.97,42.1-22.01,55.46-47.74,68.58-26.46,13.49-44.63,43.79-44.63,85.51,0,66.7,47.26,97.47,95.17,97.47,8.98,0,17.93-1.05,26.54-3.2,2.87-.72,5.7-1.56,8.49-2.52,4.18-1.45,8.24-3.17,12.16-5.18,2.61-1.34,5.16-2.81,7.63-4.41,1.24-.8,2.45-1.63,3.65-2.49,5.98-4.32,11.44-9.45,16.21-15.43,1.91-2.39,3.71-4.92,5.39-7.58,.84-1.33,1.65-2.7,2.42-4.1,7.76-14,11.99-31.44,12.35-52.56,1.63-95.85-61.94-144.16-87.99-158.76-.99-.56-2.19-.88-3.54-.88h0Z'/%3e%3cpath%20class='cls-1'%20d='M1234.82,24.21c19.29,0,36.82,6.22,49.35,17.5,14.34,12.91,21.61,31.67,21.61,55.75,0,30.01-11.74,53.91-31.41,63.94-15.09,7.69-29.61,15.71-41.22,29.17-7.24,8.39-12.46,17.89-15.72,28.67-7.75-6.65-16.32-15.32-24.3-26.23-19.82-27.08-29.56-59.09-28.94-95.13,.29-16.74,3.42-30.61,9.31-41.23,.55-1,1.14-1.98,1.74-2.93,1.17-1.86,2.46-3.67,3.82-5.37,3.28-4.11,7.15-7.78,11.48-10.91,.85-.61,1.73-1.21,2.61-1.79,1.77-1.14,3.63-2.22,5.54-3.2,2.85-1.46,5.89-2.76,9.03-3.84,2.08-.72,4.25-1.36,6.44-1.91,6.58-1.65,13.54-2.48,20.67-2.48m0-24.21c-8.98,0-17.93,1.05-26.54,3.2-2.87,.72-5.7,1.56-8.49,2.52-4.18,1.45-8.24,3.17-12.16,5.18-2.61,1.34-5.16,2.81-7.63,4.41-1.24,.8-2.45,1.63-3.65,2.49-5.98,4.32-11.44,9.45-16.21,15.43-1.91,2.39-3.71,4.92-5.39,7.58-.84,1.33-1.65,2.7-2.42,4.1-7.76,14-11.99,31.44-12.35,52.56-1.63,95.85,61.94,144.16,87.99,158.76,.99,.56,2.19,.88,3.54,.88,3.24,0,6.11-2.04,6.11-5.55h0c-.97-42.1,22.01-55.46,47.74-68.58,26.46-13.49,44.63-43.79,44.63-85.51,0-66.7-47.26-97.47-95.17-97.47h0Z'/%3e%3c/svg%3e";
+async function loadLicense(fnGet) {
+  try {
+    const response = await fnGet("/translationstudio/getLicense");
+    if (typeof response.data?.license === "string")
+      return response.data.license;
+  } catch (err) {
+    console.error(err);
+  }
+  return "";
+}
+async function loadDevUrl(fnGet) {
+  try {
+    const response = await fnGet("/translationstudio/devurl");
+    if (typeof response.data?.url === "string")
+      return response.data.url;
+  } catch (err) {
+    console.error(err);
+  }
+  return "";
+}
+async function updateDevlUrl(fnPost, url) {
+  try {
+    const response = await fnPost("/translationstudio/devurl", { url });
+    console.log(response.status);
+    if (typeof response.data?.success === "boolean")
+      return response.data.success;
+  } catch (err) {
+    console.error(err);
+  }
+  return false;
+}
+const TextareaStyle = {
+  color: "grey",
+  width: "100%",
+  display: "block",
+  backgroundColor: "#f6f6f6",
+  cursor: "default"
+};
+const BUttonStyle = { backgroundColor: "#e94642", border: "none", paddingTop: "0.6em", paddingBottom: "0.6em" };
 const SettingsPage = () => {
   const [licenseValue, setLicenseValue] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [tokenValue, setTokenValue] = useState("");
   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 [devUrl, setDevUrl] = useState("");
   const { get, post } = getFetchClient();
   useEffect(() => {
     const getLicense = async () => {
       setIsLoading(true);
-      try {
-        const response = await get("/translationstudio/getLicense");
-        if (response.data.license) {
-          setLicenseValue(response.data.license);
-        } else {
-          setLicenseValue("");
-        }
-      } catch (err) {
-        console.error(err);
-      } finally {
-        setIsLoading(false);
+      const license = await loadLicense(get);
+      if (license)
+        setLicenseValue(license);
+      const dUrl = await loadDevUrl(get);
+      if (dUrl) {
+        console.log(dUrl);
+        setDevUrl(dUrl);
+        setShowDevOptions(true);
       }
+      setIsLoading(false);
     };
     getLicense();
-  }, []);
+  }, [setLicenseValue, setDevUrl, setIsLoading, setShowDevOptions]);
   useEffect(() => {
     const fetchToken = async () => {
       setIsLoadingToken(true);
@@ -50,7 +90,14 @@ const SettingsPage = () => {
     fetchToken();
   }, []);
   const handleLicenseChange = (e) => {
-    setLicenseValue(e.target.value);
+    setLicenseValue(e.target.value.trim());
+  };
+  const handleUpdateUrl = async function() {
+    setIsLoading(true);
+    updateDevlUrl(post, devUrl).then(() => {
+      if (devUrl === "")
+        setShowDevOptions(false);
+    }).finally(() => setIsLoading(false));
   };
   const handleSaveLicense = async () => {
     try {
@@ -86,6 +133,12 @@ const SettingsPage = () => {
       setIsLoadingToken(false);
     }
   };
+  const onChangeDevOptions = function(val) {
+    if (val)
+      setShowDevOptions(val);
+    else
+      updateDevlUrl(post, "").finally(() => setShowDevOptions(val));
+  };
   return /* @__PURE__ */ jsxs(Main, { children: [
     showAlert && /* @__PURE__ */ jsx(
       Box,
@@ -106,27 +159,27 @@ const SettingsPage = () => {
       Box,
       {
         padding: 10,
-        paddingBottom: 0,
         style: {
-          height: "90vh",
+          minHeight: "90vh",
           marginTop: "5vh",
           backgroundColor: "white",
           color: "grey"
         },
-        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 6, children: [
-          /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(Grid.Root, { children: [
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsx(Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsx(
             "img",
             {
               src: TSlogoFarbig,
               alt: "Translation Studio Logo",
               style: {
-                maxWidth: "300px",
-                height: "auto"
+                width: "300px",
+                height: "auto",
+                display: "inline-block"
               }
             }
-          ),
-          /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { textAlign: "left" }, children: "translationstudio License" }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "charlie", children: [
+          ) }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingTop: "2em" }, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { width: "100%" }, children: "translationstudio License" }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingBottom: "1em" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "charlie", style: { width: "100%" }, children: [
             "You can create or revoke a license at",
             " ",
             /* @__PURE__ */ jsx(
@@ -135,14 +188,13 @@ const SettingsPage = () => {
                 href: "https://account.translationstudio.tech/",
                 target: "_blank",
                 rel: "noopener noreferrer",
-                style: { textDecoration: "none", color: "#e94642", textAlign: "left" },
+                style: { textDecoration: "none", color: "#e94642" },
                 children: "account.translationstudio.tech"
               }
-            ),
-            " "
-          ] }),
-          /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(
-            Textarea,
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 10, children: /* @__PURE__ */ jsx(Box, { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+            TextInput,
             {
               name: "jwt-token",
               label: "JWT Token",
@@ -151,20 +203,16 @@ const SettingsPage = () => {
               value: licenseValue,
               onChange: handleLicenseChange,
               disabled: isLoading,
-              style: {
-                color: "grey",
-                width: "25vw",
-                textAlign: "left",
-                backgroundColor: "#f6f6f6",
-                cursor: "text"
-              }
+              style: TextareaStyle
             }
-          ) }),
-          /* @__PURE__ */ jsx(Box, { style: { minHeight: "40px" }, children: !isLoading && /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(
+          ) }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 2, children: /* @__PURE__ */ jsx(
             Button,
             {
               onClick: handleSaveLicense,
-              style: { backgroundColor: "#e94642", border: "none" },
+              disabled: isLoading,
+              style: BUttonStyle,
+              size: "L",
               startIcon: /* @__PURE__ */ jsx(
                 "svg",
                 {
@@ -184,10 +232,11 @@ const SettingsPage = () => {
               ),
               children: "Save license"
             }
-          ) }) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Authorize incoming translationstudio connection against this access key" }),
-          /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(
-            Textarea,
+          ) }),
+          /* @__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", style: { width: "100%" }, 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(Box, { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+            TextInput,
             {
               name: "access-token",
               label: "Access Key",
@@ -197,69 +246,86 @@ const SettingsPage = () => {
               onChange: () => {
               },
               disabled: true,
-              style: {
-                color: "grey",
-                width: "25vw",
-                textAlign: "left",
-                backgroundColor: "#f6f6f6",
-                cursor: "default"
-              }
+              style: TextareaStyle
             }
-          ) }),
-          /* @__PURE__ */ jsx(Box, { style: { minHeight: "40px" }, children: /* @__PURE__ */ jsx(
+          ) }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 2, children: /* @__PURE__ */ jsx(
             Button,
             {
               onClick: handleGenerateToken,
-              style: { backgroundColor: "#e94642", border: "none" },
+              style: BUttonStyle,
               disabled: isLoadingToken,
               loading: isLoadingToken,
-              startIcon: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "20",
-                  height: "20",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z",
-                      fill: "currentColor"
-                    }
-                  )
-                }
-              ),
-              children: isLoadingToken ? "Generating..." : tokenValue ? "Generate new access key" : "Generate access key"
+              size: "L",
+              startIcon: /* @__PURE__ */ jsx(ArrowClockwise, {}),
+              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", style: { width: "100%" }, 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: () => onChangeDevOptions(!showDevOptions),
+              onLabel: "Use custom translationstudio URL",
+              offLabel: "Custom translationstudio URL is currently disabled (default)",
+              visibleLabels: true
             }
           ) }),
-          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Typography, { variant: "delta", children: [
-            "If you do not have a",
+          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(Box, { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                onChange: (e) => setDevUrl(e.target.value.trim()),
+                name: "devurl",
+                label: "Custom translationstudio url",
+                placeholder: "Paste your custom translationstudio url here",
+                "aria-label": "translationstudio custom url",
+                value: devUrl,
+                style: TextareaStyle
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(Grid.Item, { xs: 2, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleUpdateUrl,
+                style: BUttonStyle,
+                disabled: isLoadingToken,
+                loading: isLoadingToken,
+                startIcon: /* @__PURE__ */ jsx(Play, {}),
+                size: "L",
+                children: "Update URL"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 12, style: { paddingTop: "4em" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "sigma", style: { width: "100%", textAlign: "right" }, children: [
+            "If you do not have a translationstudio account, please create one at",
             " ",
             /* @__PURE__ */ jsx(
               "a",
               {
-                href: "https://www.translationstudio.tech/",
+                href: "https://account.translationstudio.tech/",
                 target: "_blank",
                 rel: "noopener noreferrer",
                 style: { textDecoration: "none", color: "#e94642" },
-                children: "translationstudio"
+                children: "account.translationstudio.tech"
               }
             ),
-            " ",
-            "account, please create one at",
-            " ",
+            ". You can find further information at ",
             /* @__PURE__ */ jsx(
               "a",
               {
-                href: "https://account.translationstudio.tech/",
+                href: "https://www.translationstudio.tech/",
                 target: "_blank",
                 rel: "noopener noreferrer",
                 style: { textDecoration: "none", color: "#e94642" },
-                children: "account.translationstudio.tech"
+                children: "translationstudio.tech"
               }
             ),
-            "."
+            " "
           ] }) })
         ] })
       }