llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-24 08:20:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve "Third-party logins" UI.

Browse Source
This commit is contained in:
Yang Luo 2021-05-31 01:42:03 +08:00
parent 95cda41732
commit 90e617b2dc
1 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/UserEditPage.js
View File

@ -112,9 +112,9 @@ class UserEditPage extends React.Component {
});
}
getProviderLink(provider, linkedValue) {
getProviderLink(provider) {
if (provider.type === "GitHub") {
return `https://github.com/${linkedValue}`;
return `https://github.com/${this.getUserProperty(provider.type, "username")}`;
} else if (provider.type === "Google") {
return "https://mail.google.com";
} else {
@ -122,8 +122,19 @@ class UserEditPage extends React.Component {
}
}
getUserProperty(providerType, propertyName) {
const key = `oauth_${providerType}_${propertyName}`;
return this.state.user.properties[key]
}
renderIdp(provider) {
const linkedValue = this.state.user[provider.type.toLowerCase()];
const profileUrl = this.getProviderLink(provider);
const username = this.getUserProperty(provider.type, "username");
const displayName = this.getUserProperty(provider.type, "displayname");
// const email = this.getUserProperty(provider.type, "email");
const avatarUrl = this.getUserProperty(provider.type, "avatarUrl");
const name = (username === undefined) ? displayName : `${displayName} (${username})`;
return (
<Row key={provider.name} style={{marginTop: '20px'}} >
@ -138,16 +149,19 @@ class UserEditPage extends React.Component {
</span>
</Col>
<Col span={22} >
<span style={{width: '200px', display: "inline-block"}}>
<img style={{marginRight: '10px'}} width={30} height={30} src={avatarUrl} alt={name} />
<span style={{width: '300px', display: "inline-block"}}>
{
linkedValue === "" ? (
"(empty)"
) : (
<a target="_blank" rel="noreferrer" href={this.getProviderLink(provider, linkedValue)}>
{
linkedValue
}
</a>
profileUrl === "" ? name : (
<a target="_blank" rel="noreferrer" href={profileUrl}>
{
name
}
</a>
)
)
}
</span>
@ -165,6 +179,10 @@ class UserEditPage extends React.Component {
)
}
isSelfOrAdmin() {
return (this.state.user.id === this.props.account?.id) || Setting.isAdminUser(this.props.account);
}
renderUser() {
return (
<Card size="small" title={
@ -272,7 +290,7 @@ class UserEditPage extends React.Component {
<Input value={this.state.user.email} disabled />
</Col>
<Col span={11} >
{ this.state.user.id === this.props.account.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Email...")} destType={"email"} coolDownTime={60}/>) : null}
{ this.state.user.id === this.props.account?.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Email...")} destType={"email"} coolDownTime={60}/>) : null}
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
@ -283,7 +301,7 @@ class UserEditPage extends React.Component {
<Input value={this.state.user.phone} addonBefore={`+${this.state.application?.organizationObj.phonePrefix}`} disabled />
</Col>
<Col span={11} >
{ this.state.user.id === this.props.account.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} coolDownTime={60}/>) : null}
{ this.state.user.id === this.props.account?.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} coolDownTime={60}/>) : null}
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
@ -314,29 +332,18 @@ class UserEditPage extends React.Component {
}} />
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
{i18next.t("user:Third-party logins")}:
</Col>
<Col span={22} >
<div style={{marginBottom: 20}}>
{
this.state.application?.providerObjs.filter(provider => Setting.isProviderVisible(provider)).map((provider, index) => this.renderIdp(provider))
}
</div>
</Col>
</Row>
{
!Setting.isAdminUser(this.props.account) ? null : (
!this.isSelfOrAdmin() ? null : (
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
{i18next.t("user:Properties")}:
{i18next.t("user:Third-party logins")}:
</Col>
<Col span={22} >
<CodeMirror
value={JSON.stringify(this.state.user.properties, null, 4)}
options={{mode: 'javascript', theme: "material-darker"}}
/>
<div style={{marginBottom: 20}}>
{
this.state.application?.providerObjs.filter(provider => Setting.isProviderVisible(provider)).map((provider, index) => this.renderIdp(provider))
}
</div>
</Col>
</Row>
)
@ -344,6 +351,17 @@ class UserEditPage extends React.Component {
{
!Setting.isAdminUser(this.props.account) ? null : (
<React.Fragment>
{/*<Row style={{marginTop: '20px'}} >*/}
{/* <Col style={{marginTop: '5px'}} span={2}>*/}
{/* {i18next.t("user:Properties")}:*/}
{/* </Col>*/}
{/* <Col span={22} >*/}
{/* <CodeMirror*/}
{/* value={JSON.stringify(this.state.user.properties, null, 4)}*/}
{/* options={{mode: 'javascript', theme: "material-darker"}}*/}
{/* />*/}
{/* </Col>*/}
{/*</Row>*/}
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
{i18next.t("user:Is admin")}: