improve: OAuth2 UI and test suite (via #5066)

* create `features` folder

* add base oauth2 server

* continue implementing OAuth tests

* WIP

* add password flow tests

* modify Password flow credential types

* remove query string credential type

* add test case for Authorization flow

* add specific Authorization value for Password flow test

* WIP

* fix linter issues

src/core/components/auth/oauth2.jsx

@@ -24,7 +24,7 @@ export default class Oauth2 extends React.Component {
     let username = auth && auth.get("username") || ""
     let clientId = auth && auth.get("clientId") || authConfigs.clientId || ""
     let clientSecret = auth && auth.get("clientSecret") || authConfigs.clientSecret || ""
-    let passwordType = auth && auth.get("passwordType") || "request-body"
+    let passwordType = auth && auth.get("passwordType") || "basic"
 
     this.state = {
       appName: authConfigs.appName,
@@ -150,14 +150,13 @@ export default class Oauth2 extends React.Component {
                 }
               </Row>
               <Row>
-                <label htmlFor="password_type">type:</label>
+                <label htmlFor="password_type">Client credentials location:</label>
                 {
                   isAuthorized ? <code> { this.state.passwordType } </code>
                     : <Col tablet={10} desktop={10}>
                       <select id="password_type" data-name="passwordType" onChange={ this.onInputChange }>
+                        <option value="basic">Authorization header</option>
                         <option value="request-body">Request body</option>
-                        <option value="basic">Basic auth</option>
-                        <option value="query">Query parameters</option>
                       </select>
                     </Col>
                 }
@@ -165,7 +164,7 @@ export default class Oauth2 extends React.Component {
             </Row>
         }
         {
-          ( flow === APPLICATION || flow === IMPLICIT || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "basic") ) &&
+          ( flow === APPLICATION || flow === IMPLICIT || flow === ACCESS_CODE || flow === PASSWORD ) &&
           ( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
             <label htmlFor="client_id">client_id:</label>
             {
@@ -183,7 +182,7 @@ export default class Oauth2 extends React.Component {
         }
 
         {
-          ( flow === APPLICATION || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "basic") ) && <Row>
+          ( (flow === APPLICATION || flow === ACCESS_CODE || flow === PASSWORD) && <Row>
             <label htmlFor="client_secret">client_secret:</label>
             {
               isAuthorized ? <code> ****** </code>
@@ -197,7 +196,7 @@ export default class Oauth2 extends React.Component {
             }
 
           </Row>
-        }
+        )}
 
         {
           !isAuthorized && scopes && scopes.size ? <div className="scopes">

src/core/components/live-response.jsx

@@ -80,7 +80,7 @@ export default class LiveResponse extends React.Component {
           </div>
         }
         <h4>Server response</h4>
-        <table className="responses-table">
+        <table className="responses-table live-responses-table">
           <thead>
           <tr className="responses-header">
             <td className="col col_header response-col_status">Code</td>

src/core/plugins/auth/actions.js

@@ -74,28 +74,23 @@ export const authorizePassword = ( auth ) => ( { authActions } ) => {
   let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
   let form = {
     grant_type: "password",
-    scope: auth.scopes.join(scopeSeparator)
+    scope: auth.scopes.join(scopeSeparator),
+    username,
+    password
   }
   let query = {}
   let headers = {}
 
-  if ( passwordType === "basic") {
-    headers.Authorization = "Basic " + btoa(username + ":" + password)
-  } else {
-    Object.assign(form, {username}, {password})
+  switch (passwordType) {
+    case "request-body":
+      setClientIdAndSecret(form, clientId, clientSecret)
+      break
 
-    switch ( passwordType ) {
-      case "query":
-        setClientIdAndSecret(query, clientId, clientSecret)
-        break
-
-      case "request-body":
-        setClientIdAndSecret(form, clientId, clientSecret)
-        break
-
-      default:
-        headers.Authorization = "Basic " + btoa(clientId + ":" + clientSecret)
-    }
+    case "basic":
+      headers.Authorization = "Basic " + btoa(clientId + ":" + clientSecret)
+      break
+    default:
+      console.warn(`Warning: invalid passwordType ${passwordType} was passed, not including client id and secret`)
   }
 
   return authActions.authorizeRequest({ body: buildFormData(form), url: schema.get("tokenUrl"), name, headers, query, auth})