From d64d8212d175b35e295ee36876ebfab003107ded Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Wed, 23 Mar 2022 11:43:26 +0100 Subject: [PATCH] feat(dashboard-v2): implement LoginForm component --- packages/dashboard-v2/package.json | 5 +- .../src/components/Form/TextField.js | 56 ++++++++++++ .../dashboard-v2/src/components/Form/index.js | 1 + .../src/components/forms/LoginForm.js | 88 +++++++++++++++++++ .../src/components/forms/index.js | 1 + .../src/services/accountsService.js | 3 + packages/dashboard-v2/yarn.lock | 71 +++++++++++++++ 7 files changed, 224 insertions(+), 1 deletion(-) create mode 100644 packages/dashboard-v2/src/components/Form/TextField.js create mode 100644 packages/dashboard-v2/src/components/Form/index.js create mode 100644 packages/dashboard-v2/src/components/forms/LoginForm.js create mode 100644 packages/dashboard-v2/src/components/forms/index.js create mode 100644 packages/dashboard-v2/src/services/accountsService.js diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json index dad231a4..b5f638d6 100644 --- a/packages/dashboard-v2/package.json +++ b/packages/dashboard-v2/package.json @@ -25,9 +25,11 @@ "classnames": "^2.3.1", "copy-text-to-clipboard": "^3.0.1", "dayjs": "^1.10.8", + "formik": "^2.2.9", "gatsby": "^4.6.2", "gatsby-plugin-postcss": "^5.7.0", "http-status-codes": "^2.2.0", + "ky": "^0.30.0", "nanoid": "^3.3.1", "path-browserify": "^1.0.1", "postcss": "^8.4.6", @@ -39,7 +41,8 @@ "react-use": "^17.3.2", "skynet-js": "^3.0.2", "swr": "^1.2.2", - "tailwindcss": "^3.0.23" + "tailwindcss": "^3.0.23", + "yup": "^0.32.11" }, "devDependencies": { "@babel/core": "^7.17.4", diff --git a/packages/dashboard-v2/src/components/Form/TextField.js b/packages/dashboard-v2/src/components/Form/TextField.js new file mode 100644 index 00000000..7eb811a8 --- /dev/null +++ b/packages/dashboard-v2/src/components/Form/TextField.js @@ -0,0 +1,56 @@ +import PropTypes from "prop-types"; +import cn from "classnames"; +import { Field } from "formik"; + +export const TextField = ({ id, label, name, error, touched, ...props }) => { + return ( +
+ {label && ( + + )} + + {touched && error && ( +
+ {error} +
+ )} +
+ ); +}; + +/** Besides noted properties, it accepts all props accepted by: + * - a regular element + * - Formik's component + */ +TextField.propTypes = { + /** + * ID for the field. Used to couple