Auth Dialog

Auth Dialog

<div id="auth-dialog"></div>

import {render} from 'react-dom';
import React from 'react';
import AuthDialog from '@jetbrains/ring-ui/components/auth-dialog/auth-dialog';
import Button from '@jetbrains/ring-ui/components/button/button';
import youtrackLogo from '!file-loader?publicPath=../../!@jetbrains/logos/youtrack/youtrack.svg';

class AuthDialogDemo extends React.Component {
  state = {
    confirm: {
      show: true,
      onConfirm: () => {},
      onReject: () => {}
    }
  };

  componentDidMount() {
    this.showAuthDialog();
  }

  hideAuthDialog = () => {
    this.setState({confirm: {show: false}});
  }

  showAuthDialog = () => {
    return new Promise((resolve, reject) => {
      this.setState({
        confirm: {
          show: true,
          errorMessage: 'Authorization is required',
          serviceName: 'YouTrack',
onConfirm: () => this.hideAuthDialog() || resolve(),
          onCancel: () => this.hideAuthDialog() || reject()
        }
      });
    }).
      then(() => console.info('Confirmed')).
      catch(() => console.warn('Rejected'));
  }

  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>
    );
  }
 }

render(<AuthDialogDemo/>, document.getElementById('auth-dialog'));