Let each mode render the Lock

src/lock/lock.jsx

@@ -17,7 +17,7 @@ export default class Lock extends React.Component {
   }
 
   render() {
-    const { backHandler, closeHandler, mainPane, mainPaneKey, lock, submitHandler, disallowClose } = this.props;
+    const { backHandler, children, closeHandler, lock, submitHandler, disallowClose } = this.props;
 
     const overlay = l.ui.appendContainer(lock) ?
       <div className="auth0-lock-overlay"/> : null;
@@ -46,7 +46,7 @@ export default class Lock extends React.Component {
             {backHandler && <IconButton name="back" onClick={::this.handleBack} />}
             <div className="auth0-lock-widget-container">
               <ReactCSSTransitionGroup transitionName="horizontal-fade">
-                <this.props.mainPane key={mainPaneKey} lock={lock} />
+                {children}
               </ReactCSSTransitionGroup>
             </div>
             <a href="https://auth0.com/" target="_blank" className="auth0-lock-badge auth0-lock-icon"/>

src/lock/renderer.js

@@ -19,8 +19,7 @@ export default class Renderer {
       lock = lock.set("gravatar", gravatar && g.loaded(gravatar) ? gravatar : null);
       const container = this.containerManager.ensure(l.ui.containerID(lock), l.ui.appendContainer(lock));
       const renderFn = fns.get(l.mode(lock));
-      const spec = renderFn(lock)
-      React.render(<Lock lock={lock} {...spec} />, container);
+      React.render(renderFn(lock), container);
     });
   }
 }

src/passwordless-email/render.js

@@ -3,7 +3,8 @@ import AskVcode from './ask_vcode';
 import { close, reset, requestPasswordlessEmail, signIn } from './actions';
 import * as l from '../lock/index';
 import * as m from './index';
-
+import Lock from '../lock/lock';
+import React from 'react';
 
 function askEmailSubmitHandler(lock) {
   requestPasswordlessEmail(l.id(lock));
@@ -18,20 +19,20 @@ function backHandler(lock) {
 }
 
 export default function render(lock) {
-  if (m.isSendLink(lock)) {
-    return {
-      closeHandler: close,
-      mainPane: AskEmail,
-      mainPaneKey: "ask-email",
-      submitHandler: !m.emailSent(lock) && askEmailSubmitHandler
-    };
-  } else {
-    return {
-      backHandler: m.emailSent(lock) ? backHandler : null,
-      closeHandler: close,
-      mainPane: m.emailSent(lock) ? AskVcode : AskEmail,
-      mainPaneKey: m.emailSent(lock) ? "ask-vcode" : "ask-email",
-      submitHandler: m.emailSent(lock) ? askVcodeSubmitHandler : askEmailSubmitHandler
-    };
-  }
+  const children = m.isSendLink(lock) || !m.emailSent(lock) ?
+    <AskEmail lock={lock} key="ask-email" /> :
+    <AskVcode lock={lock} key="ask-vcode" />;
+
+  const submitHandler = !m.emailSent(lock) ?
+    askEmailSubmitHandler : !m.isSendLink(lock) && askVcodeSubmitHandler;
+
+  const props = {
+    backHandler: !m.isSendLink(lock) && m.emailSent(lock) ? backHandler : null,
+    children: children,
+    closeHandler: close,
+    lock: lock,
+    submitHandler: submitHandler
+  };
+
+  return <Lock {...props} />;
 }

src/passwordless-sms/render.js

@@ -1,8 +1,10 @@
-import askPhoneNumber from './ask_phone_number';
-import askVcode from './ask_vcode';
+import AskPhoneNumber from './ask_phone_number';
+import AskVcode from './ask_vcode';
 import { close, reset, sendSMS, signIn } from './actions';
 import * as l from '../lock/index';
 import * as m from './index';
+import Lock from '../lock/lock';
+import React from 'react';
 
 function askPhoneNumberSubmitHandler(lock) {
   sendSMS(l.id(lock));
@@ -17,12 +19,18 @@ function backHandler(lock) {
 }
 
 export default function render(lock) {
-  return {
+  const children = m.smsSent(lock) ?
+    <AskVcode lock={lock} key="ask-vcode" /> :
+    <AskPhoneNumber lock={lock} key="ask-phone-number" />;
+
+  const props = {
     backHandler: m.smsSent(lock) ? backHandler : undefined,
     closeHandler: close,
-    mainPane: m.smsSent(lock) ? askVcode : askPhoneNumber,
-    mainPaneKey: m.smsSent(lock) ? "ask-vcode" : "ask-phone-number",
+    children: children,
     disallowClose: m.selectingLocation(lock),
+    lock: lock,
     submitHandler: m.smsSent(lock) ? askVcodeSubmitHandler : askPhoneNumberSubmitHandler
-  }
+  };
+
+  return <Lock {...props} />;
 }