feat: implement login-password screen, enhance form handling, and update styling for improved user experience

amberkamboj77 · amberkamboj77 · commit 6c7236210b38 · 2025-05-21T16:00:38.000+05:30
diff --git a/src/common/FormField/index.tsx b/src/common/FormField/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import Label from "@/common/Label";
 import type { LabelProps } from "@/common/Label";
 import Input from "@/common/Input";
@@ -27,12 +27,18 @@ const FormField: React.FC<FormFieldProps> = ({
   inputWrapperClassName,
   errorTextClassName,
 }) => {
-  const { id: inputId } = inputProps;
+  const { id: inputId, className: inputSpecificClassName } = inputProps;
+  const internalInputRef = useRef<HTMLInputElement>(null);
 
-  let inputCombinedClassName = inputProps.className || "";
+  let inputCombinedClassName = inputSpecificClassName || "";
   const errorRingStyles = "border-error focus:ring-error focus:border-error";
 
   let finalInputProps = { ...inputProps };
+  delete finalInputProps.className;
+
+  if (inputIcon) {
+    inputCombinedClassName += " pr-16";
+  }
 
   if (error) {
     inputCombinedClassName += ` ${errorRingStyles}`;
@@ -45,20 +51,23 @@ const FormField: React.FC<FormFieldProps> = ({
       <div
         className={`relative mt-1 rounded-md shadow-sm ${inputWrapperClassName || ""}`}
       >
-        <Input
-          {...finalInputProps}
-          className={inputCombinedClassName}
-          aria-invalid={!!error}
-          aria-describedby={error ? `${inputId}-error` : undefined}
-        />
-        <Label {...labelProps} htmlFor={inputId} isError={!!error} />
-        {inputIcon && (
-          <div
-            className={`absolute inset-y-0 right-0 flex items-center rounded-r-md mt-px mt-3 ${isParentFocused ? "bg-primary/15" : ""}`}
-          >
-            {inputIcon}
-          </div>
-        )}
+        <div className="relative w-full">
+          <Input
+            {...finalInputProps}
+            ref={internalInputRef}
+            className={inputCombinedClassName}
+            aria-invalid={!!error}
+            aria-describedby={error ? `${inputId}-error` : undefined}
+          />
+          <Label {...labelProps} htmlFor={inputId} isError={!!error} />
+          {inputIcon && (
+            <div
+              className={`absolute inset-y-0 right-0 flex items-center rounded-r-md mt-px mt-3 ${isParentFocused ? "bg-primary/15" : ""}`}
+            >
+              {inputIcon}
+            </div>
+          )}
+        </div>
       </div>
       {error && (
         <div
diff --git a/src/common/Input/index.tsx b/src/common/Input/index.tsx
@@ -36,7 +36,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     ref,
   ) => {
     const baseInputStyles =
-      "block w-full px-3 py-4 h-14 border rounded focus:outline-none peer box-border";
+      "block w-full px-3 py-4 h-14 border rounded focus:outline-none peer box-border overflow-hidden text-ellipsis whitespace-nowrap";
 
     let borderAndFocusStyles = "";
     const hasError = className?.includes("border-error");
diff --git a/src/common/Tooltip/index.tsx b/src/common/Tooltip/index.tsx
@@ -35,11 +35,11 @@ const Tooltip: React.FC<TooltipProps> = ({
 
   return (
     <div
-      className={`relative inline-block ${className || ""}`}
+      className={`relative ${className || ""}`}
       onMouseEnter={() => setIsVisible(true)}
       onMouseLeave={() => setIsVisible(false)}
-      onFocusCapture={() => setIsVisible(true)} // Show on focus as well for accessibility
-      onBlurCapture={() => setIsVisible(false)} // Hide on blur
+      onFocusCapture={() => setIsVisible(true)}
+      onBlurCapture={() => setIsVisible(false)}
     >
       {children}
       {isVisible && text && (
diff --git a/src/context/BrandingProvider.tsx b/src/context/BrandingProvider.tsx
@@ -9,9 +9,9 @@ interface BrandingContextValues {
 }
 
 const defaultBrandingValues: BrandingContextValues = {
-  primaryColor: "#0059d6",
-  linkColor: "#007bad",
-  pageBackground: "#f9fafb",
+  primaryColor: "#635dff",
+  linkColor: "#635dff",
+  pageBackground: "#ffffff",
   logoUrl:
     "https://cdn.auth0.com/ulp/react-components/1.59/img/theme-generic/logo-generic.svg",
 };
diff --git a/src/mock-data/login-password.json b/src/mock-data/login-password.json
diff --git a/src/mock-data/login.json b/src/mock-data/login.json
diff --git a/src/screens/login-id/components/Footer.tsx b/src/screens/login-id/components/Footer.tsx
@@ -11,7 +11,7 @@ const Footer: React.FC = () => {
       {signupLink && (
         <a
           href={signupLink}
-          className="text-sm font-bold text-link hover:text-link/60 focus:bg-link/15 focus:rounded p-1"
+          className="text-sm font-bold text-link hover:text-link/80 focus:bg-link/15 focus:rounded p-1"
         >
           Sign up
         </a>
diff --git a/src/screens/login-id/components/Header.tsx b/src/screens/login-id/components/Header.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Logo from "@/common/Logo";
 
-// No props needed as it will use the hook internally
 const Header: React.FC = () => {
   return (
     <>
diff --git a/src/screens/login-id/components/IdentifierForm.tsx b/src/screens/login-id/components/IdentifierForm.tsx
@@ -39,6 +39,7 @@ const IdentifierForm: React.FC = () => {
           ref: identifierRef,
           autoComplete: "username",
           required: true,
+          maxLength: 100,
         }}
         error={
           getFieldError("identifier", sdkErrors) ||
@@ -57,6 +58,7 @@ const IdentifierForm: React.FC = () => {
           inputProps={{
             ref: captchaRef,
             required: isCaptchaAvailable,
+            maxLength: 15,
           }}
           error={getFieldError("captcha", sdkErrors)}
         />
@@ -65,7 +67,7 @@ const IdentifierForm: React.FC = () => {
         {loginIdInstance?.screen?.links?.reset_password && (
           <a
             href={loginIdInstance?.screen?.links?.reset_password}
-            className="text-sm text-link font-bold hover:text-link/60 focus:bg-link/15 focus:rounded p-1"
+            className="text-sm text-link font-bold hover:text-link/80 focus:bg-link/15 focus:rounded p-1"
           >
             Forgot Password?
           </a>
diff --git a/src/screens/login-password/components/Footer.tsx b/src/screens/login-password/components/Footer.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useLoginPasswordManager } from "../hooks/userLoginPasswordManager";
+
+const Footer: React.FC = () => {
+  const { loginPasswordInstance } = useLoginPasswordManager();
+  const signupLink = loginPasswordInstance?.screen?.links?.signup;
+
+  return (
+    <div className="mt-4 text-left">
+      <span className="text-sm pr-1">Don't have an account?</span>
+      {signupLink && (
+        <a
+          href={signupLink}
+          className="text-sm font-bold text-link hover:text-link/80 focus:bg-link/15 focus:rounded p-1"
+        >
+          Sign up
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/screens/login-password/components/Header.tsx b/src/screens/login-password/components/Header.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Logo from "@/common/Logo";
+
+const Header: React.FC = () => {
+  return (
+    <>
+      <Logo imageClassName="h-13" />
+      <h1 className="text-2xl font-normal text-center text-text-default mt-6 mb-4">
+        Enter your password
+      </h1>
+      <p className="text-center text-text-default text-sm mb-4">
+        Please enter your password to continue.
+      </p>
+    </>
+  );
+};
+
+export default Header;
diff --git a/src/screens/login-password/components/LoginPasswordForm.tsx b/src/screens/login-password/components/LoginPasswordForm.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import Button from "@/common/Button";
+import PasswordInput from "@/common/PasswordInput";
+import type { SdkError } from "@/utils/errorUtils";
+import { getFieldError } from "@/utils/errorUtils";
+import { useLoginPasswordManager } from "../hooks/userLoginPasswordManager";
+import { useLoginPasswordForm } from "../hooks/useLoginPasswordForm";
+import FormField from "@/common/FormField";
+
+const LoginForm: React.FC = () => {
+  const { loginPasswordInstance, username, editIdentifierLink, handleLogin } =
+    useLoginPasswordManager();
+  const { passwordRef, getFormValues } = useLoginPasswordForm();
+
+  const sdkErrors: SdkError[] = (loginPasswordInstance?.transaction?.errors ||
+    []) as SdkError[];
+
+  const onLoginClick = (e: React.FormEvent) => {
+    e.preventDefault();
+    const { password } = getFormValues();
+    handleLogin({ username: username || "", password });
+  };
+
+  return (
+    <form onSubmit={onLoginClick} className="space-y-4">
+      <FormField
+        className="mb-4 w-full"
+        labelProps={{
+          children: `Username or Email address*`,
+          htmlFor: "email-login",
+        }}
+        inputProps={{
+          id: "email-login",
+          name: "email",
+          type: "email",
+          value: username,
+          placeholder: "\u00A0",
+          autoComplete: "email",
+          disabled: true,
+        }}
+        inputIcon={
+          <a
+            href={editIdentifierLink}
+            className="text-sm text-link font-bold hover:text-link/80 focus:bg-link/15 focus:rounded p-1 px-3"
+          >
+            Edit
+          </a>
+        }
+      />
+
+      <PasswordInput
+        className="mb-4 w-full"
+        label={`Password*`}
+        name="password"
+        inputProps={{
+          ref: passwordRef,
+          autoComplete: "current-password",
+          required: true,
+          autoFocus: true,
+          maxLength: 25,
+        }}
+        error={getFieldError("password", sdkErrors)}
+      />
+
+      <div className="mt-6 text-left">
+        {loginPasswordInstance?.screen?.links?.reset_password && (
+          <a
+            href={loginPasswordInstance.screen.links.reset_password}
+            className="text-sm text-link font-bold hover:text-link/80 focus:bg-link/15 focus:rounded p-1"
+          >
+            Forgot password?
+          </a>
+        )}
+      </div>
+
+      <Button type="submit" fullWidth>
+        Login
+      </Button>
+    </form>
+  );
+};
+
+export default LoginForm;
diff --git a/src/screens/login-password/hooks/useLoginPasswordForm.ts b/src/screens/login-password/hooks/useLoginPasswordForm.ts
@@ -0,0 +1,16 @@
+import { useRef } from "react";
+
+export const useLoginPasswordForm = () => {
+  const passwordRef = useRef<HTMLInputElement>(
+    null,
+  ) as React.RefObject<HTMLInputElement>;
+
+  const getFormValues = () => ({
+    password: passwordRef.current?.value ?? "",
+  });
+
+  return {
+    passwordRef,
+    getFormValues,
+  };
+};
diff --git a/src/screens/login-password/hooks/userLoginPasswordManager.ts b/src/screens/login-password/hooks/userLoginPasswordManager.ts
@@ -0,0 +1,29 @@
+import { useState } from "react";
+import LoginPasswordInstance from "@auth0/auth0-acul-js/login-password";
+import { executeSafely } from "@/utils/executeSafely";
+
+export const useLoginPasswordManager = () => {
+  const [loginPasswordInstance] = useState(() => new LoginPasswordInstance());
+
+  const editIdentifierLink =
+    loginPasswordInstance.screen.editIdentifierLink || "";
+  const username = loginPasswordInstance.screen.data?.username || "";
+
+  const handleLogin = (options: { username: string; password: string }) => {
+    const payload = {
+      username: options.username,
+      password: options.password,
+    };
+    executeSafely(
+      `Login password with options: ${JSON.stringify(payload)}`,
+      () => loginPasswordInstance.login(payload),
+    );
+  };
+
+  return {
+    loginPasswordInstance,
+    handleLogin,
+    editIdentifierLink,
+    username,
+  };
+};
diff --git a/src/screens/login-password/index.tsx b/src/screens/login-password/index.tsx
@@ -1,25 +1,28 @@
-import Button from "@/common/Button";
+import React from "react";
+import Card from "@/common/Card";
+import { BrandingProvider } from "@/context/BrandingProvider";
+import { useLoginPasswordManager } from "./hooks/userLoginPasswordManager";
+
+import Header from "./components/Header";
+import LoginPasswordForm from "./components/LoginPasswordForm";
+import Footer from "./components/Footer";
+
+const LoginPasswordScreen: React.FC = () => {
+  const { loginPasswordInstance } = useLoginPasswordManager();
+
+  const texts = loginPasswordInstance?.screen?.texts || {};
+  document.title = texts?.pageTitle || "Login Password";
 
-const LoginPasswordScreen = () => {
   return (
-    <div className="p-6 mx-auto my-4 max-w-md bg-background-widget rounded-lg shadow-md border">
-      <h1 className="text-2xl font-bold mb-4">Enter Your Password</h1>
-      {/* Add password input field here later */}
-      <p className="mb-6 text-sm text-textSecondary dark:text-gray-400">
-        Please enter your password to continue.
-      </p>
-      <Button
-        className="w-full bg-primary text-white px-4 py-2 text-sm rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors duration-150 ease-in-out"
-        onClick={() => console.log("Sign In from Login Password clicked")}
-      >
-        Sign In
-      </Button>
-      <div className="mt-4 text-center">
-        <a href="#" className="text-sm text-link hover:underline">
-          Forgot password?
-        </a>
+    <BrandingProvider screenInstance={loginPasswordInstance}>
+      <div className="min-h-screen flex items-center justify-center px-10 py-20">
+        <Card className="w-full max-w-[400px]">
+          <Header />
+          <LoginPasswordForm />
+          <Footer />
+        </Card>
       </div>
-    </div>
+    </BrandingProvider>
   );
 };
 
diff --git a/src/screens/login/components/Footer.tsx b/src/screens/login/components/Footer.tsx
@@ -11,7 +11,7 @@ const Footer: React.FC = () => {
       {signupLink && (
         <a
           href={signupLink}
-          className="text-sm font-bold text-link hover:text-link/50 focus:bg-link/15 focus:rounded p-1"
+          className="text-sm font-bold text-link hover:text-link/80 focus:bg-link/15 focus:rounded p-1"
         >
           Sign up
         </a>
diff --git a/src/screens/login/components/LoginForm.tsx b/src/screens/login/components/LoginForm.tsx
@@ -69,6 +69,7 @@ const LoginForm: React.FC = () => {
           inputProps={{
             ref: captchaRef,
             required: isCaptchaAvailable,
+            maxLength: 15,
           }}
           error={getFieldError("captcha", sdkErrors)}
         />
@@ -77,7 +78,7 @@ const LoginForm: React.FC = () => {
         {loginInstance?.screen?.links?.reset_password && (
           <a
             href={loginInstance.screen.links.reset_password}
-            className="text-sm text-link font-bold hover:text-link/60 focus:bg-link/15 focus:rounded p-1"
+            className="text-sm text-link font-bold hover:text-link/80 focus:bg-link/15 focus:rounded p-1"
           >
             Forgot password?
           </a>

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const Footer: React.FC = () => {`
`11`	`11`	`{signupLink && (`
`12`	`12`	`<a`
`13`	`13`	`href={signupLink}`
`14`		`- className="text-sm font-bold text-link hover:text-link/60 focus:bg-link/15 focus:rounded p-1"`
	`14`	`+ className="text-sm font-bold text-link hover:text-link/80 focus:bg-link/15 focus:rounded p-1"`
`15`	`15`	`>`
`16`	`16`	`Sign up`
`17`	`17`	`</a>`