fix #687 (#688)

fix the display bug on the personal binding information page

web/src/ProductBuyPage.js

@@ -148,7 +148,7 @@ class ProductBuyPage extends React.Component {
 
     return (
       <Button style={{height: "50px", borderWidth: "2px"}} shape="round" icon={
-        <img style={{marginRight: "10px"}} width={36} height={36} src={Provider.getProviderLogo(provider)} alt={provider.displayName} />
+        <img style={{marginRight: "10px"}} width={36} height={36} src={Setting.getProviderLogoURL(provider)} alt={provider.displayName} />
       } size={"large"} >
         {
           text

web/src/Setting.js

@@ -32,6 +32,79 @@ export const StaticBaseUrl = "https://cdn.casbin.org";
 // https://catamphetamine.gitlab.io/country-flag-icons/3x2/index.html
 export const CountryRegionData = getCountryRegionData();
 
+export const OtherProviderInfo = {
+  SMS: {
+    "Aliyun SMS": {
+      logo: `${StaticBaseUrl}/img/social_aliyun.png`,
+      url: "https://aliyun.com/product/sms",
+    },
+    "Tencent Cloud SMS": {
+      logo: `${StaticBaseUrl}/img/social_tencent_cloud.jpg`,
+      url: "https://cloud.tencent.com/product/sms",
+    },
+    "Volc Engine SMS": {
+      logo: `${StaticBaseUrl}/img/social_volc_engine.jpg`,
+      url: "https://www.volcengine.com/products/cloud-sms",
+    },
+    "Huawei Cloud SMS": {
+      logo: `${StaticBaseUrl}/img/social_huawei.png`,
+      url: "https://www.huaweicloud.com/product/msgsms.html",
+    },
+  },
+  Email: {
+    "Default": {
+      logo: `${StaticBaseUrl}/img/social_default.png`,
+      url: "",
+    },
+  },
+  Storage: {
+    "Local File System": {
+      logo: `${StaticBaseUrl}/img/social_file.png`,
+      url: "",
+    },
+    "AWS S3": {
+      logo: `${StaticBaseUrl}/img/social_aws.png`,
+      url: "https://aws.amazon.com/s3",
+    },
+    "Aliyun OSS": {
+      logo: `${StaticBaseUrl}/img/social_aliyun.png`,
+      url: "https://aliyun.com/product/oss",
+    },
+    "Tencent Cloud COS": {
+      logo: `${StaticBaseUrl}/img/social_tencent_cloud.jpg`,
+      url: "https://cloud.tencent.com/product/cos",
+    },
+  },
+  SAML: {
+    "Aliyun IDaaS": {
+      logo: `${StaticBaseUrl}/img/social_aliyun.png`,
+      url: "https://aliyun.com/product/idaas"
+    },
+    "Keycloak": {
+      logo: `${StaticBaseUrl}/img/social_keycloak.png`,
+      url: "https://www.keycloak.org/"
+    },
+  },
+  Payment: {
+    "Alipay": {
+      logo: `${StaticBaseUrl}/img/payment_alipay.png`,
+      url: "https://www.alipay.com/"
+    },
+    "WeChat Pay": {
+      logo: `${StaticBaseUrl}/img/payment_wechat_pay.png`,
+      url: "https://pay.weixin.qq.com/"
+    },
+    "PayPal": {
+      logo: `${StaticBaseUrl}/img/payment_paypal.png`,
+      url: "https://www.paypal.com/"
+    },
+    "GC": {
+      logo: `${StaticBaseUrl}/img/payment_gc.png`,
+      url: "https://gc.org"
+    },
+  },
+};
+
 export function getCountryRegionData() {
   let language = i18next.language;
   if (language === null || language === "null") {
@@ -380,9 +453,20 @@ export function getClickable(text) {
   )
 }
 
+export function getProviderLogoURL(provider) {
+  if (provider.category === "OAuth") {
+    if (provider.type === "Custom") {
+      return provider.customLogo;  
+    }
+    return `${StaticBaseUrl}/img/social_${provider.type.toLowerCase()}.png`;
+  } else {
+    return OtherProviderInfo[provider.category][provider.type].logo;
+  }
+}
+
 export function getProviderLogo(provider) {
   const idp = provider.type.toLowerCase().trim().split(' ')[0];
-  const url = `${StaticBaseUrl}/img/social_${idp}.png`;
+  const url = getProviderLogoURL(provider);
   return (
     <img width={30} height={30} src={url} alt={idp} />
   )

web/src/auth/LoginPage.js

@@ -305,13 +305,13 @@ class LoginPage extends React.Component {
       if (provider.category === "OAuth") {
         return (
           <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
-            <img width={width} height={width} src={Provider.getProviderLogo(provider)} alt={provider.displayName} style={{margin: margin}} />
+            <img width={width} height={width} src={Setting.getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
           </a>
         )
       } else if (provider.category === "SAML") {
         return (
           <a key={provider.displayName} onClick={this.getSamlUrl.bind(this, provider)}>
-            <img width={width} height={width} src={Provider.getProviderLogo(provider)} alt={provider.displayName} style={{margin: margin}} />
+            <img width={width} height={width} src={Setting.getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
           </a>
         )
       }

web/src/auth/Provider.js

@@ -112,90 +112,6 @@ const authInfo = {
   },
 };
 
-const otherProviderInfo = {
-  SMS: {
-    "Aliyun SMS": {
-      logo: `${Setting.StaticBaseUrl}/img/social_aliyun.png`,
-      url: "https://aliyun.com/product/sms",
-    },
-    "Tencent Cloud SMS": {
-      logo: `${Setting.StaticBaseUrl}/img/social_tencent_cloud.jpg`,
-      url: "https://cloud.tencent.com/product/sms",
-    },
-    "Volc Engine SMS": {
-      logo: `${Setting.StaticBaseUrl}/img/social_volc_engine.jpg`,
-      url: "https://www.volcengine.com/products/cloud-sms",
-    },
-    "Huawei Cloud SMS": {
-      logo: `${Setting.StaticBaseUrl}/img/social_huawei.png`,
-      url: "https://www.huaweicloud.com/product/msgsms.html",
-    },
-  },
-  Email: {
-    "Default": {
-      logo: `${Setting.StaticBaseUrl}/img/social_default.png`,
-      url: "",
-    },
-  },
-  Storage: {
-    "Local File System": {
-      logo: `${Setting.StaticBaseUrl}/img/social_file.png`,
-      url: "",
-    },
-    "AWS S3": {
-      logo: `${Setting.StaticBaseUrl}/img/social_aws.png`,
-      url: "https://aws.amazon.com/s3",
-    },
-    "Aliyun OSS": {
-      logo: `${Setting.StaticBaseUrl}/img/social_aliyun.png`,
-      url: "https://aliyun.com/product/oss",
-    },
-    "Tencent Cloud COS": {
-      logo: `${Setting.StaticBaseUrl}/img/social_tencent_cloud.jpg`,
-      url: "https://cloud.tencent.com/product/cos",
-    },
-  },
-  SAML: {
-    "Aliyun IDaaS": {
-      logo: `${Setting.StaticBaseUrl}/img/social_aliyun.png`,
-      url: "https://aliyun.com/product/idaas"
-    },
-    "Keycloak": {
-      logo: `${Setting.StaticBaseUrl}/img/social_keycloak.png`,
-      url: "https://www.keycloak.org/"
-    },
-  },
-  Payment: {
-    "Alipay": {
-      logo: `${Setting.StaticBaseUrl}/img/payment_alipay.png`,
-      url: "https://www.alipay.com/"
-    },
-    "WeChat Pay": {
-      logo: `${Setting.StaticBaseUrl}/img/payment_wechat_pay.png`,
-      url: "https://pay.weixin.qq.com/"
-    },
-    "PayPal": {
-      logo: `${Setting.StaticBaseUrl}/img/payment_paypal.png`,
-      url: "https://www.paypal.com/"
-    },
-    "GC": {
-      logo: `${Setting.StaticBaseUrl}/img/payment_gc.png`,
-      url: "https://gc.org"
-    },
-  },
-};
-
-export function getProviderLogo(provider) {
-  if (provider.category === "OAuth") {
-    if (provider.type === "Custom") {
-      return provider.customLogo;  
-    }
-    return `${Setting.StaticBaseUrl}/img/social_${provider.type.toLowerCase()}.png`;
-  } else {
-    return otherProviderInfo[provider.category][provider.type].logo;
-  }
-}
-
 export function getProviderUrl(provider) {
   if (provider.category === "OAuth") {
     const endpoint = authInfo[provider.type].endpoint;
@@ -210,7 +126,7 @@ export function getProviderUrl(provider) {
 
     return `${urlObj.protocol}//${host}`;
   } else {
-    return otherProviderInfo[provider.category][provider.type].url;
+    return Setting.OtherProviderInfo[provider.category][provider.type].url;
   }
 }
 
@@ -224,14 +140,14 @@ export function getProviderLogoWidget(provider) {
     return (
       <Tooltip title={provider.type}>
         <a target="_blank" rel="noreferrer" href={getProviderUrl(provider)}>
-          <img width={36} height={36} src={getProviderLogo(provider)} alt={provider.displayName} />
+          <img width={36} height={36} src={Setting.getProviderLogoURL(provider)} alt={provider.displayName} />
         </a>
       </Tooltip>
     )
   } else {
     return (
       <Tooltip title={provider.type}>
-        <img width={36} height={36} src={getProviderLogo(provider)} alt={provider.displayName} />
+        <img width={36} height={36} src={Setting.getProviderLogoURL(provider)} alt={provider.displayName} />
       </Tooltip>
     )
   }