add yhdistys-page with membership-form (WIP)

src/js/components/membershipForm.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var request = require('axios');
+var React = require('react');
+var classSet = require('classnames');
+
+var api = require('../api');
+
+module.exports = React.createClass({
+  getInitialState() {
+    return {
+      email: '',
+      name: '',
+      handle: '',
+      residence: '',
+      submitted: false,
+      sending: false,
+      error: null
+    };
+  },
+  onSubmit(e) {
+    e.preventDefault();
+
+    this.setState({
+      submitted: false,
+      sending: true,
+      error: null
+    });
+
+    request.post(api('invites'), {
+      email: this.state.email.trim()
+    })
+    .then(this.handleSuccess)
+    .catch(this.handleError);
+  },
+  handleSuccess() {
+    this.setState({submitted: true, sending: false});
+  },
+  handleError(err) {
+    this.setState({error: err, sending: false});
+  },
+  onChange(e) {
+    if(e.target.value === this.state[e.target.name]) {
+      return;
+    }
+
+    this.setState({
+      [e.target.name]: e.target.value,
+      error: null,
+      submitted: false
+    });
+  },
+  render() {
+    var formClasses = classSet({
+      'membership-form': true,
+      'has-success': this.state.submitted,
+      'has-error': this.state.error,
+      'sending': this.state.sending
+    });
+
+    var inputClasses = classSet({
+      'input': true,
+      'has-success': this.state.submitted,
+      'has-error': this.state.error
+    });
+
+    var feedbackMessage;
+
+    if(this.state.error || this.state.submitted) {
+      let messageText;
+
+      if(this.state.submitted) {
+        messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.';
+      } else if(this.state.error.status === 400 && this.state.error.data === 'invalid_email') {
+        messageText = 'Tarkasta syöttämäsi sähköpostiosoite';
+      } else if(this.state.error.status === 400 && this.state.error.data === 'already_invited') {
+        messageText = 'Sähköpostiosoitteeseen on jo lähetetty kutsu';
+      } else {
+        messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.';
+      }
+
+      feedbackMessage = (
+        <div className='membership-form--message'>
+          {messageText}
+        </div>
+      );
+    }
+
+    return (
+      <form className={formClasses} onSubmit={this.onSubmit}>
+        <input
+          className={inputClasses}
+          type='text'
+          name='email'
+          placeholder='Sähköposti'
+          value={this.state.email}
+          onChange={this.onChange} />
+        <input
+          className={inputClasses}
+          type='text'
+          name='name'
+          placeholder='Koko nimi'
+          value={this.state.name}
+          onChange={this.onChange} />
+        <input
+          className={inputClasses}
+          type='text'
+          name='handle'
+          placeholder='Slack-käyttäjätunnus'
+          value={this.state.handle}
+          onChange={this.onChange} />
+        <input
+          className={inputClasses}
+          type='text'
+          name='residence'
+          placeholder='Paikkakunta'
+          value={this.state.residence}
+          onChange={this.onChange} />
+        <button
+          className='btn btn__submit'
+          type='submit'
+          title='Lähetä'
+          disabled={this.state.error || this.state.submitted}>
+          Siirry maksamaan
+        </button>
+        <span
+          className='loader'>
+        </span>
+        {feedbackMessage}
+      </form>
+      )
+  }
+});

src/js/main.js

@@ -3,31 +3,46 @@ require('./ga');
 let ReactDOM = require('react-dom');
 var React = require('react');
 
-
 var inviteForm = React.createFactory(require('./components/inviteForm'));
 var fader = React.createFactory(require('./components/fader'));
 var members = React.createFactory(require('./components/members'));
 var feed = React.createFactory(require('./components/feed'));
 var email = React.createFactory(require('./components/email'));
+var membershipForm = React.createFactory(require('./components/membershipForm'));
 
-ReactDOM.render(
-  inviteForm(),
-  document.getElementById('invite-form'));
+const pathName = window.location.pathname;
+console.log(pathName);
 
-ReactDOM.render(
-  fader(),
-  document.getElementById('fader'));
+if(pathName == '/') {
+  ReactDOM.render(
+    inviteForm(),
+    document.getElementById('invite-form'));
 
+  ReactDOM.render(
+    fader(),
+    document.getElementById('fader'));
 
-ReactDOM.render(
-  members(),
-  document.getElementById('members'));
+  ReactDOM.render(
+    members(),
+    document.getElementById('members'));
 
+  ReactDOM.render(
+    feed(),
+    document.getElementById('feed'));
 
-ReactDOM.render(
-  feed(),
-  document.getElementById('feed'));
+  ReactDOM.render(
+    email(),
+    document.getElementById('email'));
+} else if (pathName == '/yhdistys.html') {
+  ReactDOM.render(
+    membershipForm(),
+    document.getElementById('membership-form'));
 
-ReactDOM.render(
-  email(),
-  document.getElementById('email'));
+  ReactDOM.render(
+    fader(),
+    document.getElementById('fader'));
+
+  ReactDOM.render(
+    email(),
+    document.getElementById('email'));
+}

src/styles/style.styl

@@ -147,6 +147,13 @@ section:first-child
       width 28px
       height 28px
 
+.membership-form
+  .input
+    margin 8px 0px
+  .btn
+    margin-top 12px
+    color rgba(255, 255, 255, 0.9)
+
 @keyframes drop
   0%
     transform rotateX(90deg)

src/yhdistys.jade

@@ -0,0 +1,105 @@
+doctype html
+html
+  head
+    title Yhdistys
+    // inject:css
+    // endinject
+    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')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
+    meta(name='apple-mobile-web-app-capable', content='yes')
+
+    script.
+      if(location.hostname === 'koodiklinikka.fi' && location.protocol !== 'https:') {
+        location.protocol = 'https';
+      }
+    link(rel='apple-touch-icon', sizes='57x57', href='icons/apple-touch-icon-57x57.png')
+    link(rel='apple-touch-icon', sizes='114x114', href='icons/apple-touch-icon-114x114.png')
+    link(rel='apple-touch-icon', sizes='72x72', href='icons/apple-touch-icon-72x72.png')
+    link(rel='apple-touch-icon', sizes='144x144', href='icons/apple-touch-icon-144x144.png')
+    link(rel='apple-touch-icon', sizes='60x60', href='icons/apple-touch-icon-60x60.png')
+    link(rel='apple-touch-icon', sizes='120x120', href='icons/apple-touch-icon-120x120.png')
+    link(rel='apple-touch-icon', sizes='76x76', href='icons/apple-touch-icon-76x76.png')
+    link(rel='apple-touch-icon', sizes='152x152', href='icons/apple-touch-icon-152x152.png')
+    link(rel='apple-touch-icon', sizes='180x180', href='icons/apple-touch-icon-180x180.png')
+    link(rel='icon', type='image/png', href='icons/favicon-192x192.png', sizes='192x192')
+    link(rel='icon', type='image/png', href='icons/favicon-160x160.png', sizes='160x160')
+    link(rel='icon', type='image/png', href='icons/favicon-96x96.png', sizes='96x96')
+    link(rel='icon', type='image/png', href='icons/favicon-16x16.png', sizes='16x16')
+    link(rel='icon', type='image/png', href='icons/favicon-32x32.png', sizes='32x32')
+    link(rel='shortcut icon', href='icons/favicon.ico')
+    link(rel='icon', href='icons/favicon.ico')
+    meta(name='msapplication-TileColor', content='#10558c')
+    meta(name='msapplication-TileImage', content='icons/mstile-144x144.png')
+    meta(property='og:image', content='images/logo.png')
+    script(src='//use.typekit.net/scb5xny.js')
+    script.
+      try{Typekit.load();}catch(e){};
+
+  body
+    .site
+      .container
+        .header
+          .header__container
+            .header__nav
+              a(href='/', target='_blank') Etusivu
+            .header__headline
+              .header__logo
+              h1.header__title Koodiklinikka ry
+
+        .content
+          section
+            .row
+              .bread
+                .column.column1-2
+                  h3 Rekisteröity yhdistys
+                  p.
+                    Koodiklinikka on nyt myös ry! Tähän vois kirjottaa jotain kivoja juttuja
+                .column.column1-2
+                  a(href='images/slack.png', target='_blank')
+                    img(src='images/slack.png')
+            .row
+              .bread
+                .column.column1-2
+                  h3 Liity jäseneksi
+                  #membership-form.form
+                .column.column1-2
+                  p.
+                    Jäseneksi liittymällä saat jotain hienoja juttuja eli kannattaa liittyä
+
+      footer
+        .sponsors
+          .sponsors__label Yhteistyössä
+          a(href='http://futurice.com/', target='_blank')
+            img.sponsor.sponsor__futurice(src='images/futurice.svg')
+          a(href='http://www.metosin.fi/', target='_blank')
+            img.sponsor.sponsor__metosin(src='images/metosin.svg')
+          a(href='https://www.solita.fi/', target='_blank')
+            img.sponsor(src='images/solita.svg')
+          a(href='http://leonidasoy.fi/', target='_blank')
+            img.sponsor.sponsor__leonidas(src='images/leonidas.png')
+          a(href='https://www.nordea.com/', target='_blank')
+            img.sponsor.sponsor__nordea(src='images/nordea.png')
+
+        .contacts
+          div
+            a(href='https://koodiklinikka.slack.com')
+              i.fa.fa-slack
+
+            a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
+              i.fa.fa-github
+
+            a(href='https://twitter.com/koodiklinikka')
+              i.fa.fa-twitter
+
+            a(href='https://www.linkedin.com/groups/12025476')
+              i.fa.fa-linkedin
+
+            a(href='https://www.facebook.com/koodiklinikka')
+              i.fa.fa-facebook
+            div#email
+
+    #fader
+    // inject:js
+    // endinject