@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/auth/token-validator.ts

@@ -0,0 +1,207 @@
+import ExtendableError from 'es6-error';
+
+import {CODE} from '../http/http';
+
+import AuthStorage, {StoredToken} from './storage';
+
+export interface TokenValidatorConfig {
+  scope: string[]
+  optionalScopes?: readonly string[] | null | undefined
+}
+
+interface ParsedResponse {
+  error?: string
+}
+
+export class TokenValidationError extends ExtendableError {
+  cause: Error | undefined;
+  authRedirect: true;
+  constructor(message: string, cause?: Error) {
+    super(message);
+    this.cause = cause;
+    this.authRedirect = true;
+  }
+}
+
+export default class TokenValidator {
+  private _getUser: (accessToken: string) => Promise<void>;
+  private _config: TokenValidatorConfig;
+  private _storage: AuthStorage;
+  constructor(
+    config: TokenValidatorConfig,
+    getUser: (accessToken: string) => Promise<void>,
+    storage: AuthStorage
+  ) {
+    this._getUser = getUser;
+    this._config = config;
+    this._storage = storage;
+  }
+
+  /**
+   * Returns epoch - seconds since 1970.
+   * Used for calculation of expire times.
+   * @return {number} epoch, seconds since 1970
+   * @private
+   */
+  static _epoch() {
+    const milliseconds = 1000.0;
+    return Math.round(Date.now() / milliseconds);
+  }
+
+  /**
+   * @const {number}
+   */
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  static DEFAULT_REFRESH_BEFORE = 10 * 60; // 20 min in s
+
+  /**
+   * Error class for auth token validation
+   *
+   * @param {string} message Error message
+   * @param {Error=} cause Error that caused this error
+   */
+  static TokenValidationError = TokenValidationError;
+
+  /**
+   * Check token validity against all conditions.
+   * @returns {Promise.<string>}
+   */
+  validateTokenLocally() {
+    return this._getValidatedToken([
+      TokenValidator._validateExistence,
+      TokenValidator._validateExpiration,
+      this._validateScopes.bind(this)
+    ]);
+  }
+
+  /**
+   * Check token validity against all conditions.
+   * @returns {Promise.<string>}
+   */
+  validateToken() {
+    return this._getValidatedToken([
+      TokenValidator._validateExistence,
+      TokenValidator._validateExpiration,
+      this._validateScopes.bind(this),
+      this._validateAgainstUser.bind(this)
+    ]);
+  }
+
+
+  /**
+   * Check if there is a token
+   * @param {StoredToken} storedToken
+   * @return {Promise.<StoredToken>}
+   * @private
+   */
+  private static _validateExistence(storedToken: StoredToken | null) {
+    if (!storedToken || !storedToken.accessToken) {
+      throw new TokenValidator.TokenValidationError('Token not found');
+    }
+  }
+
+  /**
+   * Check expiration
+   * @param {StoredToken} storedToken
+   * @return {Promise.<StoredToken>}
+   * @private
+   */
+  private static _validateExpiration({expires, lifeTime}: StoredToken) {
+    const REFRESH_BEFORE_RATIO = 6;
+    const refreshBefore = lifeTime
+      ? Math.ceil(lifeTime / REFRESH_BEFORE_RATIO)
+      : TokenValidator.DEFAULT_REFRESH_BEFORE;
+
+    if (expires && expires < (TokenValidator._epoch() + refreshBefore)) {
+      throw new TokenValidator.TokenValidationError('Token expired');
+    }
+  }
+
+  /**
+   * Check scopes
+   * @param {StoredToken} storedToken
+   * @return {Promise.<StoredToken>}
+   * @private
+   */
+  private _validateScopes(storedToken: StoredToken) {
+    const {scope, optionalScopes} = this._config;
+    const requiredScopes = optionalScopes
+      ? scope.filter(scopeId => !optionalScopes.includes(scopeId))
+      : scope;
+
+    const hasAllScopes = requiredScopes.every(scopeId => storedToken.scopes?.includes(scopeId));
+    if (!hasAllScopes) {
+      throw new TokenValidator.TokenValidationError('Token doesn\'t match required scopes');
+    }
+  }
+
+  /**
+   * Check by error code if token should be refreshed
+   * @param {string} error
+   * @return {boolean}
+   */
+  static shouldRefreshToken(error: string | undefined) {
+    return error === 'invalid_grant' ||
+      error === 'invalid_request' ||
+      error === 'invalid_token';
+  }
+
+  /**
+   * Check scopes
+   * @param {StoredToken} storedToken
+   * @return {Promise.<StoredToken>}
+   * @private
+   */
+  async _validateAgainstUser(storedToken: StoredToken) {
+    try {
+      return await this._getUser(storedToken.accessToken);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (errorResponse: any) {
+
+      let response: ParsedResponse = {};
+      try {
+        response = await errorResponse.response.json();
+      } catch (e) {
+        // Skip JSON parsing errors
+      }
+
+      if (
+        errorResponse.status === CODE.UNAUTHORIZED ||
+        TokenValidator.shouldRefreshToken(response.error)
+      ) {
+        // Token expired
+        throw new TokenValidator.TokenValidationError(response.error || errorResponse.message);
+      }
+
+      // Request unexpectedly failed
+      throw errorResponse;
+    }
+  }
+
+  /**
+   * Token Validator function
+   * @typedef {(function(StoredToken): Promise<StoredToken>)} TokenValidator
+   */
+
+  /**
+   * Gets stored token and applies provided validators
+   * @param {TokenValidator[]} validators An array of validation
+   * functions to check the stored token against.
+   * @return {Promise.<string>} promise that is resolved to access token if the stored token is valid. If it is
+   * invalid then the promise is rejected. If invalid token should be re-requested then rejection object will
+   * have {authRedirect: true}.
+   * @private
+   */
+  async _getValidatedToken(validators: ((token: StoredToken) => void | Promise<void>)[]) {
+    const storedToken = await this._storage.getToken();
+    if (storedToken == null) {
+      throw new TokenValidator.TokenValidationError('Token not found');
+    }
+
+    for (let i = 0; i < validators.length; i++) {
+      await validators[i](storedToken);
+    }
+
+    return storedToken.accessToken;
+  }
+}

package/components/auth/window-flow.ts

@@ -0,0 +1,131 @@
+import AuthResponseParser from './response-parser';
+import {LoginFlow} from './auth__core';
+import AuthRequestBuilder from './request-builder';
+import AuthStorage from './storage';
+
+const NAVBAR_HEIGHT = 50;
+const CLOSED_CHECK_INTERVAL = 200;
+
+export default class WindowFlow implements LoginFlow {
+  private _timeoutId: number | undefined = undefined;
+  private _requestBuilder: AuthRequestBuilder;
+  private _storage: AuthStorage;
+  reject?: (reason: unknown) => void;
+  private _loginWindow?: Window | null;
+  private _promise?: Promise<string> | null;
+
+  constructor(requestBuilder: AuthRequestBuilder, storage: AuthStorage) {
+    this._requestBuilder = requestBuilder;
+    this._storage = storage;
+    this._reset();
+  }
+
+  /**
+   * Opens window with the given URL
+   * @param {string} url
+   * @private
+   */
+  private _openWindow(url: string) {
+    const height = 700;
+    const width = 750;
+    const screenHalves = 2;
+    const top = (window.screen.height - height - NAVBAR_HEIGHT) / screenHalves;
+    const left = (window.screen.width - width) / screenHalves;
+
+    return window.open(
+      url,
+      'HubLoginWindow',
+      `height=${height}, width=${width}, left=${left}, top=${top}`
+    );
+  }
+
+  /**
+   * Initiates authorization in window
+   */
+  private async _load(): Promise<string> {
+    const authRequest = await this._requestBuilder.prepareAuthRequest(
+      // eslint-disable-next-line camelcase
+      {request_credentials: 'required', auth_mode: 'bypass_to_login'},
+      {nonRedirect: true}
+    );
+
+    return new Promise((resolve, reject) => {
+      this.reject = reject;
+      let cleanRun: boolean;
+
+      const cleanUp = () => {
+        if (cleanRun) {
+          return;
+        }
+        cleanRun = true;
+        /* eslint-disable @typescript-eslint/no-use-before-define */
+        removeStateListener();
+        removeTokenListener();
+        /* eslint-enable @typescript-eslint/no-use-before-define */
+
+        this._loginWindow?.close();
+        clearTimeout(this._timeoutId);
+      };
+
+      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));
+        }
+      });
+
+      if (this._loginWindow == null || this._loginWindow.closed) {
+        this._loginWindow = this._openWindow(authRequest.url);
+      } else {
+        this._loginWindow.location.href = authRequest.url;
+      }
+
+      this.checkIsClosed();
+    });
+  }
+
+  checkIsClosed = () => {
+    if (this._loginWindow?.closed) {
+      this.stop();
+      return;
+    }
+    this._timeoutId = window.setTimeout(this.checkIsClosed, CLOSED_CHECK_INTERVAL);
+  };
+
+  _reset = () => {
+    this._promise = null;
+    this._loginWindow = null;
+    clearTimeout(this._timeoutId);
+  };
+
+  stop() {
+    if (this._loginWindow != null) {
+      this._loginWindow.close();
+    }
+    if (this.reject) {
+      this.reject('Authorization window closed');
+    }
+    this._reset();
+  }
+
+  authorize(): Promise<string> {
+    if (this._promise != null && this._loginWindow != null && !this._loginWindow.closed) {
+      this._loginWindow.focus();
+
+      return this._promise;
+    }
+
+    this._promise = this._load();
+
+    this._promise.then(this._reset, this._reset);
+
+    return this._promise;
+  }
+}

package/components/auth-dialog/auth-dialog.examples.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Button from '../button/button';
+
+import AuthDialog from './auth-dialog';
+
+import youtrackLogo from '!file-loader!@jetbrains/logos/youtrack/youtrack.svg';
+
+
+export default {
+  title: 'Components/Auth Dialog',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'A component that shows an authentication dialog.',
+    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
+    a11y: {element: '*[data-test~=ring-dialog]'}
+  }
+};
+
+interface AuthDialogArgs {
+  onConfirm: () => void
+  onCancel: () => void
+}
+export const authDialog = ({onConfirm, onCancel}: AuthDialogArgs) => {
+  class AuthDialogDemo extends React.Component {
+    state = {
+      confirm: {
+        show: true,
+        onConfirm: () => {},
+        onReject: () => {}
+      }
+    };
+
+    componentDidMount() {
+      this.showAuthDialog();
+    }
+
+    hideAuthDialog = () => {
+      this.setState({confirm: {show: false}});
+    };
+
+    showAuthDialog = () =>
+      new Promise<void>((resolve, reject) => {
+        this.setState({
+          confirm: {
+            show: true,
+            errorMessage: 'Authorization is required',
+            serviceName: 'YouTrack',
+            onConfirm: () => {
+              this.hideAuthDialog();
+              resolve();
+            },
+            onCancel: () => {
+              this.hideAuthDialog();
+              reject();
+            }
+          }
+        });
+      }).
+        then(onConfirm).
+        catch(onCancel);
+
+    render() {
+      return (
+        <div>
+          <div>
+            <Button onClick={this.showAuthDialog}>Show dialog</Button>
+          </div>
+          <AuthDialog
+            {...this.state.confirm}
+            serviceImage={youtrackLogo}
+            confirmLabel="Log in"
+            cancelLabel="Stay a guest"
+          />
+        </div>
+      );
+    }
+  }
+
+  return <AuthDialogDemo/>;
+};
+
+authDialog.argTypes = {onConfirm: {}, onCancel: {}};

package/components/auth-dialog/auth-dialog.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+
+import AuthDialog from './auth-dialog';
+
+describe('AuthDialog', () => {
+  it('should render confirm', () => {
+    render(<AuthDialog show title="Foo"/>);
+    screen.getByRole('heading', {name: 'Foo'}).should.exist;
+  });
+});

package/components/auth-dialog/auth-dialog.tsx

@@ -0,0 +1,131 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {Content} from '../island/island';
+import Dialog from '../dialog/dialog';
+import Button from '../button/button';
+
+import {H2} from '../heading/heading';
+
+import styles from './auth-dialog.css';
+
+/**
+ * @name Auth Dialog
+ */
+
+export interface AuthDialogProps {
+  className?: string | undefined
+  title?: string | null | undefined
+  errorMessage?: string | null | undefined
+  serviceImage?: string | null | undefined
+  serviceName?: string | null | undefined
+  loginCaption: string
+  loginToCaption: string
+  show: boolean
+  cancelOnEsc: boolean
+  confirmLabel: string
+  cancelLabel: string
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export default class AuthDialog extends Component<AuthDialogProps> {
+  static propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string,
+    errorMessage: PropTypes.string,
+    serviceImage: PropTypes.string,
+    serviceName: PropTypes.string,
+    loginCaption: PropTypes.string,
+    loginToCaption: PropTypes.string,
+
+    show: PropTypes.bool,
+    cancelOnEsc: PropTypes.bool,
+    confirmLabel: PropTypes.string,
+    cancelLabel: PropTypes.string,
+
+    onConfirm: PropTypes.func,
+    onCancel: PropTypes.func
+  };
+
+  static defaultProps = {
+    loginCaption: 'Log in',
+    loginToCaption: 'Log in to %serviceName%',
+    show: false,
+    cancelOnEsc: true,
+    confirmLabel: 'Log in',
+    cancelLabel: 'Remain a guest',
+    onConfirm: () => {},
+    onCancel: () => {}
+  };
+
+  onEscPress = () => {
+    if (this.props.cancelOnEsc) {
+      this.props.onCancel();
+    }
+  };
+
+  render() {
+    const {
+      show,
+      className,
+      errorMessage,
+      serviceImage,
+      serviceName,
+      loginCaption,
+      loginToCaption,
+      confirmLabel,
+      cancelLabel,
+      onConfirm,
+      onCancel
+    } = this.props;
+
+    const defaultTitle = serviceName ? loginToCaption : loginCaption;
+    const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName ?? '');
+
+    return (
+      <Dialog
+        label={title}
+        data-test="ring-auth-dialog"
+        className={className}
+        contentClassName={classNames(className, styles.dialog)}
+        onEscPress={this.onEscPress}
+        show={show}
+        trapFocus
+      >
+        <Content>
+          <div className={styles.content}>
+            {serviceImage && (
+              <img
+                alt={`${serviceName} logo`}
+                className={styles.logo}
+                src={serviceImage}
+              />
+            )}
+            <H2 className={styles.title}>{title}</H2>
+            {errorMessage && (
+              <div className={styles.error}>{errorMessage}</div>
+            )}
+            <Button
+              primary
+              className={styles.firstButton}
+              data-test="auth-dialog-confirm-button"
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </Button>
+            <Button
+              className={styles.button}
+              data-test="auth-dialog-cancel-button"
+              onClick={onCancel}
+            >
+              {cancelLabel}
+            </Button>
+          </div>
+        </Content>
+      </Dialog>
+    );
+  }
+}
+

package/components/auth-dialog-service/auth-dialog-service.examples.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import hubConfig from '../../.storybook/hub-config';
+
+import Auth from '../auth/auth';
+import Button from '../button/button';
+
+import showAuthDialog from './auth-dialog-service';
+
+export default {
+  title: 'Services/Auth Dialog Service',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes:
+      'A wrapper for the AuthDialog component. Allows showing the auth dialog without mounting the AuthDialog component first. Can be used outside React.',
+    hermione: {skip: true}
+  }
+};
+
+interface AuthDialogServiceArgs {
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+interface AuthDialogDemoState {
+  serviceDetails: unknown
+}
+export const authDialogService = ({onConfirm, onCancel}: AuthDialogServiceArgs) => {
+  const auth = new Auth(hubConfig);
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  class AuthDialogDemo extends React.Component<{}, AuthDialogDemoState> {
+    componentDidMount() {
+      auth.init();
+      this.showAuthDialog();
+    }
+
+    componentWillUnmount() {
+      if (this.hideAuthDialog) {
+        this.hideAuthDialog();
+      }
+    }
+
+    hideAuthDialog?: () => void;
+    showAuthDialog = () => {
+      this.hideAuthDialog = showAuthDialog({
+        errorMessage: 'Error message',
+        onConfirm,
+        onCancel
+      });
+    };
+
+    render() {
+      return (
+        <div>
+          <Button onClick={this.showAuthDialog}>Show auth dialog</Button>
+        </div>
+      );
+    }
+  }
+
+  return <AuthDialogDemo/>;
+};
+
+authDialogService.argTypes = {onConfirm: {}, onCancel: {}};