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") { if (provider.type === "GitHub") {
return `https://github.com/${linkedValue}`; return `https://github.com/${this.getUserProperty(provider.type, "username")}`;
} else if (provider.type === "Google") { } else if (provider.type === "Google") {
return "https://mail.google.com"; return "https://mail.google.com";
} else { } 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) { renderIdp(provider) {
const linkedValue = this.state.user[provider.type.toLowerCase()]; 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 ( return (
<Row key={provider.name} style={{marginTop: '20px'}} > <Row key={provider.name} style={{marginTop: '20px'}} >
@ -138,16 +149,19 @@ class UserEditPage extends React.Component {
</span> </span>
</Col> </Col>
<Col span={22} > <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 === "" ? ( linkedValue === "" ? (
"(empty)" "(empty)"
) : ( ) : (
<a target="_blank" rel="noreferrer" href={this.getProviderLink(provider, linkedValue)}> profileUrl === "" ? name : (
{ <a target="_blank" rel="noreferrer" href={profileUrl}>
linkedValue {
} name
</a> }
</a>
)
) )
} }
</span> </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() { renderUser() {
return ( return (
<Card size="small" title={ <Card size="small" title={
@ -272,7 +290,7 @@ class UserEditPage extends React.Component {
<Input value={this.state.user.email} disabled /> <Input value={this.state.user.email} disabled />
</Col> </Col>
<Col span={11} > <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> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}} > <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 /> <Input value={this.state.user.phone} addonBefore={`+${this.state.application?.organizationObj.phonePrefix}`} disabled />
</Col> </Col>
<Col span={11} > <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> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
@ -314,29 +332,18 @@ class UserEditPage extends React.Component {
}} /> }} />
</Col> </Col>
</Row> </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'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}> <Col style={{marginTop: '5px'}} span={2}>
{i18next.t("user:Properties")}: {i18next.t("user:Third-party logins")}:
</Col> </Col>
<Col span={22} > <Col span={22} >
<CodeMirror <div style={{marginBottom: 20}}>
value={JSON.stringify(this.state.user.properties, null, 4)} {
options={{mode: 'javascript', theme: "material-darker"}} this.state.application?.providerObjs.filter(provider => Setting.isProviderVisible(provider)).map((provider, index) => this.renderIdp(provider))
/> }
</div>
</Col> </Col>
</Row> </Row>
) )
@ -344,6 +351,17 @@ class UserEditPage extends React.Component {
{ {
!Setting.isAdminUser(this.props.account) ? null : ( !Setting.isAdminUser(this.props.account) ? null : (
<React.Fragment> <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'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}> <Col style={{marginTop: '5px'}} span={2}>
{i18next.t("user:Is admin")}: {i18next.t("user:Is admin")}: