Add client_id support for OpenID (#8579)

- One click OpenID authorization on Login page
- Add client_id help, config keys etc

Thanks to @egorkaru @ihostage for the
original work and testing.

browser/app/js/browser/Login.js

@@ -16,16 +16,13 @@
 
 import React from "react"
 import { connect } from "react-redux"
-import classNames from "classnames"
 import logo from "../../img/logo.svg"
 import Alert from "../alert/Alert"
 import * as actionsAlert from "../alert/actions"
 import InputGroup from "./InputGroup"
 import web from "../web"
 import { Redirect, Link } from "react-router-dom"
-import qs from "query-string"
-import storage from "local-storage-fallback"
-import history from "../history"
+import OpenIDLoginButton from './OpenIDLoginButton'
 
 export class Login extends React.Component {
   constructor(props) {
@@ -33,7 +30,8 @@ export class Login extends React.Component {
     this.state = {
       accessKey: "",
       secretKey: "",
-      discoveryDoc: {}
+      discoveryDoc: {},
+      clientId: ""
     }
   }
 
@@ -88,8 +86,9 @@ export class Login extends React.Component {
   }
 
   componentDidMount() {
-    web.GetDiscoveryDoc().then(({ DiscoveryDoc }) => {
+    web.GetDiscoveryDoc().then(({ DiscoveryDoc, clientId }) => {
       this.setState({
+        clientId,
         discoveryDoc: DiscoveryDoc
       })
     })
@@ -107,6 +106,8 @@ export class Login extends React.Component {
     let alertBox = <Alert {...alert} onDismiss={clearAlert} />
     // Make sure you don't show a fading out alert box on the initial web-page load.
     if (!alert.message) alertBox = ""
+
+    const showOpenID = Boolean(this.state.discoveryDoc && this.state.discoveryDoc.authorization_endpoint)
     return (
       <div className="login">
         {alertBox}
@@ -139,13 +140,24 @@ export class Login extends React.Component {
               <i className="fas fa-sign-in-alt" />
             </button>
           </form>
-          {this.state.discoveryDoc &&
-            this.state.discoveryDoc.authorization_endpoint && (
+          {showOpenID && (
             <div className="openid-login">
               <div className="or">or</div>
-              <a href={"/login/openid"} className="btn openid-btn">
-                Log in with OpenID
-              </a>
+              {
+                this.state.clientId ? (
+                  <OpenIDLoginButton
+                    className="btn openid-btn"
+                    clientId={this.state.clientId}
+                    authorizationEndpoint={this.state.discoveryDoc.authorization_endpoint}
+                  >
+                    Log in with OpenID
+                  </OpenIDLoginButton>
+                ) : (
+                  <Link to={"/login/openid"} className="btn openid-btn">
+                    Log in with OpenID
+                  </Link>
+                )
+              }
             </div>
           )}
         </div>