[SDK-1374] Email input now uses type="email" (auth0#1802)

* Adjusted email input to use the type='email' attribute

* Added render test for email_input

src/__tests__/ui/input/__snapshots__/email_input.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmailInput renders without issue 1`] = `"<div data-__type=\\"input_wrap\\" data-invalidhint=\\"invalidHint\\" data-isvalid=\\"true\\" data-name=\\"email\\" data-icon=\\"<svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; width=&quot;14px&quot; height=&quot;13px&quot; viewBox=&quot;0 0 32 26&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xmlns:sketch=&quot;http://www.bohemiancoding.com/sketch/ns&quot; class=&quot;auth0-lock-icon auth0-lock-icon-box&quot;><g id=&quot;Page-1&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot; sketch:type=&quot;MSPage&quot;><g id=&quot;32px&quot; sketch:type=&quot;MSLayerGroup&quot; transform=&quot;translate(-2155.000000, -2317.000000)&quot; fill=&quot;#373A39&quot;><g id=&quot;Group-856&quot; transform=&quot;translate(1.000000, 1.000000)&quot; sketch:type=&quot;MSShapeGroup&quot;><path id=&quot;Fill-419&quot; d=&quot;M2184,2339 C2184,2339.55 2183.55,2340 2183,2340 L2157,2340 C2156.45,2340 2156,2339.55 2156,2339 L2156,2319 C2156,2318.45 2156.45,2318 2157,2318 L2183,2318 C2183.55,2318 2184,2318.45 2184,2319 L2184,2339 L2184,2339 Z M2184,2316 L2156,2316 C2154.89,2316 2154,2316.89 2154,2318 L2154,2340 C2154,2341.1 2154.89,2342 2156,2342 L2184,2342 C2185.1,2342 2186,2341.1 2186,2340 L2186,2318 C2186,2316.89 2185.1,2316 2184,2316 L2184,2316 Z M2176,2322 L2180,2322 L2180,2326 L2176,2326 L2176,2322 Z M2174,2328 L2182,2328 L2182,2320 L2174,2320 L2174,2328 Z M2158,2332 L2172,2332 L2172,2330 L2158,2330 L2158,2332 Z M2158,2336 L2172,2336 L2172,2334 L2158,2334 L2158,2336 Z&quot;></path></g></g></g></svg>\\"><input type=\\"email\\" id=\\"1-email\\" inputmode=\\"email\\" name=\\"email\\" class=\\"auth0-lock-input\\" placeholder=\\"[email protected]\\" autocomplete=\\"off\\" autocapitalize=\\"off\\" aria-label=\\"Email\\" aria-invalid=\\"false\\" value=\\"value\\"></div>"`;

src/__tests__/ui/input/email_input.test.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { expectComponent } from 'testUtils';
+
+import { mockComponent } from 'testUtils';
+import { extractPropsFromWrapper } from '../../testUtils';
+
+jest.mock('ui/input/input_wrap', () => mockComponent('input_wrap'));
+
+const getComponent = () => require('ui/input/email_input').default;
+
+describe('EmailInput', () => {
+  const defaultProps = {
+    autoComplete: false,
+    invalidHint: 'invalidHint',
+    isValid: true,
+    onChange: jest.fn(),
+    value: 'value',
+    lockId: 1
+  };
+
+  test('renders without issue', () => {
+    const Input = getComponent();
+    const component = mount(<Input {...defaultProps} />);
+
+    expect(component.html()).toMatchSnapshot();
+  });
+});

src/ui/input/email_input.jsx

@@ -37,7 +37,7 @@ export default class EmailInput extends React.Component {
         <input
           id={`${lockId}-email`}
           ref="input"
-          type="text"
+          type="email"
           inputMode="email"
           name="email"
           className="auth0-lock-input"