components/Form.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import React from 'react'
import PropTypes from 'prop-types'

const Form = ({errorMessage, onSubmit, isLogin}) => (
  <form className='window window--popup' onSubmit={onSubmit}>
    <div className="window__content--popup">
      {isLogin ? 'Login to access your notes' : 'Register new user'}
    </div>
    <input type="email" name="email" placeholder="email" required />
    <input type="password" name="password" minLength="6" placeholder="password" required />

    <input className='window__button' type="submit" value={isLogin ? 'Login' : 'Register'} />

    {errorMessage && <p className="error">{errorMessage}</p>}

    <style jsx>{`
      form,
      label {
        display: flex;
        flex-flow: column;
      }
      label > span {
        font-weight: 600;
      }
      input[type=email],
      input[type=password]  {
        padding: .5em;
        margin: .5em 0;
        border: 1px solid #ccc;
        border-radius: .25px;
      }
      .error {
        text-align: center;
        color: brown;
        margin: 1rem 0 0;
      }
    `}</style>
  </form>
)

export default Form

Form.propTypes = {
  errorMessage: PropTypes.string,
  onSubmit: PropTypes.func,
}