fix: tune spacing for two-steps registration

ory · Feb 7, 2024 · 0110f8c · 0110f8c
1 parent d8e7451
commit 0110f8c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 34 deletions.
diff --git a/src/react-components/ory/sections/auth-code-section.tsx b/src/react-components/ory/sections/auth-code-section.tsx
@@ -32,17 +32,15 @@ export const AuthCodeSection = ({
         }}
       />
       <div className={gridStyle({ gap: 32 })}>
-        <div className={gridStyle({ gap: 16 })}>
-          {/* default group is used here automatically for login */}
-          <FilterFlowNodes
-            filter={{
-              nodes: nodes,
-              groups: "code",
-              withoutDefaultAttributes: true,
-              excludeAttributes: ["hidden", "button", "submit"], // the form will take care of default (csrf) hidden fields
-            }}
-          />
-        </div>
+        {/* default group is used here automatically for login */}
+        <FilterFlowNodes
+          filter={{
+            nodes: nodes,
+            groups: "code",
+            withoutDefaultAttributes: true,
+            excludeAttributes: ["hidden", "button", "submit"], // the form will take care of default (csrf) hidden fields
+          }}
+        />
         {/* include hidden here because we want to have resend support */}
         {/* exclude default group because we dont want to map csrf twice */}
         <FilterFlowNodes

diff --git a/src/react-components/ory/sections/profile-section.tsx b/src/react-components/ory/sections/profile-section.tsx
@@ -4,12 +4,7 @@ import { SettingsFlow } from "@ory/client"
 import { gridStyle } from "../../../theme"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
 import { SelfServiceFlow } from "../helpers/types"
-import {
-  hasPasskey,
-  hasPassword,
-  hasProfile,
-  hasWebauthn,
-} from "../helpers/utils"
+import { hasProfile } from "../helpers/utils"
 
 export interface ProfileSettingsProps {
   flow: SettingsFlow
@@ -37,19 +32,18 @@ export const ProfileRegistrationSection = (
 ): JSX.Element | null => {
   return hasProfile(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
-      <div className={gridStyle({ gap: 16 })}>
-        <FilterFlowNodes
-          filter={{
-            nodes: flow.ui.nodes,
-            groups: ["profile"],
-            excludeAttributes: "submit",
-          }}
-        />
-      </div>
       <FilterFlowNodes
         filter={{
           nodes: flow.ui.nodes,
           groups: ["profile"],
+          excludeAttributes: "submit,hidden",
+        }}
+      />
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["profile"],
+          excludeAttributes: "hidden",
           attributes: "submit",
         }}
       />

diff --git a/src/react-components/ory/user-auth-card.tsx b/src/react-components/ory/user-auth-card.tsx
@@ -480,14 +480,6 @@ export const UserAuthCard = ({
             </UserAuthForm>
           </>
         )}
-        {$profile && (
-          <>
-            <Divider />
-            <UserAuthForm flow={flow} data-testid={`${flowType}-flow-profile`}>
-              {$profile}
-            </UserAuthForm>
-          </>
-        )}
         {$code && (
           <>
             <Divider />
@@ -567,6 +559,15 @@ export const UserAuthCard = ({
           </>
         )}
 
+        {$profile && (
+          <>
+            <Divider />
+            <UserAuthForm flow={flow} data-testid={`${flowType}-flow-profile`}>
+              {$profile}
+            </UserAuthForm>
+          </>
+        )}
+
         {message && MessageSection(message)}
       </div>
     </Card>