@steroidsjs/core 2.0.0-rc.7 → 2.0.1-beta.113

package/components/HttpComponent.tsx

@@ -0,0 +1,300 @@
+import * as React from 'react';
+import _trimStart from 'lodash-es/trimStart';
+import _trimEnd from 'lodash-es/trimEnd';
+import {setFlashes} from '../actions/notifications';
+import axios from 'axios';
+
+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
+            || (typeof location !== 'undefined' ? location.protocol + '//' + location.host : '');
+        this.accessTokenKey = config.accessTokenKey || 'accessToken';
+
+        this._lazyRequests = {};
+        this._axios = null;
+        this._csrfToken = null;
+        this._accessToken = false;
+        this._promises = [];
+    }
+
+    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'
+            }
+        };
+        // 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;
+    }
+
+    async getAxiosInstance() {
+        if (!this._axios) {
+            this._axios = axios.create(await this.getAxiosConfig());
+        }
+        return this._axios;
+    }
+
+    getUrl(method) {
+        if (method === null) {
+            method = 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: 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
+        );
+    }
+
+    hoc(requestFunc) {
+        return require('../hoc/http')(requestFunc);
+    }
+
+    _send(method, config, options: IHttpRequestOptions) {
+        const axiosConfig = {
+            ...config,
+            url: this.getUrl(method)
+        };
+        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) {
+        const promise = 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;
+            });
+
+        // Store promises for SSR
+        if (process.env.IS_SSR) {
+            this._promises.push(promise);
+        }
+        return promise;
+    }
+
+    async afterRequest(response, config, options: IHttpRequestOptions) {
+        const store = this._components.store;
+
+        // Flash
+        if (response.data.flashes) {
+            store.dispatch(setFlashes(response.data.flashes));
+        }
+
+        // Ajax redirect
+        if (response.data.redirectUrl && !process.env.IS_SSR) {
+            if (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/components/LocaleComponent.tsx

@@ -0,0 +1,136 @@
+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 (
+            this.backendTimeZone &&
+            date &&
+            date.length === 19 &&
+            moment(date, 'YYYY-MM-DD HH:mm:ss').isValid()
+        ) {
+            date = 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: index,
+                    component: components[key]
+                });
+            }
+            message = message.replace(`!!${key}!!`, '!!component!!');
+        });
+        indexedComponents.sort((a, b) => {
+            if (a.index < b.index) {
+                return -1;
+            } else 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>;
+    }
+}

package/components/MetaComponent.ts

@@ -0,0 +1,226 @@
+/**
+ * Мета информация о моделе
+ */
+export interface Model {
+    primaryKey?: string,
+    attributes?: (string | ModelAttribute)[],
+}
+
+export interface ModelAttribute {
+    type?: 'autoTime' | 'boolean' | 'dateTime' | 'date' | 'double' | 'email' | 'enum' | 'file' | 'files' | 'html'
+        | 'integer' | 'money' | 'password' | 'phone' | 'primaryKey' | 'size' | 'string' | 'text' | 'time',
+    jsType?: 'boolean' | 'string' | 'string[]' | 'number' | 'number[]' | string,
+    attribute?: string,
+    label?: string,
+    hint?: string,
+    isRequired?: boolean,
+    isSortable?: boolean,
+    field?: string | any,
+    fieldProps?: object,
+    searchField?: string | any,
+    searchFieldProps?: object,
+    formatter?: string | any,
+    formatterProps?: object,
+    defaultValue?: any,
+    fromStringConverter?: (value: string, type: string, item: any) => any,
+    toStringConverter?: (value: any, type: string, item: any) => string | null,
+}
+
+/**
+ * Meta Component
+ * Компонент для работы с мета-данными моделей и типами приложения (appType)
+ */
+export default class MetaComponent {
+
+    defaultPrimaryKey: string;
+    defaultAttributeType: string;
+    models: any;
+    types: any;
+
+    _components: any;
+
+    constructor(components) {
+        this._components = components;
+        this.models = {};
+        this.types = this._defaultTypes();
+
+        this.defaultPrimaryKey = 'id';
+        this.defaultAttributeType = 'string';
+    }
+
+    setModel(name: string, item: Model) {
+        name = this.normalizeName(name);
+        item = this.normalizeModel(item);
+
+        this.models[name] = item;
+    }
+
+    getModel(name: string) {
+        return this.models[name] || null;
+    }
+
+    setType(name, config) {
+        this.types[name] = config;
+    }
+
+    getType(name: string) {
+        return this.types[name] || null;
+    }
+
+    normalizeName(name) {
+        return name.replace(/\\/g, '.').replace(/^\./, '');
+    }
+
+    normalizeModel(inputModel: Model, defaultModel: Model = null) {
+        if (!inputModel && !defaultModel) {
+            return null;
+        }
+
+        inputModel = inputModel || {};
+        defaultModel = defaultModel ? this.normalizeModel(defaultModel) : {};
+
+        const defaults = {};
+        (defaultModel.attributes || []).forEach(item => {
+            if (typeof item !== 'string') {
+                defaults[item.attribute] = item;
+            }
+        });
+
+
+        // Normalize attributes config
+        const attributes = [].concat(inputModel.attributes || []).map(item => {
+            if (typeof item === 'string') {
+                const parts = item.split(':');
+
+                item = {
+                    attribute: parts[0],
+                    type: parts[1] || null,
+                    label: parts[2] || null,
+                }
+            }
+
+            return {
+                type: this.defaultAttributeType,
+                attribute: null,
+                label: null,
+                hint: null,
+                isRequired: false,
+                isSortable: false,
+                ...defaults[item.attribute],
+                ...this.getType(item.type || this.defaultAttributeType),
+                ...item,
+            };
+        });
+
+        // Add non-exists default attributes
+        const attributeNames = attributes.map(item => item.attribute);
+        (defaultModel.attributes || []).forEach(item => {
+            if (typeof item !== 'string' && !attributeNames.includes(item.attribute)) {
+                attributes.push(item);
+            }
+        });
+
+        return {
+            primaryKey: inputModel.primaryKey || defaultModel.primaryKey || this.defaultPrimaryKey,
+            attributes,
+        };
+    }
+
+    _defaultTypes() {
+        return {
+            autoTime: {
+                jsType: 'string',
+                field: 'DateTimeField',
+                formatter: 'DateTimeFormatter',
+            },
+            boolean: {
+                jsType: 'boolean',
+                field: 'CheckboxField',
+                formatter: 'BooleanFormatter',
+            },
+            dateTime: {
+                jsType: 'string',
+                field: 'DateTimeField',
+                formatter: 'DateTimeFormatter',
+            },
+            date: {
+                jsType: 'string',
+                field: 'DateField',
+                formatter: 'DateFormatter',
+            },
+            double: {
+                jsType: 'number',
+                field: 'NumberField',
+            },
+            email: {
+                jsType: 'string',
+                field: 'InputField',
+                fieldProps: {
+                    type: 'email',
+                },
+            },
+            enum: {
+                jsType: 'string',
+                field: 'DropDownField',
+                formatter: 'EnumFormatter',
+            },
+            file: {
+                jsType: 'number',
+                field: 'FileField',
+                // TODO formatter: 'FileFormatter',
+            },
+            files: {
+                jsType: 'number[]',
+                field: 'FileField',
+                fieldProps: {
+                    multiple: true,
+                },
+                // TODO formatter: 'FileFormatter',
+            },
+            html: {
+                jsType: 'string',
+                field: 'HtmlField',
+                // TODO formatter: 'HtmlFormatter',
+            },
+            integer: {
+                jsType: 'number',
+                field: 'NumberField',
+            },
+            password: {
+                jsType: 'string',
+                field: 'PasswordField',
+            },
+            phone: {
+                jsType: 'string',
+                field: 'InputField',
+                fieldProps: {
+                    type: 'phone',
+                },
+            },
+            primaryKey: {
+                jsType: 'number',
+                field: 'InputField',
+                fieldProps: {
+                    type: 'hidden',
+                },
+                searchFieldProps: {
+                    type: 'text',
+                },
+            },
+            string: {
+                jsType: 'string',
+                field: 'InputField',
+            },
+            text: {
+                jsType: 'string',
+                field: 'TextField',
+            },
+            time: {
+                jsType: 'string',
+                field: 'TimeField',
+                // TODO formatter: 'TimeFormatter',
+            },
+        };
+    }
+
+}