fix: separate the oidc login controls from email password

fix: fix sign in with microsoft not working
flanksource · Nov 20, 2023 · 896b41a · 896b41a
1 parent 54b1477
commit 896b41a
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 39 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,84 @@ 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" />
+
+        <form action={flow.ui.action} method={flow.ui.method}>
+          <div className="flex flex-col">
+            {filterNodesByGroups({
+              nodes: nodes,
+              groups: ["oidc"],
+              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>
+        </form>
+      </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
@@ -13,12 +13,18 @@ export function NodeInputSubmit({
     <button
       className="flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
       name={attributes.name}
-      onClick={(e) => {
-        // On click, we set this value, and once set, dispatch the submission!
-        setValue(attributes.value).then(() => dispatchSubmit(e));
-      }}
       value={attributes.value || ""}
       disabled={attributes.disabled || disabled}
+      type="submit"
+      // spread the attributes conditionally
+      {...(node.group !== "oidc"
+        ? {
+            onClick: (e) => {
+              // On click, we set this value, and once set, dispatch the submission!
+              setValue(attributes.value).then(() => dispatchSubmit(e));
+            }
+          }
+        : {})}
     >
       {getNodeLabel(node)}
     </button>