input feedback

src/js/components/inviteForm.js

@@ -16,6 +16,26 @@ function render(props, state) {
     'has-error': state.error
   });
 
+  var feedbackMessage;
+
+  if(state.error || state.submitted) {
+    let messageText;
+
+    if(state.submitted) {
+      messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.';
+    } else if(state.error.status === 400) {
+      messageText = 'Tarkasta syöttämäsi sähköpostiosoite';
+    } else {
+      messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.';
+    }
+
+    feedbackMessage = (
+      <div className='invite-form--message'>
+        {messageText}
+      </div>
+    );
+
+  }
   return (
     <form className={formClasses} onsubmit={props.onSubmit}>
       <input
@@ -32,6 +52,7 @@ function render(props, state) {
         disabled={state.error || state.submitted}>
         ⏎
       </button>
+      {feedbackMessage}
     </form>
     )
 }

src/js/main.js

@@ -11,7 +11,7 @@ var {diff, patch, create} = require('virtual-dom');
 var state = {
   email: '',
   submitted: false,
-  error: false
+  error: null
 };
 
 function setState(newState) {
@@ -25,21 +25,25 @@ var props = {
 
     setState({
       submitted: false,
-      error: false
+      error: null
     });
 
     request.post('/api/invites', {
       email: state.email.email
     }).then(function() {
       setState({submitted: true});
-    }).catch(function() {
-      setState({error: true});
+    }).catch(function(err) {
+      setState({error: err});
     });
   },
   onChange: function(e) {
+    if(e.target.value === state.email) {
+      return;
+    }
+
     setState({
       email: e.target.value,
-      error: false,
+      error: null,
       submitted: false
     });
   },