Merge pull request #7495 from Shenali-SJ/local-authenticator-icon-fix

.changeset/mean-jeans-stare.md

@@ -0,0 +1,6 @@
+---
+"@wso2is/admin.identity-verification-providers.v1": patch
+"@wso2is/theme": patch
+---
+
+Resolve Custom Local Authenticator Icon in the Login Flow

features/admin.identity-providers.v1/configs/ui.ts

@@ -17,6 +17,7 @@
  */
 
 import BasicAuthIcon from "../../themes/default/assets/images/authenticators/basic-auth.png";
+import CustomAuthenticator from "../../themes/default/assets/images/authenticators/custom-authenticator.svg";
 import FIDOLogo from "../../themes/default/assets/images/authenticators/fido-passkey-black.svg";
 import SMSOTPIcon from "../../themes/default/assets/images/authenticators/sms-otp.svg";
 import BackupCodesAuthenticatorLogo from "../../themes/default/assets/images/icons/backup-code-icon.svg";
@@ -84,6 +85,7 @@ export const getAuthenticatorIcons = (): any => {
         apple: AppleLogo,
         backupCode: BackupCodesAuthenticatorLogo,
         basic: BasicAuthIcon,
+        customAuthenticator: CustomAuthenticator,
         default: ConnectionIcon,
         "email-otp-authenticator": EmailOTPIcon,
         emailOTP: EmailOTPIcon,

features/admin.identity-providers.v1/meta/authenticator-meta.ts

@@ -159,6 +159,19 @@ export class AuthenticatorMeta {
         return icon ?? getAuthenticatorIcons().default;
     }
 
+    /**
+     * Get Custom Authenticator Icon.
+     *
+     * Currently authenticator id is being used to fetch the respective authenticator icon.
+     * Existing function could not be used since the id and the name of
+     * custom authenticators are not pre defined.
+     *
+     * @returns Custom Authenticator Icon.
+     */
+    public static getCustomAuthenticatorIcon(): string {
+        return getAuthenticatorIcons()?.customAuthenticator;
+    }
+
     /**
      * Get Authenticator Type display name.
      *

features/admin.identity-providers.v1/utils/identity-provider-management-utils.ts

@@ -121,6 +121,15 @@ export class IdentityProviderManagementUtils {
             return [ loadLocalAuthenticators(), loadFederatedAuthenticators() ];
         };
 
+        /**
+         * Check if the authenticator is a custom local authenticator.
+         * @param authenticator - Authenticator to be checked.
+         * @returns whether the authenticator is a custom local authenticator or not.
+         */
+        const isCustomLocalAuthenticator = (authenticator: LocalAuthenticatorInterface): boolean => {
+            return authenticator?.tags?.includes("Custom");
+        };
+
         return axios.all(getPromises())
             .then(axios.spread((local: LocalAuthenticatorInterface[],
                 federated: IdentityProviderListResponseInterface) => {
@@ -152,7 +161,9 @@ export class IdentityProviderManagementUtils {
                         displayName: authenticator.displayName,
                         id: authenticator.id,
                         idp: LocalAuthenticatorConstants.LOCAL_IDP_IDENTIFIER,
-                        image: AuthenticatorMeta.getAuthenticatorIcon(authenticator.id),
+                        image: isCustomLocalAuthenticator(authenticator) ?
+                            AuthenticatorMeta.getCustomAuthenticatorIcon() :
+                            AuthenticatorMeta.getAuthenticatorIcon(authenticator.id),
                         isEnabled: authenticator.isEnabled,
                         name: authenticator.name
                     });