@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/auth/background-flow.d.ts

@@ -0,0 +1,31 @@
+import AuthRequestBuilder from './request-builder';
+import AuthStorage from './storage';
+export declare const HUB_AUTH_PAGE_OPENED = "HUB_AUTH_PAGE_OPENED";
+export default class BackgroundFlow {
+    _requestBuilder: AuthRequestBuilder;
+    _storage: AuthStorage;
+    _timeout: number;
+    private _promise?;
+    constructor(requestBuilder: AuthRequestBuilder, storage: AuthStorage, timeout: number);
+    /**
+     * Creates a hidden iframe
+     * @return {HTMLIFrameElement}
+     * @private
+     */
+    private _createHiddenFrame;
+    /**
+     * Redirects the given iframe to the given URL
+     * @param {HTMLIFrameElement} iframe
+     * @param {string} url
+     * @private
+     */
+    _redirectFrame(iframe: HTMLIFrameElement, url: string): void;
+    /**
+     * Refreshes the access token in an iframe.
+     *
+     * @return {Promise.<string>} promise that is resolved to access the token when it is loaded in a background iframe. The
+     * promise is rejected if no token was received after {@link BackgroundToken.BACKGROUND_TIMEOUT} ms.
+     */
+    private _load;
+    authorize(): Promise<string>;
+}

package/components/auth/background-flow.js

@@ -0,0 +1,97 @@
+import AuthResponseParser from './response-parser';
+export const HUB_AUTH_PAGE_OPENED = 'HUB_AUTH_PAGE_OPENED';
+export default class BackgroundFlow {
+    _requestBuilder;
+    _storage;
+    _timeout;
+    _promise;
+    constructor(requestBuilder, storage, timeout) {
+        this._requestBuilder = requestBuilder;
+        this._storage = storage;
+        this._timeout = timeout;
+    }
+    /**
+     * Creates a hidden iframe
+     * @return {HTMLIFrameElement}
+     * @private
+     */
+    _createHiddenFrame() {
+        const iframe = document.createElement('iframe');
+        iframe.style.border = iframe.style.width = iframe.style.height = '0px';
+        iframe.style.visibility = 'hidden';
+        iframe.style.position = 'fixed';
+        iframe.style.left = '-10000px';
+        window.document.body.appendChild(iframe);
+        return iframe;
+    }
+    /**
+     * Redirects the given iframe to the given URL
+     * @param {HTMLIFrameElement} iframe
+     * @param {string} url
+     * @private
+     */
+    _redirectFrame(iframe, url) {
+        iframe.src = `${url}&rnd=${Math.random()}`;
+    }
+    /**
+     * Refreshes the access token in an iframe.
+     *
+     * @return {Promise.<string>} promise that is resolved to access the token when it is loaded in a background iframe. The
+     * promise is rejected if no token was received after {@link BackgroundToken.BACKGROUND_TIMEOUT} ms.
+     */
+    async _load() {
+        const authRequest = await this._requestBuilder.
+            // eslint-disable-next-line camelcase
+            prepareAuthRequest({ request_credentials: 'silent' }, { nonRedirect: true });
+        return new Promise((resolve, reject) => {
+            function onMessage(e) {
+                if (e.data === HUB_AUTH_PAGE_OPENED) {
+                    reject(new Error('Failed to obtain/refresh token in background'));
+                    cleanUp();
+                }
+            }
+            window.addEventListener('message', onMessage);
+            const iframe = this._createHiddenFrame();
+            let cleanRun;
+            const timeout = setTimeout(() => {
+                reject(new Error('Failed to refresh authorization'));
+                cleanUp();
+            }, this._timeout);
+            const removeTokenListener = this._storage.onTokenChange(token => {
+                if (token) {
+                    cleanUp();
+                    resolve(token.accessToken);
+                }
+            });
+            const removeStateListener = this._storage.onStateChange(authRequest.stateId, state => {
+                if (state && state.error) {
+                    cleanUp();
+                    reject(new AuthResponseParser.AuthError(state));
+                }
+            });
+            function cleanUp() {
+                if (cleanRun) {
+                    return;
+                }
+                cleanRun = true;
+                clearTimeout(timeout);
+                removeStateListener();
+                removeTokenListener();
+                window.removeEventListener('message', onMessage);
+                window.document.body.removeChild(iframe);
+            }
+            this._redirectFrame(iframe, authRequest.url);
+        });
+    }
+    authorize() {
+        if (this._promise) {
+            return this._promise;
+        }
+        const resetPromise = () => {
+            this._promise = null;
+        };
+        this._promise = this._load();
+        this._promise.then(resetPromise, resetPromise);
+        return this._promise;
+    }
+}

package/components/auth/down-notification.css

@@ -0,0 +1,15 @@
+@import "../global/variables.css";
+
+.title {
+  font-weight: 600;
+}
+
+.error {
+  margin-top: calc(var(--ring-unit) / 2);
+
+  word-wrap: break-word;
+
+  color: var(--ring-text-color);
+
+  line-height: calc(var(--ring-unit) * 2);
+}

package/components/auth/down-notification.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface BackendDownTranslations {
+    backendIsNotAvailable: string;
+    checkAgain: string;
+    errorMessage: string;
+}
+export interface BackendDownMessageProps {
+    translations: BackendDownTranslations;
+    onCheckAgain: (e: React.MouseEvent) => void;
+}
+export interface OnBackendDownParams {
+    translations: BackendDownTranslations;
+    onCheckAgain: () => void;
+}
+export default function onBackendDown({ onCheckAgain, translations }: OnBackendDownParams): () => void;

package/components/auth/down-notification.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import alertService from '../alert-service/alert-service';
+import Alert from '../alert/alert';
+import Link from '../link/link';
+import Group from '../group/group';
+import styles from './down-notification.css';
+let key = null;
+function renderAlert(message, type = Alert.Type.WARNING) {
+    const existingAlert = alertService.showingAlerts.filter(alert => alert.key === key)[0];
+    if (!existingAlert) {
+        key = alertService.addAlert(message, type, 0, { closeable: false });
+    }
+    else {
+        existingAlert.message = message;
+        existingAlert.type = type;
+        alertService.renderAlerts();
+    }
+}
+function Message({ translations, onCheckAgain }) {
+    const { backendIsNotAvailable, checkAgain, errorMessage } = translations;
+    return (<div data-test="ring-backend-down-notification">
+      <Group>
+        <div className={styles.title}>{backendIsNotAvailable}</div>
+      </Group>
+      <span className={styles.error}>{errorMessage} </span>
+      <Link onClick={onCheckAgain} data-test="check-again">{checkAgain}</Link>
+    </div>);
+}
+Message.propTypes = {
+    translations: PropTypes.shape({
+        backendIsNotAvailable: PropTypes.string,
+        checkAgain: PropTypes.string,
+        errorMessage: PropTypes.string
+    }),
+    onCheckAgain: PropTypes.func
+};
+export default function onBackendDown({ onCheckAgain, translations }) {
+    async function checkAgainWithoutClosing(e) {
+        // Alert has weird behaviour of handling clicks by "a" tags
+        e.stopPropagation();
+        try {
+            renderAlert('Connecting...', Alert.Type.LOADING);
+            await onCheckAgain();
+        }
+        catch (err) {
+            renderAlert(<Message translations={translations} onCheckAgain={checkAgainWithoutClosing}/>);
+        }
+    }
+    renderAlert(<Message translations={translations} onCheckAgain={checkAgainWithoutClosing}/>);
+    return () => alertService.remove(key);
+}

package/components/auth/iframe-flow.d.ts

@@ -0,0 +1,20 @@
+import { AuthTranslations, LoginFlow } from './auth__core';
+import AuthRequestBuilder from './request-builder';
+import AuthStorage from './storage';
+export default class IFrameFlow implements LoginFlow {
+    hideDialog: (() => void) | null;
+    private _requestBuilder;
+    private _storage;
+    private _translations;
+    reject?: (reason: unknown) => void;
+    private _promise?;
+    private _loginWindow?;
+    constructor(requestBuilder: AuthRequestBuilder, storage: AuthStorage, translations: AuthTranslations);
+    /**
+     * Initiates authorization in window
+     */
+    private _load;
+    _reset: () => void;
+    stop(): void;
+    authorize(): Promise<string>;
+}

package/components/auth/iframe-flow.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import loginDialogService from '../login-dialog/service';
+import Link from '../link/link';
+import AuthResponseParser from './response-parser';
+export default class IFrameFlow {
+    hideDialog = null;
+    _requestBuilder;
+    _storage;
+    _translations;
+    reject;
+    _promise;
+    _loginWindow;
+    constructor(requestBuilder, storage, translations) {
+        this._requestBuilder = requestBuilder;
+        this._storage = storage;
+        this._translations = translations;
+        this._reset();
+    }
+    /**
+     * Initiates authorization in window
+     */
+    async _load() {
+        const authRequest = await this._requestBuilder.prepareAuthRequest(
+        // eslint-disable-next-line camelcase
+        { request_credentials: 'required', auth_mode: 'bypass_to_login' }, { nonRedirect: false });
+        const renderFallbackLink = () => (<Link href={authRequest.url} target="_self">{this._translations.nothingHappensLink}</Link>);
+        return new Promise((resolve, reject) => {
+            this.hideDialog = loginDialogService({
+                url: authRequest.url,
+                loader: true,
+                onCancel: () => {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    cleanUp();
+                    this.stop();
+                },
+                renderFallbackLink
+            });
+            this.reject = reject;
+            const removeTokenListener = this._storage.onTokenChange(token => {
+                if (token) {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    cleanUp();
+                    resolve(token.accessToken);
+                }
+            });
+            const removeStateListener = this._storage.onStateChange(authRequest.stateId, state => {
+                if (state && state.error) {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    cleanUp();
+                    reject(new AuthResponseParser.AuthError(state));
+                }
+            });
+            const cleanUp = () => {
+                this.hideDialog?.();
+                removeStateListener();
+                removeTokenListener();
+            };
+        });
+    }
+    _reset = () => {
+        this._promise = null;
+        this.hideDialog = null;
+    };
+    stop() {
+        if (this.hideDialog) {
+            this.hideDialog();
+        }
+        if (this.reject) {
+            this.reject('Login form closed');
+        }
+        this._reset();
+    }
+    authorize() {
+        if (this._promise != null && this._loginWindow != null && !this._loginWindow.closed) {
+            return this._promise;
+        }
+        this._promise = this._load();
+        this._promise.then(this._reset, this._reset);
+        return this._promise;
+    }
+}

package/components/auth/request-builder.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="typings" />
+import uuid from 'simply-uuid';
+import AuthStorage, { AuthState } from './storage';
+export interface AuthRequestBuilderConfig {
+    authorization: string;
+    redirectUri?: string | null | undefined;
+    requestCredentials?: string | null | undefined;
+    clientId?: string | null | undefined;
+    scopes: readonly string[];
+    redirect?: boolean | null | undefined;
+}
+export default class AuthRequestBuilder {
+    config: AuthRequestBuilderConfig;
+    storage: AuthStorage | undefined;
+    /**
+     * @param {{
+     *   authorization: string,
+     *   redirectUri: string?,
+     *   requestCredentials: string?,
+     *   clientId: string?,
+     *   scopes: string[]
+     * }} config
+     * @param {AuthStorage} storage
+     */
+    constructor(config: AuthRequestBuilderConfig, storage?: AuthStorage);
+    /**
+     * @return {string} random string used for state
+     */
+    static _uuid: typeof uuid.generate;
+    /**
+     * Save state and build an auth server redirect URL.
+     *
+     * @param {object=} extraParams additional query parameters for auth request
+     * @param {object=} extraState additional state parameters to save
+     * @return {Promise.<string>} promise that is resolved to authURL
+     */
+    prepareAuthRequest(extraParams?: Record<string, unknown> | null | undefined, extraState?: Partial<AuthState>): Promise<{
+        url: string;
+        stateId: string;
+    }>;
+    /**
+     * @param {string} id
+     * @param {StoredState} storedState
+     * @return {Promise}
+     * @private
+     */
+    _saveState(id: string, storedState: AuthState): Promise<void> | undefined;
+}

package/components/auth/request-builder.js

@@ -0,0 +1,64 @@
+import uuid from 'simply-uuid';
+import { encodeURL } from '../global/url';
+export default class AuthRequestBuilder {
+    config;
+    storage;
+    /**
+     * @param {{
+     *   authorization: string,
+     *   redirectUri: string?,
+     *   requestCredentials: string?,
+     *   clientId: string?,
+     *   scopes: string[]
+     * }} config
+     * @param {AuthStorage} storage
+     */
+    constructor(config, storage) {
+        this.config = config;
+        this.storage = storage;
+    }
+    /**
+     * @return {string} random string used for state
+     */
+    static _uuid = uuid.generate;
+    /**
+     * Save state and build an auth server redirect URL.
+     *
+     * @param {object=} extraParams additional query parameters for auth request
+     * @param {object=} extraState additional state parameters to save
+     * @return {Promise.<string>} promise that is resolved to authURL
+     */
+    async prepareAuthRequest(extraParams, extraState) {
+        const stateId = AuthRequestBuilder._uuid();
+        const scopes = this.config.scopes.map(scope => encodeURIComponent(scope));
+        /* eslint-disable camelcase */
+        const request = Object.assign({
+            response_type: 'token',
+            state: stateId,
+            redirect_uri: this.config.redirectUri,
+            request_credentials: this.config.requestCredentials,
+            client_id: this.config.clientId,
+            scope: scopes.join(' ')
+        }, extraParams || {});
+        /* eslint-enable camelcase */
+        const authURL = encodeURL(this.config.authorization, request);
+        const state = Object.assign({
+            restoreLocation: window.location.href,
+            scopes: this.config.scopes
+        }, extraState || {});
+        await this._saveState(stateId, state);
+        return ({
+            url: authURL,
+            stateId
+        });
+    }
+    /**
+     * @param {string} id
+     * @param {StoredState} storedState
+     * @return {Promise}
+     * @private
+     */
+    _saveState(id, storedState) {
+        return this.storage?.saveState(id, storedState);
+    }
+}

package/components/auth/response-parser.d.ts

@@ -0,0 +1,70 @@
+import ExtendableError from 'es6-error';
+export interface AuthResponse {
+    accessToken?: string;
+    state?: string;
+    token_type?: string;
+    expiresIn?: string;
+    scope?: string;
+    error?: string | Error;
+    errorDescription?: string;
+    errorUri?: string;
+    restoreAuthState?: string;
+}
+export declare class AuthError extends ExtendableError {
+    code: string | Error | AuthError | undefined;
+    uri: string | undefined;
+    stateId: string | undefined;
+    constructor(authResponse?: AuthResponse);
+}
+/**
+ * @typedef {Object} AuthResponse
+ * @property {?string} accessToken
+ * @property {?string} state
+ * @property {?string} token_type
+ * @property {?string} expiresIn
+ * @property {?string} scope
+ * @property {?string} error
+ */
+export default class AuthResponseParser {
+    readonly _authResponse: AuthResponse;
+    constructor();
+    static AuthError: typeof AuthError;
+    static convertKey(key: string): string;
+    /**
+     * Check if the hash contains an access token.
+     * If it does, return auth response. Otherwise return undefined.
+     * Always clears the hash part of the URL.
+     *
+     * @throws {Error} if the auth server returned an error
+     * @return {?AuthResponse}
+     */
+    getAuthResponseFromURL(): AuthResponse | null;
+    /**
+     * Validates given authResponse.
+     * If it contains a token - returns the token, if an error is found - throws the error,
+     * otherwise - null
+     * Always clears the hash part of the URL.
+     *
+     * @param authResponse {AuthResponse} parsed authResponse
+     * @throws {Error} if the auth server returned an error
+     * @return {?AuthResponse}
+     */
+    validateAuthResponse(authResponse: AuthResponse): AuthResponse | null;
+    /**
+     * Reads the current accessToken from the URL.
+     * Doesn't modify URL
+     *
+     * @return {AuthResponse}
+     */
+    readAuthResponseFromURL(): AuthResponse;
+    /**
+     * @return {string} part of the URL after # sign.
+     * @private
+     */
+    getHash(): string | null;
+    /**
+     * Current page location.
+     * @return {string}
+     */
+    getLocation(): string | null;
+}

package/components/auth/response-parser.js

@@ -0,0 +1,99 @@
+import ExtendableError from 'es6-error';
+import { parseQueryString } from '../global/url';
+export class AuthError extends ExtendableError {
+    code;
+    uri;
+    stateId;
+    // Supports weird IE 11 failing test issue
+    constructor(authResponse = {}) {
+        super(authResponse.errorDescription);
+        this.code = authResponse.error;
+        this.uri = authResponse.errorUri;
+        this.stateId = authResponse.state;
+    }
+}
+/**
+ * @typedef {Object} AuthResponse
+ * @property {?string} accessToken
+ * @property {?string} state
+ * @property {?string} token_type
+ * @property {?string} expiresIn
+ * @property {?string} scope
+ * @property {?string} error
+ */
+export default class AuthResponseParser {
+    _authResponse;
+    constructor() {
+        this._authResponse = this.readAuthResponseFromURL();
+    }
+    static AuthError = AuthError;
+    static convertKey(key) {
+        return key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+    }
+    /**
+     * Check if the hash contains an access token.
+     * If it does, return auth response. Otherwise return undefined.
+     * Always clears the hash part of the URL.
+     *
+     * @throws {Error} if the auth server returned an error
+     * @return {?AuthResponse}
+     */
+    getAuthResponseFromURL() {
+        return this.validateAuthResponse(this._authResponse);
+    }
+    /**
+     * Validates given authResponse.
+     * If it contains a token - returns the token, if an error is found - throws the error,
+     * otherwise - null
+     * Always clears the hash part of the URL.
+     *
+     * @param authResponse {AuthResponse} parsed authResponse
+     * @throws {Error} if the auth server returned an error
+     * @return {?AuthResponse}
+     */
+    validateAuthResponse(authResponse) {
+        // Check for errors
+        if (authResponse.error) {
+            throw new AuthResponseParser.AuthError(authResponse);
+        }
+        // If there is no token in the hash
+        if (!authResponse.accessToken) {
+            return null;
+        }
+        return { ...authResponse, accessToken: authResponse.accessToken };
+    }
+    /**
+     * Reads the current accessToken from the URL.
+     * Doesn't modify URL
+     *
+     * @return {AuthResponse}
+     */
+    readAuthResponseFromURL() {
+        const authResponse = {};
+        const rawAuthResponse = parseQueryString(this.getHash());
+        Object.keys(rawAuthResponse).forEach(key => {
+            if (key.indexOf('_') !== -1) {
+                authResponse[AuthResponseParser.convertKey(key)] = rawAuthResponse[key];
+                return;
+            }
+            authResponse[key] = rawAuthResponse[key];
+        });
+        return authResponse;
+    }
+    /**
+     * @return {string} part of the URL after # sign.
+     * @private
+     */
+    getHash() {
+        // Because of stupid Firefox bug — https://bugzilla.mozilla.org/show_bug.cgi?id=483304
+        const location = this.getLocation();
+        return location && location.replace(/^[^#]*#?/, '');
+    }
+    /**
+     * Current page location.
+     * @return {string}
+     */
+    getLocation() {
+        return window.location.toString();
+    }
+}