modal error resolves

js/components/ascribe_modal/modal_share.js

@@ -8,6 +8,7 @@ import Modal from 'react-bootstrap/lib/Modal';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
+import Alert from 'react-bootstrap/lib/Alert';
 
 
 let ShareModalButton = React.createClass({
@@ -15,7 +16,7 @@ let ShareModalButton = React.createClass({
         return (
             <OverlayTrigger delay={500} placement="left" overlay={<Tooltip>Share the artwork</Tooltip>}>
                 <ModalTrigger modal={<ShareModal edition={this.props.edition}
-                                                 currentUser={this.props.currentUser}/>}>
+                    currentUser={this.props.currentUser}/>}>
                     <div className="btn btn-ascribe-inv btn-glyph-ascribe">
                         <span className="glyph-ascribe-share2"></span>
                     </div>
@@ -26,12 +27,17 @@ let ShareModalButton = React.createClass({
 });
 
 let ShareModal = React.createClass({
+    onRequestHide(e){
+        e.preventDefault();
+        this.props.onRequestHide();
+    },
     render() {
         return (
             <Modal {...this.props} title="Share artwork">
                 <div className="modal-body">
                     <ShareForm edition={this.props.edition}
-                               currentUser={this.props.currentUser}/>
+                        currentUser={this.props.currentUser}
+                        onRequestHide={this.onRequestHide}/>
                 </div>
             </Modal>
         )
@@ -39,8 +45,8 @@ let ShareModal = React.createClass({
 });
 
 let ShareForm = React.createClass({
-    getInitialState(){
-        return {errors: []}
+    getInitialState() {
+        return {errors: null}
     },
     submit(e) {
         e.preventDefault();
@@ -54,10 +60,10 @@ let ShareForm = React.createClass({
             },
             body: JSON.stringify(this.getFormData())
         })
-        .then((response) => {
-            if (response.status >= 200 && response.status < 300)
-                return response
-            response.json().then((response) => this.setState({errors: response.errors}))
+            .then((response) => {
+                if (response.status >= 200 && response.status < 300)
+                    return response
+                response.json().then((response) => this.setState({errors: response.errors}))
             }
         );
         //.then(FetchApiUtils.status)
@@ -70,17 +76,33 @@ let ShareForm = React.createClass({
             share_message: this.refs.share_message.getDOMNode().value
         }
     },
-    renderTextInput(id, placeHolder, required){
-        return(
+    renderAlert(id){
+        if (this.state.errors && id in this.state.errors) {
+            return this.state.errors[id].map(function(error) {
+                    return <AlertDismissable error={error} key={error}/>
+                }
+            )
+        }
+        return <span />
+    },
+    renderTextInput(id, placeHolder, required) {
+
+        return (
             <div className="form-group">
+                {this.renderAlert(id)}
                 <input className="form-control input-text-ascribe" name={id} ref={id}
                     placeholder={placeHolder} required={required} type="text" />
             </div>
         )
     },
-    renderTextArea(id, placeHolder, required){
-        return(
+    renderTextArea(id, placeHolder, required) {
+        let alert = "";
+        if (this.state.errors && id in this.state.errors) {
+            alert = <AlertDismissable error={this.state.errors.id} />
+        }
+        return (
             <div className="form-group">
+                {alert}
                 <textarea className="form-control input-text-ascribe textarea-ascribe-message" name={id} ref={id}
                     defaultValue={placeHolder} required={required}></textarea>
             </div>
@@ -88,7 +110,7 @@ let ShareForm = React.createClass({
     },
     render() {
         let content = "Hi,\n\nI am sharing \"" + this.props.edition.title +
-                    "\" with you.\n\nTruly yours,\n" + this.props.currentUser.username;
+            "\" with you.\n\nTruly yours,\n" + this.props.currentUser.username;
         return (
             <form id="share_modal_content" role="form" onSubmit={this.submit}>
                 {this.renderTextInput("share_emails", "Comma separated emails", "required")}
@@ -102,4 +124,27 @@ let ShareForm = React.createClass({
     }
 });
 
+const AlertDismissable = React.createClass({
+    getInitialState() {
+        return {
+            alertVisible: true
+        };
+    },
+    render() {
+        if (this.state.alertVisible) {
+            return (
+                <Alert bsStyle='danger' onDismiss={this.handleAlertDismiss}>
+                    {this.props.error}
+                </Alert>
+            );
+        }
+        return (
+            <span />
+        );
+    },
+    handleAlertDismiss() {
+        this.setState({alertVisible: false});
+    }
+});
+
 export default ShareModalButton;