Form component with a shake validation gesture.

TwerkForm.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes } from 'styled-components';
import { darken } from 'polished';

import TextField from './TextField';

const propTypes = {
  onAuthSuccess: PropTypes.func.isRequired,
};

class TwerkForm extends Component {
  state = {
    grantAccess: null,
    username: '',
    password: '',
  }

  handleChange = ({ target }) => {
    this.setState({
      [target.name]: target.value,
      grantAccess: null,
    });
  };

  handleSubmit = event => {
    event.preventDefault();

    const { username, password } = this.state;
    if (username === 'Rick' && password === 'Morty') {
      this.props.onAuthSuccess();
    } else {
      this.setState({ grantAccess: false });
    }
  };

  render() {
    const { grantAccess, username, password } = this.state;

    return (
      <Form
        twerk={grantAccess === false}
        onSubmit={this.handleSubmit}
      >
        <Title>
          Login to get schwifty
        </Title>

        <TextField
          value={username}
          label="Username"
          name="username"
          onChange={this.handleChange}
        />
        
        <Gutter vertical />

        <TextField
          value={password}
          label="Password"
          name="password"
          type="password"
          onChange={this.handleChange}
        />

        <Gutter vertical amount={24} />

        <Submit type="submit">
          Get Ricked son!
        </Submit>
      </Form>
    );
  }
}

const twerk = keyframes`
  0% { transform: rotate(0deg); }
  16.67% { transform: rotate(-10deg); }
  33.33% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
  66.67% { transform: rotate(10deg); }
  83.33% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
`;

const Form = styled.form`
  background-color: ${props => props.theme.contentBg};
  padding: 32px;
  width: 420px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 12px rgba(0,0,0,0.2);
  animation: ${props => props.twerk ? twerk : 'none'} 0.7s;
`;
const Title = styled.h1`
  font-size: 32px;
  font-weight: 700;
  margin: 0px 0px 16px 0px;
  color: ${props => props.theme.titleColor};
  text-align: center;
`;
const Gutter = styled.div`
  padding-right: ${props => !props.vertical ? props.amount || 8 : 0}px;
  padding-top: ${props => props.vertical ? props.amount || 8 : 0}px;
`;
const Submit = styled.button`
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 3px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: ${props => props.theme.buttonBg};
  outline: none;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: ${props => darken(0.1, props.theme.buttonBg)};
  }

  &:active {
    background-color: ${props => darken(0.2, props.theme.buttonBg)};
  }
`;

TwerkForm.propTypes = propTypes;

export default TwerkForm;