fix: fix display bug in SigninTable (#2698)

* fix: fix display bug in SigninTable

* fix: fix code bug

* feat: improve code format

* feat: improve code format
This commit is contained in:
DacongDA 2024-02-14 09:26:51 +08:00 committed by GitHub
parent bcfbfc6947
commit d52058d2ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 14 additions and 10 deletions

View File

@ -287,7 +287,7 @@ func extendApplicationWithSigninItems(application *Application) (err error) {
Visible: true,
Label: "\n<style>\n .provider-img {\n width: 30px;\n margin: 5px;\n }\n .provider-big-img {\n margin-bottom: 10px;\n }\n</style>\n",
Placeholder: "",
Rule: "None",
Rule: "Default",
}
application.SigninItems = append(application.SigninItems, signinItem)
}

View File

@ -655,8 +655,11 @@ class LoginPage extends React.Component {
);
} else if (signinItem.name === "Providers") {
const showForm = Setting.isPasswordEnabled(application) || Setting.isCodeSigninEnabled(application) || Setting.isWebAuthnEnabled(application) || Setting.isLdapEnabled(application);
if (signinItem.rule === "None") {
signinItem.rule = showForm ? "small" : "big";
let rule ;
if (signinItem.rule === "Default") {
rule = showForm ? "Small icon" : "Big icon";
} else {
rule = signinItem.rule;
}
return (
@ -665,7 +668,7 @@ class LoginPage extends React.Component {
<Form.Item>
{
application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
return ProviderButton.renderProviderLogo(providerItem.provider, application, null, null, signinItem.rule, this.props.location);
return ProviderButton.renderProviderLogo(providerItem.provider, application, null, null, rule, this.props.location);
})
}
{
@ -782,7 +785,7 @@ class LoginPage extends React.Component {
:
</div>
<br />
{application.signinItems.map(signinItem => signinItem.name === "ThirdParty" || signinItem.name === "Footer" ? this.renderFormItem(application, signinItem) : null)}
{application.signinItems.map(signinItem => signinItem.name === "Providers" || signinItem.name === "Signup link" ? this.renderFormItem(application, signinItem) : null)}
</div>
);
}

View File

@ -131,7 +131,7 @@ export function goToWeb3Url(application, provider, method) {
}
export function renderProviderLogo(provider, application, width, margin, size, location) {
if (size === "small") {
if (size === "Small icon") {
if (provider.category === "OAuth") {
if (provider.type === "WeChat" && provider.clientId2 !== "" && provider.clientSecret2 !== "" && provider.disableSsl === true && !navigator.userAgent.includes("MicroMessenger")) {
const info = async() => {

View File

@ -649,7 +649,7 @@ class SignupPage extends React.Component {
</Form.Item>
{
application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "small", this.props.location);
return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "Small icon", this.props.location);
})
}
</Form>

View File

@ -229,10 +229,11 @@ class SigninTable extends React.Component {
width: "155px",
render: (text, record, index) => {
let options = [];
if (record.name === "ThirdParty") {
if (record.name === "Providers") {
options = [
{id: "big", name: i18next.t("application:Big icon")},
{id: "small", name: i18next.t("application:Small icon")},
{id: "Default", name: i18next.t("general:Default")},
{id: "Big icon", name: i18next.t("application:Big icon")},
{id: "Small icon", name: i18next.t("application:Small icon")},
];
}
if (options.length === 0) {