Add ability to customise VerifyEmailView

src/components/VerifyEmailView.js

@@ -1,53 +1,103 @@
-import React from 'react';
+import React, {Component, PropTypes} from 'react';
+import keyMirror from 'keymirror';
 
 import utils from '../utils';
 import LoginLink from '../components/LoginLink';
 import UserActions from '../actions/UserActions';
 
-export default class VerifyEmailView extends React.Component {
-  state = {
-    status: 'VERIFYING'
+const verificationStatus = keyMirror({
+  VERIFYING: null,
+  VERIFIED: null,
+  ERROR: null
+});
+
+class DefaultVerifyEmailView extends Component {
+  static propTypes = {
+    status: PropTypes.string.isRequired,
   };
 
-  componentDidMount() {
-    var spToken = this.props.spToken;
-
-    UserActions.verifyEmail(spToken, (err) => {
-      if (err) {
-        this.setState({
-          status: 'ERROR'
-        });
-      } else {
-        this.setState({
-          status: 'VERIFIED'
-        });
-      }
-    });
+  _getContent() {
+    switch (this.props.status) {
+      case verificationStatus.VERIFYING:
+        return (
+          <p className="alert alert-warning">We are verifying your account.</p>
+        );
+      case verificationStatus.VERIFIED:
+        return (
+          <p className="alert alert-success">
+            Your account has has been verified! <LoginLink>Login Now.</LoginLink>
+          </p>
+        );
+      case verificationStatus.ERROR:
+        return (
+          <div className="alert alert-danger">
+            This email verification link is not valid.
+          </div>
+        );
+      default:
+        return null;
+    }
   }
 
   render() {
-    let selectedProps = utils.excludeProps(['className','spToken'], this.props);
+    const selectedProps = utils.excludeProps(['className','status'], this.props)
 
     return (
       <div className={"row " + this.props.className} {...selectedProps}>
         <div className="col-sm-offset-4 col-xs-12 col-sm-4">
-          {{
-            VERIFYING: (
-              <p className="alert alert-warning">We are verifying your account.</p>
-            ),
-            VERIFIED: (
-              <p className="alert alert-success">
-                Your account has has been verified! <LoginLink>Login Now.</LoginLink>
-              </p>
-            ),
-            ERROR: (
-              <div className="alert alert-danger">
-                This email verification link is not valid.
-              </div>
-            )
-          }[this.state.status]}
+          {this._getContent()}
         </div>
       </div>
     );
   }
 }
+
+export default class VerifyEmailView extends Component {
+
+  static propTypes = {
+    children: PropTypes.element
+  };
+
+  state = {
+    status: verificationStatus.VERIFYING
+  };
+
+  componentDidMount() {
+    UserActions.verifyEmail(this.props.spToken, (err) => {
+      const status = this.err
+        ? verificationStatus.ERROR
+        : verificationStatus.VERIFIED;
+
+      this.setState({
+        status
+      });
+    });
+  }
+
+  _spIfHandler(action) {
+    const test = /\s*status\s*(===?|\!==?)\s*[\'\"](\w+)[\'\"]\s*/i;
+    const matches = action.match(test);
+
+    if (!matches) {
+      return true;
+    }
+
+    const inverted = matches[1][0] === '!';
+    const isSame = this.state.status === matches[2];
+
+    return inverted ? !isSame : isSame;
+  }
+
+  render() {
+    const childProps = utils.excludeProps(
+      ['className', 'spToken', 'children'],
+      {...this.props, ...this.state}
+    );
+
+    if (this.props.children) {
+      return utils.makeView(this, this._spIfHandler.bind(this));
+    }
+
+    return (<DefaultVerifyEmailView {...childProps} />);
+  }
+}

src/utils.js

@@ -6,6 +6,10 @@ let jwtExpression = /^[a-zA-Z0-9+/_=-]+\.[a-zA-Z0-9+/_=-]+\.[a-zA-Z0-9+/_=-]+$/;
 class Utils {
   nopElement = <span />;
 
+  noop(arg) {
+    return arg;
+  }
+
   uuid() {
     var s4 = () => Math.floor((1 + Math.random()) * 0x10000)
       .toString(16).substring(1);
@@ -215,17 +219,9 @@ class Utils {
     }
   }
 
-  makeForm(source, fieldMapFn, spIfFn, spBindFn) {
-    var root = React.cloneElement(<div />, {}, source.props.children);
-    var fieldMap = this.getFormFieldMap(root, fieldMapFn);
-
-    source.state.fields = source.state.fields || {};
-
-    for (var key in fieldMap.defaultValues) {
-      this.setFieldValue(source.state.fields, key, fieldMap.defaultValues[key]);
-    }
+  makeElementFactory(spIfFn, spBindFn) {
 
-    var elementFactory = (element, parent) => {
+    return (element, parent) => {
       if (element.props) {
         var spIf = this.takeProp(element.props, 'spIf', 'data-spIf');
 
@@ -260,8 +256,40 @@ class Utils {
           }
         }
       }
-      return element;
+
+      if (typeof element === 'string') {
+        return element;
+      }
+
+      const newChildren = element.props.children || {};
+
+      return React.createElement(
+        element.type,
+        this.excludeProps(['spIf', 'data-spIf'], element.props),
+        ...newChildren
+      );
     };
+  }
+
+  makeView(source, spIfFn, spBindFn = this.noop) {
+    const root = React.cloneElement(<div />, {}, source.props.children);
+    const elementFactory = this.makeElementFactory(spIfFn, spBindFn);
+    const optionsFactory = () => ({});
+
+    return this.buildElementTree(root, optionsFactory, elementFactory);
+  }
+
+  makeForm(source, fieldMapFn, spIfFn, spBindFn) {
+    var root = React.cloneElement(<div />, {}, source.props.children);
+    var fieldMap = this.getFormFieldMap(root, fieldMapFn);
+
+    source.state.fields = source.state.fields || {};
+
+    for (var key in fieldMap.defaultValues) {
+      this.setFieldValue(source.state.fields, key, fieldMap.defaultValues[key]);
+    }
+
+    const elementFactory = this.makeElementFactory(spIfFn, spBindFn);
 
     var optionsFactory = (element, parent) => {
       var options = {};