fix(security-key) improve ux when email does not have a security key …

…set up. fixes canonical#383 Signed-off-by: David Edler <david.edler@canonical.com>
edlerd · Dec 17, 2024 · 1f82aca · 1f82aca
1 parent e2aaea7
commit 1f82aca
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 9 deletions.
diff --git a/ui/components/NodeInputText.tsx b/ui/components/NodeInputText.tsx
@@ -25,6 +25,15 @@ export const NodeInputText: FC<NodeInputProps> = ({
   }
   const isDuplicate = deduplicateValues.includes(value as string);
 
+  const message = node.messages.map(({ text }) => text).join(" ");
+  const defaultValue = message.includes("Invalid login method")
+    ? (value as string)
+    : message;
+
+  const messageError = message.startsWith("Invalid login method")
+    ? "Invalid login method"
+    : undefined;
+
   return (
     <Input
       type="text"
@@ -33,17 +42,18 @@ export const NodeInputText: FC<NodeInputProps> = ({
       name={attributes.name}
       label={getNodeLabel(node)}
       disabled={disabled}
-      defaultValue={node.messages.map(({ text }) => text).join(" ")}
+      defaultValue={defaultValue}
       error={
-        attributes.name === "code" ||
+        messageError ??
+        (attributes.name === "code" ||
         attributes.name === "totp" ||
         attributes.name === "totp_code" ||
         attributes.name === "lookup_secret" ||
         (isWebauthn && attributes.name === "identifier")
           ? ucFirst(error)
           : isDuplicate
             ? "This value is already in use"
-            : undefined
+            : undefined)
       }
       onChange={(e) => void setValue(e.target.value)}
       onKeyDown={(e) => {

diff --git a/ui/pages/login.tsx b/ui/pages/login.tsx
@@ -16,7 +16,10 @@ import { kratos } from "../api/kratos";
 import { FlowResponse } from "./consent";
 import PageLayout from "../components/PageLayout";
 import { replaceAuthLabel } from "../util/replaceAuthLabel";
-import { UpdateLoginFlowWithOidcMethod } from "@ory/client/api";
+import {
+  UpdateLoginFlowWithOidcMethod,
+  UpdateLoginFlowWithPasswordMethod,
+} from "@ory/client/api";
 import { isSignInEmailInput, isSignInWithPassword } from "../util/constants";
 
 const Login: NextPage = () => {
@@ -36,6 +39,8 @@ const Login: NextPage = () => {
     aal,
     login_challenge,
     use_backup_code: useBackupCode,
+    email,
+    invalid_method,
   } = router.query;
 
   const redirectToErrorPage = () => {
@@ -129,6 +134,20 @@ const Login: NextPage = () => {
             return;
           }
 
+          if (
+            err.response?.data.toString().trim() ===
+            "choose a different login method"
+          ) {
+            const url = new URL(window.location.href);
+            url.searchParams.set(
+              "email",
+              (values as UpdateLoginFlowWithPasswordMethod).identifier,
+            );
+            url.searchParams.set("invalid_method", "1");
+            window.location.href = url.toString();
+            return;
+          }
+
           return Promise.reject(err);
         });
     },
@@ -179,10 +198,11 @@ const Login: NextPage = () => {
   if (renderFlow?.ui) {
     const urlParams = new URLSearchParams(window.location.search);
     isWebauthn =
-      urlParams.get("webauthn") === "true" ||
-      renderFlow.ui.nodes.filter(
-        (node) => node.group !== "webauthn" && node.group !== "default",
-      ).length === 0;
+      (urlParams.get("webauthn") === "true" ||
+        renderFlow.ui.nodes.filter(
+          (node) => node.group !== "webauthn" && node.group !== "default",
+        ).length === 0) &&
+      !invalid_method;
 
     renderFlow.ui.nodes = renderFlow?.ui.nodes.filter((node) => {
       // show webauthn elements in dedicated step after it is selected
@@ -253,8 +273,15 @@ const Login: NextPage = () => {
     if (isSignInWithPassword(node)) {
       node.meta.label.text = "Sign in";
     }
-    if (isSignInEmailInput(node)) {
+    if (isSignInEmailInput(node) && email && invalid_method) {
       node.meta.label.text = "Email";
+      (node.attributes as unknown as { value: string }).value =
+        typeof email === "string" ? email : email[email.length - 1];
+      node.messages.push({
+        id: 1,
+        type: "error",
+        text: "Invalid login method",
+      });
     }
     return node;
   });