1 files changed, 46 insertions, 0 deletions
diff --git a/components/Form.js b/components/Form.js
new file mode 100644
index 0000000..fc14a75
--- /dev/null
+++ b/components/Form.js
@@ -0,0 +1,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,
+}