initial step 4 for online test

web/src/components/Contact.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import {Button, TextField} from 'react-md';
+import '../css/Intent.css'
+import {EMAIL_MAX_LENGTH} from '../config';
+
+class Contact extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {contactEmail: props.contactEmail};
+
+    this.handleEmailEdit = this.handleEmailEdit.bind(this);
+  }
+
+  componentWillReceiveProps(props){
+    this.setState({contactEmail: props.contactEmail});
+  }
+
+  render() {
+    return (
+      <div className="LaunchRequestBox">
+        <h5 style={{textAlign:'left', marginTop: '30px', marginLeft: '20px'}}> Contact address will be used for direct messaging through Alexa </h5>
+        <TextField
+          id="contact email"
+          lineDirection="center"
+          label="Contact email"
+          className="md-cell md-cell--bottom"
+          style={{width:'60%', marginLeft: '20px'}}
+          maxLength={EMAIL_MAX_LENGTH}
+          onChange={this.handleEmailEdit}
+          value={this.state.contactEmail}/>
+        <br></br>
+        <br></br>
+        <br></br>
+        <Button style={{float:'right', marginRight: '20px'}} flat primary swapTheming 
+                onClick={()=>{this.props.onSaveEmailClick(this.state.contactEmail)}}
+                disabled={this.props.waiting}>Save</Button>
+      </div>
+    );
+  }
+
+  handleEmailEdit(e){
+    if (e.length === EMAIL_MAX_LENGTH) return;
+    this.setState({contactEmail: e});
+  }
+}
+
+export default Contact;

web/src/components/IntentList.js

@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 import {Button} from 'react-md';
 import IntentItem from './IntentItem';
 import '../css/Intent.css'
+import {
+    LAUNCH_REQUEST_SELECTED_INDEX,
+    CONTACT_SELECTED_INDEX} from '../config'
 
 class IntentList extends Component {
     constructor (props){
@@ -17,9 +20,15 @@ class IntentList extends Component {
     render() {
         return (
             <div className="IntentList">
-                <Button className={this.props.selectedIndex===-2 ? "LaunchRequest-selected" : "LaunchRequest"} flat primary 
+                <Button className={this.props.selectedIndex===LAUNCH_REQUEST_SELECTED_INDEX ? "LaunchRequest-selected" : "LaunchRequest"} flat primary 
                         onClick={this.props.onLaunchRequestClick}
                         disabled={this.props.waiting} >Launch request</Button>
+
+                <Button className={this.props.selectedIndex===CONTACT_SELECTED_INDEX ? "Contact-selected" : "Contact"} flat primary 
+                        onClick={this.props.onContactClick}
+                        disabled={this.props.waiting} >Contact</Button>
+                
+                
                 <div className="IntentList-title">
                     <h3>Intents</h3>
                 </div>