@crowdin/app-project-module 0.97.0 → 0.98.0-cf-1

package/out/views/LoginPage.js

@@ -0,0 +1,199 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginPage = void 0;
+const react_1 = __importDefault(require("react"));
+const Head_1 = require("./layout/Head");
+const renderField = (field, name) => {
+    var _a;
+    if (!field.key) {
+        // Label-only field
+        return field.labelHtml ? (react_1.default.createElement("crowdin-p", Object.assign({}, (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), { dangerouslySetInnerHTML: { __html: field.labelHtml } }))) : (react_1.default.createElement("crowdin-p", Object.assign({}, (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {})), field.label));
+    }
+    const commonProps = Object.assign(Object.assign(Object.assign({ id: field.key, label: field.label }, (field.helpText ? { 'help-text': field.helpText } : {})), (field.helpTextHtml ? { 'help-text-html': field.helpTextHtml } : {})), (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}));
+    // Special field types
+    if (['checkbox', 'select', 'textarea', 'file', 'notice'].includes(field.type || '')) {
+        switch (field.type) {
+            case 'checkbox':
+                return (react_1.default.createElement("crowdin-checkbox", Object.assign({}, commonProps, { value: "false", "use-switch": true }, (field.defaultValue === true ? { checked: String(field.defaultValue) } : {}))));
+            case 'select':
+                return (react_1.default.createElement("crowdin-select", Object.assign({}, commonProps, (field.isMulti ? { 'is-multi': true, 'close-on-select': 'false' } : {}), (field.isSearchable ? { 'is-searchable': true } : {})), (_a = field.options) === null || _a === void 0 ? void 0 : _a.map((option) => (react_1.default.createElement("option", Object.assign({ value: option.value }, (field.defaultValue === option.value ? { selected: true } : {})), option.label)))));
+            case 'textarea':
+                return (react_1.default.createElement("crowdin-textarea", Object.assign({}, commonProps, { value: field.defaultValue || '' })));
+            case 'notice':
+                return (react_1.default.createElement("crowdin-alert", Object.assign({}, (field.noticeType ? { type: field.noticeType } : {}), (field.label ? { title: field.label } : {}), (field.noIcon ? { 'no-icon': String(field.noIcon) } : {}), (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), { dangerouslySetInnerHTML: { __html: field.helpText || '' } })));
+            case 'file':
+                return (react_1.default.createElement("div", { className: "file-field" },
+                    field.helpText && react_1.default.createElement("div", { className: "help-text" }, field.helpText),
+                    field.helpTextHtml && react_1.default.createElement("div", { className: "help-text" }, field.helpTextHtml),
+                    react_1.default.createElement("div", { className: "upload" },
+                        react_1.default.createElement("crowdin-button", { outlined: true, onclick: `uploadFiles('${field.key}');` }, field.label),
+                        react_1.default.createElement("textarea", { hidden: true, id: field.key }),
+                        react_1.default.createElement("input", Object.assign({ id: `store_${field.key}`, "data-id": field.key }, (field.accept ? { accept: field.accept } : {}), { 'onchange': 'readFileData(event)' }, { hidden: true, type: field.type })),
+                        react_1.default.createElement("div", { className: "uploaded-file" },
+                            react_1.default.createElement("i", null, "No file")))));
+        }
+    }
+    // Default input field
+    return (react_1.default.createElement("crowdin-input", Object.assign({}, commonProps, (field.type ? { type: field.type } : {}), { value: field.defaultValue || '' })));
+};
+const LoginPage = ({ name, loginFields, oauthLogin, oauthUrl, oauthMode, sentryData }) => (react_1.default.createElement("html", { lang: "en" },
+    react_1.default.createElement(Head_1.Head, { sentryData: sentryData }),
+    react_1.default.createElement("body", null,
+        react_1.default.createElement("div", { className: "i_w center" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("crowdin-card", { "is-shadowed": true, "is-padding-lg": true, className: "login" },
+                    react_1.default.createElement("img", { alt: `${name} logo`, src: "logo.png" }),
+                    react_1.default.createElement("crowdin-h4", { id: "integration-name" }, name),
+                    react_1.default.createElement("div", { className: "inputs" }, loginFields.map((field) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        renderField(field, name),
+                        react_1.default.createElement("div", Object.assign({ style: { padding: '8px' } }, (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}))))))),
+                    react_1.default.createElement("crowdin-button", { id: "login-button", outlined: true, "icon-after": "arrow_forward", onclick: oauthLogin ? 'oauthLogin()' : 'integrationLogin()' },
+                        "Log In With ",
+                        name)))),
+        react_1.default.createElement("crowdin-toasts", null),
+        react_1.default.createElement("script", { type: "text/javascript", dangerouslySetInnerHTML: {
+                __html: `
+            const loginButton = document.querySelector('#login-button');
+            let refreshIntervalId;
+
+            function oauthLogin() {
+              const url = ${oauthUrl ? `'${oauthUrl}'` : 'undefined'};
+              if (url) {
+                openOAuthPopup(url);
+                return;
+              }
+              loginButton.setAttribute('disabled', true);
+              loginButton.setAttribute('is-loading', true);
+              checkOrigin()
+                .then(queryParams =>
+                  fetch(\`api/oauth-url\${queryParams}\`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ loginForm: getLoginForm() })
+                  })
+                )
+                .then(checkResponse)
+                .then(res => openOAuthPopup(res.url))
+                .catch(e => {
+                  loginButton.setAttribute('disabled', false);
+                  loginButton.setAttribute('is-loading', false);
+                  catchRejection(e, 'Can\\'t get oauth token');
+                });
+            }
+
+            function openOAuthPopup(url) {
+              const oauthMode = ${oauthMode ? `'${oauthMode}'` : 'undefined'};
+              const oauthWindow = window.open(url, '${name}', 'location=0,status=0,width=800,height=400');
+
+              if (oauthMode === 'polling') {
+                if (refreshIntervalId) {
+                  clearInterval(refreshIntervalId);
+                }
+                refreshIntervalId = setInterval(() =>
+                  checkOrigin()
+                    .then(queryParams =>
+                      fetch(\`api/oauth-polling\${queryParams}\`, { method: 'POST' })
+                    )
+                    .then(checkResponse)
+                    .then(res => {
+                      if (res.oauthCreds) {
+                        integrationLogin({
+                          refreshToken: res.oauthCreds.refreshToken,
+                          accessToken: res.oauthCreds.accessToken,
+                          expireIn: res.oauthCreds.expireIn,
+                          timestamp: res.oauthCreds.timestamp
+                        });
+                        if (refreshIntervalId) {
+                          clearInterval(refreshIntervalId);
+                        }
+                      }
+                    }), 2000);
+                return;
+              }
+
+              postPromises['oauth_popup'] = {
+                resolve: (data) => {
+                  if (data.error) {
+                    showToast(data.error);
+                    return;
+                  }
+                  integrationLogin({
+                    refreshToken: data.refreshToken,
+                    accessToken: data.accessToken,
+                    expireIn: data.expireIn,
+                    timestamp: data.timestamp
+                  });
+                }
+              }
+            }
+
+            function integrationLogin(oauthCredentials) {
+              const credentials = oauthCredentials || getLoginForm();
+              loginButton.setAttribute('disabled', true);
+              loginButton.setAttribute('is-loading', true);
+              checkOrigin()
+                .then(queryParams =>
+                  fetch(\`api/login\${queryParams}\`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ credentials })
+                  })
+                )
+                .then(checkResponse)
+                .then(localStorage.removeItem('revised_${name}'))
+                .then(reloadLocation)
+                .catch(e => {
+                  loginButton.setAttribute('disabled', false);
+                  loginButton.setAttribute('is-loading', false);
+                  catchRejection(e, 'Credentials are not stored');
+                });
+            }
+
+            function getLoginForm() {
+              return {
+                ${loginFields
+                    .filter((f) => f.key)
+                    .map((f) => {
+                    if (f.type === 'checkbox') {
+                        return `'${f.key}': !!document.querySelector('#${f.key}').checked`;
+                    }
+                    return `'${f.key}': document.querySelector('#${f.key}').getAttribute('value') || document.querySelector('#${f.key}').value`;
+                })
+                    .join(',\n                ')}
+              };
+            }
+
+            function uploadFiles(id) {
+              const input = document.querySelector(\`#store_\${id}\`);
+              input.value = '';
+              input.click();
+            }
+
+            function readFileData(event) {
+              const reader = new FileReader();
+              const identifier = event.target.getAttribute('data-id');
+              const fileName = document.querySelector('.uploaded-file');
+              const input = document.querySelector(\`#\${identifier}\`);
+              const file = event.target.files[0];
+              fileName.innerText = file.name;
+
+              reader.onloadstart = function() {
+                loginButton.setAttribute('disabled', true);
+                loginButton.setAttribute('is-loading', true);
+              };
+              reader.onloadend = function() {
+                loginButton.setAttribute('disabled', false);
+                loginButton.setAttribute('is-loading', false);
+              };
+
+              reader.onload = () => {
+                input.value = reader.result;
+              };
+              reader.readAsText(file);
+            }
+          `,
+            } }))));
+exports.LoginPage = LoginPage;

package/out/views/MainPage.d.ts

@@ -0,0 +1,79 @@
+import { FC } from 'react';
+interface ConfigField {
+    key?: string;
+    label?: string;
+    labelHtml?: string;
+    helpText?: string;
+    helpTextHtml?: string;
+    type?: string;
+    defaultValue?: any;
+    dependencySettings?: string;
+    isMulti?: boolean;
+    isSearchable?: boolean;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    noticeType?: string;
+    noIcon?: boolean;
+}
+interface ConfigurationTab {
+    name: string;
+    fields: ConfigField[];
+}
+interface Notice {
+    title: string;
+    content: string;
+    type?: string;
+    icon?: boolean;
+    close?: boolean;
+}
+interface InfoModal {
+    title: string;
+    content: string;
+}
+interface MainPageProps {
+    name: string;
+    userId?: string;
+    notice?: Notice;
+    checkSubscription?: boolean;
+    isManager?: boolean;
+    isOwner?: boolean;
+    infoModal?: InfoModal;
+    configurationFields?: ConfigurationTab[];
+    config?: string;
+    syncNewElements?: {
+        crowdin?: boolean;
+        integration?: boolean;
+    };
+    withCronSync?: {
+        crowdin?: boolean;
+        integration?: boolean;
+    };
+    webhooks?: {
+        crowdin?: boolean;
+        integration?: boolean;
+    };
+    integrationOneLevelFetching?: boolean;
+    integrationSearchListener?: boolean;
+    integrationPagination?: boolean;
+    uploadTranslations?: boolean;
+    excludedTargetLanguages?: boolean;
+    forcePushTranslations?: boolean;
+    filtering?: {
+        crowdinLanguages?: boolean;
+        integrationFilterConfig?: string;
+    };
+    hasOrganization?: boolean;
+    zenModeUrl?: string;
+    asyncProgress?: {
+        checkInterval: number;
+    };
+    reloadOnConfigSave?: boolean;
+    sentryData?: {
+        dsn: string;
+        appIdentifier: string;
+    };
+}
+export declare const MainPage: FC<MainPageProps>;
+export {};