chore: update package dependencies, enhance login and login-id screens with new components and improved structure

Author: amberkamboj77

README.md

@@ -96,8 +96,8 @@ auth0-acul-samples/
 │   │   └── [screen-name]/
 │   │       ├── components/ # Components specific ONLY to this screen
 │   │       │   └── ...
-│   │       ├── hooks/      # Hooks specific ONLY to this screen
-│   │       └── index.tsx   # Main screen component
+│   │       ├── hooks/      # Hooks specific ONLY to this screen (e.g., use<ScreenName>Manager, use<ScreenName>Form)
+│   │       └── index.tsx   # Main screen component, orchestrates components from its ./components/ folder.
 │   ├── mock-data/       # Mock data JSON files for local screen development (e.g., login-id.json)
 │   └── utils/           # Shared utility functions
 │       └── mockContextLoader.ts # Utility to load mock sdk values to render screen in dev
@@ -148,37 +148,18 @@ This command, managed by `scripts/dev-screen.js`:
 
 The screen components include proper integration with Auth0 ACUL SDK methods (like `handleLogin`, `handleSocialLogin`, etc.), but these methods won't perform actual authentication in this local mock data development environment.
 
-<a id="technical-details"></a>
-
-## 🔍 Technical Details
-
-### Application Mounting in ACUL
-
-In an Auth0 Advanced Customization for Universal Login (ACUL) environment, Auth0 provides the main HTML page. Your custom application, built with this template, doesn't bundle its own `index.html`. Instead, it needs to be dynamically injected into the DOM provided by Auth0.
-
-The `src/main.tsx` file handles this by:
-
-1. Creating a new `div` element.
-2. Assigning it an `id` (e.g., `root`).
-3. Appending this `div` to the `document.body`.
-4. Mounting the React application into this newly created `div`.
-
-This ensures your custom UI is correctly rendered within the Auth0-hosted page. Here's a conceptual overview of how this is done in `src/main.tsx`:
-
-```typescript
-const rootElement = document.createElement("div");
-rootElement.id = "root";
-document.body.appendChild(rootElement);
-```
-
 ### Auth0 ACUL SDK Integration
 
 This template demonstrates how to integrate screen components with the Auth0 ACUL JavaScript SDK. Each screen follows these patterns:
 
-- Initialize the appropriate SDK class for the screen (e.g., `LoginId`, `Login`, `LoginPassword`)
-- Set up proper form handling with the SDK methods
-- Handle errors and loading states appropriately
-- Follow Auth0's Universal Login design language
+- Initialize the appropriate SDK class for the screen (e.g., `LoginId`, `Login`, `LoginPassword`) typically within a custom hook in `src/screens/[screen-name]/hooks/use<ScreenName>Manager.ts`.
+- Screen-specific UI logic and form handling are often encapsulated in sub-components within `src/screens/[screen-name]/components/`, which utilize the screen's custom hooks (manager and form hooks) for data and actions.
+- Set up proper form handling with the SDK methods.
+- Handle errors and loading states appropriately.
+
+<a id="technical-details"></a>
+
+## 🔍 Technical Details
 
 ### Styling with Tailwind CSS
 

package-lock.json

@@ -38,7 +38,7 @@ const Button: React.FC<ButtonProps> = ({
   switch (variant) {
     case "primary":
       variantStyles =
-        "bg-primary text-white hover:bg-primary/90 focus:ring-3 focus:ring-primary/15 disabled:opacity-70 disabled:bg-primary/70 px-4 py-4 text-md rounded";
+        "bg-primary text-white hover:bg-primary/90 focus:ring-4 focus:ring-primary/15 disabled:opacity-70 disabled:bg-primary/70 px-4 py-4 text-md rounded";
       break;
     case "secondary":
       variantStyles =
@@ -50,7 +50,7 @@ const Button: React.FC<ButtonProps> = ({
       break;
     case "social":
       variantStyles =
-        "bg-background-widget text-text-default border border-gray-mid hover:bg-gray-100 focus:ring3 focus:ring-primary/15 disabled:opacity-70";
+        "bg-background-widget text-text-default border border-gray-mid hover:bg-gray-100 focus:ring-4 focus:ring-primary/15 disabled:opacity-70";
       break;
     case "icon":
       variantStyles =

src/common/Button/index.tsx

@@ -16,7 +16,7 @@ const SocialProviderButton: React.FC<SocialProviderButtonProps> = ({
   className = "",
 }) => {
   const baseStyles =
-    "flex items-center justify-start w-full max-w-[320px] h-[52px] py-[14px] px-[16px] border rounded gap-x-4 focus:outline-none transition-colors duration-150 ease-in-out focus:ring-3 focus:ring-primary/15";
+    "flex items-center justify-start w-full max-w-[320px] h-[52px] py-[14px] px-[16px] border rounded gap-x-4 focus:outline-none transition-colors duration-150 ease-in-out focus:ring-4 focus:ring-primary/15";
 
   const enabledStyles =
     "bg-white border-gray-mid text-text-default hover:bg-gray-mid/20 focus:bg-primary/15 cursor-pointer";

src/common/SocialProviderButton/index.tsx

@@ -43,8 +43,8 @@
         "strategy": "google"
       },
       {
-        "name": "twitter",
-        "strategy": "twitter"
+        "name": "linkedin",
+        "strategy": "linkedin"
       }
     ],
     "connection": {

src/mock-data/login-id.json

@@ -37,16 +37,6 @@
       "code": "IN",
       "prefix": "91"
     },
-<<<<<<< HEAD
-    "alternate_connections": [
-      {
-        "name": "google-oauth2",
-        "strategy": "google"
-      },
-      {
-        "name": "linkedin",
-        "strategy": "linkedin"
-=======
     "errors": [
       {
         "code": "invalid-captcha",
@@ -57,7 +47,6 @@
         "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/mock-data/login-password.json

@@ -0,0 +1,51 @@
+import React from "react";
+import Separator from "@/common/Separator";
+import SocialProviderButton from "@/common/SocialProviderButton";
+import { getIcon } from "@/utils/iconUtils";
+import { useLoginIdManager } from "../hooks/useLoginIdManager";
+
+// No props needed as it uses hooks internally
+const AlternativeLogins: React.FC = () => {
+  const { loginIdInstance, handleSocialLogin, handlePasskeyLogin } =
+    useLoginIdManager();
+
+  const alternateConnections =
+    loginIdInstance?.transaction?.alternateConnections;
+  const isPasskeyAvailable = !!loginIdInstance?.screen?.data?.passkey;
+
+  const showSeparator =
+    isPasskeyAvailable ||
+    (alternateConnections && alternateConnections.length > 0);
+
+  return (
+    <>
+      {showSeparator && <Separator text={"OR"} />}
+
+      <div className="space-y-3 mt-4">
+        {isPasskeyAvailable && (
+          <SocialProviderButton
+            key="passkey"
+            providerName={"Passkey"}
+            icon={getIcon("passkey")}
+            onClick={() => handlePasskeyLogin()}
+          />
+        )}
+        {alternateConnections?.map((connection: any) => (
+          <SocialProviderButton
+            key={connection.name}
+            providerName={
+              connection.strategy
+                ? connection.strategy?.charAt(0)?.toUpperCase() +
+                  connection.strategy?.slice(1)
+                : connection.name
+            }
+            icon={getIcon(connection.name)}
+            onClick={() => handleSocialLogin(connection.name)}
+          />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default AlternativeLogins;

src/mock-data/login.json

@@ -0,0 +1,23 @@
+import React from "react";
+import { useLoginIdManager } from "../hooks/useLoginIdManager";
+
+const Footer: React.FC = () => {
+  const { loginIdInstance } = useLoginIdManager();
+  const signupLink = loginIdInstance?.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/60 focus:bg-link/15 focus:rounded p-1"
+        >
+          Sign up
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default Footer;

src/screens/login-id/components/AlternativeLogins.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Logo from "@/common/Logo";
+
+// No props needed as it will use the hook internally
+const Header: React.FC = () => {
+  return (
+    <>
+      <Logo imageClassName="h-13" />
+      <h1 className="text-2xl font-normal text-center text-text-default mt-6 mb-4">
+        Welcome
+      </h1>
+      <p className="text-center text-text-default text-sm mb-4">
+        Please enter your username or email address to continue.
+      </p>
+    </>
+  );
+};
+
+export default Header;