Merge branch 'master' of https://github.com/AppStateESS/InternshipInv…

…entory

javascript/emergencyContact/EmgContactList.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import {Button, Modal} from 'react-bootstrap';
-
+import Message from './Message.jsx';
 
 
 // !!The internshipId variable is important!!
@@ -17,19 +17,81 @@ import {Button, Modal} from 'react-bootstrap';
 class ModalForm extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {showError: false};
 
+        this.state = {
+            showError: false,
+            warningMsg: '',
+            isInternational: false
+        };
+
+        this.formatPhone = this.formatPhone.bind(this);
+        this.formatEmail = this.formatEmail.bind(this);
         this.handleSave = this.handleSave.bind(this);
+        this.handleExit = this.handleExit.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+    }
+    componentDidMount() {
+        let cChecked;
+        if (this.props.phone !== undefined && this.props.phone.charAt(0) !== '('){
+            cChecked = true;
+        } else {
+            cChecked = false;
+        }
+        this.setState({
+            isInternational: cChecked
+        })
+    }
+    formatPhone(event) {
+        var input = event.target.value;
+        // Strip all characters from the input except digits
+        input = input.replace(/\D/g,'');
+
+        if (!this.state.isInternational){
+          // Trim the remaining input to ten characters, to preserve phone number format
+          input = input.substring(0,10);
+
+          // Based upon the length of the string, we add formatting as necessary
+          var size = input.length;
+          if(size === 0){
+            input = '';
+          }else if(size < 4){
+            input = '('+input;
+          }else if(size < 7){
+            input = '('+input.substring(0,3)+') '+input.substring(3,6);
+          }else{
+            input = '('+input.substring(0,3)+') '+input.substring(3,6)+' - '+input.substring(6,10);
+          }
+        }
+        event.target.value = input
+    }
+    formatEmail(input) {
+        var exp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+        return exp.test(input)
     }
     handleSave() {
         if (this.refs.emg_name.value === '' || this.refs.emg_relation.value === '' ||  this.refs.emg_phone.value === '') {
             // If any field is left empty, it will display an error message in the modal form.
-            this.setState({showError: true});
+            this.setState({showError: true,
+                           warningMsg: "Please check to ensure all fields have been filled in."});
             return;
-        }else{
-            this.setState({showError: false});
         }
 
+        // format is (111) 111 - 1111 (16 chars)
+        if (!this.state.isInternational && this.refs.emg_phone.value.length !== 16){
+            this.setState({showError: true,
+                           warningMsg: "Please use a valid phone number."});
+            return
+        }
+
+        // If it fails the format check, show error
+        if (!this.formatEmail(this.refs.emg_email.value)){
+            this.setState({showError: true,
+                           warningMsg: "Please use a valid email."});
+            return
+        }
+
+        this.setState({showError: false,
+                       warningMsg: ""});
         var contact = {id: this.props.id,
                        name: this.refs.emg_name.value,
                        relation: this.refs.emg_relation.value,
@@ -39,17 +101,27 @@ class ModalForm extends React.Component {
         // Call parent's save handler
         this.props.handleSaveContact(contact);
     }
+    handleExit(){
+        //resets state so any warnings previously are reset.
+        this.setState({
+            showError: false,
+            warningMsg: '',
+        })
+        this.props.hide();
+    }
+    handleChange(){
+        this.setState({
+           isInternational: !this.state.isInternational
+        })
+    }
     render() {
-        var warning = <div id="warningError" className="alert alert-warning alert-dismissable" role="alert">
-                        <button type="button"  className="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                        <strong>Warning!</strong> Please input a value into any empty text fields.
-                      </div>
 
         return (
-            <Modal show={this.props.show} onHide={this.props.hide} backdrop='static'>
+            <Modal show={this.props.show} onHide={this.handleExit} backdrop='static'>
                 <Modal.Header closeButton>
                   <Modal.Title>Emergency Contact</Modal.Title>
-                  {this.state.showError ? warning : null}
+                  {this.state.showError ? <Message type="warning" children={this.state.warningMsg}></Message> : null}
+
                 </Modal.Header>
                 <Modal.Body>
                     <form className="form-horizontal">
@@ -61,19 +133,28 @@ class ModalForm extends React.Component {
                             <label className="col-lg-3 control-label">Relation</label>
                             <div className="col-lg-9"><input  type="text" className="form-control" id="emg-relation" ref="emg_relation" defaultValue={this.props.relation} /></div>
                         </div>
+                        <div className="form-group">
+                          <div className="col-sm-offset-3 col-sm-10">
+                            <div className="checkbox">
+                              <label>
+                                <input type="checkbox" id="emg-international" ref="emg_international" checked={this.state.isInternational} onChange={this.handleChange}/> International Number
+                              </label>
+                            </div>
+                          </div>
+                        </div>
                         <div className="form-group">
                             <label className="col-lg-3 control-label">Phone</label>
-                            <div className="col-lg-9"><input  type="text" className="form-control" id="emg-phone" ref="emg_phone" defaultValue={this.props.phone} /></div>
+                            <div className="col-lg-9"><input  type="text" className="form-control" id="emg-phone" ref="emg_phone" defaultValue={this.props.phone} onChange={this.formatPhone} /></div>
                         </div>
                         <div className="form-group">
                             <label className="col-lg-3 control-label">Email</label>
-                            <div className="col-lg-9"><input  type="text" className="form-control" id="emg-email" ref="emg_email" defaultValue={this.props.email} /></div>
+                            <div className="col-lg-9"><input  type="text" className="form-control" id="emg-email" ref="emg_email" defaultValue={this.props.email}/></div>
                         </div>
                     </form>
                 </Modal.Body>
                 <Modal.Footer>
                     <Button onClick={this.handleSave}>Save</Button>
-                    <Button onClick={this.props.hide}>Close</Button>
+                    <Button onClick={this.handleExit}>Close</Button>
                 </Modal.Footer>
             </Modal>
         );

javascript/emergencyContact/Message.jsx

@@ -0,0 +1,57 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+class Message extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let icon = ''
+    switch (this.props.type) {
+      case 'danger':
+        icon = 'fa fa-exclamation-triangle'
+        break
+
+      case 'success':
+        icon = 'fa fa-thumbs-o-up'
+        break
+
+      case 'info':
+        icon = 'fa fa-info-circle'
+        break
+
+      case 'warning':
+        icon = 'fa fa-hand-paper-o'
+        break
+    }
+
+    let messageType = 'alert alert-dismissible alert-' + this.props.type
+    return (
+      <div className={messageType} role="alert">
+        <button
+          type="button"
+          onClick={this.props.onClose}
+          className="close"
+          data-dismiss="alert"
+          aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <i className={icon}></i>&nbsp;
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+Message.propTypes = {
+  type: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.string,PropTypes.element]),
+  onClose: PropTypes.func
+}
+
+Message.defaultProps = {
+  type: 'info'
+}
+
+export default Message