@crowdin/app-project-module 0.20.11 → 0.22.0

package/README.md

@@ -340,6 +340,42 @@ configuration.projectIntegration.oauthLogin = {
 }
 ```
 
+In addition you can specify extra fields on login screen that you can use to dynamically build authorization url.
+
+```javascript
+configuration.projectIntegration.oauthLogin.loginFields = [
+    {
+        key: 'region',
+        label: 'Region',
+        type: 'select',
+        defaultValue: 'NA',
+        options: [
+            {
+                value: 'NA',
+                label: 'North American'
+            },
+            {
+                value: 'EU',
+                label: 'Europe'
+            },
+            {
+                value: 'AZURE_NA',
+                label: 'Azure North American'
+            }
+        ]
+    }
+];
+
+configuration.projectIntegration.oauthLogin.getAuthorizationUrl = (redirectUrl, loginForm) => {
+    const region = loginForm.region;
+    if (region === 'EU') {
+        return `https://eu-region.com?client_id=<client-id>&redirect_uri=${redirectUrl}`;
+    } else {
+        return `https://default-region.com?client_id=<client-id>&redirect_uri=${redirectUrl}`;
+    }
+};
+```
+
 Please refer to jsdoc for more details.
 
 ## Storage

package/out/handlers/install.js

@@ -13,12 +13,29 @@ const crowdin_apps_functions_1 = require("@crowdin/crowdin-apps-functions");
 const models_1 = require("../models");
 const storage_1 = require("../storage");
 const util_1 = require("../util");
+function fetchToken(config, event) {
+    var _a, _b;
+    return __awaiter(this, void 0, void 0, function* () {
+        if (config.authenticationType === models_1.AuthenticationType.APP) {
+            const token = yield (0, crowdin_apps_functions_1.fetchAppToken)(config.identifier, event.appSecret, config.clientId, config.clientSecret, event.domain || '', event.userId, (_a = config.crowdinUrls) === null || _a === void 0 ? void 0 : _a.accountUrl);
+            return {
+                accessToken: (0, util_1.encryptData)(config, token.accessToken),
+                expiresIn: token.expiresIn,
+                refreshToken: '',
+            };
+        }
+        const token = yield (0, crowdin_apps_functions_1.generateOAuthToken)(config.clientId, config.clientSecret, event.code || '', (_b = config.crowdinUrls) === null || _b === void 0 ? void 0 : _b.accountUrl);
+        return {
+            accessToken: (0, util_1.encryptData)(config, token.accessToken),
+            refreshToken: (0, util_1.encryptData)(config, token.refreshToken),
+            expiresIn: token.expiresIn,
+        };
+    });
+}
 function handle(config) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
         const event = req.body;
-        (0, util_1.log)(`Recieved install request ${JSON.stringify(event, null, 2)}`, config.logger);
-        const token = yield (0, crowdin_apps_functions_1.generateOAuthToken)(config.clientId, config.clientSecret, event.code, (_a = config.crowdinUrls) === null || _a === void 0 ? void 0 : _a.accountUrl);
+        const token = yield fetchToken(config, event);
         const credentials = {
             id: (event.domain || event.organizationId).toString(),
             appSecret: event.appSecret,
@@ -26,8 +43,8 @@ function handle(config) {
             userId: event.userId,
             organizationId: event.organizationId,
             baseUrl: event.baseUrl,
-            accessToken: (0, util_1.encryptData)(config, token.accessToken),
-            refreshToken: (0, util_1.encryptData)(config, token.refreshToken),
+            accessToken: token.accessToken,
+            refreshToken: token.refreshToken,
             expire: (new Date().getTime() / 1000 + token.expiresIn).toString(),
             type: event.domain ? models_1.AccountType.ENTERPRISE : models_1.AccountType.NORMAL,
         };

package/out/handlers/main.js

@@ -12,20 +12,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("../util");
 const connection_1 = require("../util/connection");
 const defaults_1 = require("../util/defaults");
-function constructOauthUrl(config, integration) {
-    var _a, _b, _c;
-    const oauth = integration.oauthLogin;
-    let url = (oauth === null || oauth === void 0 ? void 0 : oauth.authorizationUrl) || '';
-    url += `?${((_a = oauth === null || oauth === void 0 ? void 0 : oauth.fieldsMapping) === null || _a === void 0 ? void 0 : _a.clientId) || 'client_id'}=${oauth === null || oauth === void 0 ? void 0 : oauth.clientId}`;
-    url += `&${((_b = oauth === null || oauth === void 0 ? void 0 : oauth.fieldsMapping) === null || _b === void 0 ? void 0 : _b.redirectUri) || 'redirect_uri'}=${config.baseUrl}${(0, defaults_1.getOauthRoute)(integration)}`;
-    if (oauth === null || oauth === void 0 ? void 0 : oauth.scope) {
-        url += `&${((_c = oauth === null || oauth === void 0 ? void 0 : oauth.fieldsMapping) === null || _c === void 0 ? void 0 : _c.scope) || 'scope'}=${oauth === null || oauth === void 0 ? void 0 : oauth.scope}`;
-    }
-    if (oauth === null || oauth === void 0 ? void 0 : oauth.extraAutorizationUrlParameters) {
-        Object.entries(oauth === null || oauth === void 0 ? void 0 : oauth.extraAutorizationUrlParameters).forEach(([key, value]) => (url += `&${key}=${value}`));
-    }
-    return url;
-}
 function handle(config, integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
         var _a;
@@ -42,8 +28,11 @@ function handle(config, integration) {
             view = 'login';
             options.loginFields = (_a = integration.loginForm) === null || _a === void 0 ? void 0 : _a.fields;
             if (integration.oauthLogin) {
-                options.oauthUrl = constructOauthUrl(config, integration);
-                (0, util_1.log)(`Adding oauth url ${options.oauthUrl}`, config.logger);
+                options.loginFields = integration.oauthLogin.loginFields || [];
+                options.oauthUrl = integration.oauthLogin.authorizationUrl
+                    ? (0, defaults_1.constructOauthUrl)(config, integration)
+                    : undefined;
+                options.oauthLogin = true;
             }
         }
         else if (integration.getConfiguration) {

package/out/handlers/manifest.js

@@ -113,7 +113,7 @@ function handle(config) {
             logo: '/logo.png',
             baseUrl: config.baseUrl,
             authentication: {
-                type: 'authorization_code',
+                type: config.authenticationType || models_1.AuthenticationType.CODE,
                 clientId: config.clientId,
             },
             events,

package/out/handlers/oauth-login.js

@@ -44,7 +44,7 @@ function handle(config, integration) {
                     headers: { Accept: 'application/json' },
                 })).data;
             }
-            const oauthCredentials = {};
+            const oauthCredentials = { originalUrl: req.originalUrl };
             oauthCredentials.accessToken = credentials[((_h = oauthLogin === null || oauthLogin === void 0 ? void 0 : oauthLogin.fieldsMapping) === null || _h === void 0 ? void 0 : _h.accessToken) || 'access_token'];
             if (oauthLogin === null || oauthLogin === void 0 ? void 0 : oauthLogin.refresh) {
                 oauthCredentials.refreshToken = credentials[((_j = oauthLogin === null || oauthLogin === void 0 ? void 0 : oauthLogin.fieldsMapping) === null || _j === void 0 ? void 0 : _j.refreshToken) || 'refresh_token'];

package/out/handlers/oauth-url.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="qs" />
+import { Response } from 'express';
+import { Config, IntegrationLogic } from '../models';
+export default function handle(config: Config, integration: IntegrationLogic): (req: import("express").Request<import("express-serve-static-core").ParamsDictionary, any, any, import("qs").ParsedQs, Record<string, any>>, res: Response<any, Record<string, any>>, next: Function) => void;

package/out/handlers/oauth-url.js

@@ -0,0 +1,30 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const util_1 = require("../util");
+const defaults_1 = require("../util/defaults");
+function handle(config, integration) {
+    return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
+        (0, util_1.log)('Recieved OAuth login url request', config.logger);
+        const { oauthLogin } = integration;
+        if (!oauthLogin) {
+            (0, util_1.log)('OAuth login url request is not supported', config.logger);
+            res.status(400).end();
+            return;
+        }
+        const { loginForm } = req.body;
+        const url = oauthLogin.getAuthorizationUrl
+            ? oauthLogin.getAuthorizationUrl(`${config.baseUrl}${(0, defaults_1.getOauthRoute)(integration)}`, loginForm)
+            : (0, defaults_1.constructOauthUrl)(config, integration);
+        res.send({ url });
+    }), config.onError);
+}
+exports.default = handle;

package/out/index.js

@@ -51,6 +51,7 @@ const integration_update_1 = __importDefault(require("./handlers/integration-upd
 const main_1 = __importDefault(require("./handlers/main"));
 const manifest_1 = __importDefault(require("./handlers/manifest"));
 const oauth_login_1 = __importDefault(require("./handlers/oauth-login"));
+const oauth_url_1 = __importDefault(require("./handlers/oauth-url"));
 const settings_save_1 = __importDefault(require("./handlers/settings-save"));
 const subscription_info_1 = __importDefault(require("./handlers/subscription-info"));
 const subscription_paid_1 = __importDefault(require("./handlers/subscription-paid"));
@@ -117,6 +118,7 @@ function addCrowdinEndpoints(app, config) {
         app.post('/api/sync-settings', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, sync_settings_save_1.default)(config));
         if (integrationLogic.oauthLogin) {
             app.get((0, defaults_1.getOauthRoute)(integrationLogic), (0, oauth_login_1.default)(config, integrationLogic));
+            app.post('/api/oauth-url', json_response_1.default, (0, crowdin_client_1.default)(config, false, false), (0, oauth_url_1.default)(config, integrationLogic));
         }
         if (integrationLogic.cronJobs) {
             integrationLogic.cronJobs.forEach(job => {

package/out/models/index.d.ts

@@ -4,6 +4,10 @@ import { Request } from 'express';
 import { MySQLStorageConfig } from '../storage/mysql';
 import { PostgreStorageConfig } from '../storage/postgre';
 export interface Config extends ImagePath {
+    /**
+     * Authentication Crowdin App type: "authorization_code", "crowdin_app". Default: "authorization_code"
+     */
+    authenticationType?: AuthenticationType;
     /**
      * client id that we received when registering the app
      */
@@ -116,6 +120,10 @@ export interface Config extends ImagePath {
      */
     pricing?: Pricing;
 }
+export declare enum AuthenticationType {
+    CODE = "authorization_code",
+    APP = "crowdin_app"
+}
 export interface CrowdinUrls {
     apiUrl?: string;
     accountUrl?: string;
@@ -238,10 +246,18 @@ export interface LoginForm {
     fields: FormField[];
 }
 export interface OAuthLogin {
+    /**
+     * Extra field for login form
+     */
+    loginFields?: FormField[];
     /**
      * Authorization url (e.g. https://github.com/login/oauth/authorize or https://accounts.google.com/o/oauth2/v2/auth)
      */
-    authorizationUrl: string;
+    authorizationUrl?: string;
+    /**
+     * Authorization url getter
+     */
+    getAuthorizationUrl?: (redirectUrl: string, loginForm?: any) => string;
     /**
      * Access token url (e.g. https://github.com/login/oauth/access_token)
      */

package/out/models/index.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorPanelsMode = exports.ProcessFileJobType = exports.SubscriptionInfoType = exports.AccountType = exports.Scope = void 0;
+exports.EditorPanelsMode = exports.ProcessFileJobType = exports.SubscriptionInfoType = exports.AccountType = exports.Scope = exports.AuthenticationType = void 0;
+var AuthenticationType;
+(function (AuthenticationType) {
+    AuthenticationType["CODE"] = "authorization_code";
+    AuthenticationType["APP"] = "crowdin_app";
+})(AuthenticationType = exports.AuthenticationType || (exports.AuthenticationType = {}));
 var Scope;
 (function (Scope) {
     Scope["ALL_SCOPES"] = "all";

package/out/storage/mysql.js

@@ -227,13 +227,13 @@ class MySQLStorage {
     saveMetadata(id, metadata) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.dbPromise;
-            yield this.executeQuery(connection => connection.execute('INSERT INTO app_metadata(id, data) VALUES (?, ?)', [id, metadata]));
+            yield this.executeQuery(connection => connection.execute('INSERT INTO app_metadata(id, data) VALUES (?, ?)', [id, JSON.stringify(metadata)]));
         });
     }
     updateMetadata(id, metadata) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.dbPromise;
-            yield this.executeQuery(connection => connection.execute('UPDATE app_metadata SET data = ? WHERE id = ?', [id, metadata]));
+            yield this.executeQuery(connection => connection.execute('UPDATE app_metadata SET data = ? WHERE id = ?', [id, JSON.stringify(metadata)]));
         });
     }
     getMetadata(id) {

package/out/storage/postgre.js

@@ -223,13 +223,13 @@ class PostgreStorage {
     saveMetadata(id, metadata) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.dbPromise;
-            yield this.executeQuery(client => client.query('INSERT INTO app_metadata(id, data) VALUES ($1, $2)', [id, metadata]));
+            yield this.executeQuery(client => client.query('INSERT INTO app_metadata(id, data) VALUES ($1, $2)', [id, JSON.stringify(metadata)]));
         });
     }
     updateMetadata(id, metadata) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.dbPromise;
-            yield this.executeQuery(client => client.query('UPDATE app_metadata SET data = $1 WHERE id = $2', [id, metadata]));
+            yield this.executeQuery(client => client.query('UPDATE app_metadata SET data = $1 WHERE id = $2', [id, JSON.stringify(metadata)]));
         });
     }
     getMetadata(id) {

package/out/util/connection.js

@@ -1,23 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -33,13 +14,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkSubscription = exports.isAppFree = exports.clearCache = exports.prepareIntegrationCredentials = exports.prepareCrowdinClient = void 0;
 const crowdin_api_client_1 = __importDefault(require("@crowdin/crowdin-api-client"));
-const crowdinAppFunctions = __importStar(require("@crowdin/crowdin-apps-functions"));
+const crowdin_apps_functions_1 = require("@crowdin/crowdin-apps-functions");
 const axios_1 = __importDefault(require("axios"));
 const _1 = require(".");
 const models_1 = require("../models");
 const storage_1 = require("../storage");
+function refreshToken(config, credentials) {
+    var _a, _b;
+    return __awaiter(this, void 0, void 0, function* () {
+        if (config.authenticationType === models_1.AuthenticationType.APP) {
+            const token = yield (0, crowdin_apps_functions_1.fetchAppToken)(config.identifier, credentials.appSecret, config.clientId, config.clientSecret, credentials.domain || '', credentials.userId, (_a = config.crowdinUrls) === null || _a === void 0 ? void 0 : _a.accountUrl);
+            return {
+                accessToken: (0, _1.encryptData)(config, token.accessToken),
+                expiresIn: token.expiresIn,
+                refreshToken: '',
+            };
+        }
+        const token = yield (0, crowdin_apps_functions_1.refreshOAuthToken)(config.clientId, config.clientSecret, (0, _1.decryptData)(config, credentials.refreshToken), (_b = config.crowdinUrls) === null || _b === void 0 ? void 0 : _b.accountUrl);
+        return {
+            accessToken: (0, _1.encryptData)(config, token.accessToken),
+            refreshToken: (0, _1.encryptData)(config, token.refreshToken),
+            expiresIn: token.expiresIn,
+        };
+    });
+}
 function prepareCrowdinClient(config, credentials) {
-    var _a, _b, _c;
+    var _a, _b;
     return __awaiter(this, void 0, void 0, function* () {
         const isExpired = +credentials.expire < +new Date().getTime() / 1000;
         const organization = credentials.type === models_1.AccountType.ENTERPRISE ? credentials.id : undefined;
@@ -51,7 +51,7 @@ function prepareCrowdinClient(config, credentials) {
             };
         }
         (0, _1.log)('Crowdin credentials have expired. Requesting a new credentials', config.logger);
-        const newCredentials = yield crowdinAppFunctions.refreshOAuthToken(config.clientId, config.clientSecret, (0, _1.decryptData)(config, credentials.refreshToken), (_b = config.crowdinUrls) === null || _b === void 0 ? void 0 : _b.accountUrl);
+        const newCredentials = yield refreshToken(config, credentials);
         (0, _1.log)('Saving updated crowdin credentials in the database', config.logger);
         yield (0, storage_1.getStorage)().updateCrowdinCredentials({
             id: credentials.id,
@@ -60,18 +60,15 @@ function prepareCrowdinClient(config, credentials) {
             userId: credentials.userId,
             organizationId: credentials.organizationId,
             baseUrl: credentials.baseUrl,
-            refreshToken: (0, _1.encryptData)(config, newCredentials.refreshToken),
-            accessToken: (0, _1.encryptData)(config, newCredentials.accessToken),
+            refreshToken: newCredentials.refreshToken,
+            accessToken: newCredentials.accessToken,
             expire: (new Date().getTime() / 1000 + newCredentials.expiresIn).toString(),
             type: credentials.type,
         });
+        const token = (0, _1.decryptData)(config, credentials.accessToken);
         return {
-            client: new crowdin_api_client_1.default({
-                token: newCredentials.accessToken,
-                organization,
-                baseUrl: (_c = config.crowdinUrls) === null || _c === void 0 ? void 0 : _c.apiUrl,
-            }),
-            token: newCredentials.accessToken,
+            client: new crowdin_api_client_1.default({ token, organization, baseUrl: (_b = config.crowdinUrls) === null || _b === void 0 ? void 0 : _b.apiUrl }),
+            token: token,
         };
     });
 }
@@ -170,7 +167,7 @@ function checkSubscription(config, token, organization, accountType) {
             }
         }
         try {
-            const subscription = yield crowdinAppFunctions.getSubscription({
+            const subscription = yield (0, crowdin_apps_functions_1.getSubscription)({
                 appIdentifier,
                 organization: accountType === models_1.AccountType.ENTERPRISE ? organization : undefined,
                 token,
@@ -183,7 +180,7 @@ function checkSubscription(config, token, organization, accountType) {
             return { expired, daysLeft, type: models_1.SubscriptionInfoType.SUBSCRIPTION };
         }
         catch (e) {
-            if (e instanceof crowdinAppFunctions.PaymentRequiredError) {
+            if (e instanceof crowdin_apps_functions_1.PaymentRequiredError) {
                 const { initializedAt, subscribeLink } = e;
                 (0, _1.log)(`Recieved 402 payment error. initializedAt ${initializedAt}`, config.logger);
                 //default 2 weeks

package/out/util/defaults.d.ts

@@ -3,3 +3,4 @@ import { Config, IntegrationLogic } from '../models';
 export declare function getRootFolder(config: Config, integration: IntegrationLogic, client: Crowdin, projectId: number): Promise<SourceFilesModel.Directory | undefined>;
 export declare function getOauthRoute(integration: IntegrationLogic): string;
 export declare function applyDefaults(config: Config, integration: IntegrationLogic): void;
+export declare function constructOauthUrl(config: Config, integration: IntegrationLogic): string;

package/out/util/defaults.js

@@ -28,7 +28,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyDefaults = exports.getOauthRoute = exports.getRootFolder = void 0;
+exports.constructOauthUrl = exports.applyDefaults = exports.getOauthRoute = exports.getRootFolder = void 0;
 const crowdinAppFunctions = __importStar(require("@crowdin/crowdin-apps-functions"));
 function getRootFolder(config, integration, client, projectId) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -151,3 +151,18 @@ function applyDefaults(config, integration) {
     }
 }
 exports.applyDefaults = applyDefaults;
+function constructOauthUrl(config, integration) {
+    var _a, _b, _c;
+    const oauth = integration.oauthLogin;
+    let url = (oauth === null || oauth === void 0 ? void 0 : oauth.authorizationUrl) || '';
+    url += `?${((_a = oauth === null || oauth === void 0 ? void 0 : oauth.fieldsMapping) === null || _a === void 0 ? void 0 : _a.clientId) || 'client_id'}=${oauth === null || oauth === void 0 ? void 0 : oauth.clientId}`;
+    url += `&${((_b = oauth === null || oauth === void 0 ? void 0 : oauth.fieldsMapping) === null || _b === void 0 ? void 0 : _b.redirectUri) || 'redirect_uri'}=${config.baseUrl}${getOauthRoute(integration)}`;
+    if (oauth === null || oauth === void 0 ? void 0 : oauth.scope) {
+        url += `&${((_c = oauth === null || oauth === void 0 ? void 0 : oauth.fieldsMapping) === null || _c === void 0 ? void 0 : _c.scope) || 'scope'}=${oauth === null || oauth === void 0 ? void 0 : oauth.scope}`;
+    }
+    if (oauth === null || oauth === void 0 ? void 0 : oauth.extraAutorizationUrlParameters) {
+        Object.entries(oauth === null || oauth === void 0 ? void 0 : oauth.extraAutorizationUrlParameters).forEach(([key, value]) => (url += `&${key}=${value}`));
+    }
+    return url;
+}
+exports.constructOauthUrl = constructOauthUrl;

package/out/views/login.handlebars

@@ -8,70 +8,67 @@
             <crowdin-card is-shadowed is-padding-lg class="login">
                 <img alt='{{ name }} logo' src='logo.png' />
                 <crowdin-h4 id="integration-name">{{ name }}</crowdin-h4>
-                {{#if oauthUrl}}
-                {{else}}
-                    <div class="inputs">
-                        {{#each loginFields}}
-                            {{#ifeq type "checkbox"}}
-                                <crowdin-checkbox
+                <div class="inputs">
+                    {{#each loginFields}}
+                        {{#ifeq type "checkbox"}}
+                            <crowdin-checkbox
+                                id="{{key}}"
+                                label="{{label}}"
+                                value="false"
+                                use-switch
+                                {{#if helpText}}
+                                    help-text="{{helpText}}"
+                                {{/if}}
+                                {{#if helpTextHtml}}
+                                    help-text-html="{{helpTextHtml}}"
+                                {{/if}}
+                                {{#ifeq defaultValue true}}
+                                    checked="{{defaultValue}}"
+                                {{/ifeq}}
+                            >
+                            </crowdin-checkbox>
+                        {{else}}
+                            {{#ifeq type "select"}}
+                                <crowdin-select
+                                    {{#if isMulti}}
+                                        is-multi
+                                        close-on-select="false"
+                                    {{/if}}
                                     id="{{key}}"
                                     label="{{label}}"
-                                    value="false"
-                                    use-switch
                                     {{#if helpText}}
                                         help-text="{{helpText}}"
                                     {{/if}}
                                     {{#if helpTextHtml}}
                                         help-text-html="{{helpTextHtml}}"
                                     {{/if}}
-                                    {{#ifeq defaultValue true}}
-                                        checked="{{defaultValue}}"
-                                    {{/ifeq}}
                                 >
-                                </crowdin-checkbox>
+                                    {{#each options}}
+                                        <option {{#ifeq ../defaultValue value}} selected {{/ifeq}} value="{{value}}">{{label}}</option>
+                                    {{/each}}
+                                </crowdin-select>
                             {{else}}
-                                {{#ifeq type "select"}}
-                                    <crowdin-select
-                                        {{#if isMulti}}
-                                            is-multi
-                                            close-on-select="false"
-                                        {{/if}}
-                                        id="{{key}}"
-                                        label="{{label}}"
-                                        {{#if helpText}}
-                                            help-text="{{helpText}}"
-                                        {{/if}}
-                                        {{#if helpTextHtml}}
-                                            help-text-html="{{helpTextHtml}}"
-                                        {{/if}}
-                                    >
-                                        {{#each options}}
-                                            <option {{#ifeq ../defaultValue value}} selected {{/ifeq}} value="{{value}}">{{label}}</option>
-                                        {{/each}}
-                                    </crowdin-select>
-                                {{else}}
-                                    <crowdin-input
-                                        id="{{key}}"
-                                        label="{{label}}"
-                                        {{#if helpText}}
-                                            help-text="{{helpText}}"
-                                        {{/if}}
-                                        {{#if helpTextHtml}}
-                                            help-text-html="{{helpTextHtml}}"
-                                        {{/if}}
-                                        {{#if type}}
-                                            type="{{type}}"
-                                        {{/if}}
-                                        value="{{#if defaultValue}}{{defaultValue}}{{/if}}">
-                                    </crowdin-input>
-                                    {{/ifeq}}
+                                <crowdin-input
+                                    id="{{key}}"
+                                    label="{{label}}"
+                                    {{#if helpText}}
+                                        help-text="{{helpText}}"
+                                    {{/if}}
+                                    {{#if helpTextHtml}}
+                                        help-text-html="{{helpTextHtml}}"
+                                    {{/if}}
+                                    {{#if type}}
+                                        type="{{type}}"
+                                    {{/if}}
+                                    value="{{#if defaultValue}}{{defaultValue}}{{/if}}">
+                                </crowdin-input>
                                 {{/ifeq}}
+                            {{/ifeq}}
                         {{/each}}
                     </div>
-                {{/if}}
                 <crowdin-button
                     outlined icon-after="arrow_forward"
-                    {{#if oauthUrl}}
+                    {{#if oauthLogin}}
                     onclick="oauthLogin()"
                     {{else}}
                     onclick="integrationLogin()"
@@ -88,7 +85,30 @@
     const loginButton = document.querySelector('crowdin-button');
 
     function oauthLogin() {
+        {{#if oauthUrl}}
         const url = '{{{ oauthUrl }}}';
+        {{else}}
+        const url = undefined;
+        {{/if}}
+        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));
+    }
+
+    function openOAuthPopup(url) {
         const oauthWindow = window.open(url, '{{ name }}', 'location=0,status=0,width=800,height=400');
         postPromises['oauth_popup'] = {
             resolve: (data) => {
@@ -107,15 +127,7 @@
     }
 
     function integrationLogin(oauthCredentials) {
-        const credentials = oauthCredentials || {
-            {{#each loginFields}}
-                {{#ifeq type "checkbox"}}
-                    '{{key}}': !!document.querySelector('#{{key}}').checked,
-                {{else}}
-                    '{{key}}': document.querySelector('#{{key}}').getAttribute('value'),
-                {{/ifeq}}
-            {{/each}}
-        };
+        const credentials = oauthCredentials || getLoginForm();
         loginButton.setAttribute('disabled', true);
         loginButton.setAttribute('is-loading', true);
         checkOrigin()
@@ -134,6 +146,18 @@
                 loginButton.setAttribute('is-loading', false);
             });
     }
+
+    function getLoginForm() {
+        return {
+            {{#each loginFields}}
+                {{#ifeq type "checkbox"}}
+                    '{{key}}': !!document.querySelector('#{{key}}').checked,
+                {{else}}
+                    '{{key}}': document.querySelector('#{{key}}').getAttribute('value'),
+                {{/ifeq}}
+            {{/each}}
+        };
+    }
 </script>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdin/app-project-module",
-  "version": "0.20.11",
+  "version": "0.22.0",
   "description": "Module that generates for you all common endpoints for serving standalone Crowdin App",
   "main": "out/index.js",
   "types": "out/index.d.ts",
@@ -12,7 +12,7 @@
     "test": "echo \"test not implemented\""
   },
   "dependencies": {
-    "@crowdin/crowdin-apps-functions": "0.1.6",
+    "@crowdin/crowdin-apps-functions": "~0.2.1",
     "@types/pg": "^8.6.5",
     "crypto-js": "^4.0.0",
     "express": "4.17.1",