fix part two of the fix for canonical#290 that clears the browser coo…

…kie to reset the email Signed-off-by: David Edler <david.edler@canonical.com>
edlerd · Sep 27, 2024 · c3fa5b4 · c3fa5b4
1 parent e0c4bd8
commit c3fa5b4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 28 deletions.
diff --git a/ui/components/NodeInputHidden.tsx b/ui/components/NodeInputHidden.tsx
@@ -7,13 +7,7 @@ export const NodeInputHidden: FC<NodeInputProps> = ({
   attributes,
   setValue,
 }) => {
-  // todo: limit this to the email field for password input, this should not show up for mfa or other steps
-  if (
-    node.group === "default" &&
-    attributes.name === "identifier" &&
-    attributes.node_type === "input" &&
-    !attributes.disabled
-  ) {
+  if (node.meta.label?.text === "Change e-mail") {
     return (
       <Input
         type="email"

diff --git a/ui/pages/login.tsx b/ui/pages/login.tsx
@@ -49,6 +49,18 @@ const Login: NextPage = () => {
       return;
     }
 
+    if (resetEmail) {
+      void fetch("/api/kratos/self-service/clear-session", {
+        method: "DELETE",
+      }).then(() => {
+        window.location.href = window.location.href.replace(
+          "&reset_email=1",
+          "",
+        );
+      });
+      return;
+    }
+
     // If ?flow=.. was in the URL, we fetch it
     if (flowId) {
       kratos
@@ -72,24 +84,6 @@ const Login: NextPage = () => {
           window.location.href = data.redirect_to;
           return;
         }
-        if (resetEmail) {
-          const csrfNode = data?.ui.nodes.find(
-            (node) =>
-              node.group === "default" &&
-              node.attributes.node_type === "input" &&
-              node.attributes.name === "csrf_token",
-          )?.attributes as UiNodeInputAttributes;
-
-          // todo this returns 500 and does not work
-          // need a way to unset the ory_kratos_session cookie, but it is httponly
-          void kratos.updateLoginFlow({
-            flow: String(data?.id),
-            updateLoginFlowBody: {
-              method: "",
-              csrf_token: (csrfNode.value as string) ?? "",
-            } as UpdateLoginFlowBody,
-          });
-        }
         setFlow(data);
       })
       .catch(handleFlowError("login", setFlow))
@@ -122,8 +116,6 @@ const Login: NextPage = () => {
         return "password";
       };
 
-      console.log(values);
-
       return kratos
         .updateLoginFlow({
           flow: String(flow?.id),
@@ -192,12 +184,38 @@ const Login: NextPage = () => {
   };
 
   let isWebauthn = false;
+  let isPasswordOnly = false;
   const supportsWebauthn = flow?.ui.nodes.some(
     (node) => node.group === "webauthn",
   );
   const renderFlow = isAuthCode ? filterFlow(replaceAuthLabel(flow)) : flow;
 
   if (renderFlow?.ui) {
+    isPasswordOnly =
+      renderFlow.ui.messages?.length === 1 &&
+      renderFlow.ui.messages[0].id === 1010003;
+    if (isPasswordOnly) {
+      renderFlow.ui.nodes = renderFlow.ui.nodes.map((node) => {
+        if (
+          node.group !== "default" ||
+          (node.attributes as UiNodeInputAttributes).name !== "identifier"
+        ) {
+          return node;
+        }
+
+        return {
+          ...node,
+          meta: {
+            label: {
+              id: 1,
+              text: "Change e-mail",
+              type: "info",
+            },
+          },
+        };
+      });
+    }
+
     const urlParams = new URLSearchParams(window.location.search);
     isWebauthn =
       urlParams.get("webauthn") === "true" ||
@@ -215,7 +233,7 @@ const Login: NextPage = () => {
     });
 
     // add security key option that looks like an oidc input
-    if (!isWebauthn && !isAuthCode && supportsWebauthn) {
+    if (!isWebauthn && !isAuthCode && supportsWebauthn && !isPasswordOnly) {
       renderFlow.ui.nodes.push({
         attributes: {
           type: "url",
@@ -274,6 +292,11 @@ const Login: NextPage = () => {
     <PageLayout title={title}>
       {flow ? <Flow onSubmit={handleSubmit} flow={renderFlow} /> : <Spinner />}
       {isWebauthn && <a href={flow?.return_to}>I want to use another method</a>}
+      {isPasswordOnly && (
+        <a href={`${window.location.href}&reset_email=1`}>
+          I want to use another method
+        </a>
+      )}
     </PageLayout>
   );
 };