Kutt/client/pages/url-password.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import axios from 'axios';
import BodyWrapper from '../components/BodyWrapper';
import TextInput from '../components/TextInput';
import Button from '../components/Button';

const Title = styled.h3`
  font-size: 24px;
  font-weight: 300;
  text-align: center;

  @media only screen and (max-width: 448px) {
    font-size: 18px;
  }
`;

const Form = styled.form`
  position: relative;
  display: flex;
  align-items: center;
`;

const Error = styled.p`
  position: absolute;
  left: 0;
  bottom: -48px;
  font-size: 14px;
  color: red;

  @media only screen and (max-width: 448px) {
    bottom: -40px;
    font-size: 12px;
  }
`;

class UrlPasswordPage extends Component {
  static getInitialProps({ query }) {
    return { query };
  }

  constructor() {
    super();
    this.state = {
      error: '',
      loading: false,
      password: '',
    };
    this.updatePassword = this.updatePassword.bind(this);
    this.requestUrl = this.requestUrl.bind(this);
  }

  shouldComponentUpdate() {
    return true;
  }

  updatePassword(e) {
    this.setState({
      password: e.currentTarget.value,
    });
  }

  requestUrl(e) {
    e.preventDefault();
    const { password } = this.state;
    const { protectedLink } = this.props.query;
    if (!password) {
      return this.setState({
        error: 'Password must not be empty',
      });
    }
    this.setState({ error: '' });
    this.setState({ loading: true });
    return axios
      .post('/api/url/requesturl', { id: protectedLink, password })
      .then(({ data }) => window.location.replace(data.target))
      .catch(({ response }) =>
        this.setState({
          loading: false,
          error: response.data.error,
        })
      );
  }

  render() {
    if (!this.props.query.protectedLink) {
      return (
        <BodyWrapper>
          <Title>404 | Not found.</Title>
        </BodyWrapper>
      );
    }
    return (
      <BodyWrapper>
        <Title>Enter the password to access the URL.</Title>
        <Form onSubmit={this.requestUrl}>
          <TextInput type="password" placeholder="Password" onChange={this.updatePassword} small />
          <Button type="submit" icon={this.state.loading ? 'loader' : ''}>
            Go
          </Button>
          <Error>{this.state.error}</Error>
        </Form>
      </BodyWrapper>
    );
  }
}

UrlPasswordPage.propTypes = {
  query: PropTypes.shape({
    protectedLink: PropTypes.string,
  }),
};

UrlPasswordPage.defaultProps = {
  query: {},
};

export default UrlPasswordPage;