diff --git a/packages/dashboard-v2/README.md b/packages/dashboard-v2/README.md index ba9db568..ab0421f8 100644 --- a/packages/dashboard-v2/README.md +++ b/packages/dashboard-v2/README.md @@ -8,3 +8,18 @@ This is a Gatsby application. To run it locally, all you need is: - `yarn install` - `yarn start` + +## Accessing remote APIs + +To be able to log in on a local environment with your production credentials, you'll need to make the browser believe you're actually on the same domain, otherwise the browser will block the session cookie. + +To do the trick, edit your `/etc/hosts` file and add a record like this: + +``` +127.0.0.1 local.skynetpro.net +``` + +then run `yarn develop:secure` -- it will run `gatsby develop` with `--https --host=local.skynetpro.net -p=443` options. +If you're on macOS, you may need to `sudo` the command to successfully bind to port `443`. + +> **NOTE:** This should become easier once we have a docker image for the new dashboard. diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json index 7b561154..44f7595d 100644 --- a/packages/dashboard-v2/package.json +++ b/packages/dashboard-v2/package.json @@ -9,6 +9,7 @@ ], "scripts": { "develop": "gatsby develop", + "develop:secure": "gatsby develop --https --host=local.skynetpro.net -p=443", "start": "gatsby develop", "build": "gatsby build", "serve": "gatsby serve", @@ -24,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", @@ -38,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/Button/Button.js b/packages/dashboard-v2/src/components/Button/Button.js index 48cedb15..328d52cd 100644 --- a/packages/dashboard-v2/src/components/Button/Button.js +++ b/packages/dashboard-v2/src/components/Button/Button.js @@ -5,8 +5,8 @@ import styled from "styled-components"; /** * Primary UI component for user interaction */ -export const Button = styled.button.attrs(({ disabled, $primary }) => ({ - type: "button", +export const Button = styled.button.attrs(({ disabled, $primary, type }) => ({ + type, className: cn("px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide transition-[opacity_filter]", { "bg-primary text-palette-600": $primary, "bg-white border-2 border-black text-palette-600": !$primary, @@ -14,6 +14,7 @@ export const Button = styled.button.attrs(({ disabled, $primary }) => ({ "hover:brightness-90": !disabled, }), }))``; + Button.propTypes = { /** * Is this the principal call to action on the page? @@ -23,9 +24,14 @@ Button.propTypes = { * Prevent interaction on the button */ disabled: PropTypes.bool, + /** + * Type of button (button / submit) + */ + type: PropTypes.oneOf(["button", "submit"]), }; Button.defaultProps = { $primary: false, disabled: false, + type: "button", }; 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