fix: separate the oidc login controls from email password

flanksource · Nov 17, 2023 · e68010c · e68010c
1 parent 54b1477
commit e68010c
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 35 deletions.
diff --git a/src/components/ory/ui/Flow.tsx b/src/components/ory/ui/Flow.tsx
@@ -11,7 +11,11 @@ import {
   UpdateVerificationFlowBody as SubmitSelfServiceVerificationFlowBody,
   UiNode
 } from "@ory/client";
-import { getNodeId, isUiNodeInputAttributes } from "@ory/integrations/ui";
+import {
+  filterNodesByGroups,
+  getNodeId,
+  isUiNodeInputAttributes
+} from "@ory/integrations/ui";
 import { Component, FormEvent } from "react";
 
 import FormSkeletonLoader from "../../SkeletonLoader/FormSkeletonLoader";
@@ -158,40 +162,82 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
     }
 
     return (
-      <form
-        className="space-y-8"
-        action={flow.ui.action}
-        method={flow.ui.method}
-        onSubmit={this.handleSubmit}
-      >
-        {!hideGlobalMessages ? <Messages messages={flow.ui.messages} /> : null}
-        {nodes.map((node, k) => {
-          const id = getNodeId(node) as keyof Values;
-          return (
-            <Node
-              key={`${id}-${k}`}
-              disabled={isLoading}
-              node={node}
-              value={values[id]}
-              dispatchSubmit={this.handleSubmit}
-              setValue={(value) =>
-                new Promise((resolve) => {
-                  this.setState(
-                    (state) => ({
-                      ...state,
-                      values: {
-                        ...state.values,
-                        [getNodeId(node)]: value
-                      }
-                    }),
-                    resolve
-                  );
-                })
-              }
-            />
-          );
-        })}
-      </form>
+      <div className="flex flex-col gap-2">
+        <form
+          className="space-y-8"
+          action={flow.ui.action}
+          method={flow.ui.method}
+          onSubmit={this.handleSubmit}
+        >
+          {!hideGlobalMessages ? (
+            <Messages messages={flow.ui.messages} />
+          ) : null}
+          {filterNodesByGroups({
+            nodes: nodes,
+            groups: ["default", "password"]
+          }).map((node, k) => {
+            const id = getNodeId(node) as keyof Values;
+            return (
+              <Node
+                key={`${id}-${k}`}
+                disabled={isLoading}
+                node={node}
+                value={values[id]}
+                dispatchSubmit={this.handleSubmit}
+                setValue={(value) =>
+                  new Promise((resolve) => {
+                    this.setState(
+                      (state) => ({
+                        ...state,
+                        values: {
+                          ...state.values,
+                          [getNodeId(node)]: value
+                        }
+                      }),
+                      resolve
+                    );
+                  })
+                }
+              />
+            );
+          })}
+        </form>
+
+        <hr className="border-gray-200 my-3" />
+
+        <div className="flex flex-col">
+          {filterNodesByGroups({
+            nodes: nodes,
+            groups: ["oidc", "webauthn"],
+            withoutDefaultGroup: true
+          }).map((node, k) => {
+            const id = getNodeId(node) as keyof Values;
+            return (
+              <Node
+                key={`${id}-${k}`}
+                disabled={isLoading}
+                node={node}
+                value={values[id]}
+                dispatchSubmit={this.handleSubmit}
+                setValue={(value) =>
+                  new Promise((resolve) => {
+                    this.setState(
+                      (state) => ({
+                        ...state,
+                        values: {
+                          ...state.values,
+                          [getNodeId(node)]: value
+                        }
+                      }),
+                      resolve
+                    );
+                  })
+                }
+              />
+            );
+          })}
+        </div>
+      </div>
     );
   }
 }
diff --git a/src/components/ory/ui/NodeInputButton.tsx b/src/components/ory/ui/NodeInputButton.tsx
@@ -36,6 +36,7 @@ export function NodeInputButton({
       }}
       value={attributes.value || ""}
       disabled={attributes.disabled || disabled}
+      type="button"
     >
       {getNodeLabel(node)}
     </button>

diff --git a/src/components/ory/ui/NodeInputSubmit.tsx b/src/components/ory/ui/NodeInputSubmit.tsx
@@ -19,6 +19,7 @@ export function NodeInputSubmit({
       }}
       value={attributes.value || ""}
       disabled={attributes.disabled || disabled}
+      type="submit"
     >
       {getNodeLabel(node)}
     </button>