Fixing Icon Display for OAuth Provider

Author: FalkWolsky

client/packages/lowcoder/src/constants/authConstants.ts

@@ -57,6 +57,7 @@ export type ThirdPartyConfigType = {
   url: string;
   name: string;
   logo: string;
+  icon: string;
   // login source
   sourceType: string;
   // url is react router
@@ -102,7 +103,7 @@ export const AuthRoutes: Array<{ path: string; component: React.ComponentType<an
 
 export type ServerAuthType = "GOOGLE" | "GITHUB" | "FORM" | "KEYCLOAK" | "ORY" | "GENERIC";
 
-export type ServerAuthTypeInfoValueType = { logo?: string; isOAuth2?: boolean };
+export type ServerAuthTypeInfoValueType = { logo?: string; sourceIcon?: string; isOAuth2?: boolean };
 export const ServerAuthTypeInfo: { [key in ServerAuthType]?: ServerAuthTypeInfoValueType } = {
   GOOGLE: {
     logo: GoogleLoginIcon,

client/packages/lowcoder/src/constants/configConstants.ts

@@ -35,6 +35,7 @@ type OAuthConfig = {
   authType: ServerAuthType;
   source: string;
   sourceName: string;
+  sourceIcon?: string;
   agentId?: string;
   clientId?: string;
   id?: string;
@@ -44,6 +45,7 @@ export type FormConfig = {
   enableRegister?: boolean;
   enable?: boolean;
   authType: ServerAuthType;
+  sourceIcon?: string;
   source: string;
   sourceName: string;
   id?: string;
@@ -72,7 +74,13 @@ export type SystemConfig = {
 export const transToSystemConfig = (responseData: ConfigResponseData): SystemConfig => {
   const thirdPartyAuthConfigs: ThirdPartyConfigType[] = [];
   responseData.authConfigs?.forEach((authConfig) => {
+
     const logo = ServerAuthTypeInfo[authConfig.authType]?.logo || GeneralLoginIcon;
+    var icon = "";
+    if (authConfig.authType === "GENERIC" && authConfig.sourceIcon) {
+      icon = authConfig.sourceIcon;
+    }
+
     if (isOAuthConfig(authConfig)) {
       const routeLinkConf: Partial<ThirdPartyConfigType> = isRouteLink(authConfig.authType)
         ? {
@@ -82,6 +90,7 @@ export const transToSystemConfig = (responseData: ConfigResponseData): SystemCon
         : {};
       thirdPartyAuthConfigs.push({
         logo: logo,
+        icon: icon,
         name: authConfig.sourceName,
         url: authConfig.authorizeUrl,
         sourceType: authConfig.source,

client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx

@@ -15,6 +15,7 @@ import { trans } from "i18n";
 import { geneAuthStateAndSaveParam, getAuthUrl, getRedirectUrl } from "pages/userAuth/authUtils";
 import { default as Divider } from "antd/es/divider";
 import { useRedirectUrl } from "util/hooks";
+import { MultiIconDisplay } from "../../../comps/comps/multiIconDisplay";
 
 const ThirdPartyLoginButtonWrapper = styled.div`
   button{
@@ -85,9 +86,12 @@ function ThirdPartyLoginButton(props: {
     ? `Sign up with ${label}`
     : `Sign in with ${label}`;
 
+  console.log('config', config);
+
   return (
     <StyledLoginButton buttonType="normal" onClick={onLoginClick}>
-      <LoginLogoStyle alt={config.name} src={config.logo} title={config.name} />
+      {config.icon && <MultiIconDisplay identifier={config.icon} width="20px" height="20px" style={{ marginRight: "20px", flexShrink: 0, color: "#000" }} />}
+      {!config.icon && <LoginLogoStyle alt={config.name} src={config.logo} title={config.name} />}
       <LoginLabelStyle className="auth-label">
         { buttonLabel }
       </LoginLabelStyle>