Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement