Display User Given Icon in the Login Editor for Custom Local Authenticators

.changeset/cyan-frogs-fail.md

@@ -0,0 +1,5 @@
+---
+"@wso2is/admin.identity-providers.v1": patch
+---
+
+Display User Given Icon in the Login Editor for Custom Local Authenticators

features/admin.identity-providers.v1/models/identity-provider.ts

@@ -440,10 +440,15 @@ export interface LocalAuthenticatorInterface extends CommonPluggableComponentInt
      */
     displayName?: string;
     /**
-     * Description for the local authenticator.
+     * Description of the local authenticator.
      * This property is used only with custom local authenticators.
      */
     description?: string;
+    /**
+     * Image URI of the local authenticator.
+     * This property is used only with custom local authenticators.
+     */
+    image?: string;
     /**
      * Is authenticator enabled.
      */
@@ -452,7 +457,7 @@ export interface LocalAuthenticatorInterface extends CommonPluggableComponentInt
      * Authenticator Type.
      * @example [ LOCAL, REQUEST_PATH ]
      */
-    type?:  string;
+    type?: string;
     /**
      * Details endpoint.
      */

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

@@ -136,6 +136,29 @@ export class IdentityProviderManagementUtils {
             return authenticator?.tags?.includes("Custom");
         };
 
+        /**
+         * Resolves the image of the local authenticator.
+         *
+         * For system defined user authenticators, the function retrieves the default icon.
+         * For custom local authenticators, it returns the authenticator's own image URI if available,
+         * or falls back to a default custom authenticator icon.
+         *
+         * @param authenticator - Authenticator.
+         * @returns image URI of the authenticator.
+         */
+        const resolveLocalAuthenticatorImage = (authenticator: LocalAuthenticatorInterface): string => {
+            if (!isCustomLocalAuthenticator(authenticator)) {
+                AuthenticatorMeta.getAuthenticatorIcon(authenticator.id);
+            }
+
+            // Resolve image URI of custom local authenticators.
+            if (authenticator?.image) {
+                return authenticator.image;
+            } else {
+                AuthenticatorMeta.getCustomAuthenticatorIcon();
+            }
+        };
+
         return axios.all(getPromises())
             .then(axios.spread((local: LocalAuthenticatorInterface[],
                 federated: IdentityProviderListResponseInterface) => {
@@ -169,9 +192,7 @@ export class IdentityProviderManagementUtils {
                         displayName: authenticator.displayName,
                         id: authenticator.id,
                         idp: LocalAuthenticatorConstants.LOCAL_IDP_IDENTIFIER,
-                        image: isCustomLocalAuthenticator(authenticator) ?
-                            AuthenticatorMeta.getCustomAuthenticatorIcon() :
-                            AuthenticatorMeta.getAuthenticatorIcon(authenticator.id),
+                        image: resolveLocalAuthenticatorImage(authenticator),
                         isEnabled: authenticator.isEnabled,
                         name: authenticator.name
                     });