Improve oauth button UI.

This commit is contained in:
Yang Luo 2021-06-11 20:33:22 +08:00
parent 8132ea9621
commit 8ddc0cd626
4 changed files with 16 additions and 11 deletions

View File

@ -106,15 +106,16 @@ class LoginPage extends React.Component {
}); });
}; };
getLoginButton(type) { getSigninButton(type) {
const text = i18next.t("login:Sign in with {type}").replace("{type}", type);
if (type === "GitHub") { if (type === "GitHub") {
return <GithubLoginButton /> return <GithubLoginButton text={text} align={"center"} />
} else if (type === "Google") { } else if (type === "Google") {
return <GoogleLoginButton /> return <GoogleLoginButton text={text} align={"center"} />
} else if (type === "QQ") { } else if (type === "QQ") {
return <QqLoginButton /> return <QqLoginButton text={text} align={"center"} />
} else { } else {
return `Log in with ${type}`; return text;
} }
} }
@ -130,7 +131,7 @@ class LoginPage extends React.Component {
<div key={provider.displayName} style={{marginBottom: "10px"}}> <div key={provider.displayName} style={{marginBottom: "10px"}}>
<a href={Provider.getAuthUrl(application, provider, "signup")}> <a href={Provider.getAuthUrl(application, provider, "signup")}>
{ {
this.getLoginButton(provider.type) this.getSigninButton(provider.type)
} }
</a> </a>
</div> </div>
@ -234,13 +235,13 @@ class LoginPage extends React.Component {
return ( return (
<div style={{marginTop: "20px"}}> <div style={{marginTop: "20px"}}>
<div style={{fontSize: 16, textAlign: "left"}}> <div style={{fontSize: 16, textAlign: "left"}}>
Sign in&nbsp; {i18next.t("login:To access")}&nbsp;
<a target="_blank" rel="noreferrer" href={application.homepageUrl}> <a target="_blank" rel="noreferrer" href={application.homepageUrl}>
<span style={{fontWeight: "bold"}}> <span style={{fontWeight: "bold"}}>
{application.displayName} {application.displayName}
</span> </span>
</a> </a>
&nbsp;with: :
</div> </div>
<br/> <br/>
{ {

View File

@ -19,7 +19,7 @@ function Icon({ width = 24, height = 24, color }) {
} }
const config = { const config = {
text: "Log in with QQ", text: "Sign in with QQ",
icon: Icon, icon: Icon,
iconFormat: name => `fa fa-${name}`, iconFormat: name => `fa fa-${name}`,
style: {background: "rgb(94,188,249)"}, style: {background: "rgb(94,188,249)"},

View File

@ -73,7 +73,9 @@
"Forgot password?": "Forgot password?", "Forgot password?": "Forgot password?",
"Sign In": "Sign In", "Sign In": "Sign In",
"No account yet?": "No account yet?", "No account yet?": "No account yet?",
"sign up now": "sign up now" "sign up now": "sign up now",
"To access": "To access",
"Sign in with {type}": "Sign in with {type}"
}, },
"account": "account":
{ {

View File

@ -73,7 +73,9 @@
"Forgot password?": "忘记密码?", "Forgot password?": "忘记密码?",
"Sign In": "登录", "Sign In": "登录",
"No account yet?": "没有账号?", "No account yet?": "没有账号?",
"sign up now": "立即注册" "sign up now": "立即注册",
"To access": "访问",
"Sign in with {type}": "{type}登录"
}, },
"account": "account":
{ {