Make custom provider the default.

Closes #93.

Author: RubenVerborgh

popup-app/components/IdpSelect.js

@@ -6,35 +6,26 @@ import { ipcStorage, getData } from '../../src/storage'
 
 import './IdpSelect.css'
 
-class IdpSelect extends React.Component {
-  state = {
-    enteringCustomIdp: false,
-    customIdp: { url: '' },
-    error: null
-  }
-
-  toggleEnteringCustomIdp = () =>
-    this.setState(currentState => ({
-      enteringCustomIdp: !currentState.enteringCustomIdp
-    }))
+export default class IdpSelect extends React.Component {
+  state = { idp: '', error: null }
 
   handleChangeIdp = event => {
-    let url = event.target.value
+    let idp = event.target.value
     // Auto-prepend https: if the user is not typing it
-    if (!/^($|h$|ht)/.test(url)) url = `https://${url}`
-    this.setState({ customIdp: { url } })
+    if (!/^($|h$|ht)/.test(idp)) idp = `https://${idp}`
+    this.setState({ idp })
   }
 
   handleBlurIdp = event => {
-    let url = event.target.value
+    let idp = event.target.value
     // Auto-prepend https: if not present
-    if (!/^(https?:\/\/|$)/.test(url))
-      url = url.replace(/^([a-z]*:\/*)?/, 'https://')
-    this.setState({ customIdp: { url } })
+    if (!/^(https?:\/\/|$)/.test(idp))
+      idp = idp.replace(/^([a-z]*:\/*)?/, 'https://')
+    this.setState({ idp })
   }
 
-  handleSelectIdp = idp => async event => {
-    event.preventDefault()
+  handleSelectIdp = async idp => {
+    this.setState({ idp })
     if (!window.opener) {
       console.warn('No parent window')
       this.setState({
@@ -48,7 +39,7 @@ class IdpSelect extends React.Component {
       ...(await this.getClient().request('getLoginOptions')),
       storage: this.getStorage()
     }
-    await auth.login(idp.url, loginOptions)
+    await auth.login(idp, loginOptions)
   }
 
   getClient() {
@@ -62,69 +53,47 @@ class IdpSelect extends React.Component {
   async componentDidMount() {
     const { rpConfig } = await getData(this.getStorage())
     if (rpConfig) {
-      this.setState({ customIdp: { url: rpConfig.provider.url } })
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.idpInput) {
-      this.idpInput.focus()
+      this.setState({ idp: rpConfig.provider.url })
     }
+    this.idpInput.focus()
   }
 
   render() {
     const { appName, idps } = this.props
-    const { customIdp, enteringCustomIdp, error } = this.state
+    const { idp, error } = this.state
     return (
       <div>
         <h1>
           Log in to <span className="app-name">{appName}</span>
         </h1>
-        {error && <Error error={error} />}
-        <p>Choose where you log in</p>
-        {enteringCustomIdp && (
-          <form
-            className="custom-idp"
-            onSubmit={this.handleSelectIdp(customIdp)}
-          >
-            <input
-              ref={input => (this.idpInput = input)}
-              type="url"
-              placeholder="https://my-identity.provider"
-              value={customIdp.url}
-              onChange={this.handleChangeIdp}
-              onBlur={this.handleBlurIdp}
-            />
-            <button type="submit">Log In</button>
-            <button type="reset" onClick={this.toggleEnteringCustomIdp}>
-              Cancel
-            </button>
-          </form>
-        )}
-        <div className="idp-list">
-          <Idp
-            idp={{ displayName: 'custom provider' }}
-            handleSelectIdp={this.toggleEnteringCustomIdp}
+        {error && <p className="error">{error}</p>}
+        <p>Please enter your WebID or the URL of your identity provider:</p>
+        <form className="custom-idp" onSubmit={() => this.handleSelectIdp(idp)}>
+          <input
+            ref={input => (this.idpInput = input)}
+            type="url"
+            placeholder="https://my-identity.provider"
+            value={idp}
+            onChange={this.handleChangeIdp}
+            onBlur={this.handleBlurIdp}
           />
+          <button type="submit" disabled={!idp}>
+            Go
+          </button>
+        </form>
+        <p>Or pick an identity provider from the list below:</p>
+        <div className="idp-list">
           {idps.map(idp => (
-            <Idp
-              idp={idp}
-              handleSelectIdp={this.handleSelectIdp(idp)}
+            <button
+              className="idp"
+              onClick={() => this.handleSelectIdp(idp.url)}
               key={idp.url}
-            />
+            >
+              {idp.displayName}
+            </button>
           ))}
         </div>
       </div>
     )
   }
 }
-
-const Idp = ({ idp, handleSelectIdp }) => (
-  <button className="idp" onClick={handleSelectIdp}>
-    {idp.displayName}
-  </button>
-)
-
-const Error = ({ error }) => <p className="error">{error}</p>
-
-export default IdpSelect