Improve non-oauth logos.

web/src/ProviderListPage.js

@@ -111,7 +111,7 @@ class ProviderListPage extends React.Component {
         title: i18next.t("general:Created time"),
         dataIndex: 'createdTime',
         key: 'createdTime',
-        width: '160px',
+        width: '180px',
         sorter: (a, b) => a.createdTime.localeCompare(b.createdTime),
         render: (text, record, index) => {
           return Setting.getFormattedDate(text);
@@ -136,16 +136,22 @@ class ProviderListPage extends React.Component {
         dataIndex: 'type',
         key: 'type',
         width: '80px',
+        align: 'center',
         sorter: (a, b) => a.type.localeCompare(b.type),
         render: (text, record, index) => {
-          if (record.category !== "OAuth") {
+          const url = Provider.getProviderUrl(record);
-            return text;
+          if (url !== "") {
+            return (
+              <Tooltip title={record.type}>
+                <a target="_blank" rel="noreferrer" href={Provider.getProviderUrl(record)}>
+                  <img width={36} height={36} src={Provider.getProviderLogo(record)} alt={record.displayName} />
+                </a>
+              </Tooltip>
+            )
           } else {
             return (
               <Tooltip title={record.type}>
-                <a target="_blank" rel="noreferrer" href={Provider.getAuthHomepage(record)}>
+                <img width={36} height={36} src={Provider.getProviderLogo(record)} alt={record.displayName} />
-                  <img width={30} height={30} src={Provider.getAuthLogo(record)} alt={record.displayName} />
-                </a>
               </Tooltip>
             )
           }

web/src/auth/LoginPage.js

@@ -183,7 +183,7 @@ class LoginPage extends React.Component {
     if (size === "small") {
       return (
         <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
-          <img width={width} height={width} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: margin}} />
+          <img width={width} height={width} src={Provider.getProviderLogo(provider)} alt={provider.displayName} style={{margin: margin}} />
         </a>
       )
     } else {

web/src/auth/Provider.js

@@ -65,24 +65,69 @@ const authInfo = {
     scope: "read_user+profile",
     endpoint: "https://gitlab.com/oauth/authorize",
   },
-}
+};
 
-export function getAuthLogo(provider) {
+const otherProviderInfo = {
-  return `${StaticBaseUrl}/img/social_${provider.type.toLowerCase()}.png`;
+  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",
+    },
+  },
+  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",
+    },
+  },
+};
 
-export function getAuthHomepage(provider) {
+export function getProviderLogo(provider) {
-  const endpoint = authInfo[provider.type].endpoint;
+  if (provider.category === "OAuth") {
-  const urlObj = new URL(endpoint);
+    return `${StaticBaseUrl}/img/social_${provider.type.toLowerCase()}.png`;
-
+  } else {
-  let host = urlObj.host;
+    return otherProviderInfo[provider.category][provider.type].logo;
-  let tokens = host.split(".");
-  if (tokens.length > 2) {
-    tokens = tokens.slice(1);
   }
-  host = tokens.join(".");
+}
 
-  return `${urlObj.protocol}//${host}`;
+export function getProviderUrl(provider) {
+  if (provider.category === "OAuth") {
+    const endpoint = authInfo[provider.type].endpoint;
+    const urlObj = new URL(endpoint);
+
+    let host = urlObj.host;
+    let tokens = host.split(".");
+    if (tokens.length > 2) {
+      tokens = tokens.slice(1);
+    }
+    host = tokens.join(".");
+
+    return `${urlObj.protocol}//${host}`;
+  } else {
+    return otherProviderInfo[provider.category][provider.type].url;
+  }
 }
 
 export function getAuthUrl(application, provider, method) {