@crowdin/app-project-module 2.1.0 → 2.3.0

package/out/static/ui/login.bundle.js

@@ -518,9 +518,368 @@
 
   var clientExports = requireClient();
 
+  /// <reference path="../types.d.ts" />
+  const postPromises = {};
+  let isInitialized = false;
+  let origin = null;
+  let clientId = null;
+  let restParams = '';
+  function parseJson(value) {
+      try {
+          return JSON.parse(value);
+      }
+      catch {
+          return undefined;
+      }
+  }
+  function handleMessage(event) {
+      if (event.origin !== window.location.origin || typeof event.data !== 'string') {
+          return;
+      }
+      const eventData = parseJson(event.data);
+      if (!(eventData === null || eventData === void 0 ? void 0 : eventData.uid)) {
+          return;
+      }
+      const postPromise = postPromises[eventData.uid];
+      if (postPromise) {
+          delete postPromises[eventData.uid];
+          if (postPromise.timer) {
+              clearTimeout(postPromise.timer);
+          }
+          postPromise.resolve(eventData.data);
+      }
+  }
+  function initializeCrowdinIframeContext() {
+      if (isInitialized) {
+          return;
+      }
+      const urlParams = new URLSearchParams(window.location.search);
+      origin = urlParams.get('origin');
+      clientId = urlParams.get('client_id');
+      restParams = window.location.search;
+      JSON.parse(window.name);
+      window.addEventListener('message', handleMessage);
+      isInitialized = true;
+  }
+  function ensureInitialized() {
+      if (!isInitialized) {
+          initializeCrowdinIframeContext();
+      }
+  }
+  function getPostPromises() {
+      ensureInitialized();
+      return postPromises;
+  }
+  function showToast(message) {
+      if (message) {
+          const toasts = document.querySelector('crowdin-toasts');
+          if (toasts && toasts.pushToasts) {
+              toasts.pushToasts([message]);
+          }
+      }
+  }
+  function reloadLocation() {
+      ensureInitialized();
+      window.location.href =
+          window.location.protocol + '//' + window.location.host + window.location.pathname + restParams;
+  }
+  function catchRejection(e, message) {
+      var _a;
+      // session expired
+      if (e.code && e.code === 401) {
+          reloadLocation();
+          return;
+      }
+      // payment required
+      if (e.code && e.code === 402 && ((_a = window.app) === null || _a === void 0 ? void 0 : _a.subscriptionModal.current)) {
+          if (window.app.subscriptionLink) {
+              window.app.subscriptionLink.current = e.message || message;
+          }
+          window.app.openModal(window.app.subscriptionModal.current);
+          return;
+      }
+      showToast(e.message || message);
+  }
+  function checkResponse(response) {
+      return new Promise((resolve, reject) => {
+          if (response.status === 204) {
+              return resolve(undefined);
+          }
+          response
+              .json()
+              .then((res) => {
+              if (![200, 201, 202, 304].includes(response.status)) {
+                  reject(res);
+              }
+              else {
+                  if (res.message) {
+                      setTimeout(() => showToast(res.message), 100);
+                  }
+                  resolve(res);
+              }
+          })
+              .catch((e) => {
+              reject(e);
+          });
+      });
+  }
+  function checkOrigin() {
+      ensureInitialized();
+      return new Promise((resolve) => {
+          AP.getJwtToken((jwtToken) => {
+              restParams = `?origin=${origin}&client_id=${clientId}&jwtToken=${jwtToken}`;
+              resolve(restParams);
+          });
+      });
+  }
+
+  function readPageProps() {
+      const element = document.getElementById('__PAGE_PROPS__');
+      return JSON.parse((element === null || element === void 0 ? void 0 : element.textContent) || '{}');
+  }
+
   var reactExports = requireReact();
 
-  const renderField = (field, readFileData, uploadFiles) => {
+  const dependencyShowClassName = 'dependency-show';
+  const events = ['input', 'change'];
+  function useFieldDependencies(refreshKey) {
+      const cleanupRef = reactExports.useRef(() => undefined);
+      const refreshDependencies = reactExports.useCallback(() => {
+          cleanupRef.current();
+          cleanupRef.current = initializeFieldDependencies();
+      }, []);
+      reactExports.useEffect(() => {
+          refreshDependencies();
+          return () => {
+              cleanupRef.current();
+              cleanupRef.current = () => undefined;
+          };
+      }, [refreshDependencies, refreshKey]);
+      return refreshDependencies;
+  }
+  function initializeFieldDependencies(root = document) {
+      const cleanupCallbacks = [];
+      const fields = Array.from(root.querySelectorAll('[data-dependency]'));
+      fields.forEach((field) => {
+          const dependency = field.dataset.dependency;
+          if (!dependency) {
+              return;
+          }
+          try {
+              const conditions = JSON.parse(dependency);
+              applyDependencyState(field, conditions);
+              cleanupCallbacks.push(...bindDependencyListeners(field, conditions));
+          }
+          catch (e) {
+              console.error('[Dependencies] Error parsing conditions for field:', field, e);
+          }
+      });
+      return () => {
+          cleanupCallbacks.forEach((cleanup) => cleanup());
+      };
+  }
+  function bindDependencyListeners(field, conditions) {
+      const cleanupCallbacks = [];
+      conditions.forEach((rules) => {
+          Object.keys(rules).forEach((selector) => {
+              const element = document.querySelector(selector);
+              if (!element) {
+                  return;
+              }
+              events.forEach((event) => {
+                  const listener = () => applyDependencyState(field, conditions);
+                  element.addEventListener(event, listener);
+                  cleanupCallbacks.push(() => element.removeEventListener(event, listener));
+              });
+          });
+      });
+      return cleanupCallbacks;
+  }
+  function applyDependencyState(field, conditions) {
+      if (checkConditions(conditions)) {
+          field.classList.add(dependencyShowClassName);
+      }
+      else {
+          field.classList.remove(dependencyShowClassName);
+      }
+  }
+  function checkConditions(conditions) {
+      return conditions.every((conditionObj) => {
+          const selectors = Object.keys(conditionObj);
+          return selectors.every((selector) => evaluateDependencyRule(selector, conditionObj[selector]));
+      });
+  }
+  function evaluateDependencyRule(selector, condition) {
+      const type = condition.type;
+      const currentValue = getValue(selector);
+      const checkValue = typeof condition.value === 'undefined' ? false : condition.value;
+      let minValue = typeof condition.min === 'undefined' ? false : Number.parseInt(String(condition.min), 10);
+      let maxValue = typeof condition.max === 'undefined' ? false : Number.parseInt(String(condition.max), 10);
+      const allowEmpty = typeof condition.empty === 'undefined' ? false : condition.empty;
+      const isEmpty = !allowEmpty && currentValue.length < 1;
+      const likeSelector = typeof condition.like === 'undefined' ? false : condition.like;
+      const likeSelectorValue = getValue(likeSelector);
+      const regExpPattern = typeof condition.pattern === 'undefined' ? false : condition.pattern;
+      const regExpModifier = typeof condition.modifier === 'undefined' ? 'gi' : condition.modifier;
+      const sign = typeof condition.sign === 'undefined' ? false : condition.sign;
+      const strict = typeof condition.strict === 'undefined' ? false : condition.strict;
+      const emptyTypes = ['empty', 'blank'];
+      const notEmptyTypes = ['!empty', 'notEmpty', 'not-empty', 'notempty'];
+      const equalTypes = ['equal', '=', '==', '==='];
+      const notEqualTypes = ['!equal', '!=', '!==', '!===', 'notEqual', 'not-equal', 'notequal'];
+      const regularExpressionTypes = ['regexp', 'exp', 'expression', 'match'];
+      if (type && emptyTypes.includes(type)) {
+          return currentValue.length < 1;
+      }
+      if (type && notEmptyTypes.includes(type)) {
+          return currentValue.length > 0;
+      }
+      if (type && equalTypes.includes(type)) {
+          if (isEmpty) {
+              return false;
+          }
+          if (likeSelector) {
+              return strict
+                  ? likeSelectorValue.every((value) => currentValue.includes(value))
+                  : likeSelectorValue.some((value) => currentValue.includes(value));
+          }
+          if (strict) {
+              if (checkValue && Array.isArray(checkValue)) {
+                  return checkValue.every((value) => currentValue.includes(value));
+              }
+              if (checkValue && !Array.isArray(checkValue)) {
+                  return currentValue.includes(checkValue);
+              }
+          }
+          else {
+              if (checkValue && Array.isArray(checkValue)) {
+                  return checkValue.some((value) => currentValue.includes(value));
+              }
+              if (checkValue && !Array.isArray(checkValue)) {
+                  return currentValue.includes(checkValue);
+              }
+          }
+      }
+      if (type && notEqualTypes.includes(type)) {
+          if (isEmpty) {
+              return false;
+          }
+          if (likeSelector) {
+              return strict
+                  ? likeSelectorValue.every((value) => !currentValue.includes(value))
+                  : likeSelectorValue.some((value) => !currentValue.includes(value));
+          }
+          if (strict) {
+              if (checkValue && Array.isArray(checkValue)) {
+                  return checkValue.every((value) => !currentValue.includes(value));
+              }
+              if (checkValue && !Array.isArray(checkValue)) {
+                  return !currentValue.includes(checkValue);
+              }
+          }
+          else {
+              if (checkValue && Array.isArray(checkValue)) {
+                  return checkValue.some((value) => !currentValue.includes(value));
+              }
+              if (checkValue && !Array.isArray(checkValue)) {
+                  return !currentValue.includes(checkValue);
+              }
+          }
+      }
+      if (type && regularExpressionTypes.includes(type) && regExpPattern) {
+          if (isEmpty) {
+              return false;
+          }
+          const exp = new RegExp(regExpPattern, regExpModifier);
+          return currentValue.every((value) => exp.test(String(value)));
+      }
+      if (type === 'length') {
+          if (isEmpty) {
+              return false;
+          }
+          if (checkValue && Array.isArray(checkValue)) {
+              minValue = Number.parseInt(String(checkValue[0]), 10);
+              maxValue = typeof checkValue[1] === 'undefined' ? false : Number.parseInt(String(checkValue[1]), 10);
+          }
+          if (checkValue && !Array.isArray(checkValue)) {
+              minValue = Number.parseInt(String(checkValue), 10);
+              maxValue = false;
+          }
+          const minBoundary = minValue === false ? 0 : minValue;
+          const maxBoundary = maxValue === false ? 0 : maxValue;
+          return currentValue.every((value) => {
+              const valueLength = String(value).length;
+              if (!maxValue) {
+                  return valueLength >= minBoundary;
+              }
+              if (!minValue) {
+                  return valueLength <= maxBoundary;
+              }
+              return valueLength >= minBoundary && valueLength <= maxBoundary;
+          });
+      }
+      if (type === 'range') {
+          if (isEmpty) {
+              return false;
+          }
+          if (checkValue && Array.isArray(checkValue)) {
+              minValue = Number.parseInt(String(checkValue[0]), 10);
+              maxValue = typeof checkValue[1] === 'undefined' ? false : Number.parseInt(String(checkValue[1]), 10);
+          }
+          const minBoundary = minValue === false ? 0 : minValue;
+          const maxBoundary = maxValue === false ? 0 : maxValue;
+          return currentValue.every((value) => {
+              const numericValue = Number.parseInt(String(value), 10);
+              if (!maxValue) {
+                  return numericValue > minBoundary;
+              }
+              if (!minValue) {
+                  return numericValue < maxBoundary;
+              }
+              return numericValue > minBoundary && numericValue < maxBoundary;
+          });
+      }
+      if (type === 'compare' && sign && checkValue) {
+          if (isEmpty) {
+              return false;
+          }
+          const numericCheckValue = Number.parseInt(String(checkValue), 10);
+          switch (sign) {
+              case '<':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) < numericCheckValue);
+              case '<=':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) <= numericCheckValue);
+              case '>':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) > numericCheckValue);
+              case '>=':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) >= numericCheckValue);
+              case '=':
+              case '==':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) === numericCheckValue);
+          }
+      }
+      return false;
+  }
+  function getValue(selector) {
+      const values = [];
+      if (selector && document.querySelector(selector)) {
+          const inputType = document.querySelector(selector).tagName.toLowerCase();
+          let currentSelector = selector;
+          if (inputType === 'crowdin-select') {
+              currentSelector = `${selector} option:checked`;
+          }
+          if (inputType === 'crowdin-checkbox') {
+              currentSelector = `${selector}:not(input)`;
+          }
+          document.querySelectorAll(currentSelector).forEach((element) => {
+              const value = element.value || element.checked;
+              values.push(value);
+          });
+      }
+      return values.filter((value) => value !== '');
+  }
+
+  const renderField = (field, { fileNames, fileValues, readFileData, registerField, registerFileInput, uploadFiles }) => {
       var _a;
       if (!field.key) {
           // Label-only field
@@ -537,31 +896,30 @@
       if (['checkbox', 'select', 'textarea', 'file', 'notice'].includes(field.type || '')) {
           switch (field.type) {
               case 'checkbox':
-                  return (jsxRuntimeExports.jsx("crowdin-checkbox", { ...commonProps, value: "false", "use-switch": true, ...(field.defaultValue === true ? { checked: String(field.defaultValue) } : {}) }));
+                  return (jsxRuntimeExports.jsx("crowdin-checkbox", { ref: registerField(field.key), ...commonProps, value: "false", "use-switch": true, ...(field.defaultValue === true ? { checked: String(field.defaultValue) } : {}) }));
               case 'select':
-                  return (jsxRuntimeExports.jsx("crowdin-select", { ...commonProps, ...(field.isMulti ? { 'is-multi': true, 'close-on-select': 'false' } : {}), ...(field.isSearchable ? { 'is-searchable': true } : {}), children: (_a = field.options) === null || _a === void 0 ? void 0 : _a.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, ...(field.defaultValue === option.value ? { selected: true } : {}), children: option.label }))) }));
+                  return (jsxRuntimeExports.jsx("crowdin-select", { ref: registerField(field.key), ...commonProps, ...(field.isMulti ? { 'is-multi': true, 'close-on-select': 'false' } : {}), ...(field.isSearchable ? { 'is-searchable': true } : {}), children: (_a = field.options) === null || _a === void 0 ? void 0 : _a.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, ...(field.defaultValue === option.value ? { selected: true } : {}), children: option.label }, option.value))) }));
               case 'textarea':
-                  return jsxRuntimeExports.jsx("crowdin-textarea", { ...commonProps, value: field.defaultValue || '' });
+                  return (jsxRuntimeExports.jsx("crowdin-textarea", { ref: registerField(field.key), ...commonProps, value: field.defaultValue || '' }));
               case 'notice':
                   return (jsxRuntimeExports.jsx("crowdin-alert", { ...(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.helpTextHtml || field.helpText || '' } }));
               case 'file':
-                  return (jsxRuntimeExports.jsxs("div", { className: "file-field", children: [field.helpText && jsxRuntimeExports.jsx("div", { className: "help-text", children: field.helpText }), field.helpTextHtml && jsxRuntimeExports.jsx("div", { className: "help-text", children: field.helpTextHtml }), jsxRuntimeExports.jsxs("div", { className: "upload", children: [jsxRuntimeExports.jsx("crowdin-button", { outlined: true, onClick: () => uploadFiles(field.key), children: field.label }), jsxRuntimeExports.jsx("textarea", { hidden: true, id: field.key }), jsxRuntimeExports.jsx("input", { id: `store_${field.key}`, "data-id": field.key, ...(field.accept ? { accept: field.accept } : {}), onChange: (e) => readFileData(e), hidden: true, type: field.type }), jsxRuntimeExports.jsx("div", { className: "uploaded-file", children: jsxRuntimeExports.jsx("i", { children: "No file" }) })] })] }));
+                  return (jsxRuntimeExports.jsxs("div", { className: "text-sm leading-6 font-normal text-[rgba(38,50,56,.87)] antialiased", children: [field.helpText && jsxRuntimeExports.jsx("div", { className: "text-xs text-[rgba(38,50,56,.54)]", children: field.helpText }), field.helpTextHtml && (jsxRuntimeExports.jsx("div", { className: "text-xs text-[rgba(38,50,56,.54)]", children: field.helpTextHtml })), jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [jsxRuntimeExports.jsx("crowdin-button", { outlined: true, onClick: () => uploadFiles(field.key), children: field.label }), jsxRuntimeExports.jsx("textarea", { ref: registerField(field.key), hidden: true, id: field.key, value: fileValues[field.key] || '', readOnly: true }), jsxRuntimeExports.jsx("input", { ref: registerFileInput(field.key), id: `store_${field.key}`, "data-id": field.key, ...(field.accept ? { accept: field.accept } : {}), onChange: (e) => readFileData(e, field.key), hidden: true, type: field.type }), jsxRuntimeExports.jsx("div", { className: "flex items-center italic", children: jsxRuntimeExports.jsx("i", { children: fileNames[field.key] || 'No file' }) })] })] }));
           }
       }
       // Default input field
-      return (jsxRuntimeExports.jsx("crowdin-input", { ...commonProps, ...(field.type ? { type: field.type } : {}), value: field.defaultValue || '' }));
+      return (jsxRuntimeExports.jsx("crowdin-input", { ref: registerField(field.key), ...commonProps, class: "mb-2 block", ...(field.type ? { type: field.type } : {}), value: field.defaultValue || '' }));
   };
   const LoginPage = ({ name, loginFields, oauthLogin, oauthUrl, oauthMode }) => {
       const refreshIntervalId = reactExports.useRef(null);
+      const fieldRefs = reactExports.useRef({});
+      const fileInputRefs = reactExports.useRef({});
+      const [fileNames, setFileNames] = reactExports.useState({});
+      const [fileValues, setFileValues] = reactExports.useState({});
       const [isLoading, setIsLoading] = reactExports.useState(false);
+      useFieldDependencies(loginFields);
       // Cleanup interval on component unmount
       reactExports.useEffect(() => {
-          // Initialize dependencies after component is mounted
-          setTimeout(() => {
-              if (window.initializeDependencies) {
-                  window.initializeDependencies();
-              }
-          }, 100);
           return () => {
               if (refreshIntervalId.current) {
                   clearInterval(refreshIntervalId.current);
@@ -613,7 +971,7 @@
               }), 2000);
               return;
           }
-          postPromises['oauth_popup'] = {
+          getPostPromises()['oauth_popup'] = {
               resolve: (data) => {
                   if (data.error) {
                       showToast(data.error);
@@ -651,49 +1009,81 @@
           return loginFields
               .filter((f) => f.key)
               .reduce((acc, f) => {
-              var _a, _b;
+              var _a;
+              const key = f.key;
+              const field = fieldRefs.current[key];
               if (f.type === 'checkbox') {
-                  const checkbox = document.querySelector(`#${f.key}`);
-                  acc[f.key] = !!checkbox.checked;
+                  acc[key] = !!(field === null || field === void 0 ? void 0 : field.checked);
+              }
+              else if (f.type === 'file') {
+                  acc[key] = fileValues[key] || (field === null || field === void 0 ? void 0 : field.value) || '';
               }
               else {
-                  acc[f.key] =
-                      ((_a = document.querySelector(`#${f.key}`)) === null || _a === void 0 ? void 0 : _a.getAttribute('value')) ||
-                          ((_b = document.querySelector(`#${f.key}`)) === null || _b === void 0 ? void 0 : _b.value);
+                  acc[key] = ((_a = field === null || field === void 0 ? void 0 : field.getAttribute) === null || _a === void 0 ? void 0 : _a.call(field, 'value')) || (field === null || field === void 0 ? void 0 : field.value);
               }
               return acc;
           }, {});
       }
       function uploadFiles(id) {
-          const input = document.querySelector(`#store_${id}`);
-          input.value = '';
-          input.click();
+          const input = fileInputRefs.current[id];
+          if (input) {
+              input.value = '';
+              input.click();
+          }
       }
-      function readFileData(event) {
+      function readFileData(event, identifier) {
           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];
-          if (fileName) {
-              fileName.innerText = file.name;
+          if (!file) {
+              return;
           }
+          setFileNames((currentFileNames) => ({ ...currentFileNames, [identifier]: file.name }));
           reader.onloadstart = () => setIsLoading(true);
           reader.onloadend = () => setIsLoading(false);
           reader.onload = () => {
-              if (input) {
-                  // @ts-ignore
-                  input.value = reader.result;
-              }
+              setFileValues((currentFileValues) => ({
+                  ...currentFileValues,
+                  [identifier]: typeof reader.result === 'string' ? reader.result : '',
+              }));
           };
           reader.readAsText(file);
       }
-      return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "i_w center", children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("crowdin-card", { "is-shadowed": true, "is-padding-lg": true, class: "login", children: [jsxRuntimeExports.jsx("img", { alt: `${name} logo`, src: "logo.png" }), jsxRuntimeExports.jsx("crowdin-h4", { id: "integration-name", children: name }), jsxRuntimeExports.jsx("div", { className: "inputs", children: loginFields.map((field) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderField(field, readFileData, uploadFiles), jsxRuntimeExports.jsx("div", { style: { padding: '8px' }, ...(field.dependencySettings
+      function registerField(key) {
+          return (element) => {
+              if (!key) {
+                  return;
+              }
+              if (element) {
+                  fieldRefs.current[key] = element;
+              }
+              else {
+                  delete fieldRefs.current[key];
+              }
+          };
+      }
+      function registerFileInput(key) {
+          return (element) => {
+              if (!key) {
+                  return;
+              }
+              fileInputRefs.current[key] = element;
+          };
+      }
+      return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "mx-auto flex min-h-[calc(100vh-64px)] max-w-[1420px] items-center justify-around px-6 py-4 text-center", children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("crowdin-card", { "is-shadowed": true, "is-padding-lg": true, class: "mb-2.5 overflow-visible", children: [jsxRuntimeExports.jsx("img", { alt: `${name} logo`, src: "logo.png", className: "mx-auto h-auto max-h-[70px] w-auto max-w-[70px]" }), jsxRuntimeExports.jsx("crowdin-h4", { id: "integration-name", class: "my-2 mb-4", children: name }), jsxRuntimeExports.jsx("div", { className: "mb-6 text-left", children: loginFields.map((field, fieldIndex) => (jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [renderField(field, {
+                                              fileNames,
+                                              fileValues,
+                                              readFileData,
+                                              registerField,
+                                              registerFileInput,
+                                              uploadFiles,
+                                          }), jsxRuntimeExports.jsx("div", { style: { padding: '8px' }, ...(field.dependencySettings
                                                   ? { 'data-dependency': field.dependencySettings }
-                                                  : {}) })] }))) }), jsxRuntimeExports.jsxs("crowdin-button", { id: "login-button", disabled: isLoading, "is-loading": isLoading, outlined: true, "icon-after": "arrow_forward", onClick: oauthLogin ? () => oauthLoginHandler() : () => integrationLogin(), children: ["Log In With ", name] })] }) }) }), jsxRuntimeExports.jsx("crowdin-toasts", {})] }));
+                                                  : {}) })] }, field.key || field.label || field.labelHtml || fieldIndex))) }), jsxRuntimeExports.jsxs("crowdin-button", { id: "login-button", disabled: isLoading, "is-loading": isLoading, outlined: true, "icon-after": "arrow_forward", onClick: oauthLogin ? () => oauthLoginHandler() : () => integrationLogin(), children: ["Log In With ", name] })] }) }) }), jsxRuntimeExports.jsx("crowdin-toasts", {})] }));
   };
 
-  clientExports.createRoot(document.getElementById('root')).render(jsxRuntimeExports.jsx(LoginPage, { ...window.__PAGE_PROPS__ }));
+  initializeCrowdinIframeContext();
+  const props = readPageProps();
+  clientExports.createRoot(document.getElementById('root')).render(jsxRuntimeExports.jsx(LoginPage, { ...props }));
 
 })();
 //# sourceMappingURL=login.bundle.js.map