wba/frontend/src/js/page/wb-sign-in.js

import { h, Component } from 'preact';
import { route } from 'preact-router';
import WBNavbar from 'wb-navbar';
import WBTabs from 'wb-tabs';
import linkState from 'linkstate';
import makeArvadosRequest from 'make-arvados-request';

class WBSignIn extends Component {
  constructor(...args) {
    super(...args);
    const search = new URLSearchParams(window.location.search);
    this.state.arvHost = window.localStorage.arvHost;
    this.state.arvToken = search.get('api_token');
  }

  componentDidMount() {
    // const arvHost = window.localStorage.arvHost;
    // const arvToken = search.get('api_token');
    const { arvHost, arvToken } = this.state;
    if (arvHost && arvToken) {
      this.state.arvHost = arvHost;
      this.state.arvToken = arvToken;
      this.submitToken();
    }
  }

  submit() {
    const { mode } = this.props;
    if (mode === 'token')
      this.submitToken();
    else if (!mode || mode === 'sso')
      this.submitSingleSignOn();
    else
      throw Error('Unsupported mode');
  }

  submitSingleSignOn() {
    const { arvHost } = this.state;
    window.localStorage.arvHost = arvHost;
    window.location = 'https://' + arvHost + '/login?return_to='
      + encodeURIComponent(window.location.protocol + '//' + window.location.host + '/sign-in/token');
  }

  submitToken() {
    let { appState } = this.props;
    let { arvHost, arvToken } = this.state;
    let prom = makeArvadosRequest(arvHost, arvToken, '/arvados/v1/users/current');
    prom = prom.then(xhr => {
      window.localStorage['arvHost'] = arvHost;
      window.localStorage['arvToken'] = arvToken;
      window.localStorage['currentUser'] = JSON.stringify(xhr.response);
      appState.arvHost = arvHost;
      appState.arvToken = arvToken;
      appState.currentUser = xhr.response;
      route('/browse/' + xhr.response['uuid']);
    });
    prom = prom.catch(() => {
      alert('Sign in unsuccessful. Verify your input and try again.')
    });
  }

  render({ mode }, { arvHost, arvToken }) {
    return (
      <div>
        <WBNavbar />

        <div class="container my-3">
          <div class="row justify-content-center">
            <div class="col-6">
              <h1>Sign In</h1>
              <WBTabs class="my-3" tabs={ [ { name: 'SSO', isActive: (!mode || mode === 'sso') },
                { name: 'Token', isActive: (mode === 'token') } ] }
                onTabChanged={ t => route(t.name === 'Token' ? '/sign-in/token' : '/sign-in/sso') } />
              <form>
                <div class="form-group">
                  <label for="arvHost">Arvados API Host</label>
                  <input type="text" class="form-control" id="arvHost"
                    placeholder="Enter Arvados API Host"
                    value={ arvHost }
                    onInput={ linkState(this, 'arvHost') } />
                </div>
                { mode === 'token' ? (
                  <div class="form-group">
                    <label for="arvToken">Token</label>
                    <input type="text" class="form-control" id="arvToken"
                      placeholder="Enter Arvados API Token"
                      value={ arvToken }
                      onInput={ linkState(this, 'arvToken') } />
                  </div>
                ) : null }
                <button type="submit" class="btn btn-primary"
                  onclick={ e => { e.preventDefault(); this.submit(); } }>Submit</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default WBSignIn;