Add analytics events

README.md

@@ -109,6 +109,11 @@ Lock will emit events during its lifecycle.
 - `authenticated`: emitted after a successful authentication. Has the authentication result as the only argument.
 - `authorization_error`: emitted when authorization fails. Has error as the only argument.
 - `hash_parsed`: every time a new Auth0Lock object is initialized in redirect mode (the default), it will attempt to parse the hash part of the url looking for the result of a login attempt. This is a _low level_ event for advanced use cases and _authenticated_ and _authorization_error_ should be preferred when possible. After that this event will be emitted with `null` if it couldn't find anything in the hash. It will be emitted with the same argument as the `authenticated` event after a successful login or with the same argument as `authorization_error` if something went wrong. This event won't be emitted in popup mode because there is no need to parse the url's hash part.
+- `forgot_password ready`: emitted when the "Forgot password" screen is shown.
+- `forgot_password submit`: emitted when the user clicks on the submit button of the "Forgot password" screen.
+- `signin submit`: emitted when the user clicks on the submit button of the "Login" screen.
+- `signup submit`: emitted when the user clicks on the submit button of the "Sign up" screen.
+- `federated login`: emitted when the user clicks on a social connection button. Has the connection name and the strategy as arguments. 
 
 ### show(options)
 

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/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/event.js

@@ -0,0 +1,17 @@
+import * as l from '../../core/index';
+
+export function emitFederatedLoginEvent(lock, provider, isSignUp) {
+  let prov;
+
+  try {
+    prov = provider.toJS();
+  } catch (e) {
+    prov = provider;
+  }
+
+  l.emitEvent(lock, 'federated login', {
+    name: prov.name,
+    strategy: prov.strategy,
+    action: isSignUp ? 'signup' : 'signin'
+  });
+}

src/field/social/social_buttons_pane.jsx

@@ -4,8 +4,14 @@ import AuthButton from '../../ui/button/auth_button';
 import * as l from '../../core/index';
 import { logIn } from '../../quick-auth/actions';
 import { displayName, socialConnections, authButtonsTheme } from '../../connection/social/index';
+import { emitFederatedLoginEvent } from './event';
 
 export default class SocialButtonsPane extends React.Component {
+  handleSubmit(provider, isSignUp) {
+    emitFederatedLoginEvent(this.props.lock, provider, isSignUp);
+    return logIn(l.id(this.props.lock), provider);
+  }
+
   render() {
     // TODO: i don't like that it receives the instructions tanslated
     // but it also takes the t fn
@@ -31,7 +37,7 @@ export default class SocialButtonsPane extends React.Component {
             signUp ? 'signUpWithLabel' : 'loginWithLabel',
             connectionName || displayName(x)
           )}
-          onClick={() => logIn(l.id(lock), x)}
+          onClick={() => this.handleSubmit(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,

test/social_login.test.js

@@ -2,26 +2,25 @@ import expect from 'expect.js';
 import Auth0Lock from '../src/index';
 import * as h from './helper/ui';
 
-describe("show lock connection scopes", function() {
-
+describe('show lock connection scopes', function() {
   beforeEach(function(done) {
     h.stubWebApis();
     const opts = {
       auth: {
         connectionScopes: {
-          'facebook': ['scope_1', 'scope_2']
+          facebook: ['scope_1', 'scope_2']
         }
       }
     };
-    this.lock = h.displayLock("multiple social", opts, done);
+    this.lock = h.displayLock('multiple social', opts, done);
   });
 
   afterEach(function() {
     this.lock.hide();
     h.restoreWebApis();
   });
 
-  it("should show an error flash message", function(done) {
+  it('should show an error flash message', function(done) {
     h.assertAuthorizeRedirection((lockID, options, authParams) => {
       expect(options).to.be.an('object');
       expect(options.connection).to.be('facebook');
@@ -30,7 +29,7 @@ describe("show lock connection scopes", function() {
       expect(options.connection_scope).to.contain('scope_1');
       expect(options.connection_scope).to.contain('scope_2');
       done();
-    })
+    });
     h.clickSocialConnectionButton(this.lock, 'facebook');
   });
-});
+});