Enable Fauxton to authenticate to CouchDB with a JWT access token

app/addons/auth/actions.js

@@ -9,103 +9,119 @@
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
-import FauxtonAPI from "../../core/api";
-import app from "../../app";
+import FauxtonAPI from '../../core/api';
+import app from '../../app';
 import ActionTypes from './actiontypes';
 import Api from './api';
+import Idp from './idp';
 
-const {
-  AUTH_HIDE_PASSWORD_MODAL,
-} = ActionTypes;
+const { AUTH_HIDE_PASSWORD_MODAL } = ActionTypes;
 
 const errorHandler = ({ message }) => {
   FauxtonAPI.addNotification({
     msg: message,
-    type: "error"
+    type: 'error'
   });
 };
 
 const validate = (...predicates) => {
-  return predicates.every(isTrue => isTrue);
+  return predicates.every((isTrue) => isTrue);
 };
 
 export const validateUser = (username, password) => {
   return validate(!_.isEmpty(username), !_.isEmpty(password));
 };
 
+export const validateIdP = (idpurl, idpcallback, idpappid) => {
+  return validate(!_.isEmpty(idpurl), !_.isEmpty(idpcallback), !_.isEmpty(idpappid));
+};
+
 export const validatePasswords = (password, passwordConfirm) => {
-  return validate(
-    !_.isEmpty(password),
-    !_.isEmpty(passwordConfirm),
-    password === passwordConfirm
-  );
+  return validate(!_.isEmpty(password), !_.isEmpty(passwordConfirm), password === passwordConfirm);
 };
 
 export const login = (username, password, urlBack) => {
   if (!validateUser(username, password)) {
-    return errorHandler({message: app.i18n.en_US['auth-missing-credentials']});
+    return errorHandler({ message: app.i18n.en_US['auth-missing-credentials'] });
   }
 
-  return Api.login({name: username, password})
-    .then(resp => {
+  return Api.login({ name: username, password })
+    .then((resp) => {
       if (resp.error) {
-        errorHandler({message: resp.reason});
+        errorHandler({ message: resp.reason });
         return resp;
       }
 
       let msg = app.i18n.en_US['auth-logged-in'];
       if (msg) {
-        FauxtonAPI.addNotification({msg});
+        FauxtonAPI.addNotification({ msg });
       }
 
-      if (urlBack && !urlBack.includes("login")) {
+      if (urlBack && !urlBack.includes('login')) {
         return FauxtonAPI.navigate(urlBack);
       }
-      FauxtonAPI.navigate("/");
+      FauxtonAPI.navigate('/');
+    })
+    .catch(errorHandler);
+};
+
+export const loginidp = (idpurl, idpcallback, idpappid) => {
+  if (!validateIdP(idpurl, idpcallback, idpappid)) {
+    return errorHandler({ message: app.i18n.en_US['auth-missing-idp'] });
+  }
+  return Idp.login(idpurl, idpcallback, idpappid)
+    .then((resp) => {
+      if (resp.error) {
+        errorHandler({ message: resp.reason });
+        return resp;
+      }
+
+      let msg = app.i18n.en_US['auth-logged-in'];
+      if (msg) {
+        FauxtonAPI.addNotification({ msg });
+      }
+
+      FauxtonAPI.navigate('/');
     })
     .catch(errorHandler);
 };
 
 export const changePassword = (username, password, passwordConfirm, nodes) => () => {
   if (!validatePasswords(password, passwordConfirm)) {
-    return errorHandler({message: app.i18n.en_US['auth-passwords-not-matching']});
+    return errorHandler({ message: app.i18n.en_US['auth-passwords-not-matching'] });
   }
   //To change an admin's password is the same as creating an admin. So we just use the
   //same api function call here.
   Api.createAdmin({
     name: username,
     password,
     node: nodes[0].node
-  }).then(
-    () => {
-      FauxtonAPI.addNotification({
-        msg: app.i18n.en_US["auth-change-password"]
-      });
-    },
-    errorHandler
-  );
+  }).then(() => {
+    FauxtonAPI.addNotification({
+      msg: app.i18n.en_US['auth-change-password']
+    });
+  }, errorHandler);
 };
 
 export const createAdmin = (username, password, loginAfter, nodes) => () => {
   const node = nodes[0].node;
   if (!validateUser(username, password)) {
-    return errorHandler({message: app.i18n.en_US['auth-missing-credentials']});
+    return errorHandler({ message: app.i18n.en_US['auth-missing-credentials'] });
   }
 
-  Api.createAdmin({name: username, password, node})
-    .then(resp => {
-      if (resp.error) {
-        return errorHandler({message: `${app.i18n.en_US['auth-admin-creation-failed-prefix']} ${resp.reason}`});
-      }
-
-      FauxtonAPI.addNotification({
-        msg: app.i18n.en_US['auth-admin-created']
-      });
+  Api.createAdmin({ name: username, password, node }).then((resp) => {
+    if (resp.error) {
+      return errorHandler({ message: `${app.i18n.en_US['auth-admin-creation-failed-prefix']} ${resp.reason}` });
+    }
 
-      if (loginAfter) {
-        return FauxtonAPI.navigate("/login");
-      }
+    FauxtonAPI.addNotification({
+      msg: app.i18n.en_US['auth-admin-created']
     });
+
+    if (loginAfter) {
+      return FauxtonAPI.navigate('/login');
+    }
+  });
 };
 
 // simple authentication method - does nothing other than check creds
@@ -116,15 +132,15 @@ export const authenticate = (username, password, onSuccess) => {
   })
     .then((resp) => {
       if (resp.error) {
-        throw (resp);
+        throw resp;
       }
       hidePasswordModal();
       onSuccess(username, password);
     })
     .catch(() => {
       FauxtonAPI.addNotification({
-        msg: "Your username or password is incorrect.",
-        type: "error",
+        msg: 'Your username or password is incorrect.',
+        type: 'error',
         clear: true
       });
     });
@@ -135,7 +151,7 @@ export const hidePasswordModal = () => {
 };
 
 export const logout = () => {
-  FauxtonAPI.addNotification({ msg: "You have been logged out." });
+  FauxtonAPI.addNotification({ msg: 'You have been logged out.' });
   Api.logout()
     .then(Api.getSession)
     .then(() => FauxtonAPI.navigate('/'))

app/addons/auth/components/index.js

@@ -11,12 +11,14 @@
 // the License.
 
 import LoginForm from './loginform.js';
+import LoginFormIdp from './loginformidp.js';
 import PasswordModal from './passwordmodal.js';
 import CreateAdminForm from './createadminform.js';
 import ChangePasswordForm from './changepasswordform.js';
 
 export default {
   LoginForm,
+  LoginFormIdp,
   PasswordModal,
   CreateAdminForm,
   ChangePasswordForm

app/addons/auth/components/loginform.js

@@ -12,23 +12,24 @@
 
 import PropTypes from 'prop-types';
 
-import React from "react";
-import { login } from "./../actions";
+import FauxtonAPI from '../../../core/base';
+import React from 'react';
+import { login } from './../actions';
 import { Button, Form } from 'react-bootstrap';
 
 class LoginForm extends React.Component {
   constructor() {
     super();
     this.state = {
-      username: "",
-      password: ""
+      username: '',
+      password: ''
     };
   }
   onUsernameChange(e) {
-    this.setState({username: e.target.value});
+    this.setState({ username: e.target.value });
   }
   onPasswordChange(e) {
-    this.setState({password: e.target.value});
+    this.setState({ password: e.target.value });
   }
 
   submit(e) {
@@ -37,26 +38,29 @@ class LoginForm extends React.Component {
       this.login(this.state.username, this.state.password);
     }
   }
+
   // Safari has a bug where autofill doesn't trigger a change event. This checks for the condition where the state
   // and form fields have a mismatch. See: https://issues.apache.org/jira/browse/COUCHDB-2829
   checkUnrecognizedAutoFill() {
-    if (this.state.username !== "" || this.state.password !== "") {
+    if (this.state.username !== '' || this.state.password !== '') {
       return false;
     }
-    let username = this.props.testBlankUsername
-      ? this.props.testBlankUsername
-      : this.usernameField.value;
-    let password = this.props.testBlankPassword
-      ? this.props.testBlankPassword
-      : this.passwordField.value;
+    let username = this.props.testBlankUsername ? this.props.testBlankUsername : this.usernameField.value;
+    let password = this.props.testBlankPassword ? this.props.testBlankPassword : this.passwordField.value;
     this.setState({ username: username, password: password }); // doesn't set immediately, hence separate login() call
     this.login(username, password);
 
     return true;
   }
+
   login(username, password) {
     login(username, password, this.props.urlBack);
   }
+
+  navigateToIdp(e) {
+    e.preventDefault();
+    FauxtonAPI.navigate('/loginidp');
+  }
   componentDidMount() {
     this.usernameField.focus();
   }
@@ -66,27 +70,29 @@ class LoginForm extends React.Component {
         <form id="login" onSubmit={this.submit.bind(this)}>
           <div className="row">
             <div className="col12 col-md-5 col-xl-4 mb-3">
-              <label>
-                Enter your username and password
-              </label>
-              <Form.Control type="text"
+              <label>Enter your username and password</label>
+              <Form.Control
+                type="text"
                 id="username"
                 name="username"
-                ref={node => this.usernameField = node}
+                ref={(node) => (this.usernameField = node)}
                 placeholder="Username"
                 onChange={this.onUsernameChange.bind(this)}
-                value={this.state.username} />
+                value={this.state.username}
+              />
             </div>
           </div>
           <div className="row">
             <div className="col12 col-md-5 col-xl-4 mb-3">
-              <Form.Control type="password"
+              <Form.Control
+                type="password"
                 id="password"
                 name="password"
-                ref={node => this.passwordField = node}
+                ref={(node) => (this.passwordField = node)}
                 placeholder="Password"
                 onChange={this.onPasswordChange.bind(this)}
-                value={this.state.password} />
+                value={this.state.password}
+              />
             </div>
           </div>
           <div className="row">
@@ -97,13 +103,20 @@ class LoginForm extends React.Component {
             </div>
           </div>
         </form>
+        <div className="row">
+          <div className="col12 col-md-5 col-xl-4 mb-3">
+            <Button id="login-idp-btn" variant="cf-secondary" onClick={this.navigateToIdp}>
+              Log In with your Identity Provider
+            </Button>
+          </div>
+        </div>
       </div>
     );
   }
 }
 
 LoginForm.defaultProps = {
-  urlBack: ""
+  urlBack: ''
 };
 
 LoginForm.propTypes = {