Added checkbox CustomInput for additionalSignUpFields (auth0#860)

README.md

@@ -368,6 +368,23 @@ var options = {
 }
 ```
 
+
+##### Checkbox field
+
+To specify a checkbox field use: `type: "checkbox"`
+The `prefill` value can determine the default state of the checkbox and it is required.
+
+```js
+var options = {
+  additionalSignUpFields: [{
+    type: "checkbox",
+    name: "newsletter",
+    prefill: "true",
+    placeholder: "I hereby agree that I want to receive marketing emails from your company",
+  }]
+}
+```
+
 #### Avatar provider
 
 Lock can show avatars fetched from anywhere. A custom avatar provider can be specified with the `avatar` option by passing an object with the keys `url` and `displayName`. Both properties are functions that take an email and a callback function.

css/index.styl

@@ -386,7 +386,19 @@ tabsHeight = 40px
   .auth0-lock-error .auth0-lock-input-wrap
     border-color red
     transition .3s ease-in-out
-
+  .auth0-lock-input-checkbox
+    text-align left
+    display block
+    font-size 12px
+    color rgba(0,0,0,0.54)
+    line-height 22px
+    position relative
+    label input
+      float left
+      margin-top 5px
+    span
+      display block
+      margin-left 20px
 
   // Social
 

src/__tests__/field/__snapshots__/custom_input.test.jsx.snap

@@ -1,4 +1,20 @@
-exports[`CustomInput when type !== select calls \`changeField\` when changed 1`] = `
+exports[`CustomInput when type == checkbox renders correctly as a CheckBoxInput 1`] = `
+<div
+  className="auth0-lock-input-checkbox">
+  <label>
+    <input
+      checked={false}
+      name="custom_input"
+      onChange={[Function]}
+      type="checkbox" />
+    <span>
+      placeholder
+    </span>
+  </label>
+</div>
+`;
+
+exports[`CustomInput when type == input calls \`changeField\` when changed 1`] = `
 Array [
   1,
   "custom_input",
@@ -7,7 +23,7 @@ Array [
 ]
 `;
 
-exports[`CustomInput when type !== select renders correctly as a TextInput 1`] = `
+exports[`CustomInput when type == input renders correctly as a TextInput 1`] = `
 <div
   data-__type="text_input"
   data-iconUrl="iconUrl"
@@ -19,7 +35,7 @@ exports[`CustomInput when type !== select renders correctly as a TextInput 1`] =
   data-value="field-value-custom_input" />
 `;
 
-exports[`CustomInput when type !== select sets isValid as true when \`isFieldVisiblyInvalid\` is false 1`] = `
+exports[`CustomInput when type == input sets isValid as true when \`isFieldVisiblyInvalid\` is false 1`] = `
 <div
   data-__type="text_input"
   data-iconUrl="iconUrl"

src/__tests__/field/custom_input.test.jsx

@@ -75,7 +75,7 @@ describe('CustomInput', () => {
       expect(mock.calls[0]).toMatchSnapshot();
     });
   });
-  describe('when type !== select', () => {
+  describe('when type == input', () => {
     beforeEach(() => defaultProps.type = 'input');
     it('renders correctly as a TextInput', () => {
       const CustomInput = getComponent();
@@ -109,4 +109,17 @@ describe('CustomInput', () => {
       expect(mock.calls[0]).toMatchSnapshot();
     });
   });
+  describe('when type == checkbox', () => {
+    beforeEach(() => defaultProps.type = 'checkbox');
+    it('renders correctly as a CheckBoxInput', () => {
+      const CustomInput = getComponent();
+
+      expectComponent(
+          <CustomInput
+              {...defaultProps}
+          />
+      ).toMatchSnapshot();
+    });
+  });
+
 });

src/connection/database/index.js

@@ -108,7 +108,7 @@ function processDatabaseOptions(opts) {
         prefill = undefined;
       }
 
-      const types = ["select", "text"];
+      const types = ["select", "text", "checkbox"];
       if (type != undefined && (typeof type != "string" || types.indexOf(type) === -1)) {
         l.warn(opts, `When provided, the \`type\` property of an element of \`additionalSignUpFields\` must be one of the following strings: "${types.join("\", \"")}".`);
         type = undefined;

src/field/custom_input.jsx

@@ -8,6 +8,7 @@ import {
 } from './index';
 import TextInput from '../ui/input/text_input';
 import SelectInput from '../ui/input/select_input';
+import CheckboxInput from '../ui/input/checkbox_input';
 import * as l from '../core/index';
 
 const CustomInput = ({iconUrl, model, name, placeholder, type, validator}) => {
@@ -16,7 +17,7 @@ const CustomInput = ({iconUrl, model, name, placeholder, type, validator}) => {
     isValid: !isFieldVisiblyInvalid(model, name),
     name,
     placeholder
-  }
+  };
 
   switch(type) {
     case "select":
@@ -27,6 +28,14 @@ const CustomInput = ({iconUrl, model, name, placeholder, type, validator}) => {
           onClick={() => startOptionSelection(l.id(model), name, iconUrl)}
         />
       );
+    case "checkbox":
+      return (
+          <CheckboxInput
+              onChange={e => changeField(l.id(model), name, `${e.target.checked}`, validator)}
+              checked={getFieldValue(model, name)}
+              {...props}
+        />
+      );
     default:
       return (
         <TextInput

src/ui/input/checkbox_input.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import InputWrap from './input_wrap';
+
+export default class CheckboxInput extends React.Component {
+    render() {
+        const {
+            name,
+            placeholder,
+            checked
+        } = this.props;
+        return (
+            <div className="auth0-lock-input-checkbox">
+                <label>
+                    <input
+                        type="checkbox"
+                        checked={checked === 'true'}
+                        onChange={::this.handleOnChange}
+                        name={name} />
+                    <span>{placeholder}</span>
+                </label>
+            </div>
+        );
+    }
+
+    handleOnChange(e) {
+        if (this.props.onChange) {
+            this.props.onChange(e);
+        }
+    }
+}

support/design/index.html

@@ -313,6 +313,18 @@ <h2>socialOrSms</h2>
   <div class="lock-container" id="socialOrSms-container"></div>
 </div> -->
 
+<div class="container">
+  <div class="info">
+    <h2>Classic</h2>
+    <h3>Custom Signup Field</h3>
+    <p>
+      Use checkbox custom input
+    </p>
+
+  </div>
+  <div class="lock-container" id="custom-sign-up-container"></div>
+</div>
+
 <script src="/build/lock.design.js"></script>
 <script>
  var cid = "1";
@@ -547,4 +559,19 @@ <h2>socialOrSms</h2>
  //   container: "socialOrSms-container",
  //   rememberLastLogin: false
  // }).show();
+
+ new Auth0Lock(cid, domain, {
+       allowedConnections: ["Username-Password-Authentication", "auth0.com", "rolodato"],
+     auth: { redirect: true, sso: false },
+     container: "custom-sign-up-container",
+     initialScreen: "signUp",
+     rememberLastLogin: false,
+     additionalSignUpFields: [{
+         type: "checkbox",
+         name: "newsletter",
+         prefill: "false",
+         placeholder: "I hereby agree that I want to receive marketing emails from your company",
+     }],
+ }).show();
+
 </script>