@steroidsjs/core 2.2.87 → 2.3.0-beta.1

package/src/components/HtmlComponent.ts

@@ -0,0 +1,81 @@
+import _isString from 'lodash-es/isString';
+
+/**
+ * Html Component
+ * Хелпер для работы с БЭМ классами и DOM элементами
+ */
+export default class HtmlComponent {
+    _instances: any;
+    namespace = '';
+
+    constructor(components) {
+        this._instances = {};
+    }
+
+    bem(blockName) {
+        if (!this._instances[blockName]) {
+            this._instances[blockName] = (...names) => this.classNames(...names);
+            this._instances[blockName].block = modifiers => this._applyModifiers(blockName, modifiers);
+            this._instances[blockName].element = (elementName, modifiers) => this._applyModifiers(blockName + '__' + elementName, modifiers);
+        }
+        return this._instances[blockName];
+    }
+
+    classNames(...names) {
+        return Array.prototype.slice
+            .call(names)
+            .filter(v => v)
+            .join(' ');
+    }
+
+    addClass(node, className) {
+        if (node && _isString(node.className)) {
+            const classes = node.className.split(' ');
+            if (classes.indexOf(className) === -1) {
+                classes.push(className);
+                node.className = classes.join(' ');
+            }
+        }
+    }
+
+    removeClass(node, className) {
+        if (node && _isString(node.className)) {
+            const classes = node.className.split(' ');
+            const index = classes.indexOf(className);
+            if (index !== -1) {
+                classes.splice(index, 1);
+                node.className = classes.join(' ');
+            }
+        }
+    }
+
+    closest(element, className) {
+        while ((element = element.parentElement)
+        && !element.classList.contains(className)) {
+        } // eslint-disable-line no-empty
+        return element;
+    }
+
+    _applyModifiers(entity, modifiers) {
+        let result = [];
+        result.push(entity);
+        if (typeof modifiers === 'string') {
+            result.push(entity + (modifiers ? '_' + modifiers : ''));
+        } else if (modifiers) {
+            Object.keys(modifiers).forEach(key => {
+                const value = modifiers[key];
+                if (!value) {
+                    // Skip
+                } else if (value === true) {
+                    result.push(entity + '_' + key);
+                } else {
+                    result.push(entity + '_' + key + '_' + value);
+                }
+            });
+        }
+
+        // Append namespace
+        result = result.map(cl => this.namespace + cl);
+        return result.join(' ');
+    }
+}

package/src/components/HttpComponent.tsx

@@ -0,0 +1,320 @@
+import * as React from 'react';
+import _trimStart from 'lodash-es/trimStart';
+import _trimEnd from 'lodash-es/trimEnd';
+import _isEmpty from 'lodash-es/isEmpty';
+import setCookie from 'set-cookie-parser';
+import axios from 'axios';
+import {setFlashes} from '../actions/notifications';
+
+interface IHttpRequestOptions {
+    lazy?: boolean | number,
+    cancelToken?: any,
+    onTwoFactor?: (providerName: string) => Promise<any>
+}
+
+/**
+ * Http Component
+ * Обертка над Axios для запросов на бекенд. Поддерживает токен авторизации, CSRF и обработку ошибок.
+ */
+export default class HttpComponent {
+    accessTokenKey = 'accessToken';
+
+    apiUrl: string;
+
+    _accessToken: any;
+
+    _axios: any;
+
+    _components: any;
+
+    _csrfToken: any;
+
+    _lazyRequests: any;
+
+    _promises: any;
+
+    constructor(components, config: any = {}) {
+        this._components = components;
+
+        this.apiUrl = config.apiUrl
+            //|| process.env.APP_BACKEND_URL
+            || (!process.env.IS_SSR ? window.location.protocol + '//' + window.location.host : '');
+        this.accessTokenKey = config.accessTokenKey || 'accessToken';
+
+        this._lazyRequests = {};
+        this._axios = null;
+        this._csrfToken = null;
+        this._accessToken = false;
+    }
+
+    async getAxiosConfig() {
+        const config = {
+            withCredentials: true,
+            headers: {
+                // Add XMLHttpRequest header for detect ajax requests
+                'X-Requested-With': 'XMLHttpRequest',
+                // Add Content-Type
+                'Content-Type': 'application/json',
+            } as any,
+        };
+        // Add CSRF header
+        if (!this._csrfToken && !process.env.IS_SSR && process.env.IS_WEB) {
+            const metaElement = document.querySelector('meta[name=csrf-token]');
+            if (metaElement) {
+                this._csrfToken = metaElement.getAttribute('content');
+            }
+        }
+        if (this._csrfToken) {
+            config.headers['X-CSRF-Token'] = this._csrfToken;
+        }
+        // Set access token
+        if (this._accessToken === false) {
+            const clientStorage = this._components.clientStorage;
+            const tokenValue = clientStorage.get(this.accessTokenKey, clientStorage.STORAGE_COOKIE)
+                || clientStorage.get(this.accessTokenKey)
+                || null;
+
+            // client storage method 'get' could be asynchronous
+            this._accessToken = tokenValue instanceof Promise
+                ? await tokenValue
+                : tokenValue;
+
+            if (this._accessToken) {
+                clientStorage.set(
+                    this.accessTokenKey,
+                    this._accessToken,
+                    clientStorage.STORAGE_COOKIE,
+                    180,
+                );
+            }
+        }
+        if (this._accessToken) {
+            config.headers.Authorization = 'Bearer ' + this._accessToken;
+        }
+        return config;
+    }
+
+    /**
+     * @param {string} value
+     */
+    setCsrfToken(value) {
+        this._csrfToken = value;
+        this.resetConfig();
+    }
+
+    removeAccessToken() {
+        this._accessToken = null;
+        this.resetConfig();
+        this._components.clientStorage.remove(
+            this.accessTokenKey,
+            this._components.clientStorage.STORAGE_COOKIE,
+        );
+    }
+
+    /**
+     * @param {string} value
+     */
+    setAccessToken(value) {
+        this._accessToken = value;
+        this.resetConfig();
+        this._components.clientStorage.set(
+            this.accessTokenKey,
+            value,
+            this._components.clientStorage.STORAGE_COOKIE,
+            180,
+        );
+    }
+
+    /**
+     * @returns {string}
+     */
+    async getAccessToken() {
+        if (this._accessToken === false) {
+            this._accessToken = await this._components.clientStorage.get(this.accessTokenKey) || null;
+        }
+        return this._accessToken;
+    }
+
+    resetConfig() {
+        this._axios = null;
+    }
+
+    onLogout() {
+        this.removeAccessToken();
+    }
+
+    async getAxiosInstance() {
+        if (!this._axios) {
+            this._axios = axios.create(await this.getAxiosConfig());
+        }
+        return this._axios;
+    }
+
+    getUrl(method) {
+        if (method === null && !process.env.IS_SSR) {
+            method = window.location.pathname;
+        }
+        if (method.indexOf('://') === -1) {
+            method = `${_trimEnd(this.apiUrl, '/')}/${_trimStart(method, '/')}`;
+        }
+        return method;
+    }
+
+    get(url, params = {}, options: IHttpRequestOptions = {}) {
+        return this._send(
+            url,
+            {
+                method: 'get',
+                params,
+            },
+            options,
+        ).then((response: any) => response.data);
+    }
+
+    post(url, params = {}, options: IHttpRequestOptions = {}) {
+        return this._send(
+            url,
+            {
+                method: 'post',
+                data: params,
+            },
+            options,
+        ).then((response: any) => response.data);
+    }
+
+    delete(url, params = {}, options: IHttpRequestOptions = {}) {
+        return this._send(
+            url,
+            {
+                method: 'delete',
+                data: params,
+            },
+            options,
+        ).then((response: any) => response.data);
+    }
+
+    send(method, url, params = {}, options: IHttpRequestOptions = {}) {
+        method = method.toLowerCase();
+        return this._send(
+            url,
+            {
+                method,
+                [method === 'get' ? 'params' : 'data']: params,
+            },
+            options,
+        );
+    }
+
+    _send(method, config, options: IHttpRequestOptions) {
+        const axiosConfig = {
+            ...config,
+            url: this.getUrl(method),
+        };
+        // Manual send cookies for preload data in ssr
+        if (process.env.IS_SSR && axiosConfig.url.indexOf(this.apiUrl) !== -1) {
+            const {clientStorage} = this._components;
+            axiosConfig.headers = {
+                ...axiosConfig.headers,
+                Cookie: Object
+                    .entries(clientStorage.get(null, clientStorage.STORAGE_COOKIE) || {})
+                    .map(([key, value]) => `${key}=${value}`)
+                    .concat([axiosConfig.headers?.Cookie])
+                    .filter(Boolean)
+                    .join(';'),
+            };
+        }
+        if (options.cancelToken) {
+            axiosConfig.cancelToken = options.cancelToken;
+        }
+        if (options.lazy) {
+            if (this._lazyRequests[method]) {
+                clearTimeout(this._lazyRequests[method]);
+            }
+            return new Promise((resolve, reject) => {
+                const timeout = options.lazy !== true ? options.lazy : 200;
+                if (typeof timeout === 'number') {
+                    this._lazyRequests[method] = setTimeout(() => {
+                        this._sendAxios(axiosConfig, options)
+                            .then(result => resolve(result))
+                            .catch(result => reject(result));
+                    }, timeout);
+                }
+            });
+        }
+        return this._sendAxios(axiosConfig, options);
+    }
+
+    _sendAxios(config, options: IHttpRequestOptions) {
+        return this.getAxiosInstance()
+            .then(instance => instance(config))
+            .then(response => this.afterRequest(response, config, options).then(newResponse => newResponse || response))
+            .catch(error => {
+                console.error('Error, request/response: ', config, String(error)); // eslint-disable-line no-console
+                throw error;
+            });
+    }
+
+    async afterRequest(response, config, options: IHttpRequestOptions) {
+        const {store, clientStorage} = this._components;
+
+        // Manual set cookies for ssr
+        const cookie = response.headers['set-cookie'];
+        if (process.env.IS_SSR && config.url.indexOf(this.apiUrl) !== -1 && !_isEmpty(cookie)) {
+            setCookie.parse(cookie).forEach(({name, value, expires}) => (
+                clientStorage.set(name, value, clientStorage.STORAGE_COOKIE, expires)
+            ));
+        }
+
+        // Flash
+        if (response.data.flashes) {
+            store.dispatch(setFlashes(response.data.flashes));
+        }
+
+        // Ajax redirect
+        if (response.data.redirectUrl && !process.env.IS_SSR) {
+            if (window.location.href === response.data.redirectUrl.split('#')[0]) {
+                window.location.href = response.data.redirectUrl;
+                window.location.reload();
+            } else {
+                window.location.href = response.data.redirectUrl;
+            }
+        }
+
+        // 2fa
+        // {"errors":{"amount":["2FA_REQUIRED:notifier"]}}
+        if (response.data.errors) {
+            const match = JSON.stringify(response.data.errors).match(/2FA_REQUIRED:([a-zA-Z0-9-_]+)/);
+            if (match) {
+                const providerName = match[1];
+
+                // Mark 2fa, remove errors - only 2fa need
+                response.twoFactor = providerName;
+                delete response.data.errors;
+
+                if (options.onTwoFactor) {
+                    await options.onTwoFactor(providerName);
+                } else {
+                    // Require verification code
+                    await this._onTwoFactor(providerName);
+
+                    // Retry request
+                    return this._sendAxios(config, options);
+                }
+            }
+        }
+
+        return response;
+    }
+
+    _onTwoFactor(providerName) {
+        return new Promise((resolve) => {
+            const store = this._components.store;
+            const TwoFactorModal = require('../ui/modal/TwoFactorModal').default;
+            const {openModal} = require('../actions/modal');
+            store.dispatch(openModal(TwoFactorModal, {
+                providerName,
+                onClose: resolve,
+            }));
+        });
+    }
+}

package/src/components/JwtHttpComponent.ts

@@ -0,0 +1,132 @@
+import axios from 'axios';
+// @ts-ignore
+import BaseHttpComponent from '@steroidsjs/core/components/HttpComponent';
+// @ts-ignore
+import {login, logout} from '@steroidsjs/core/actions/auth';
+
+export default class JwtHttpComponent extends BaseHttpComponent {
+    refreshTokenRequest: {
+        url: string,
+        method: string,
+    };
+
+    refreshTokenKey = 'refreshToken';
+
+    _refreshToken: any;
+
+    constructor(components, config: any = {}) {
+        super(components, config);
+        this.refreshTokenKey = config.refreshTokenKey || 'refreshToken';
+        this.refreshTokenRequest = config.refreshTokenRequest;
+    }
+
+    async getAxiosConfig() {
+        const config = super.getAxiosConfig();
+        if (!this._refreshToken) {
+            // @ts-ignore
+            const clientStorage = this._components.clientStorage;
+            const tokenValue = clientStorage.get(this.refreshTokenKey, clientStorage.STORAGE_COOKIE)
+                || clientStorage.get(this.refreshTokenKey)
+                || null;
+
+            this._refreshToken = tokenValue instanceof Promise
+                ? await tokenValue
+                : tokenValue;
+
+            if (this._refreshToken) {
+                clientStorage.set(
+                    this.refreshTokenKey,
+                    this._refreshToken,
+                    clientStorage.STORAGE_COOKIE,
+                    180,
+                );
+            }
+        }
+        return config;
+    }
+
+    private setRefreshTokenInterceptor(axiosInstance) {
+        axiosInstance.interceptors.response.use(
+            (config) => config,
+            async (error) => {
+                const originalRequest = error.config;
+                if (error.response.status === 401 && error.config && !error.config._isRetry) {
+                    // @ts-ignore
+                    const {store} = this._components;
+                    // @ts-ignore
+                    const response = await this.send(
+                        this.refreshTokenRequest.method,
+                        this.refreshTokenRequest.url,
+                        {
+                            [this.refreshTokenKey]: this._refreshToken,
+                        },
+                    );
+                    // @ts-ignore
+                    const accessToken = response?.data?.[this.accessTokenKey];
+                    if (accessToken) {
+                        store.dispatch(login(accessToken));
+
+                        originalRequest._isRetry = true;
+                        originalRequest.headers.Authorization = 'Bearer ' + accessToken;
+                        return axiosInstance.request(originalRequest);
+                    } else {
+                        store.dispatch(logout());
+                    }
+                }
+                throw error;
+            },
+        );
+    }
+
+    async getAxiosInstance() {
+        // @ts-ignore
+        if (!this._axios) {
+            // @ts-ignore
+            this._axios = axios.create(await this.getAxiosConfig());
+            // @ts-ignore
+            this.setRefreshTokenInterceptor(this._axios);
+        }
+        // @ts-ignore
+        return this._axios;
+    }
+
+    removeRefreshToken() {
+        this._refreshToken = null;
+        // @ts-ignore
+        this.resetConfig();
+        // @ts-ignore
+        this._components.clientStorage.remove(
+            this.refreshTokenKey,
+            // @ts-ignore
+            this._components.clientStorage.STORAGE_COOKIE,
+        );
+    }
+
+    setRefreshToken(value) {
+        this._refreshToken = value;
+        // @ts-ignore
+        this.resetConfig();
+        // @ts-ignore
+        this._components.clientStorage.set(
+            this.refreshTokenKey,
+            value,
+            // @ts-ignore
+            this._components.clientStorage.STORAGE_COOKIE,
+            180,
+        );
+    }
+
+    async getRefreshToken() {
+        if (this._refreshToken === false) {
+            // @ts-ignore
+            this._refreshToken = await this._components.clientStorage.get(this.refreshTokenKey) || null;
+        }
+        return this._refreshToken;
+    }
+
+    onLogout() {
+        // @ts-ignore
+        this.removeAccessToken();
+        this.removeRefreshToken();
+    }
+}

package/src/components/LocaleComponent.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import IntlMessageFormat from 'intl-messageformat';
+import moment from 'moment';
+import _isObject from 'lodash-es/isObject';
+import 'moment/locale/it';
+import 'moment/locale/ru';
+
+/**
+ * Locale Component
+ * Компонент для локализации приложения. Поддерживает конфигурацию языка и временной зоны
+ *
+ * Пример строки: `{__('{count} {count, plural, one{день} few{дня} many{дней}}', {count: 2})}`
+ */
+export default class LocaleComponent {
+    backendTimeDiff: null;
+
+    backendTimeZone: any;
+
+    /**
+     * Язык приложения
+     * @example ru
+     */
+    language: string;
+
+    sourceLanguage: string;
+
+    translations: any;
+
+    constructor(components, config) {
+        this.language = config.language || 'en';
+        this.sourceLanguage = config.sourceLanguage || 'ru';
+        this.backendTimeZone = null;
+        this.backendTimeDiff = null; // in microseconds
+        this.translations = {};
+        // Publish to global
+        if (process.env.IS_SSR) {
+            // @ts-ignore
+            global.__ = this.translate.bind(this);
+        } else {
+            window.__ = this.translate.bind(this);
+        }
+    }
+
+    /**
+     * Получение экземпляра `moment` с учетом временной зоны бекенда
+     * @param date Дата
+     * @param format Формат
+     */
+    moment(date: string = undefined, format: string = undefined) {
+        if (date && this.backendTimeZone) {
+            if (
+                date.length === 16
+                && moment(date, 'YYYY-MM-DD HH:mm').isValid()
+            ) {
+                date += ':00';
+            }
+            if (
+                date.length === 19
+                && moment(date, 'YYYY-MM-DD HH:mm:ss').isValid()
+            ) {
+                date += this.backendTimeZone;
+            }
+        }
+        return moment(date, format).locale(this.language);
+    }
+
+    t(message, params = {}) {
+        return this.translate(message, params);
+    }
+
+    translate(message, params = {}) {
+        // Translate
+        const hasTranslate = !!this.translations[message];
+        message = this.translations[message] || message;
+
+        // Cut react components
+        const components = {};
+        Object.keys(params).map(key => {
+            if (_isObject(params[key])) {
+                components[key] = params[key];
+                params[key] = `!!${key}!!`;
+            }
+        });
+
+        // Format message (params, plural, etc..)
+        const language = hasTranslate ? this.language : this.sourceLanguage;
+        const formatter = new IntlMessageFormat(message, language);
+        message = formatter.format(params);
+
+        // Paste react components
+        message = this._pasteComponents(message, components);
+        return message;
+    }
+
+    _pasteComponents(message, components) {
+        if (Object.keys(components).length === 0) {
+            return message;
+        }
+        // Index components
+        const indexedComponents = [];
+        Object.keys(components).map(key => {
+            const index = message.indexOf(`!!${key}!!`);
+            if (index !== -1) {
+                indexedComponents.push({
+                    index,
+                    component: components[key],
+                });
+            }
+            message = message.replace(`!!${key}!!`, '!!component!!');
+        });
+        indexedComponents.sort((a, b) => {
+            if (a.index < b.index) {
+                return -1;
+            } if (a.index > b.index) {
+                return 1;
+            }
+            return 0;
+        });
+        // Split text to array, paste components
+        const result = [];
+        const textParts = message.split('!!component!!');
+        for (let i = 0, j = 0; i < textParts.length; i++) {
+            let isComponentAdded = false;
+            if (
+                j === 0
+                && j < indexedComponents.length
+                && indexedComponents[j].index === 0
+            ) {
+                result.push(
+                    <span key={`element-${j}`}>{indexedComponents[j].component}</span>,
+                );
+                isComponentAdded = true;
+                j++;
+            }
+            result.push(<span key={`text-${i}`}>{textParts[i]}</span>);
+            if (!isComponentAdded && j < indexedComponents.length) {
+                result.push(
+                    <span key={`element${j}`}>{indexedComponents[j].component}</span>,
+                );
+                j++;
+            }
+        }
+        return <span>{result}</span>;
+    }
+}