Add normal login via redirection.

frontend/src/js/page/wb-app.js

@@ -71,7 +71,7 @@ class WBApp extends Component {
       <Router>
         <WBLandingPage path="/" />
 
-        <WBSignIn path="/sign-in" appState={ this.state } />
+        <WBSignIn path="/sign-in/:mode?" appState={ this.state } />
 
         <WBSignOut path='/sign-out' app={ this } />
 

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

@@ -1,11 +1,47 @@
 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 {
-  onSubmit() {
+  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');
@@ -23,14 +59,18 @@ class WBSignIn extends Component {
     });
   }
 
-  render({}, { arvHost, arvToken }) {
+  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>
@@ -39,15 +79,17 @@ class WBSignIn extends Component {
                     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>
+                { 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.onSubmit(); } }>Submit</button>
+                  onclick={ e => { e.preventDefault(); this.submit(); } }>Submit</button>
               </form>
             </div>
           </div>

frontend/src/js/widget/wb-tabs.js

@@ -3,7 +3,7 @@ import { h, Component, VNode } from 'preact';
 class WBTabs extends Component {
   render({ tabs, onTabChanged }) {
     return (
-      <ul class="nav nav-tabs">
+      <ul class={ 'nav nav-tabs ' + this.props.class }>
         { tabs.map((t, idx) => {
           let name, isActive, isDisabled, onClick;