Password Meter with ReactJS using ES6

by ramnathv

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="app"> </div>

CSS

#app{margin-top: 20px;}

Babel + JSX

const Page = (props) => {
  return(
    <div className="container-fluid">
        <div className="row">
            <div className="col-xs-12 col-md-6">
              {props.children}
            </div>
        </div>
    </div>
  )
}

const PasswordInput = (props) => {
  return(
    <input 
      type="password" 
      className="form-control" 
      onChange={props.handleChange}
    />
  )
}


const Panel = (props) => {
  return(
    <div className="panel panel-default">
      <div className="panel-body">
        {props.children}
      </div>
    </div>
  )
}

const ProgressBar = (props) => {
  let {password} = props
  const getClass = () => {
    return password.length > 6 
      ? 'progress-bar progress-bar-success'
      : 'progress-bar'
  }
  return (
    <div className="progress" style={{height: 10}}>
      <div className={getClass()} style={{width: "60%"}} />
    </div>
  )
}
        
const TextBox = (props) => {
  return(
    <ul>{props.items.map((d, i) => {
      return <li key={i}>{d}</li>
    })}</ul>
  )
}

const App = React.createClass({
  getInitialState(){
    return {password: ""}
  },
  handleChange(e){
    this.setState({password: e.target.value})
  },
  render(){
    return(
      <Page>
        <PasswordInput 
          password={this.state.password}
          handleChange={this.handleChange}
        />
        <br/>
        <Panel>
          <ProgressBar password={this.state.password} />
          <TextBox items={["A", "B", "C"]} />
        </Panel>
      </Page>
    )
  }
})


ReactDOM.render(
  <App />,
  document.getElementById("app")
)