Add passwordless support to prefill (#1505)

The `prefill` option makes the input text to be automatically filled with the given value. For example


#### Will initialize the email input with `foo@bar.com`
```js
prefill: {
  email: 'foo@bar.com'
}
```

#### Will initialize the phone input with `489999999`
```js
prefill: {
  phoneNumber: '489999999'
}
```

This was already supported by Auth0Lock. This PR adds support for the same behavior in Auth0LockPasswordless.

Author: luisrudge

src/__tests__/engine/passwordless.test.js

@@ -0,0 +1,54 @@
+import { mockComponent } from 'testUtils';
+const getEngine = () => require('engine/passwordless').default;
+
+jest.mock('core/error_screen', () => mockComponent('error_screen'));
+jest.mock('core/loading_screen', () => mockComponent('loading_screen'));
+jest.mock('engine/passwordless/social_or_email_login_screen', () =>
+  mockComponent('social_or_email_login_screen')
+);
+jest.mock('engine/passwordless/social_or_phone_number_login_screen', () =>
+  mockComponent('social_or_phone_number_login_screen')
+);
+jest.mock('connection/passwordless/ask_vcode', () => mockComponent('ask_vcode'));
+jest.mock('core/sso/last_login_screen', () => mockComponent('last_login_screen'));
+
+describe('Passwordless Engine', () => {
+  describe('didReceiveClientSettings calls setPrefill', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      jest.mock('core/index', () => ({
+        hasSomeConnections: () => true,
+        prefill: () => ({
+          toJS() {
+            return {
+              email: 'prefill@example.com',
+              phoneNumber: '12354'
+            };
+          }
+        })
+      }));
+      jest.mock('field/email', () => ({
+        setEmail: jest.fn(m => m)
+      }));
+      jest.mock('field/phone_number', () => ({
+        setPhoneNumber: jest.fn(m => m)
+      }));
+    });
+    it('when prefill options has `email` value', () => {
+      const engine = getEngine();
+      engine.didReceiveClientSettings('model');
+      const setEmailMockCalls = require('field/email').setEmail.mock.calls;
+      expect(setEmailMockCalls.length).toBe(1);
+      expect(setEmailMockCalls[0][0]).toBe('model');
+      expect(setEmailMockCalls[0][1]).toBe('prefill@example.com');
+    });
+    it('when prefill options has `phoneNumber` value', () => {
+      const engine = getEngine();
+      engine.didReceiveClientSettings('model');
+      const setPhoneNumberMockCalls = require('field/phone_number').setPhoneNumber.mock.calls;
+      expect(setPhoneNumberMockCalls.length).toBe(1);
+      expect(setPhoneNumberMockCalls[0][0]).toBe('model');
+      expect(setPhoneNumberMockCalls[0][1]).toBe('12354');
+    });
+  });
+});

src/engine/passwordless.js

@@ -16,6 +16,19 @@ import { isDone, isSuccess } from '../sync';
 import * as l from '../core/index';
 import { hasSkippedQuickAuth } from '../quick_auth';
 import * as sso from '../core/sso/index';
+import { setEmail } from '../field/email';
+import { setPhoneNumber } from '../field/phone_number';
+
+const setPrefill = m => {
+  const { email, phoneNumber } = l.prefill(m).toJS();
+  if (typeof email === 'string') {
+    m = setEmail(m, email);
+  }
+  if (typeof phoneNumber === 'string') {
+    m = setPhoneNumber(m, phoneNumber);
+  }
+  return m;
+};
 
 class Passwordless {
   didInitialize(m, opts) {
@@ -36,6 +49,7 @@ class Passwordless {
       error.code = 'no_connection';
       m = l.stop(m, error);
     }
+    m = setPrefill(m);
 
     return m;
   }
@@ -80,15 +94,6 @@ class Passwordless {
     } else {
       return passwordlessStarted(m) ? new VcodeScreen() : new SocialOrPhoneNumberLoginScreen();
     }
-
-    setTimeout(() => {
-      const stopError = new Error('Internal error');
-      stopError.code = 'internal_error';
-      stopError.description = "Couldn't find a screen to render";
-      swap(updateEntity, 'lock', l.id(m), l.stop, stopError);
-    }, 0);
-
-    return new ErrorScreen();
   }
 }
 

support/index.html

@@ -117,7 +117,8 @@ <h1 class="navbar-brand">
       usernameStyle: 'email',
       defaultDatabaseConnection: 'acme',
       prefill: {
-        email: 'johnfoo@gmail.com'
+        email: 'johnfoo@gmail.com',
+        phoneNumber: '48999999999'
       },
       passwordlessMethod: 'code',
       allowedConnections: ['email', 'acme', 'twitter']