@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

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

@@ -1,114 +1,97 @@
 import AuthResponseParser from './response-parser';
-
 export const HUB_AUTH_PAGE_OPENED = 'HUB_AUTH_PAGE_OPENED';
-
 export default class BackgroundFlow {
-  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;
+    _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;
         }
-        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;
     }
-
-    const resetPromise = () => {
-      this._promise = null;
-    };
-
-    this._promise = this._load();
-
-    this._promise.then(resetPromise, resetPromise);
-
-    return this._promise;
-  }
 }

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.jsx

@@ -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.jsx

@@ -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/landing-entry.d.ts

@@ -0,0 +1,3 @@
+import '!!file-loader?publicPath=../../&name=auth-landing.html!extricate-loader!interpolate-loader!./landing.html';
+declare const _default: "auth-landing.html";
+export default _default;

package/components/auth/landing-entry.js

@@ -1,3 +1,2 @@
 import '!!file-loader?publicPath=../../&name=auth-landing.html!extricate-loader!interpolate-loader!./landing.html';
-
 export default 'auth-landing.html';

package/components/auth/landing.d.ts

@@ -0,0 +1,2 @@
+import Auth from './auth';
+export default function parseAndStoreResponse(this: Auth, clientId: string): Promise<void>;

package/components/auth/landing.html

@@ -5,7 +5,7 @@
   </head>
   <body>
     <script>
-      {{compile-code-loader!./landing.js}}
+      {{compile-code-loader!./landing}}
     </script>
     Landing page
   </body>

package/components/auth/landing.js

@@ -1,30 +1,26 @@
 import TokenValidator from './token-validator';
 import ResponseParser from './response-parser';
-import {DEFAULT_EXPIRES_TIMEOUT} from './auth';
+import { DEFAULT_EXPIRES_TIMEOUT } from './auth';
 import AuthStorage from './storage';
-
 const parser = new ResponseParser();
 const authResponse = parser.getAuthResponseFromURL();
-
+// eslint-disable-next-line consistent-this
 export default async function parseAndStoreResponse(clientId) {
-  const storage = new AuthStorage({
-    messagePrefix: `${clientId}-message-`,
-    stateKeyPrefix: `${clientId}-states-`,
-    tokenKey: `${clientId}-token`,
-    userKey: `${clientId}-user-`
-  });
-
-  if (!authResponse) {
-    return;
-  }
-
-  const {state: stateId, scope, expiresIn, accessToken} = authResponse;
-  const newState = await (stateId && this._storage.getState(stateId)) || {};
-
-  const scopes = scope ? scope.split(' ') : newState.scopes || [];
-
-  const effectiveExpiresIn = expiresIn ? parseInt(expiresIn, 10) : DEFAULT_EXPIRES_TIMEOUT;
-  const expires = TokenValidator._epoch() + effectiveExpiresIn;
-
-  await storage.saveToken({accessToken, scopes, expires});
+    const storage = new AuthStorage({
+        messagePrefix: `${clientId}-message-`,
+        stateKeyPrefix: `${clientId}-states-`,
+        tokenKey: `${clientId}-token`,
+        userKey: `${clientId}-user-`
+    });
+    if (!authResponse) {
+        return;
+    }
+    const { state: stateId, scope, expiresIn, accessToken } = authResponse;
+    const newState = await (stateId && this._storage?.getState(stateId)) || {};
+    const scopes = scope ? scope.split(' ') : newState.scopes || [];
+    const effectiveExpiresIn = expiresIn ? parseInt(expiresIn, 10) : DEFAULT_EXPIRES_TIMEOUT;
+    const expires = TokenValidator._epoch() + effectiveExpiresIn;
+    if (accessToken != null) {
+        await storage.saveToken({ accessToken, scopes, expires });
+    }
 }

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

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