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 linkState from 'linkstate';
import makeArvadosRequest from 'make-arvados-request';

class WBSignIn extends Component {
  onSubmit() {
    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({}, { arvHost, arvToken }) {
    return (
      <div>
        <WBNavbar />
        <div class="container my-3">
          <div class="row justify-content-center">
            <div class="col-6">
              <h1>Sign In</h1>
              <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>
                <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>
                <button type="submit" class="btn btn-primary"
                  onclick={ e => { e.preventDefault(); this.onSubmit(); } }>Submit</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default WBSignIn;