chore: css and sdk fixes for login screen

Author: amberkamboj77

src/common/Input/index.tsx

@@ -46,7 +46,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     } else if (forceFocusStyle) {
       borderAndFocusStyles = "border-link ring-1 ring-link";
     } else {
-      borderAndFocusStyles = "border-gray-mid focus:ring-1 focus:ring-link focus:border-link";
+      borderAndFocusStyles =
+        "border-gray-mid focus:ring-1 focus:ring-link focus:border-link";
     }
 
     return (

src/common/Label/index.tsx

@@ -6,34 +6,36 @@ export interface LabelProps
   htmlFor: string;
   className?: string;
   isError?: boolean;
+  forceApplyFocusStyle?: boolean; //Especially for password input icon button
 }
 
 const Label: React.FC<LabelProps> = ({
   children,
   htmlFor,
   className,
   isError,
+  forceApplyFocusStyle,
   ...rest
 }) => {
-  const unfloatedTextColor = isError ? "text-error" : "text-text-secondary";
-  const baseLabelStyles =
-    `absolute left-3 top-1/2 -translate-y-1/2 ${unfloatedTextColor} transition-all duration-200 ease-in-out pointer-events-none origin-[0]`;
+  const unfloatedTextColor = isError
+    ? "text-error"
+    : forceApplyFocusStyle
+      ? "!text-link"
+      : "text-text-secondary";
 
-  // Determine floated text color based on isError
-  const floatedTextColor = isError ? "!text-error" : "text-link";
+  const baseLabelStyles = `absolute left-3 top-1/2 -translate-y-1/2 ${unfloatedTextColor} transition-all duration-200 ease-in-out pointer-events-none origin-[0]`;
+
+  const floatedTextColorForFilledOrForced = isError
+    ? "!text-error"
+    : "!text-link";
 
-  // Styles for when the label is floated (input has focus or value)
-  // Includes moving up, scaling down, changing color, and adding a background to cut through the input border
   const floatedLabelStyles =
-    // Base floating anatomy (scale, position, z-index)
     "peer-focus:scale-75 peer-focus:-translate-y-[1.18rem] peer-focus:top-2 peer-focus:z-10 " +
+    (isError ? "peer-focus:!text-error " : "peer-focus:!text-link ") +
     "peer-[.is-forced-focus]:scale-75 peer-[.is-forced-focus]:-translate-y-[1.18rem] peer-[.is-forced-focus]:top-2 peer-[.is-forced-focus]:z-10 " +
+    `peer-[.is-forced-focus]:${floatedTextColorForFilledOrForced} ` +
     "peer-[:not(:placeholder-shown)]:scale-75 peer-[:not(:placeholder-shown)]:-translate-y-[1.18rem] peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:z-10 " +
-    // Apply determined text color to all floated states
-    `peer-focus:${floatedTextColor} ` +
-    `peer-[.is-forced-focus]:${floatedTextColor} ` +
-    `peer-[:not(:placeholder-shown)]:${floatedTextColor} ` +
-    // Background for cut-through effect (common to all floated states)
+    `peer-[:not(:placeholder-shown)]:${floatedTextColorForFilledOrForced} ` +
     "peer-focus:bg-background-widget peer-focus:px-2 " +
     "peer-[.is-forced-focus]:bg-background-widget peer-[.is-forced-focus]:px-2 " +
     "peer-[:not(:placeholder-shown)]:bg-background-widget peer-[:not(:placeholder-shown)]:px-2";

src/common/PasswordInput/index.tsx

@@ -51,6 +51,7 @@ const PasswordInput: React.FC<PasswordInputProps> = ({
     children: label,
     htmlFor: generatedId,
     className: labelClassName,
+    forceApplyFocusStyle: isIconButtonFocused,
   };
 
   const formFieldInputProps: InputProps = {

src/index.css

@@ -41,10 +41,5 @@ body {
   margin: 0;
   background-color: var(--color-background-page);
   color: var(--color-text-default);
-  padding-top: 3rem;
-  padding-bottom: 3rem;
   min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }

src/mock-data/login-password.json

@@ -37,6 +37,7 @@
       "code": "IN",
       "prefix": "91"
     },
+<<<<<<< HEAD
     "alternate_connections": [
       {
         "name": "google-oauth2",
@@ -45,6 +46,18 @@
       {
         "name": "linkedin",
         "strategy": "linkedin"
+=======
+    "errors": [
+      {
+        "code": "invalid-captcha",
+        "message": "Solve the challenge question to verify you are not a robot.",
+        "field": "captcha"
+      },
+      {
+        "code": "wrong-email-username-credentials",
+        "message": "Incorrect email address, username, or password",
+        "field": "password"
+>>>>>>> 6d648a5 (chore: css and sdk fixes for login screen)
       }
     ],
     "connection": {

src/screens/login/index.tsx

@@ -1,81 +1,68 @@
+import React from "react";
+
 import Button from "@/common/Button";
-import FormField from "@/common/FormField";
+import CaptchaBox from "@/common/CaptchaBox";
 import Card from "@/common/Card";
-import PasswordInput from "@/common/PasswordInput";
+import FormField from "@/common/FormField";
 import Logo from "@/common/Logo";
-import CaptchaBox from "@/common/CaptchaBox";
+import PasswordInput from "@/common/PasswordInput";
 import Separator from "@/common/Separator";
-import { useLoginManager } from "./hooks/useLoginManager";
-import { useLoginForm } from "./hooks/useLoginForm";
 import SocialProviderButton from "@/common/SocialProviderButton";
-import { getIcon } from "@/utils/iconUtils";
-import Alert from "@/common/Alert";
+
 import { BrandingProvider } from "@/context/BrandingProvider";
+import { getIcon } from "@/utils/iconUtils";
+import { getSdkErrorForField } from "@/utils/errorUtils";
+import { useLoginForm } from "./hooks/useLoginForm";
+import { useLoginManager } from "./hooks/useLoginManager";
+import type { SdkError } from "@/utils/errorUtils";
 
 const LoginScreen: React.FC = () => {
   const { handleLogin, handleSocialLogin, loginInstance } = useLoginManager();
   const { usernameRef, passwordRef, captchaRef, getFormValues } =
     useLoginForm();
 
-  const onLoginClick = (e: React.FormEvent) => {
-    e.preventDefault();
-    const { username, password, captcha } = getFormValues();
-    handleLogin(username, password, captcha);
-  };
-
-  // CAPTCHA related variables
   const texts = loginInstance?.screen?.texts || {};
+  // IMP: This is a to set the page title dynamically
+  const pageTitle = texts?.pageTitle || "Login";
+  document.title = pageTitle;
+
+  const sdkErrors: SdkError[] = (loginInstance?.transaction?.errors ||
+    []) as SdkError[];
   const isCaptchaAvailable = !!loginInstance?.screen?.captcha;
   const captchaImage = loginInstance?.screen?.captcha?.image || "";
   const captchaLabelText =
     (texts.captchaCodePlaceholder || "Enter the code shown above") + "*";
 
-  // Prepare global messages for the Alert component
-  // Attempt to get screen messages, default to empty array if undefined
-  const screenMessages: { type: string; text: string }[] =
-    (loginInstance?.screen as any)?.messages || [];
-  const firstErrorMessage = screenMessages.find(
-    (m: { type: string; text: string }) => m.type === "error",
-  );
+  const onLoginClick = (e: React.FormEvent) => {
+    e.preventDefault();
+    const { username, password, captcha } = getFormValues();
+    handleLogin(username, password, captcha);
+  };
 
-  // Additionally, check for a general pageError from the loginInstance
-  const pageError = (loginInstance as any)?.pageError;
-  let errorMessageToShow: string | undefined = firstErrorMessage?.text;
-  if (!errorMessageToShow && typeof pageError === "string" && pageError) {
-    errorMessageToShow = pageError;
-  }
-  // TODO: Potentially handle other message types (warning, info, success) or multiple messages.
+  const getFieldError = (fieldName: string): string | undefined => {
+    return getSdkErrorForField(fieldName, sdkErrors);
+  };
 
   return (
     <BrandingProvider screenInstance={loginInstance}>
-      <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="min-h-screen flex items-center justify-center px-10 py-20">
+        {/* Parent Card */}
         <Card className="w-full max-w-[400px]">
+          {/* Header section */}
           <Logo imageClassName="h-13" />
           <h1 className="text-2xl font-normal text-center text-text-default mt-6 mb-4">
-            {loginInstance?.screen?.texts?.title || "Welcome"}
+            {loginInstance?.screen?.texts?.title}
           </h1>
           <p className="text-center text-text-default text-sm mb-4">
-            {loginInstance?.screen?.texts?.description || "Log in to continue."}
+            {loginInstance?.screen?.texts?.description}
           </p>
 
-          {errorMessageToShow && (
-            <Alert
-              type="error"
-              message={errorMessageToShow}
-              title={
-                loginInstance?.screen?.texts?.alertListTitle ||
-                texts.titleLoginError ||
-                "Login Error"
-              }
-              className="mb-4"
-            />
-          )}
-
+          {/* Login form */}
           <form onSubmit={onLoginClick} className="space-y-4">
             <FormField
               className="mb-4"
               labelProps={{
-                children: `${loginInstance?.screen?.texts?.phoneOrUsernameOrEmailPlaceholder || "Phone or Username or Email"}*`,
+                children: `${loginInstance?.screen?.texts?.usernameOrEmailPlaceholder}*`,
                 htmlFor: "email-login",
               }}
               inputProps={{
@@ -85,18 +72,21 @@ const LoginScreen: React.FC = () => {
                 ref: usernameRef,
                 placeholder: "\u00A0",
                 autoComplete: "email",
+                required: true,
               }}
-              error="this is a dummy error message for testing"
+              error={getFieldError("username") || getFieldError("email")}
             />
 
             <PasswordInput
               className="mb-4"
-              label={`${loginInstance?.screen?.texts?.passwordPlaceholder || "Password"}*`}
+              label={`${texts.passwordPlaceholder || "Password"}*`}
               name="password"
               inputProps={{
                 ref: passwordRef,
                 autoComplete: "current-password",
+                required: true,
               }}
+              error={getFieldError("password")}
             />
 
             {isCaptchaAvailable && captchaImage && (
@@ -107,33 +97,49 @@ const LoginScreen: React.FC = () => {
                 imageUrl={captchaImage}
                 inputProps={{
                   ref: captchaRef,
+                  required: isCaptchaAvailable,
                 }}
                 imageClassName="h-16"
+                error={getFieldError("captcha")}
               />
             )}
             <div className="mt-6 text-left">
-              <Button variant="link" size="sm" className="p-1 font-bold">
-                {loginInstance?.screen?.texts?.forgotPasswordText ||
-                  "Forgot password?"}
-              </Button>
+              {loginInstance?.screen?.links?.reset_password &&
+                loginInstance?.screen?.texts?.forgotPasswordText && (
+                  <a
+                    href={loginInstance.screen.links.reset_password}
+                    className="text-sm text-link hover:text-link-hover active:text-link-pressed font-bold p-1"
+                  >
+                    {loginInstance.screen.texts.forgotPasswordText}
+                  </a>
+                )}
             </div>
+
+            {/* Login button */}
             <Button type="submit" fullWidth>
-              {loginInstance?.screen?.texts?.buttonText || "Continue"}
+              {loginInstance?.screen?.texts?.buttonText}
             </Button>
           </form>
 
+          {/* Footer text */}
           <div className="mt-4 text-left">
             <span className="text-sm">
               {loginInstance?.screen?.texts?.dontHaveAccountText ||
                 "Don't have an account?"}
             </span>{" "}
-            <Button variant="link" size="sm" className="px-1">
-              {loginInstance?.screen?.texts?.signUpText || "Sign up"}
-            </Button>
+            {loginInstance?.screen?.links?.signup && (
+              <a
+                href={loginInstance.screen.links.signup}
+                className="text-sm font-bold text-link hover:text-link-hover active:text-link-pressed px-1"
+              >
+                {loginInstance.screen.texts?.signUpText || "Sign up"}
+              </a>
+            )}
           </div>
 
           <Separator text="OR" />
 
+          {/* Social login buttons */}
           <div className="space-y-3">
             {loginInstance?.transaction?.alternateConnections?.map(
               (connection) => (

src/utils/errorUtils.ts

@@ -0,0 +1,26 @@
+/**
+ * Represents a generic SDK error object.
+ */
+export interface SdkError {
+  code?: string;
+  message: string;
+  field?: string;
+  [key: string]: any; // Allow other properties
+}
+
+/**
+ * Finds and returns the error message for a specific field from a list of SDK errors.
+ * @param fieldName The name of the field to find an error for.
+ * @param sdkErrors An array of SDK error objects.
+ * @returns The error message string if found, otherwise undefined.
+ */
+export const getSdkErrorForField = (
+  fieldName: string,
+  sdkErrors: SdkError[] = [],
+): string | undefined => {
+  if (!Array.isArray(sdkErrors)) {
+    return undefined;
+  }
+  const error = sdkErrors.find((err) => err.field === fieldName);
+  return error?.message;
+};

src/utils/placeholderUtils.ts

@@ -0,0 +1,67 @@
+/**
+ * Get the appropriate placeholder text based on allowed identifiers.
+ * @param allowedIdentifiers Array of allowed identifier types (e.g., ["email"], ["username", "email"])
+ * @param texts Text configuration object from screen instance (e.g., loginInstance.screen.texts)
+ * @param appendAsterisk Whether to append an asterisk (*) to the placeholder (defaults to true)
+ * @returns Appropriate placeholder text string.
+ */
+export const getDynamicPlaceholder = (
+  allowedIdentifiers: string[] = [],
+  texts: Record<string, string> = {},
+  appendAsterisk: boolean = true,
+): string => {
+  // Ensure texts is an object, even if undefined from SDK
+  const safeTexts = texts || {};
+
+  let placeholderKey = "default";
+  const sortedIdentifiers = [...new Set(allowedIdentifiers)].sort().join(","); // Deduplicate and sort for a consistent key
+
+  if (allowedIdentifiers.length === 0) {
+    // Fallback if no identifiers specified, though usually there will be.
+    placeholderKey = "default";
+  } else if (sortedIdentifiers === "email,phone,username") {
+    placeholderKey = safeTexts.phoneOrUsernameOrEmailPlaceholder
+      ? "phoneOrUsernameOrEmailPlaceholder"
+      : "default";
+  } else if (sortedIdentifiers === "email,phone") {
+    placeholderKey = safeTexts.phoneOrEmailPlaceholder
+      ? "phoneOrEmailPlaceholder"
+      : "default";
+  } else if (sortedIdentifiers === "phone,username") {
+    placeholderKey = safeTexts.phoneOrUsernamePlaceholder
+      ? "phoneOrUsernamePlaceholder"
+      : "default";
+  } else if (sortedIdentifiers === "email,username") {
+    placeholderKey = safeTexts.usernameOrEmailPlaceholder
+      ? "usernameOrEmailPlaceholder"
+      : "default";
+  } else if (sortedIdentifiers === "email") {
+    placeholderKey = safeTexts.emailPlaceholder
+      ? "emailPlaceholder"
+      : "default";
+  } else if (sortedIdentifiers === "phone") {
+    placeholderKey = safeTexts.phonePlaceholder
+      ? "phonePlaceholder"
+      : "default";
+  } else if (sortedIdentifiers === "username") {
+    placeholderKey = safeTexts.usernameOnlyPlaceholder
+      ? "usernameOnlyPlaceholder"
+      : "default";
+  }
+
+  let placeholderText =
+    safeTexts[placeholderKey] ||
+    safeTexts.phoneOrUsernameOrEmailPlaceholder ||
+    "Phone or Username or Email"; // Ultimate fallback
+
+  if (
+    placeholderKey === "default" &&
+    safeTexts.phoneOrUsernameOrEmailPlaceholder
+  ) {
+    placeholderText = safeTexts.phoneOrUsernameOrEmailPlaceholder;
+  } else if (placeholderKey === "default") {
+    placeholderText = "Login ID"; // A more generic default if no specific placeholders are found
+  }
+
+  return appendAsterisk ? `${placeholderText}*` : placeholderText;
+};