diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json index 7c9b53ac..bfc1f5de 100644 --- a/packages/dashboard/package.json +++ b/packages/dashboard/package.json @@ -13,6 +13,7 @@ "autoprefixer": "^10.2.4", "dayjs": "^1.10.4", "express-jwt": "^6.0.0", + "formik": "^2.2.6", "jwks-rsa": "^1.12.2", "next": "^10.0.6", "postcss": "^8.2.4", @@ -21,6 +22,7 @@ "react": "17.0.1", "react-dom": "17.0.1", "swr": "^0.4.1", - "tailwindcss": "^2.0.2" + "tailwindcss": "^2.0.2", + "yup": "^0.32.8" } } diff --git a/packages/dashboard/src/components/Form/Message.js b/packages/dashboard/src/components/Form/Message.js new file mode 100644 index 00000000..d657125b --- /dev/null +++ b/packages/dashboard/src/components/Form/Message.js @@ -0,0 +1,36 @@ +export default function Message({ title, items = [] }) { + return ( +
+
+
+ {/* Heroicon name: solid/x-circle */} + +
+
+ {title &&

{title}

} + {items.length > 0 && ( +
+
    1 ? "list-disc pl-5 space-y-1" : ""}`}> + {items.map((item, index) => ( +
  • {item}
    • + ))} +
+
+ )} +
+
+
+ ); +} diff --git a/packages/dashboard/src/pages/auth/login.js b/packages/dashboard/src/pages/auth/login.js index 1a57e518..047a3751 100644 --- a/packages/dashboard/src/pages/auth/login.js +++ b/packages/dashboard/src/pages/auth/login.js @@ -1,12 +1,18 @@ import Link from "next/link"; import { Configuration, PublicApi } from "@ory/kratos-client"; +import { useFormik } from "formik"; import config from "../../config"; +import Message from "../../components/Form/Message"; const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public })); export async function getServerSideProps(context) { const flow = context.query.flow; + if (process.env.NODE_ENV === "development") { + return { props: { flow: require("../../../stubs/login.json") } }; + } + // The flow is used to identify the login and registration flow and // return data like the csrf_token and so on. if (!flow || typeof flow !== "string") { @@ -59,8 +65,9 @@ export default function Login({ flow }) { ...fieldProps[field.name], })) .sort((a, b) => (a.position < b.position ? -1 : 1)); - - console.log(flow); + const formik = useFormik({ + initialValues: fields.reduce((acc, field) => ({ ...acc, [field.name]: field.value }), {}), + }); return (
@@ -87,6 +94,7 @@ export default function Login({ flow }) { if you don't have one yet

+
+ + {field.errors && field.errors.length > 0 && ( +
+ message)} /> +
+ )}
))} +
- {/*
- - -
*/} -
- - Forgot your password? - -
-
-
- + + Forgot your password? +
+ + + + {flow.methods.password.config.errors.length > 0 && ( + message)} /> + )} diff --git a/packages/dashboard/src/pages/auth/registration.js b/packages/dashboard/src/pages/auth/registration.js index 4898db90..4db31c50 100644 --- a/packages/dashboard/src/pages/auth/registration.js +++ b/packages/dashboard/src/pages/auth/registration.js @@ -1,12 +1,18 @@ import Link from "next/link"; import { Configuration, PublicApi } from "@ory/kratos-client"; +import { useFormik } from "formik"; import config from "../../config"; +import Message from "../../components/Form/Message"; const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public })); export async function getServerSideProps(context) { const flow = context.query.flow; + if (process.env.NODE_ENV === "development") { + return { props: { flow: require("../../../stubs/registration.json") } }; + } + // The flow is used to identify the login and registration flow and // return data like the csrf_token and so on. if (!flow || typeof flow !== "string") { @@ -69,8 +75,12 @@ export default function Registration({ flow }) { ...fieldProps[field.name], })) .sort((a, b) => (a.position < b.position ? -1 : 1)); + const formik = useFormik({ + initialValues: fields.reduce((acc, field) => ({ ...acc, [field.name]: field.value }), {}), + }); - console.log(flow); + console.log(fields); + console.log("fieldProps", fieldProps); return (
@@ -114,24 +124,34 @@ export default function Registration({ flow }) {
+ {field.errors && field.errors.length > 0 && ( +
+ message)} /> +
+ )}
))} -
- -
+ + + + {flow.methods.password.config.errors.length > 0 && ( + message)} /> + )} diff --git a/packages/dashboard/stubs/login.json b/packages/dashboard/stubs/login.json new file mode 100644 index 00000000..bb136cd8 --- /dev/null +++ b/packages/dashboard/stubs/login.json @@ -0,0 +1,45 @@ +{ + "id": "bda73c77-1e21-4bfd-b85a-322fce2e4576", + "expires_at": "2020-01-28T13:48:04.690715Z", + "issued_at": "2020-01-28T13:38:04.690732Z", + "request_url": "http://127.0.0.1:4455/auth/browser/login", + "methods": { + "oidc": { + "method": "oidc", + "config": { + "action": "http://127.0.0.1:4455/.ory/kratos/public/auth/browser/methods/oidc/auth/bda73c77-1e21-4bfd-b85a-322fce2e4576", + "method": "POST", + "fields": [ + { + "name": "csrf_token", + "type": "hidden", + "required": true, + "value": "QJreyXtUD4oUSJfGNjA/+6ydsQyq0o/rfTL6QK86VadVFg6mwgX5x1QHVQ6uRqKxmwAcavQup3ILCSwl7ke97g==" + } + ] + } + }, + "password": { + "method": "password", + "config": { + "action": "http://127.0.0.1:4455/.ory/kratos/public/auth/browser/methods/password/login?request=bda73c77-1e21-4bfd-b85a-322fce2e4576", + "method": "POST", + "fields": [ + { + "name": "csrf_token", + "type": "hidden", + "required": true, + "value": "M1gAKA8fIhw4JOpQ/5m9mKARBAvKhzWkyhbxjtZNLG8m1NBHtk7UUXhrKJhn7yDSl4ypbZR7HT28LSfrlzDEJg==" + }, + { "name": "identifier", "type": "text", "required": true, "value": "asfdasdffads" }, + { "name": "password", "type": "password", "required": true } + ], + "errors": [ + { + "message": "The provided credentials are invalid. Check for spelling mistakes in your password or username, email address, or phone number." + } + ] + } + } + } +} diff --git a/packages/dashboard/stubs/registration.json b/packages/dashboard/stubs/registration.json new file mode 100644 index 00000000..4fe796ae --- /dev/null +++ b/packages/dashboard/stubs/registration.json @@ -0,0 +1,58 @@ +{ + "id": "dbff7b96-8116-42c5-8624-f9fb28f1db15", + "expires_at": "2020-01-28T13:49:01.2274112Z", + "issued_at": "2020-01-28T13:39:01.2274261Z", + "request_url": "http://127.0.0.1:4455/auth/browser/registration", + "methods": { + "oidc": { + "method": "oidc", + "config": { + "action": "http://127.0.0.1:4455/.ory/kratos/public/auth/browser/methods/oidc/auth/dbff7b96-8116-42c5-8624-f9fb28f1db15", + "method": "POST", + "fields": [ + { + "name": "csrf_token", + "type": "hidden", + "required": true, + "value": "xwb6A6iHdsguYwkAM6m3jj196E7TcmiWpAavIRxuAgXSiipsEdaAhW4sy8ir3yrECuBFKI2OQA/SPXlEXRPqTA==" + } + ] + } + }, + "password": { + "method": "password", + "config": { + "errors": [ + { + "message": "The provided credentials are invalid. Check for spelling mistakes in your password or username, email address, or phone number." + } + ], + "action": "http://127.0.0.1:4455/.ory/kratos/public/auth/browser/methods/password/registration?request=dbff7b96-8116-42c5-8624-f9fb28f1db15", + "method": "POST", + "fields": [ + { + "name": "csrf_token", + "type": "hidden", + "required": true, + "value": "xLg4B9WnuC0Ue+j9ay5EQvleaJpOl0H9xJJ7W3+Bwv7RNOhobPZOYFQ0KjXzWNkIzsPF/BBraWSyqa0+Pvwqtw==" + }, + { + "name": "password", + "type": "password", + "required": true, + "errors": [{ "message": "password: Is required" }] + }, + { + "name": "traits.email", + "type": "text", + "value": "", + "errors": [ + { "message": "traits.email: String length must be greater than or equal to 3" }, + { "message": "traits.email: Does not match format 'email'" } + ] + } + ] + } + } + } +}