@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.7

package/src/components/HtmlComponent.ts

@@ -1,81 +0,0 @@
-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

@@ -1,332 +0,0 @@
-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;
-
-    clientStorageName: string;
-
-    clientStorageExpiresIn: number;
-
-    _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.clientStorageName = config.clientStorageName || this._components.clientStorage.STORAGE_COOKIE;
-        this.clientStorageExpiresIn = config.clientStorageExpiresIn || 180;
-
-        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, this.clientStorageName)
-                || 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,
-                    this.clientStorageName,
-                    this.clientStorageExpiresIn,
-                );
-            }
-        }
-        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.clientStorageName,
-        );
-    }
-
-    /**
-     * @param {string} value
-     */
-    setAccessToken(value) {
-        this._accessToken = value;
-        this.resetConfig();
-        this._components.clientStorage.set(
-            this.accessTokenKey,
-            value,
-            this.clientStorageName,
-            this.clientStorageExpiresIn,
-        );
-    }
-
-    /**
-     * @returns {string}
-     */
-    async getAccessToken() {
-        if (this._accessToken === false) {
-            this._accessToken = await this._components.clientStorage.get(this.accessTokenKey, this.clientStorageName) || null;
-        }
-        return this._accessToken;
-    }
-
-    resetConfig() {
-        this._axios = null;
-    }
-
-    onLogout() {
-        this.removeAccessToken();
-    }
-
-    onLogin(params: {
-        accessToken: string,
-    }) {
-        this.setAccessToken(params.accessToken);
-    }
-
-    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

@@ -1,126 +0,0 @@
-import axios from 'axios';
-import {logout} from '../actions/auth';
-import BaseHttpComponent from './HttpComponent';
-
-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) {
-            const clientStorage = this._components.clientStorage;
-            const tokenValue = clientStorage.get(this.refreshTokenKey, this.clientStorageName)
-                || clientStorage.get(this.refreshTokenKey)
-                || null;
-
-            this._refreshToken = tokenValue instanceof Promise
-                ? await tokenValue
-                : tokenValue;
-
-            if (this._refreshToken) {
-                clientStorage.set(
-                    this.refreshTokenKey,
-                    this._refreshToken,
-                    this.clientStorageName,
-                    this.clientStorageExpiresIn,
-                );
-            }
-        }
-        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
-                    && originalRequest.url !== this.getUrl(this.refreshTokenRequest?.url)
-                ) {
-                    this.removeAccessToken();
-                    const {store} = this._components;
-                    const response = await this.send(
-                        this.refreshTokenRequest.method,
-                        this.refreshTokenRequest.url,
-                        {
-                            [this.refreshTokenKey]: this._refreshToken,
-                        },
-                    );
-                    const accessToken = response?.data?.[this.accessTokenKey];
-                    if (accessToken) {
-                        this.setAccessToken(accessToken);
-                        originalRequest._isRetry = true;
-                        originalRequest.headers.Authorization = 'Bearer ' + accessToken;
-                        return axiosInstance.request(originalRequest);
-                    }
-                    store.dispatch(logout());
-                }
-                throw error;
-            },
-        );
-    }
-
-    async getAxiosInstance() {
-        if (!this._axios) {
-            this._axios = axios.create(await this.getAxiosConfig());
-            this.setRefreshTokenInterceptor(this._axios);
-        }
-        return this._axios;
-    }
-
-    removeRefreshToken() {
-        this._refreshToken = null;
-        this.resetConfig();
-        this._components.clientStorage.remove(
-            this.refreshTokenKey,
-            this.clientStorageName,
-        );
-    }
-
-    setRefreshToken(value) {
-        this._refreshToken = value;
-        this.resetConfig();
-        this._components.clientStorage.set(
-            this.refreshTokenKey,
-            value,
-            this.clientStorageName,
-            this.clientStorageExpiresIn,
-        );
-    }
-
-    async getRefreshToken() {
-        if (this._refreshToken === false) {
-            this._refreshToken = await this._components.clientStorage.get(this.refreshTokenKey, this.clientStorageName) || null;
-        }
-        return this._refreshToken;
-    }
-
-    onLogout() {
-        this.removeAccessToken();
-        this.removeRefreshToken();
-    }
-
-    onLogin(params: {
-        accessToken: string,
-        refreshToken: string,
-    }) {
-        this.setAccessToken(params.accessToken);
-        this.setRefreshToken(params.refreshToken);
-    }
-}

package/src/components/LocaleComponent.tsx

@@ -1,145 +0,0 @@
-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>;
-    }
-}