Add analytics events

src/__tests__/field/social_buttons_pane.test.jsx

@@ -16,6 +16,7 @@ describe('SocialButtonsPane', () => {
     signUp: false,
     disabled: false
   };
+
   beforeEach(() => {
     jest.resetModules();
 
@@ -37,7 +38,8 @@ describe('SocialButtonsPane', () => {
     }));
 
     jest.mock('core/index', () => ({
-      id: () => 1
+      id: () => 1,
+      emitEvent: jest.fn()
     }));
   });
 

src/connection/database/reset_password.jsx

@@ -5,6 +5,7 @@ import { authWithUsername, hasScreen } from './index';
 import { cancelResetPassword, resetPassword } from './actions';
 import { renderPasswordResetConfirmation } from './password_reset_confirmation';
 import * as i18n from '../../i18n';
+import * as l from '../../core/index';
 
 const Component = ({ i18n, model }) => {
   const headerText = i18n.html('forgotPasswordInstructions') || null;
@@ -37,7 +38,7 @@ export default class ResetPassword extends Screen {
     return i18n.str(m, 'forgotPasswordTitle');
   }
 
-  submitHandler() {
+  submitHandler(m) {
     return resetPassword;
   }
 

src/core.js

@@ -40,7 +40,13 @@ export default class Base extends EventEmitter {
       'authorization_error',
       'hash_parsed',
       'signin ready',
-      'signup ready'
+      'signup ready',
+
+      'forgot_password ready',
+      'forgot_password submit',
+      'signin submit',
+      'signup submit',
+      'federated login'
     ];
 
     this.id = idu.incremental();
@@ -125,6 +131,8 @@ export default class Base extends EventEmitter {
             l.emitEvent(m, 'signin ready');
           } else if (screen.name === 'main.signUp') {
             l.emitEvent(m, 'signup ready');
+          } else if (screen.name === 'forgotPassword') {
+            l.emitEvent(m, 'forgot_password ready');
           }
         }
         this.oldScreenName = screen.name;

src/core/index.js

@@ -217,7 +217,8 @@ function extractAuthOptions(options) {
     sso,
     state,
     nonce
-  } = options.auth || {};
+  } =
+    options.auth || {};
 
   let { oidcConformant } = options;
 

src/field/social/social_buttons_pane.jsx

@@ -6,6 +6,16 @@ import { logIn } from '../../quick-auth/actions';
 import { displayName, socialConnections, authButtonsTheme } from '../../connection/social/index';
 
 export default class SocialButtonsPane extends React.Component {
+  handleAuthButtonClick(lock, provider, isSignUp) {
+    const prov = typeof provider !== 'object' ? provider.toJS() : provider;
+
+    l.emitEvent(lock, 'federated login', {
+      ...prov,
+      action: isSignUp ? 'signup' : 'signin'
+    });
+    return logIn(l.id(lock), provider);
+  }
+
   render() {
     // TODO: i don't like that it receives the instructions tanslated
     // but it also takes the t fn
@@ -31,7 +41,7 @@ export default class SocialButtonsPane extends React.Component {
             signUp ? 'signUpWithLabel' : 'loginWithLabel',
             connectionName || displayName(x)
           )}
-          onClick={() => logIn(l.id(lock), x)}
+          onClick={() => this.handleAuthButtonClick(lock, x, signUp)}
           strategy={x.get('strategy')}
           primaryColor={primaryColor}
           foregroundColor={foregroundColor}

src/ui/box/chrome.jsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import MultisizeSlide from './multisize_slide';
 import GlobalMessage from './global_message';
+import * as l from '../../core/index';
 import Header from './header';
 
 const submitSvg =
@@ -12,6 +13,23 @@ const submitText =
   '<svg focusable="false" class="icon-text" width="8px" height="12px" viewBox="0 0 8 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Web/Submit/Active" transform="translate(-148.000000, -32.000000)" fill="#FFFFFF"><polygon id="Shape" points="148 33.4 149.4 32 155.4 38 149.4 44 148 42.6 152.6 38"></polygon></g></g></svg>';
 
 class SubmitButton extends React.Component {
+  handleSubmit() {
+    const { label, screenName, contentProps } = this.props;
+    const { model } = contentProps;
+
+    if (screenName === 'main.signUp') {
+      l.emitEvent(model, 'signup submit');
+    } else if (screenName === 'main.login') {
+      l.emitEvent(model, 'signin submit');
+    } else if (screenName === 'forgotPassword') {
+      l.emitEvent(model, 'forgot_password submit');
+    }
+
+    if (this.props.onSubmit) {
+      this.props.onSubmit(label, screenName);
+    }
+  }
+
   focus() {
     ReactDOM.findDOMNode(this).focus();
   }
@@ -30,6 +48,7 @@ class SubmitButton extends React.Component {
         className="auth0-lock-submit"
         disabled={disabled}
         style={{ backgroundColor: color }}
+        onClick={::this.handleSubmit}
         type="submit"
       >
         <div className="auth0-loading-container">
@@ -44,7 +63,10 @@ class SubmitButton extends React.Component {
 SubmitButton.propTypes = {
   color: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
-  label: PropTypes.string
+  label: PropTypes.string,
+  screenName: PropTypes.string,
+  onSubmit: PropTypes.func,
+  contentProps: PropTypes.object
 };
 
 const MESSAGE_ANIMATION_DURATION = 250;
@@ -193,6 +215,8 @@ export default class Chrome extends React.Component {
       <SubmitButton
         color={primaryColor}
         disabled={disableSubmitButton}
+        screenName={screenName}
+        contentProps={contentProps}
         key="submit"
         label={submitButtonLabel}
         ref="submit"
@@ -306,6 +330,7 @@ Chrome.propTypes = {
   isSubmitting: PropTypes.bool.isRequired,
   logo: PropTypes.string.isRequired,
   primaryColor: PropTypes.string.isRequired,
+  screenName: PropTypes.string.isRequired,
   showSubmitButton: PropTypes.bool.isRequired,
   submitButtonLabel: PropTypes.string,
   success: PropTypes.node,