React Login

index.html

<div id="root"></div>
<div id="snap"></div>

react-login.markdown

React Login

Example React Login

A Pen by Daniel Blanco on CodePen.

License.

script.babel

class FluidInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      focused: false,
      value: ""
    };
  }
  focusField() {
    const { focused } = this.state;
    this.setState({
      focused: !focused
    });
  }
  handleChange(event) {
    const { target } = event;
    const { value } = target;
    this.setState({
      value: value
    });
  }
  render() {
    const { type, label, style, id } = this.props;
    const { focused, value } = this.state;
    
    let inputClass = "fluid-input";
    if (focused) {
      inputClass += " fluid-input--focus";
    } else if (value != "") {
      inputClass += " fluid-input--open";
    }
    
    return (
      <div className={inputClass} style={style}>
        <div className="fluid-input-holder">
          
          <input 
            className="fluid-input-input"
            type={type}
            id={id}
            onFocus={this.focusField.bind(this)}
            onBlur={this.focusField.bind(this)}
            onChange={this.handleChange.bind(this)}
            autocomplete="off"
          />
          <label className="fluid-input-label" forHtml={id}>{label}</label>
          
        </div>
      </div>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <div className={`button ${this.props.buttonClass}`} onClick={this.props.onClick}>
        {this.props.buttonText}
      </div>
    );
  }
}

class SnapButton extends React.Component {
  render() {
    return (
      <div className={`button ${this.props.buttonClass}`} onClick={this.props.onClick}>
        {this.props.buttonText}
      </div>
    );
  }
}

class LoginContainer extends React.Component {
  render() {
    
    const style = {
      margin: "15px 0"
      
    };
    return (
      <div className="login-container">
        <div className="title">
          log in
        </div>
        <FluidInput type="text" label="name" id="name" style={style} />
        <FluidInput type="password" label="password" id="password" style={style} />
        <Button buttonText="log in" buttonClass="login-button" />
      </div>
      
    );
  }
}

class SnapContainer extends React.Component {
  render() {
    
    return (
      <div className="snap-container">
        <div className="title2">
          Take an screenshot with this button.
        </div>
        <Button buttonText="Screenshot" buttonClass="snap-button" />
      </div>
      
    );
  }
}

ReactDOM.render(<LoginContainer />, document.getElementById("root"));

ReactDOM.render(<SnapContainer />, document.getElementById("snap"));

scripts

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>
<script src="https://npmcdn.com/react-motion/build/react-motion.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.40/pdfmake.min.js"></script>

style.scss

//usual reset stuff
*,
*:before,
*:after,
ul,
li,
a,
button,
input,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
image,
svg,
path,
g,
canvas {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: transparent;
	border: none;
	text-decoration: none;
	font-family: 'Roboto';
	user-select: none;
	list-style: none;
	position: relative;
}

@mixin size($width: inherit, $height: inherit) {
  width: $width;
  height: $height;
}

@mixin flex($align, $justify, $direction: row) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
  flex-direction: $direction;
}

@mixin border-radius($topLeft:50%, $topRight:50%, $botLeft:50%, $botRight:50%) {
  border-top-left-radius: $topLeft;
  border-top-right-radius: $topRight;
  border-bottom-left-radius: $botLeft;
  border-bottom-right-radius: $botRight;
}

$deepBlue-5: #f1f3f4;
$deepBlue-100: #000C2F;
$blue-5: #F2F8FF;
$blue-80: #3394FF;
$blue-100: #007AFF;
$login-container-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
$button-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.12);

.html, body {
  background-color: pink;
  margin: 0;
  padding: 0;
}
.title2 {
  @include flex(center, center);
  text-transform: capitalize;
  font-size: 1.6em;
  font-weight: 300;
  vertical-align: middle;
  padding: 90px 0;
  padding-bottom: 45px;
}
.button {
  @include flex(center, center);
  box-shadow: $button-shadow;
  background-color: $blue-5;
  text-transform: capitalize;
  cursor: pointer;
  
  &:hover, &:focus {
    transition: 0.15s ease-in-out;
  }
}

.snap-button {
  @include border-radius(5px, 5px, 5px, 5px);
 @include flex(center, center, column);
  width: 20%;
  padding: 20px 15px;
  background-color: $blue-100;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  margin:  0 auto;
}

.login-container {
  @include size(600px, auto);
  @include flex(center, center, column);
  
  margin: 0 auto;
  float: left;
  background-color: white;
  box-shadow: $login-container-shadow;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 10px;
  
  .title {
    text-transform: capitalize;
    font-size: 1.6em;
    font-weight: 300;
    padding: 60px 0;
    padding-bottom: 45px;
  }
  
  .login-button {
    @include border-radius(5px, 5px, 5px, 5px);
    width: 60%;
    padding: 20px 15px;
    background-color: $blue-100;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    margin: 40px 0;
    
    &:hover, &:focus {
      box-shadow: 0px 3px 20px 3px rgba($blue-100,0.3);
      background-color: $blue-100;
    }
  }
}

.fluid-input {
  @include size(80%, 50px);
  max-width: 450px;
  position: relative;
  
  &-bg {
    @include size(calc(100% - 10%), 100%);
    @include flex(center, flex-start);
    position: absolute;
    left: 5%;
    top: 0;
    color: $blue-100;
    font-weight: 400;
    font-size: 0.9em;
    transition: 0.3s ease-in-out;
    text-transform: capitalize;
  }
  
  &-holder {
    @include size(100%, 100%);
    position: absolute;
    top: 0;
    left: 0;
    //overflow: hidden;
    @include border-radius(5px, 5px, 5px, 5px);
    will-change: transform, box-shadow;
    transition: 0.2s ease-in-out;
    background-color: $deepBlue-5;
  }
  &-input {
    @include size();
    @include border-radius(5px, 5px, 5px, 5px);
    background-color: $deepBlue-5;
    font-size: 1.05em;
    padding: 0 5%;
    
    &:focus {
      outline: None;
    }
  }
  
  &-label {
    @include size(calc(100% - 10%), 100%);
    @include flex(center, start);
    position: absolute;
    font-size: 1em;
    left: 5%;
    top: 0;
    color: $blue-100;
    font-weight: 400;
    text-transform: capitalize;
    pointer-events: none;
    transition: 
      transform 0.2s ease-in-out,
      font-size 0.2s 0.15s ease-in-out;
    will-change: transform, font-size;
  }
  
  &--focus & {
    &-holder {
      box-shadow: 0px 5px 20px 0px rgba($deepBlue-100,0.3);
    }
    
    &-bg {
      transform: translateY(-40px);
      transition: 0.2s 0.2s ease-in-out;
    }
    
    &-label {
      transform: translateY(-40px);
    }
  }
  
  &--open & {
    &-label {
      transform: translateY(-40px);
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />