react. example

login

import React, { PropTypes as Type}  from 'react';
import Loader                       from 'app/libs/components/Loader/Loader';
import * as actionTypes             from '../../constants/auth_constants';
import Formsy                       from 'formsy-react';
import Input                        from 'app/libs/components/FormsyComponents/input';
import Checkbox                     from 'app/libs/components/FormsyComponents/checkbox';

export default class LoginPopupForm extends React.Component {

  static propTypes = {
    auth: Type.shape({
      type     : Type.string,
    }).isRequired,
    authActions: Type.shape({
      login: Type.func.isRequired
    }).isRequired,
    authAgent: Type.shape({
      login : Type.func.isRequired,
      logout: Type.func.isRequired
    }),
    loader: Type.object
  }


  static contextTypes = {
    router: Type.object.isRequired
  }


  constructor(props, context) {
    super(props, context);

    this.state = {
      email: '',
      password: '',
      remember_me: true,
      error: false
    }
  }


  componentWillReceiveProps(newProps) {
    const { type } = newProps.auth;

    if (type === actionTypes.AUTH_LOGIN_FAILED) {
      this.setState({
        error: 'We’re sorry. Our system does not recognize either the email that was entered or the password provided.'
      });
    }
  }


  handleSubmit(form_data) {
    const { authAgent, authActions } = this.props;
    const { router } = this.context;

    const data = {
      'api_user': form_data
    };

    authActions.login({ data, authAgent, router });
  }


  render() {
    return (
      <Formsy.Form className='form' ref='formsy' onSubmit={::this.handleSubmit}>
        <Input name='email'
               value={this.state.email}
               label='Email'
               type='text'
               layout='vertical'
               placeholder="Enter your Email" />

        <Input name='password'
               value={this.state.password}
               label='Password'
               type='password'
               layout='vertical'
               placeholder="Enter your Password" />

        <Checkbox name='remember_me'
                  value={this.state.remember_me}
                  layout='elementOnly'
                  label='Remember me' />

        <button className='btn btn-green'>Log In</button>

        {this.state.error && <div className='cs-login-popup__error'>{this.state.error}</div>}

        <div className='cs-login-popup__forgot-password'>
          <a href='#'>Forgot password?</a>
        </div>
      </Formsy.Form>
    );
  }
}

map search container

import React, { PropTypes as Type }   from 'react';
import * as AuthActions               from '../../actions/auth_actions';
import { bindActionCreators }         from 'redux';
import { connect }                    from 'react-redux';

import MapData                        from './_MapData';
import MapSearch                      from './_MapSearch';
import MapSearchFilters               from './_MapSearchFilters';


@connect(state => ({
  auth: state.auth
}))

export default class Map extends React.Component {

  static propTypes = {
    auth    : Type.object.isRequired,
    dispatch: Type.func.isRequired
  }

  constructor(props, context) {
    super(props, context);
  }


  render() {
    const { auth, dispatch } = this.props;

    return (
      <section className='cs-map-container'>
        <MapData />
        <MapSearch auth={auth}
                   authActions={bindActionCreators(AuthActions, dispatch)}
                    {...this.props} />
        <MapSearchFilters />
      </section>
    );
  }
}

popup example

import React                    from 'react';
import classNames               from 'classnames';
import Formsy                   from 'formsy-react';
import Checkbox                 from 'app/libs/components/FormsyComponents/checkbox';
import Select                   from 'react-select';
import ReactSlider              from 'react-slider';


export default class MapDataJournal extends React.Component {

  constructor(props, context) {
    super(props, context);
  }

  state = {
    fix_city: 'Berlin',
    scale: 0,
    journal_form_classes: classNames('journal__form', 'journal__form--hidden'),
    journal_open_form_classes: classNames('journal__open-form')
  }

  openFormHandler() {
    this.setState({
      journal_form_classes: classNames('journal__form'),
      journal_open_form_classes: classNames('journal__open-form', 'journal__open-form--hidden')
    });
  }

  closeFormHandler() {
    this.setState({
      journal_form_classes: classNames('journal__form', 'journal__form--hidden'),
      journal_open_form_classes: classNames('journal__open-form')
    });
  }

  changeCityHandle(value) {
    this.setState({ fix_city: value })
  }

  changeScaleHandle(value) {
    this.setState({ scale: value })
  }

  render() {
    const fix_city_options = [
      { value: 'North America', label: 'North America' },
      { value: 'South America', label: 'South America' },
      { value: 'Africa', label: 'Africa' },
      { value: 'Europe', label: 'Europe' },
      { value: 'Asia', label: 'Asia' },
      { value: 'Australia', label: 'Australia' },
      { value: 'Antarctica', label: 'Antarctica' }
    ];

    const journal_city_options = [
      { value: 'Berlin', label: 'Berlin' },
      { value: 'Boston', label: 'Boston' },
      { value: 'Washington, D.C.', label: 'Washington, D.C.' },
      { value: 'Baltimore', label: 'Baltimore' },
      { value: 'Philadelphia', label: 'Philadelphia' },
      { value: 'New York', label: 'New York' },
      { value: 'San Francisco', label: 'San Francisco' },
      { value: 'Los Angeles', label: 'Los Angeles' },
      { value: 'San Francisco', label: 'San Francisco' },
      { value: 'Madrid', label: 'Madrid' },
      { value: 'Stockholm', label: 'Stockholm' },
      { value: 'London', label: 'London' },
      { value: 'Paris', label: 'Paris' },
      { value: 'Stockholm', label: 'Stockholm' },
      { value: 'Barcelona', label: 'Barcelona' }
    ];

    return (
      <div className='journal'>
        <div className='nano'>
          <div className='nano-content'>
            <div className={this.state.journal_form_classes}>
              <Formsy.Form className='form journal-data-form' ref='formsy' onSubmit={::this.handleSubmit}>
                <div className='form-group journal_title required'>
                  <label htmlFor='journal_title'>Add Observation</label>
                  <input name='title' id='journal_title' type='text' placeholder='Enter title' autoComplete='off' />
                </div>
                <div className='form-group journal_zoom required'>
                  <div className='journal-data-form-zoom'>
                    <div className='journal-data-form-zoom__label journal-data-form-zoom__label--city' data-name='City'>
                      City
                      <div></div>
                    </div>
                    <div className='journal-data-form-zoom__label journal-data-form-zoom__label--district' data-name='District'>
                      District
                      <div></div>
                    </div>
                    <div className='journal-data-form-zoom__plugin'>
                      <ReactSlider defaultValue={0}
                                   withBars
                                   min={0}
                                   max={1}
                                   step={1}
                                   value={this.state.zoom} />
                    </div>
                  </div>
                </div>
                <div className='form-group journal_continent required form-group--hidden'>
                  <Select name='fix_continent'
                          value='North America'
                          options={fix_city_options}
                          id='journal_continent' />
                </div>
                <div className='form-group journal_city required'>
                  <Select name='fix_city'
                          value={this.state.fix_city}
                          options={journal_city_options}
                          onChange={::this.changeCityHandle}
                          id='journal_city' />
                </div>
                <div className='form-group journal_district required form-group--hidden'>
                  <p>Current city: Berlin</p>
                  <input type='text' name='fix_district' id='journal_district' placeholder='Enter district' />
                </div>
                <div className='form-group journal_message required'>
                  <textarea name='body' id='journal_body' type='text' placeholder='Enter your message'></textarea>
                </div>
                <input type='submit' value='Send' className='btn btn-green btn-mini' />
                <span className='journal-data-form__close btn btn-trans btn-mini' onClick={::this.closeFormHandler}>Close</span>

                <Checkbox name='incognito'
                          value={this.state.incognito}
                          layout='elementOnly'
                          label='Incognito' />
              </Formsy.Form>
            </div>
            <div className={this.state.journal_open_form_classes}>
              <span className='btn btn-trans btn-mini' onClick={::this.openFormHandler}>
                <span className='btn-new-journal'></span>Add new
              </span>
            </div>
            <div className='journal__list'>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

styl file example

.cs-login
  width 100%
  height 100%
  position relative
  background url('/images/login/background.png') no-repeat 50% 50%
  background-size 100% auto

  .cs-login-popup
    position absolute
    left 50%
    margin-left -232px
    width 464px
    border-radius 6px
    overflow hidden
    background-color #fff

    .cs-login-popup__header
      height 128px
      background-color #fff
      background-image url('/images/login/auth-logo.png')
      background-position 50% 50%
      background-repeat no-repeat

    .cs-login-popup__body
      padding 32px 32px 0
      background-color $color_94

      .cs-login-popup__title
        float left
        font-size 19px
        line-height 23px
        font-weight bold
        text-transform uppercase

      .cs-login-popup__sign-up
        float right
        font-size 17px
        line-height 25px

        span
          margin-right 8px
          letter-spacing 0.1px

        .btn
          color #9c9790
          border-color #9c9790
          letter-spacing 0.4px

      .form
        margin-top 28px

        .form-group
          label
            font-size 16px
            color #9c9790

          input
            height 48px
            font-size 19px
            border-color #bdb9b3
            color $color_26
            -webkit-text-fill-color $color_26

            &:focus
              border-color #5cb2ba

            &:-webkit-autofill
              -webkit-box-shadow 0 0 0px 1000px white inset
              color $color_26

            &::-webkit-input-placeholder
              color $color_26

            &::-moz-placeholder
              color $color_26

            &:-moz-placeholder
              color $color_26

            &:-ms-input-placeholder
              color $color_26

            &:focus
              border-color #5cb2ba

        .checkbox
          margin 16px 0

          &.checked
            label
              i
                border-color #5cb2ba
                background-color #5cb2ba

          label
            cursor pointer
            letter-spacing 0.3px
            font-size 13px
            line-height 15px

            i
              border 2px solid #bdb9b3

        button
          width 100%
          height 48px
          padding 0
          text-align center
          line-height 48px
          font-size 20px

        .cs-login-popup__forgot-password
          text-align center
          margin-top 23px

          a
            color $default-color
            font-size 16px
            letter-spacing 0.3px

        .cs-login-popup__error
          font-size 16px
          margin-top 16px
          color #fd7d55

      .cs-login-popup__welcome
        margin 10px -32px 0 -32px
        font-size 13px
        line-height 15px
        letter-spacing 0.4px
        padding 10px 32px
        background-color #1f3a43
        color #fff

        p:first-child
          text-align center


@media only screen and (-Webkit-min-device-pixel-ratio 1.5),
only screen and (-moz-min-device-pixel-ratio 1.5),
only screen and (-o-min-device-pixel-ratio 3/2),
only screen and (min-device-pixel-ratio 1.5)
  .cs-login
    background-image url('/images/login/[email protected]')
    background-size 100% auto

    .cs-login-popup
      .cs-login-popup__header
        background-image url('/images/login/[email protected]')
        background-size 252px 52px