Improve non-oauth logos.

This commit is contained in:
Yang Luo
2021-10-10 00:04:25 +08:00
parent 122970bb54
commit 353bf46daf
3 changed files with 72 additions and 21 deletions

View File

@ -111,7 +111,7 @@ class ProviderListPage extends React.Component {
title: i18next.t("general:Created time"), title: i18next.t("general:Created time"),
dataIndex: 'createdTime', dataIndex: 'createdTime',
key: 'createdTime', key: 'createdTime',
width: '160px', width: '180px',
sorter: (a, b) => a.createdTime.localeCompare(b.createdTime), sorter: (a, b) => a.createdTime.localeCompare(b.createdTime),
render: (text, record, index) => { render: (text, record, index) => {
return Setting.getFormattedDate(text); return Setting.getFormattedDate(text);
@ -136,16 +136,22 @@ class ProviderListPage extends React.Component {
dataIndex: 'type', dataIndex: 'type',
key: 'type', key: 'type',
width: '80px', width: '80px',
align: 'center',
sorter: (a, b) => a.type.localeCompare(b.type), sorter: (a, b) => a.type.localeCompare(b.type),
render: (text, record, index) => { 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 { } else {
return ( return (
<Tooltip title={record.type}> <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> </Tooltip>
) )
} }

View File

@ -183,7 +183,7 @@ class LoginPage extends React.Component {
if (size === "small") { if (size === "small") {
return ( return (
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}> <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> </a>
) )
} else { } else {

View File

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