This commit is contained in:
Karol Wypchlo 2021-02-22 16:39:02 +01:00
parent d398a48a93
commit 35bc5ab7f7
2 changed files with 7 additions and 5 deletions

View File

@ -1,7 +1,7 @@
import { useFormik, getIn, setIn } from "formik"; import { useFormik, getIn, setIn } from "formik";
import Message from "./Message"; import Message from "./Message";
export default function SelfServiceForm({ config, fieldsConfig }) { export default function SelfServiceForm({ config, fieldsConfig, title }) {
const fields = config.fields const fields = config.fields
.map((field) => ({ ...field, ...fieldsConfig[field.name] })) .map((field) => ({ ...field, ...fieldsConfig[field.name] }))
.sort((a, b) => (a.position < b.position ? -1 : 1)); .sort((a, b) => (a.position < b.position ? -1 : 1));
@ -11,6 +11,7 @@ export default function SelfServiceForm({ config, fieldsConfig }) {
return ( return (
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md"> <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
{title && <h3 className="pb-5 text-lg leading-6 font-medium text-gray-900">{title}</h3>}
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form className="space-y-6" action={config.action} method={config.method}> <form className="space-y-6" action={config.action} method={config.method}>
{fields.map((field) => ( {fields.map((field) => (

View File

@ -70,13 +70,14 @@ const fieldsConfig = {
}; };
export default function Settings({ flow }) { export default function Settings({ flow }) {
console.log(flow); const profileConfig = flow.methods.profile.config;
const passwordConfig = flow.methods.password.config;
return ( return (
<Layout title="Settings"> <Layout title="Settings">
<div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6"> <div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6 grid grid-cols-1 gap-5 sm:grid-cols-2">
<SelfServiceForm config={flow.methods.password.config} fieldsConfig={fieldsConfig} /> <SelfServiceForm config={profileConfig} fieldsConfig={fieldsConfig} title="Account settings" />
<SelfServiceForm config={flow.methods.profile.config} fieldsConfig={fieldsConfig} /> <SelfServiceForm config={passwordConfig} fieldsConfig={fieldsConfig} title="Authentication settings" />
</div> </div>
</Layout> </Layout>
); );