fix show email in case it is a hidden field as disabled input with a …

…change email link to restart the flow. fixes canonical#290 Signed-off-by: David Edler <david.edler@canonical.com>
edlerd · Sep 27, 2024 · 58169cb · 58169cb
1 parent 0390c14
commit 58169cb
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/ui/components/NodeInputHidden.tsx b/ui/components/NodeInputHidden.tsx
@@ -1,7 +1,41 @@
 import { NodeInputProps } from "./helpers";
 import React, { FC } from "react";
+import { Input } from "@canonical/react-components";
+
+export const NodeInputHidden: FC<NodeInputProps> = ({
+  node,
+  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
+  ) {
+    return (
+      <Input
+        type="email"
+        labelClassName="password-label"
+        label={
+          <>
+            <span>E-Mail</span>
+            <a
+              href={`${window.location.href}&reset_email=1`}
+              style={{ float: "right" }}
+            >
+              Change e-mail
+            </a>
+          </>
+        }
+        onChange={(e) => void setValue(e.target.value)}
+        disabled={true}
+        defaultValue={attributes.value as string}
+      />
+    );
+  }
 
-export const NodeInputHidden: FC<NodeInputProps> = ({ attributes }) => {
   return (
     <input
       type={attributes.type}

diff --git a/ui/pages/login.tsx b/ui/pages/login.tsx
@@ -35,6 +35,7 @@ const Login: NextPage = () => {
     aal,
     login_challenge,
     use_backup_code: useBackupCode,
+    reset_email: resetEmail,
   } = router.query;
 
   const redirectToErrorPage = () => {
@@ -71,6 +72,24 @@ 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))
@@ -103,6 +122,8 @@ const Login: NextPage = () => {
         return "password";
       };
 
+      console.log(values);
+
       return kratos
         .updateLoginFlow({
           flow: String(flow?.id),