input feedback

src/jade/index.jade

@@ -6,19 +6,23 @@ html
     meta(name='description', content='Koodiklinikka on suomalainen Slack-yhteisö ohjelmistoalan harrastajille ja ammattilaisille.')
     meta(name='keywords', content='ohjelmointi,frontend,open source,devaus,suomi,javascript,clojure,go,java,node.js,io.js,angular.js,web')
     meta(charset='utf-8')
+    script(src='//use.typekit.net/scb5xny.js')
+    script.
+      try{Typekit.load();}catch(e){};
 
   body
     .container
-      .jumbo
-        .form-container
-          p.
-            Etsitkö tiimikavereita projektiisi? Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle?
-            Onko koodissasi bugi joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?<br />
-            <br />
-            Koodiklinikka on <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille.
+      .jumbo-container
+        .jumbo
+      .form-container
+        p.
+          Etsitkö tiimikavereita projektiisi? Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle?
+          Onko koodissasi bugi joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?<br />
+          <br />
+          Koodiklinikka on <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille.
 
-          #invite-form
-            h3 Liity mukaan
+        #invite-form
+          h3 Liity mukaan
 
       .footer
 
@@ -32,6 +36,3 @@ html
         img(style='position: absolute; top: 0; right: 0; border: 0;', src='https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67', alt='Fork me on GitHub', data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png')
 
     script(src='js/bundle.js')
-    script(src='//use.typekit.net/scb5xny.js')
-    script.
-      try{Typekit.load();}catch(e){};

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
     });
   },

src/styles/style.styl

@@ -1,3 +1,5 @@
+linkColor = #3090de
+textColor = #444
 
 body, html
   margin 0
@@ -5,23 +7,39 @@ body, html
   height 100%
   width 100%
   font-weight 400
-  color #444
+  color textColor
   font-smoothing antialiased
 
 h1, h2, h3
   margin 0
   margin-bottom 0.5em
+  text-shadow 1px 1px 0 rgba(255, 255, 255, 0.2)
 
 .container
   width 100%
   height 100%
   box-sizing border-box
 
-.jumbo
+@keyframes blur
+  0%
+    filter blur(0px)
+  100%
+    filter blur(3px)
+
+.jumbo-container
   width 100%
   height 100%
+  position relative
+.jumbo
+  position absolute
+  top -10px
+  bottom -10px
+  left -10px
+  right -10px
   background url('../images/jumbo.jpg')
   background-size cover
+  animation blur 10s
+  filter blur(3px)
 
 .input
   width 100%
@@ -54,7 +72,7 @@ h1, h2, h3
 
 .input.has-error
   border-color rgba(226, 33, 112, 0.6)
-  color rgba(226, 33, 112, 0.6)
+  color rgb(226, 33, 112)
 
 .btn
   border-radius 3px
@@ -75,17 +93,44 @@ h1, h2, h3
   .btn
     width 40px
     height 32px
-    background #3090de
+    background linkColor
     padding 0
     position absolute
     right 8px
-    top 50%
-    margin-top -15px
+    top 7px
+
     border-bottom 2px solid #117280
     color rgba(255, 255, 255, 0.5)
     &:active
       border-bottom 0
 
+@keyframes drop
+  0%
+    transform rotateX(90deg)
+  30%
+    transform rotateX(45deg)
+  45%
+    transform rotateX(0deg)
+  60%
+    transform rotateX(45deg)
+  100%
+    transform rotateX(0deg)
+
+.invite-form--message
+  background linkColor
+  color #fff
+  height 40px
+  line-height 40px
+  padding 0 0.5em
+  margin-top 4px
+  transform rotateX(0deg)
+  transform-origin 100% 0
+  animation drop 0.6s linear
+
+.invite-form.has-error
+  .invite-form--message
+    background rgb(226, 33, 112)
+
 .form-container
   width 100%
   padding 0 2em
@@ -100,7 +145,7 @@ h1, h2, h3
     margin-bottom 2em
     line-height 1.7em
 a
-  color #2080CF
+  color linkColor
   text-decoration none
   &:hover
     text-decoration underline
@@ -111,6 +156,9 @@ a
   position absolute
   bottom 0
   i
-    margin 0 7px
+    margin 0 5px
     font-size 1.5em
-    color #3090de
+    color textColor
+    &:hover
+      color #fff
+