From 35bc5ab7f73726b35b6fd0de8134409f4f0e518c Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Mon, 22 Feb 2021 16:39:02 +0100
Subject: [PATCH] settings

---
 .../dashboard/src/components/Form/SelfServiceForm.js     | 3 ++-
 packages/dashboard/src/pages/settings.js                 | 9 +++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/dashboard/src/components/Form/SelfServiceForm.js b/packages/dashboard/src/components/Form/SelfServiceForm.js
index 9a2e1cc4..7f639241 100644
--- a/packages/dashboard/src/components/Form/SelfServiceForm.js
+++ b/packages/dashboard/src/components/Form/SelfServiceForm.js
@@ -1,7 +1,7 @@
 import { useFormik, getIn, setIn } from "formik";
 import Message from "./Message";
 
-export default function SelfServiceForm({ config, fieldsConfig }) {
+export default function SelfServiceForm({ config, fieldsConfig, title }) {
   const fields = config.fields
     .map((field) => ({ ...field, ...fieldsConfig[field.name] }))
     .sort((a, b) => (a.position < b.position ? -1 : 1));
@@ -11,6 +11,7 @@ export default function SelfServiceForm({ config, fieldsConfig }) {
 
   return (
     <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">
         <form className="space-y-6" action={config.action} method={config.method}>
           {fields.map((field) => (
diff --git a/packages/dashboard/src/pages/settings.js b/packages/dashboard/src/pages/settings.js
index 7960b61a..09673ea0 100644
--- a/packages/dashboard/src/pages/settings.js
+++ b/packages/dashboard/src/pages/settings.js
@@ -70,13 +70,14 @@ const fieldsConfig = {
 };
 
 export default function Settings({ flow }) {
-  console.log(flow);
+  const profileConfig = flow.methods.profile.config;
+  const passwordConfig = flow.methods.password.config;
 
   return (
     <Layout title="Settings">
-      <div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
-        <SelfServiceForm config={flow.methods.password.config} fieldsConfig={fieldsConfig} />
-        <SelfServiceForm config={flow.methods.profile.config} fieldsConfig={fieldsConfig} />
+      <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={profileConfig} fieldsConfig={fieldsConfig} title="Account settings" />
+        <SelfServiceForm config={passwordConfig} fieldsConfig={fieldsConfig} title="Authentication settings" />
       </div>
     </Layout>
   );