fix: github pipeline and login component

Author: amberkamboj77

.github/actions/configure-auth0-screens/action.yml

@@ -88,7 +88,6 @@ runs:
         # PROCESS SCREENS
         #############################################
         
-        echo "Debug: Preparing to parse SCREENS_JSON with jq."
         SCREEN_LIST_FOR_LOOP=$(echo "$SCREENS_JSON" | jq -r '.[]')
         jq_exit_code=$?
 
@@ -100,7 +99,6 @@ runs:
         if [ -z "$SCREEN_LIST_FOR_LOOP" ]; then
           echo "Debug: SCREENS_JSON parsed by jq resulted in an empty list. Content of SCREENS_JSON: $SCREENS_JSON"
         else
-          echo "Debug: Successfully parsed SCREENS_JSON. List of screens for loop below (multi-line):"
           echo "$SCREEN_LIST_FOR_LOOP"
         fi
 
@@ -125,7 +123,6 @@ runs:
             
             SETTINGS_FILE=$(mktemp settings_XXXXXX.json)
             trap 'echo "ERR TRAP: Removing $SETTINGS_FILE due to error processing $screen"; rm -f "$SETTINGS_FILE"; trap - ERR' ERR
-            echo "Debug: Temporary SETTINGS_FILE created at: $SETTINGS_FILE"
             
             ALL_ASSETS=$(find "dist/assets" -type f \( -name "*.js" -o -name "*.css" \) ! -name "*.map.js" 2>/dev/null | sort)
             SCREEN_JS_FILES=(); SHARED_JS_FILES=(); ROOT_JS_FILES=(); SCREEN_CSS_FILES=(); SHARED_CSS_FILES=()
@@ -178,7 +175,6 @@ runs:
             
             echo "$JSON_CONTENT" > "$SETTINGS_FILE" || { echo "::error::Failed to write settings file for $screen"; FAILED_SCREENS+=("$screen"); rm -f "$SETTINGS_FILE"; trap - ERR; continue; }
             
-            echo "Debug: Content of SETTINGS_FILE for screen $screen:"
             cat "$SETTINGS_FILE"
             echo "--- End of SETTINGS_FILE content ---"
 
@@ -195,8 +191,6 @@ runs:
             if [ $AUTH0_EXIT_CODE -eq 0 ]; then
               echo "✅ Successfully configured: $screen"
               SUCCESS_SCREENS+=("$screen")
-              # Note: The DEBUG line for SUCCESS_SCREENS was here in a previous version for debugging that array.
-              # Keeping it or removing it depends on current debugging needs.
             else
               echo "::error::Failed to configure prompt: $screen (Exit Code: $AUTH0_EXIT_CODE)"
               echo "$AUTH0_OUTPUT"
@@ -210,11 +204,6 @@ runs:
           fi
         done < <(echo "$SCREEN_LIST_FOR_LOOP") 
 
-        # Note: The DEBUG lines for final array states were here.
-        # Removing them for this request as the focus is on SETTINGS_FILE output.
-        # If issues persist with summary, they can be re-added:
-        # echo "DEBUG: === After Main Processing Loop ===" ...
-
         #############################################
         # FINAL REPORTING
         #############################################

src/common/FormField/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 import Label from "@/common/Label";
 import type { LabelProps } from "@/common/Label";
 import Input from "@/common/Input";
@@ -17,70 +17,75 @@ export interface FormFieldProps {
   errorTextClassName?: string;
 }
 
-const FormField: React.FC<FormFieldProps> = ({
-  labelProps,
-  inputProps,
-  error,
-  className,
-  inputIcon,
-  isParentFocused,
-  inputWrapperClassName,
-  errorTextClassName,
-}) => {
-  const { id: inputId, className: inputSpecificClassName } = inputProps;
-  const internalInputRef = useRef<HTMLInputElement>(null);
+const FormField = React.forwardRef<HTMLInputElement, FormFieldProps>(
+  ({
+    labelProps,
+    inputProps,
+    error,
+    className,
+    inputIcon,
+    isParentFocused,
+    inputWrapperClassName,
+    errorTextClassName,
+  }) => {
+    const { id: inputId, className: inputSpecificClassName } = inputProps;
 
-  let inputCombinedClassName = inputSpecificClassName || "";
-  const errorRingStyles = "border-error focus:ring-error focus:border-error";
+    const { ref: refForInputElement, ...remainingInputProps } = inputProps;
 
-  let finalInputProps = { ...inputProps };
-  delete finalInputProps.className;
+    let inputCombinedClassName = inputSpecificClassName || "";
+    const errorRingStyles = "border-error focus:ring-error focus:border-error";
 
-  if (inputIcon) {
-    inputCombinedClassName += " pr-16";
-  }
+    let finalInputProps = { ...remainingInputProps };
+    delete finalInputProps.className;
 
-  if (error) {
-    inputCombinedClassName += ` ${errorRingStyles}`;
-  } else if (isParentFocused) {
-    finalInputProps.forceFocusStyle = true;
-  }
+    if (inputIcon) {
+      inputCombinedClassName += " pr-16";
+    }
 
-  return (
-    <div className={`${className || ""}`}>
-      <div
-        className={`relative mt-1 rounded-md shadow-sm ${inputWrapperClassName || ""}`}
-      >
-        <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 && (
+    if (error) {
+      inputCombinedClassName += ` ${errorRingStyles}`;
+    } else if (isParentFocused) {
+      finalInputProps.forceFocusStyle = true;
+    }
+
+    return (
+      <div className={`${className || ""}`}>
         <div
-          id={`${inputId}-error`}
-          className={`flex items-center mt-2 text-sm text-error ${errorTextClassName || ""}`}
-          role="alert"
+          className={`relative mt-1 rounded-md shadow-sm ${inputWrapperClassName || ""}`}
         >
-          <Icon As={ExclamationCircleIcon} className="h-4 w-4 mr-1" />
-          {error}
+          <div className="relative w-full">
+            <Input
+              {...finalInputProps}
+              ref={refForInputElement}
+              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>
-      )}
-    </div>
-  );
-};
+        {error && (
+          <div
+            id={`${inputId}-error`}
+            className={`flex items-center mt-2 text-sm text-error ${errorTextClassName || ""}`}
+            role="alert"
+          >
+            <Icon As={ExclamationCircleIcon} className="h-4 w-4 mr-1" />
+            {error}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+FormField.displayName = "FormField";
 
 export default FormField;