Merge pull request #7594 from Shenali-SJ/custom-auth-custom-icon

Display User Given Icon in the Login Editor for Custom Local Authenticators
wso2 · Feb 11, 2025 · c53099d · c53099d
2 parents b6b983d + cd22a3f
commit c53099d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/.changeset/cyan-frogs-fail.md b/.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
diff --git a/features/admin.identity-providers.v1/meta/authenticator-meta.ts b/features/admin.identity-providers.v1/meta/authenticator-meta.ts
@@ -24,7 +24,7 @@ import { AuthenticatorLabels } from "@wso2is/admin.connections.v1/models/authent
 import get from "lodash-es/get";
 import { ReactNode } from "react";
 import { getAuthenticatorIcons } from "../configs/ui";
-import { AuthenticatorCategories } from "../models";
+import { AuthenticatorCategories, LocalAuthenticatorInterface } from "../models";
 
 export class AuthenticatorMeta {
 
@@ -165,10 +165,16 @@ export class AuthenticatorMeta {
      * 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.
+     * For custom local authenticators, it returns the authenticator's own image URI if available,
+     * or falls back to a default custom authenticator icon.
      *
      * @returns Custom Authenticator Icon.
      */
-    public static getCustomAuthenticatorIcon(): string {
+    public static getCustomAuthenticatorIcon(authenticator: LocalAuthenticatorInterface): string {
+        if (authenticator?.image) {
+            return authenticator.image;
+        }
+
         return getAuthenticatorIcons()?.customAuthenticator;
     }
 

diff --git a/features/admin.identity-providers.v1/models/identity-provider.ts b/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.
      */

diff --git a/features/admin.identity-providers.v1/utils/identity-provider-management-utils.ts b/features/admin.identity-providers.v1/utils/identity-provider-management-utils.ts
@@ -136,6 +136,20 @@ export class IdentityProviderManagementUtils {
             return authenticator?.tags?.includes("Custom");
         };
 
+        /**
+         * Resolves the image of both system defined local authenticators and custom local authenticators.
+         *
+         * @param authenticator - Authenticator.
+         * @returns image URI of the authenticator.
+         */
+        const resolveLocalAuthenticatorImage = (authenticator: LocalAuthenticatorInterface): string => {
+            if (isCustomLocalAuthenticator(authenticator)) {
+                return AuthenticatorMeta.getCustomAuthenticatorIcon(authenticator);
+            }
+
+            return AuthenticatorMeta.getAuthenticatorIcon(authenticator.id);
+        };
+
         return axios.all(getPromises())
             .then(axios.spread((local: LocalAuthenticatorInterface[],
                 federated: IdentityProviderListResponseInterface) => {
@@ -169,9 +183,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
                     });