feat: add password error styles to input text

Author: anusha-c18

ui/api/kratos.ts

@@ -1,4 +1,4 @@
-import { Configuration, FrontendApi } from "@ory/client";
+import { Configuration, FrontendApi, UpdateLoginFlowBody, LoginFlow } from "@ory/client";
 
 export const kratos = new FrontendApi(
   new Configuration({
@@ -9,3 +9,33 @@ export const kratos = new FrontendApi(
     },
   })
 );
+
+type IdentifierFirstResponse = { redirect_to: string } | LoginFlow;
+
+export async function loginIdentifierFirst(
+  flowId: string,
+  values: UpdateLoginFlowBody,
+  method: string,
+  flow?: { id?: string; return_to?: string }
+) {
+  const res = await fetch(
+    `/api/kratos/self-service/login/id-first?flow=${encodeURIComponent(flowId)}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        ...values,
+        method,
+        flow: String(flow?.id),
+      }),
+    },
+  );
+
+  if (!res.ok) {
+    throw new Error(await res.text());
+  }
+
+  return (await res.json()) as IdentifierFirstResponse;
+}

ui/components/NodeInputPassword.tsx

@@ -1,5 +1,5 @@
 import { getNodeLabel } from "@ory/integrations/ui";
-import React, { FC, useState } from "react";
+import React, { FC, useState, ChangeEvent, KeyboardEvent } from "react";
 import { NodeInputProps } from "./helpers";
 import PasswordToggle from "./PasswordToggle";
 
@@ -30,6 +30,19 @@ export const NodeInputPassword: FC<NodeInputProps> = ({
     }
   };
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+    void setValue(e.target.value);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      void dispatchSubmit(e, "password");
+    }
+  };
+
   return (
     <PasswordToggle
       tabIndex={2}
@@ -50,17 +63,8 @@ export const NodeInputPassword: FC<NodeInputProps> = ({
       disabled={disabled}
       placeholder="Your Password"
       error={getError()}
-      onChange={(e) => {
-        setPassword(e.target.value);
-        void setValue(e.target.value);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          e.stopPropagation();
-          void dispatchSubmit(e, "password");
-        }
-      }}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
     />
   );
 };

ui/components/Password.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useState, useCallback } from "react";
 import PasswordCheck from "./PasswordCheck";
 import PasswordToggle from "./PasswordToggle";
 
@@ -24,6 +24,19 @@ function useDebounce<T>(value: T, delay: number): T {
   return debounced;
 }
 
+const validateCheck = (check: PasswordCheckType, value: string): boolean => {
+  switch (check) {
+    case "lowercase":
+      return /[a-z]/.test(value);
+    case "uppercase":
+      return /[A-Z]/.test(value);
+    case "number":
+      return /\d/.test(value);
+    case "length":
+      return value.length >= 8;
+  }
+};
+
 const Password: FC<Props> = ({
   checks,
   password,
@@ -39,19 +52,6 @@ const Password: FC<Props> = ({
   const debouncedPassword = useDebounce(password, DEBOUNCE_DURATION);
   const debouncedConfirmation = useDebounce(confirmation, DEBOUNCE_DURATION);
 
-  const validateCheck = (check: PasswordCheckType, value: string): boolean => {
-    switch (check) {
-      case "lowercase":
-        return /[a-z]/.test(value);
-      case "uppercase":
-        return /[A-Z]/.test(value);
-      case "number":
-        return /\d/.test(value);
-      case "length":
-        return value.length >= 8;
-    }
-  };
-
   const getStatus = (check: PasswordCheckType) => {
     if (!hasTouched || !debouncedPassword) return "neutral";
     if (validateCheck(check, debouncedPassword)) return "success";
@@ -71,6 +71,14 @@ const Password: FC<Props> = ({
     }
   }, [computedValid, setValid]);
 
+  const handlePasswordChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!hasTouched) setHasTouched(true);
+      setPassword(e.target.value);
+    },
+    [hasTouched, setPassword],
+  );
+
   return (
     <>
       <PasswordToggle
@@ -79,12 +87,10 @@ const Password: FC<Props> = ({
         label={label}
         placeholder="Your password"
         onBlur={() => setHasBlurred(true)}
-        onChange={(e) => {
-          if (!hasTouched) setHasTouched(true);
-          setPassword(e.target.value);
-        }}
+        onChange={handlePasswordChange}
         value={password}
         help={checks.length > 0 && "Password must contain"}
+        className={isCheckFailed ? "password-error" : ""}
       />
       <div className="password-checks">
         {checks.map((check) => {

ui/components/PasswordCheck.tsx

@@ -8,6 +8,8 @@ type Props = {
   status: "success" | "error" | "neutral";
 };
 
+const STATUSES_WITH_INFO_ICON = ["error", "neutral"];
+
 const PasswordCheck: FC<Props> = ({ check, status }) => {
   const getMessage = () => {
     switch (check) {
@@ -26,15 +28,16 @@ const PasswordCheck: FC<Props> = ({ check, status }) => {
     <div
       className={classNames({
         "is-success": status === "success",
-        "is-error": status === "error",
       })}
     >
       <p
         className={classNames("p-form-validation__message", {
-          "is-neutral u-text--muted": status === "neutral",
+          "is-neutral u-text--muted": STATUSES_WITH_INFO_ICON.includes(status),
         })}
       >
-        {status === "neutral" && <Icon name="information" />}
+        {STATUSES_WITH_INFO_ICON.includes(status) && (
+          <Icon name="information" />
+        )}
         {getMessage()}
       </p>
     </div>

ui/pages/login.tsx

@@ -12,7 +12,7 @@ import { useEffect, useState, useCallback } from "react";
 import React from "react";
 import { handleFlowError } from "../util/handleFlowError";
 import { Flow } from "../components/Flow";
-import { kratos } from "../api/kratos";
+import { kratos, loginIdentifierFirst } from "../api/kratos";
 import { FlowResponse } from "./consent";
 import PageLayout from "../components/PageLayout";
 import { replaceAuthLabel } from "../util/replaceAuthLabel";
@@ -35,7 +35,34 @@ type AppConfig = {
   oidc_webauthn_sequencing_enabled?: boolean;
 };
 
-type IdentifierFirstResponse = { redirect_to: string } | LoginFlow;
+const getTitleSuffix = (reqName: string, reqDomain: string) => {
+  if (reqName && reqDomain) {
+    return ` to ${reqName} on ${reqDomain}`;
+  }
+  if (reqName) {
+    return ` to ${reqName}`;
+  }
+  if (reqDomain) {
+    return ` to ${reqDomain}`;
+  }
+  return "";
+};
+
+const resolveLoginTitle = (
+  isIdentifierFirst: boolean,
+  isAuthCode: UiNode | undefined,
+  titleSuffix: string,
+) => {
+  if (isIdentifierFirst) {
+    return "Sign in";
+  }
+
+  if (isAuthCode) {
+    return "Verify your identity";
+  }
+
+  return `Sign in${titleSuffix}`;
+};
 
 const Login: NextPage = () => {
   const [flow, setFlow] = useState<LoginFlow>();
@@ -114,7 +141,7 @@ const Login: NextPage = () => {
       if (login_challenge) {
         return undefined;
       }
-      return window.location.pathname.replace("login", "manage_details");
+      return window.location.pathname;
     };
 
     // Otherwise we initialize it
@@ -135,9 +162,18 @@ const Login: NextPage = () => {
           return;
         }
 
-        await router.replace(`/ui/login?flow=${data.id}`, undefined, {
-          shallow: true,
-        });
+        await router.replace(
+          {
+            pathname: "/ui/login",
+            query: {
+              ...router.query,
+              flow: data.id,
+            },
+          },
+          undefined,
+          { shallow: true },
+        );
+
         setFlow(data);
       })
       .catch(handleFlowError("login", setFlow))
@@ -189,26 +225,7 @@ const Login: NextPage = () => {
       if (method === "identifier_first") {
         const flowId = String(flow?.id);
 
-        return fetch(
-          `/api/kratos/self-service/login/id-first?flow=${encodeURIComponent(flowId)}`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              ...values,
-              method,
-              flow: String(flow?.id),
-            }),
-          },
-        )
-          .then(async (res) => {
-            if (!res.ok) {
-              throw new Error(await res.text());
-            }
-            return (await res.json()) as IdentifierFirstResponse;
-          })
+        loginIdentifierFirst(flowId, values, method, flow)
           .then((data) => {
             if ("redirect_to" in data) {
               window.location.href = data.redirect_to;
@@ -272,29 +289,12 @@ const Login: NextPage = () => {
     },
     [flow, router],
   );
-  const reqName = flow?.oauth2_login_request?.client?.client_name;
+  const reqName = flow?.oauth2_login_request?.client?.client_name ?? "";
   const reqDomain = flow?.oauth2_login_request?.client?.client_uri
     ? new URL(flow.oauth2_login_request.client.client_uri).hostname
     : "";
-
-  const getTitleSuffix = () => {
-    if (reqName && reqDomain) {
-      return ` to ${reqName} on ${reqDomain}`;
-    }
-    if (reqName) {
-      return ` to ${reqName}`;
-    }
-    if (reqDomain) {
-      return ` to ${reqDomain}`;
-    }
-    return "";
-  };
-
-  const title = isIdentifierFirst
-    ? "Sign in"
-    : isAuthCode
-      ? "Verify your identity"
-      : `Sign in${getTitleSuffix()}`;
+  const titleSuffix = getTitleSuffix(reqName, reqDomain);
+  const title = resolveLoginTitle(isIdentifierFirst, isAuthCode, titleSuffix);
 
   const filterFlow = (flow: LoginFlow | undefined): LoginFlow => {
     if (!flow) {
@@ -472,7 +472,8 @@ const Login: NextPage = () => {
         <>
           {isWebauthn && isSequencedLogin && (
             <p className="u-text--muted">
-              Additional authentication needed to get access {getTitleSuffix()}
+              Additional authentication needed to get access{" "}
+              {getTitleSuffix(reqName, reqDomain)}
             </p>
           )}
           {flow ? (

ui/static/sass/styles.scss

@@ -190,8 +190,20 @@ hr {
       top: 41%;
     }
   }
-}
 
+  .password-error {
+    background-color: var(--vf-color-background-negative-active);
+    border-bottom-color: var(--vf-color-border-negative);
+
+    &:hover {
+      background-color: var(--vf-color-background-negative-hover);
+    }
+
+    &:focus {
+      outline-color: #c7162b;
+    }
+  }
+}
 
 .is-success .p-form-validation__input,
 .is-success .p-form-validation__input:hover,