refactor: enhance social provider button and login forms with improved structure and functionality

Author: amberkamboj77

src/common/SocialProviderButton/index.tsx

@@ -1,20 +1,22 @@
 import React from "react";
 
-export interface SocialProviderButtonProps {
-  providerName: string;
-  icon: React.ReactNode;
+interface SocialProviderButtonProps {
   onClick: () => void;
+  displayName: string;
+  iconComponent: React.ReactNode | null;
   disabled?: boolean;
   className?: string;
 }
 
 const SocialProviderButton: React.FC<SocialProviderButtonProps> = ({
-  providerName,
-  icon,
   onClick,
+  displayName,
+  iconComponent,
   disabled = false,
   className = "",
 }) => {
+  const dataTestId = `social-provider-button-${displayName.toLowerCase().replace(/\s+/g, "-")}`;
+
   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-4 focus:ring-primary/15";
 
@@ -28,13 +30,18 @@ const SocialProviderButton: React.FC<SocialProviderButtonProps> = ({
     <button
       type="button"
       onClick={onClick}
-      disabled={disabled}
-      className={`${baseStyles} ${disabled ? disabledStyles : enabledStyles}
-      ${className}`}
-      aria-label={`Continue with ${providerName}`}
+      className={`${baseStyles} ${disabled ? disabledStyles : enabledStyles} ${className}`}
+      data-testid={dataTestId}
+      title={`Continue with ${displayName}`}
     >
-      {icon}
-      <span className="font-normal text-base">{`Continue with ${providerName}`}</span>
+      {iconComponent && (
+        <span className="mr-3 w-5 h-5 flex items-center justify-center flex-shrink-0">
+          {iconComponent}
+        </span>
+      )}
+      <span className="overflow-hidden whitespace-nowrap text-ellipsis font-normal text-base">
+        Continue with {displayName}
+      </span>
     </button>
   );
 };

src/mock-data/login-id.json

@@ -42,6 +42,18 @@
         "name": "google-oauth2",
         "strategy": "google"
       },
+      {
+        "name": "hugging-face",
+        "strategy": "oauth2"
+      },
+      {
+        "name": "klarna-social-connection",
+        "strategy": "oauth2"
+      },
+      {
+        "name": "digitalocean",
+        "strategy": "oauth2"
+      },
       {
         "name": "linkedin",
         "strategy": "linkedin"

src/mock-data/login-password.json

@@ -42,6 +42,18 @@
         "name": "google-oauth2",
         "strategy": "google"
       },
+      {
+        "name": "hugging-face",
+        "strategy": "oauth2"
+      },
+      {
+        "name": "klarna-social-connection",
+        "strategy": "oauth2"
+      },
+      {
+        "name": "digitalocean",
+        "strategy": "oauth2"
+      },
       {
         "name": "linkedin",
         "strategy": "linkedin"

src/mock-data/login.json

@@ -1,6 +1,8 @@
 import React from "react";
 import Separator from "@/common/Separator";
 import SocialProviderButton from "@/common/SocialProviderButton";
+import { getSocialProviderDetails } from "@/utils/socialUtils";
+import type { SocialConnection } from "@/utils/socialUtils";
 import { getIcon } from "@/utils/iconUtils";
 import { useLoginIdManager } from "../hooks/useLoginIdManager";
 
@@ -9,8 +11,8 @@ const AlternativeLogins: React.FC = () => {
   const { loginIdInstance, handleSocialLogin, handlePasskeyLogin } =
     useLoginIdManager();
 
-  const alternateConnections =
-    loginIdInstance?.transaction?.alternateConnections;
+  const alternateConnections = loginIdInstance?.transaction
+    ?.alternateConnections as SocialConnection[] | undefined;
   const isPasskeyAvailable = !!loginIdInstance?.screen?.data?.passkey;
 
   const showSeparator =
@@ -25,24 +27,23 @@ const AlternativeLogins: React.FC = () => {
         {isPasskeyAvailable && (
           <SocialProviderButton
             key="passkey"
-            providerName={"Passkey"}
-            icon={getIcon("passkey")}
+            displayName={"Passkey"}
+            iconComponent={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)}
-          />
-        ))}
+        {alternateConnections?.map((connection) => {
+          const { displayName, iconComponent } =
+            getSocialProviderDetails(connection);
+          return (
+            <SocialProviderButton
+              key={connection.name}
+              displayName={displayName}
+              iconComponent={iconComponent}
+              onClick={() => handleSocialLogin(connection.name)}
+            />
+          );
+        })}
       </div>
     </>
   );

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

@@ -3,6 +3,7 @@ import Button from "@/common/Button";
 import CaptchaBox from "@/common/CaptchaBox";
 import FormField from "@/common/FormField";
 import { getFieldError } from "@/utils/errorUtils";
+import { rebaseLinkToCurrentOrigin } from "@/utils/urlUtils";
 import { useLoginIdManager } from "../hooks/useLoginIdManager";
 import { useLoginIdForm } from "../hooks/useLoginIdForm";
 import type { SdkError } from "@/utils/errorUtils";
@@ -24,6 +25,12 @@ const IdentifierForm: React.FC = () => {
     handleLoginId(identifier, captcha);
   };
 
+  const originalResetPasswordLink =
+    loginIdInstance?.screen?.links?.reset_password;
+  const localizedResetPasswordLink = rebaseLinkToCurrentOrigin(
+    originalResetPasswordLink,
+  );
+
   return (
     <form onSubmit={onLoginIdSubmit} className="space-y-4">
       <FormField
@@ -65,9 +72,9 @@ const IdentifierForm: React.FC = () => {
         />
       )}
       <div className="text-left">
-        {loginIdInstance?.screen?.links?.reset_password && (
+        {localizedResetPasswordLink && (
           <a
-            href={loginIdInstance?.screen?.links?.reset_password}
+            href={localizedResetPasswordLink}
             className="text-sm text-link font-bold hover:text-link/80 focus:bg-link/15 focus:rounded p-1"
           >
             Forgot Password?

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

@@ -3,34 +3,51 @@ import Button from "@/common/Button";
 import PasswordInput from "@/common/PasswordInput";
 import type { SdkError } from "@/utils/errorUtils";
 import { getFieldError } from "@/utils/errorUtils";
+import { rebaseLinkToCurrentOrigin } from "@/utils/urlUtils";
 import { useLoginPasswordManager } from "../hooks/userLoginPasswordManager";
 import { useLoginPasswordForm } from "../hooks/useLoginPasswordForm";
 import FormField from "@/common/FormField";
+import CaptchaBox from "@/common/CaptchaBox";
 
 const LoginForm: React.FC = () => {
   const { loginPasswordInstance, username, editIdentifierLink, handleLogin } =
     useLoginPasswordManager();
-  const { passwordRef, getFormValues } = useLoginPasswordForm();
+  const { passwordRef, captchaRef, getFormValues } = useLoginPasswordForm();
+
+  const captchaImage = loginPasswordInstance?.screen?.captchaImage;
+  const isCaptchaAvailable = loginPasswordInstance?.screen?.isCaptchaAvailable;
 
   const sdkErrors: SdkError[] = (loginPasswordInstance?.transaction?.errors ||
     []) as SdkError[];
 
   const onLoginClick = (e: React.FormEvent) => {
     e.preventDefault();
-    const { password } = getFormValues();
-    handleLogin({ username: username || "", password });
+    const { password, captcha } = getFormValues();
+    handleLogin({
+      username: username || "",
+      password,
+      captcha: isCaptchaAvailable ? captcha : undefined,
+    });
   };
 
+  const localizedEditIdentifierLink =
+    rebaseLinkToCurrentOrigin(editIdentifierLink);
+  const originalResetPasswordLink =
+    loginPasswordInstance?.screen?.links?.reset_password;
+  const localizedResetPasswordLink = rebaseLinkToCurrentOrigin(
+    originalResetPasswordLink,
+  );
+
   return (
     <form onSubmit={onLoginClick} className="space-y-4">
       <FormField
         className="mb-4 w-full"
         labelProps={{
           children: `Username or Email address*`,
-          htmlFor: "email-login",
+          htmlFor: "email-login-lp",
         }}
         inputProps={{
-          id: "email-login",
+          id: "email-login-lp",
           name: "email",
           type: "email",
           value: username,
@@ -39,12 +56,15 @@ const LoginForm: React.FC = () => {
           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>
+          localizedEditIdentifierLink && (
+            <a
+              href={localizedEditIdentifierLink}
+              className="text-sm text-link font-bold hover:text-link/80 focus:bg-link/15 focus:rounded p-1 px-3"
+              data-testid="edit-identifier"
+            >
+              Edit
+            </a>
+          )
         }
       />
 
@@ -62,11 +82,27 @@ const LoginForm: React.FC = () => {
         error={getFieldError("password", sdkErrors)}
       />
 
+      {isCaptchaAvailable && captchaImage && (
+        <CaptchaBox
+          className="mb-4"
+          id="captcha-input-login-password"
+          label="Enter the code shown above"
+          imageUrl={captchaImage}
+          inputProps={{
+            ref: captchaRef,
+            required: isCaptchaAvailable,
+            maxLength: 15,
+          }}
+          error={getFieldError("captcha", sdkErrors)}
+        />
+      )}
+
       <div className="mt-6 text-left">
-        {loginPasswordInstance?.screen?.links?.reset_password && (
+        {localizedResetPasswordLink && (
           <a
-            href={loginPasswordInstance.screen.links.reset_password}
+            href={localizedResetPasswordLink}
             className="text-sm text-link font-bold hover:text-link/80 focus:bg-link/15 focus:rounded p-1"
+            data-testid="forgot-password"
           >
             Forgot password?
           </a>

src/screens/login-password/components/LoginPasswordForm.tsx

@@ -4,13 +4,18 @@ export const useLoginPasswordForm = () => {
   const passwordRef = useRef<HTMLInputElement>(
     null,
   ) as React.RefObject<HTMLInputElement>;
+  const captchaRef = useRef<HTMLInputElement>(
+    null,
+  ) as React.RefObject<HTMLInputElement>;
 
   const getFormValues = () => ({
     password: passwordRef.current?.value ?? "",
+    captcha: captchaRef.current?.value ?? "",
   });
 
   return {
     passwordRef,
+    captchaRef,
     getFormValues,
   };
 };

src/screens/login-password/hooks/useLoginPasswordForm.ts

@@ -9,10 +9,15 @@ export const useLoginPasswordManager = () => {
     loginPasswordInstance.screen.editIdentifierLink || "";
   const username = loginPasswordInstance.screen.data?.username || "";
 
-  const handleLogin = (options: { username: string; password: string }) => {
+  const handleLogin = (options: {
+    username: string;
+    password: string;
+    captcha?: string;
+  }) => {
     const payload = {
       username: options.username,
       password: options.password,
+      captcha: options.captcha,
     };
     executeSafely(
       `Login password with options: ${JSON.stringify(payload)}`,

src/screens/login-password/hooks/userLoginPasswordManager.ts

@@ -1,12 +1,14 @@
 import React from "react";
 import Separator from "@/common/Separator";
 import SocialProviderButton from "@/common/SocialProviderButton";
-import { getIcon } from "@/utils/iconUtils";
+import { getSocialProviderDetails } from "@/utils/socialUtils";
+import type { SocialConnection } from "@/utils/socialUtils";
 import { useLoginManager } from "../hooks/useLoginManager";
 
 const AlternativeConnections: React.FC = () => {
   const { loginInstance, handleSocialLogin } = useLoginManager();
-  const alternateConnections = loginInstance?.transaction?.alternateConnections;
+  const alternateConnections = loginInstance?.transaction
+    ?.alternateConnections as SocialConnection[] | undefined;
 
   if (!alternateConnections || alternateConnections.length === 0) {
     return null;
@@ -15,20 +17,19 @@ const AlternativeConnections: React.FC = () => {
   return (
     <>
       <Separator text="OR" />
-      <div className="space-y-3">
-        {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 className="space-y-3 mt-4">
+        {alternateConnections.map((connection) => {
+          const { displayName, iconComponent } =
+            getSocialProviderDetails(connection);
+          return (
+            <SocialProviderButton
+              key={connection.name}
+              displayName={displayName}
+              iconComponent={iconComponent}
+              onClick={() => handleSocialLogin(connection.name)}
+            />
+          );
+        })}
       </div>
     </>
   );