@translationstudio/translationstudio-strapi-extension 1.0.0 → 1.0.2

package/README.md

@@ -1,32 +1,35 @@
-## Dokumentation / Anleitung (für wenn Plugin published ist)
-
-1. Plugin installieren via npm install (Plugin inkl Command in Strapi Marketplace sichtbar)
-2. Plugin Settings im Admin Panel (translationstudio Icon / Button in der linken Leiste) öffnen
-3. Translationstudio Lizenz einfügen und speichern
-4. Access Token generieren und in account.translationstudio.tech Konfiguration angeben
-5. Übersetzungen erfolgen innerhalb des jeweiligen Entrys im Content Manager
-
-## Lokale Entwicklung (Simulation von npm Package via yalc)
-
-1. strapi Projekt (v5+ installieren)
-2. npm install -g yalc
-   in Plugin Ordner:
-3. npm install (bei Error mit --legacy-peer-deps Flag)
-4. npm run:watch link
-   In strapi Ordner:
-5. npx yalc add --link _Plugin Ordner Name_
-6. npm run develop
-
-## Testen der Translation Funktionalität / Kommunikation mit translationstudio
-
-1. ngrok http 1337
-   In strapi Ordner:
-2. ngrok url in /config/server.ts replacen
-   (in Plugin Ordner:)
-   (2.5. translationstudio plugin mit npm run:watch link starten)
-   In strapi Ordner:
-3. npm run develop
-4. Settings Page (translationstudio Icon, linke Leiste im Admin Panel) öffnen
-5. translationstudio Lizenz einfügen und speichern
-6. Access Token generieren und auf account.translationstudio.tech speichern
-7. Sprachauswahl und Translation-Button findet man innerhalb jedes Entries
+# translationstudio Strapi Extension
+
+## Installation
+
+Install this plugin via 
+
+```bash
+npm i @translationstudio/translationstudio-strapi-extension
+```
+
+## Configuration 
+
+Once the plugin is installed, navigate to the extension's configuration entry in Strapi's admin panel
+
+Generate your access token and add it to your account.translationstudio.tech Strapi configuration
+
+Add your translationstudio license (account.translationstudio.tech) and click on save
+
+## Development
+
+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
+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
+
+### Publish package update
+
+1. Update version number
+2. run `npm run build`
+3. run `npm run publish`
+

package/dist/Types.d.ts

@@ -0,0 +1,146 @@
+/**
+ * Translatable content
+ */
+export interface TranslationstudioTranslatable {
+    field: string;
+    type: 'text' | 'html';
+    translatableValue: string[];
+    realType: string;
+    componentInfo?: {
+        namePath: string[];
+        id: number;
+        schemaName: string;
+    };
+}
+export interface StrapiLocale {
+    id: number;
+    documentId: string;
+    name: string;
+    code: string;
+    createdAt: string;
+    updatedAt: string;
+    publishedAt: string;
+    isDefault: boolean;
+}
+export interface LocaleMap {
+    [code: string]: string;
+}
+export type MappingsResponse = {
+    connector: string;
+    id: string;
+    'limit-to-cms-projects': any[];
+    machine?: boolean;
+    name: string;
+    source: string;
+    targets: string[];
+};
+export interface FieldSchema {
+    type: string;
+    private?: boolean;
+    component?: string;
+    repeatable?: boolean;
+}
+export interface ConfigurationPayload {
+    id: string;
+    token: string;
+}
+export type TranslationRequestTranslations = {
+    source: string;
+    target: string;
+    connector: string;
+};
+export type TranslationRequestCustomData = {
+    key: string;
+    value: string;
+};
+export type TranslationRequestTranslatables = {
+    owner: {
+        uid: string;
+        'display-name': string;
+    };
+    elements: {
+        uid: string;
+        'display-name': string;
+        version: string;
+    };
+};
+export type TranslationRequestTranslatablesElement = {
+    uid: string;
+    'display-name': string;
+    version?: string;
+};
+/**
+ * Dieser Translation Request geht an das
+ * translationstudio - hierzu könnt ihr euch einen MOCK Server bauen,
+ * der den Reqeuest entgegen nimmt.
+ */
+export interface TranslationRequest {
+    duedate: number;
+    email: string;
+    urgent: boolean;
+    'project-name': string;
+    translations: TranslationRequestTranslations[];
+    entry: {
+        uid: string;
+        name: string;
+    };
+}
+export type ExportRequestElementsInfo = {
+    'owner-id': string;
+    version: string;
+    elements: string[];
+};
+export type ImportRequestBody = {
+    metdata: {
+        'cms-project-uid': string;
+        'element-uid': string;
+        'source-language': string;
+        'target-language': string;
+        'cms-region': string;
+        'client-id': string;
+        'cms-environment': string;
+    };
+    configuration: {
+        url: string;
+    };
+    document: any[];
+};
+export interface ExportRequestPayload {
+    data: {
+        clientid: string;
+        'x-trace-id': string;
+        'project-uid': string;
+        source: string;
+        target: string;
+    };
+    configuration: string;
+    elements: ExportRequestElementsInfo;
+}
+export type TranslationStatusData = {
+    'element-uid': string;
+    'element-name': string;
+    'target-language': string;
+    'time-updated': number;
+    'time-requested': number;
+    'time-intranslation': number;
+    'time-imported': number;
+    'project-name': string;
+};
+export interface OrganizedFields {
+    regularFields: TranslationstudioTranslatable[];
+    componentFieldsMap: Map<string, TranslationstudioTranslatable[]>;
+    dynamicZoneFields: Map<number, TranslationstudioTranslatable[]>;
+}
+export interface ExportPayload {
+    source: string;
+    target: string;
+    element: string;
+}
+export interface ImportPayload {
+    element: string;
+    source: string;
+    target: string;
+    document: [{
+        fields: [];
+    }];
+}

package/dist/_chunks/App-Bw7t0TMJ.mjs

@@ -0,0 +1,277 @@
+import { jsxs, jsx } 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 { useState, useEffect } from "react";
+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";
+const SettingsPage = () => {
+  const [licenseValue, setLicenseValue] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [tokenValue, setTokenValue] = useState("");
+  const [isLoadingToken, setIsLoadingToken] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
+  const [alertType, setAlertType] = useState("success");
+  const [alertMessage, setAlertMessage] = useState("");
+  const { get, post } = getFetchClient();
+  useEffect(() => {
+    const getLicense = async () => {
+      setIsLoading(true);
+      try {
+        const response = await get("/translationstudio-strapi-extension/getLicense");
+        if (response.data.license) {
+          setLicenseValue(response.data.license);
+        } else {
+          setLicenseValue("");
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    getLicense();
+  }, []);
+  useEffect(() => {
+    const fetchToken = async () => {
+      setIsLoadingToken(true);
+      try {
+        const response = await get("/translationstudio-strapi-extension/getToken");
+        if (response.data.token) {
+          setTokenValue(response.data.token);
+        } else {
+          setTokenValue("");
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsLoadingToken(false);
+      }
+    };
+    fetchToken();
+  }, []);
+  const handleLicenseChange = (e) => {
+    setLicenseValue(e.target.value);
+  };
+  const handleSaveLicense = async () => {
+    try {
+      const response = await post("/translationstudio-strapi-extension/setLicense", { license: licenseValue });
+      if (response) {
+        displayAlert("success");
+        return;
+      }
+    } catch (err) {
+      console.error(err);
+    }
+    displayAlert("danger");
+  };
+  const displayAlert = (variant) => {
+    let message = variant === "success" ? "License saved" : "Error saving license";
+    setAlertType(variant);
+    setAlertMessage(message);
+    setShowAlert(true);
+    setTimeout(() => {
+      setShowAlert(false);
+    }, 5e3);
+  };
+  const handleGenerateToken = async () => {
+    setIsLoadingToken(true);
+    try {
+      const response = await post("/translationstudio-strapi-extension/generateToken");
+      if (response.data?.token) {
+        setTokenValue(response.data.token);
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsLoadingToken(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Main, { children: [
+    showAlert && /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          position: "fixed",
+          top: "10%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: 10,
+          minWidth: "400px",
+          maxWidth: "90%"
+        },
+        children: /* @__PURE__ */ jsx(Alert, { closeLabel: "Close", variant: alertType, onClose: () => setShowAlert(false), children: alertMessage })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        padding: 10,
+        paddingBottom: 0,
+        style: {
+          height: "90vh",
+          marginTop: "5vh",
+          backgroundColor: "white",
+          color: "grey"
+        },
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 6, children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: TSlogoFarbig,
+              alt: "Translation Studio Logo",
+              style: {
+                maxWidth: "300px",
+                height: "auto"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { textAlign: "left" }, children: "translationstudio License" }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "charlie", children: [
+            "You can create or revoke a license at",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://account.translationstudio.tech/",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { textDecoration: "none", color: "#e94642", textAlign: "left" },
+                children: "account.translationstudio.tech"
+              }
+            ),
+            " "
+          ] }),
+          /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              name: "jwt-token",
+              label: "JWT Token",
+              placeholder: "Paste your Strapi translationstudio license into this field and click save to apply it to this project",
+              "aria-label": "Strapi license Input",
+              value: licenseValue,
+              onChange: handleLicenseChange,
+              disabled: isLoading,
+              style: {
+                color: "grey",
+                width: "25vw",
+                textAlign: "left",
+                backgroundColor: "#f6f6f6",
+                cursor: "text"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { style: { minHeight: "40px" }, children: !isLoading && /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleSaveLicense,
+              style: { backgroundColor: "#e94642", border: "none" },
+              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: "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(Typography, { variant: "beta", children: "Authorize incoming translationstudio connection against this access key" }),
+          /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              name: "access-token",
+              label: "Access Key",
+              placeholder: "Generate an access key to validate incoming requests",
+              "aria-label": "Access Key Input",
+              value: tokenValue,
+              onChange: () => {
+              },
+              disabled: true,
+              style: {
+                color: "grey",
+                width: "25vw",
+                textAlign: "left",
+                backgroundColor: "#f6f6f6",
+                cursor: "default"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { style: { minHeight: "40px" }, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleGenerateToken,
+              style: { backgroundColor: "#e94642", border: "none" },
+              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..." : "Generate Access Key"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Typography, { variant: "delta", children: [
+            "If you do not have a",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://www.translationstudio.tech/",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { textDecoration: "none", color: "#e94642" },
+                children: "translationstudio"
+              }
+            ),
+            " ",
+            "account, please create one at",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://account.translationstudio.tech/",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { textDecoration: "none", color: "#e94642" },
+                children: "account.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
+};