mirror of
https://github.com/casdoor/casdoor.git
synced 2025-07-03 12:30:19 +08:00
Refactor our OAuthWidget.js
This commit is contained in:
Yang Luo
@ -20,12 +20,11 @@ import * as Setting from "./Setting";
|
||||
import {LinkOutlined} from "@ant-design/icons";
|
||||
import i18next from "i18next";
|
||||
import CropperDiv from "./CropperDiv.js";
|
||||
import * as AuthBackend from "./auth/AuthBackend";
|
||||
import * as ApplicationBackend from "./backend/ApplicationBackend";
|
||||
import * as Provider from "./auth/Provider";
|
||||
import PasswordModal from "./PasswordModal";
|
||||
import ResetModal from "./ResetModal";
|
||||
import AffiliationSelect from "./common/AffiliationSelect";
|
||||
import OAuthWidget from "./common/OAuthWidget";
|
||||
|
||||
import {Controlled as CodeMirror} from 'react-codemirror2'
|
||||
import "codemirror/lib/codemirror.css"
|
||||
@ -97,102 +96,8 @@ class UserEditPage extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
unlinkUser(providerType) {
|
||||
const body = {
|
||||
providerType: providerType,
|
||||
};
|
||||
AuthBackend.unlink(body)
|
||||
.then((res) => {
|
||||
if (res.status === 'ok') {
|
||||
Setting.showMessage("success", `Linked successfully`);
|
||||
|
||||
this.getUser();
|
||||
} else {
|
||||
Setting.showMessage("error", `Failed to unlink: ${res.msg}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getProviderLink(provider) {
|
||||
if (provider.type === "GitHub") {
|
||||
return `https://github.com/${this.getUserProperty(provider.type, "username")}`;
|
||||
} else if (provider.type === "Google") {
|
||||
return "https://mail.google.com";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
getUserProperty(providerType, propertyName) {
|
||||
const key = `oauth_${providerType}_${propertyName}`;
|
||||
return this.state.user.properties[key]
|
||||
}
|
||||
|
||||
renderIdp(providerItem, provider) {
|
||||
const linkedValue = this.state.user[provider.type.toLowerCase()];
|
||||
const profileUrl = this.getProviderLink(provider);
|
||||
const id = this.getUserProperty(provider.type, "id");
|
||||
const username = this.getUserProperty(provider.type, "username");
|
||||
const displayName = this.getUserProperty(provider.type, "displayName");
|
||||
const email = this.getUserProperty(provider.type, "email");
|
||||
let avatarUrl = this.getUserProperty(provider.type, "avatarUrl");
|
||||
|
||||
if (avatarUrl === "" || avatarUrl === undefined) {
|
||||
avatarUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAAHElEQVR42mNkoAAwjmoe1TyqeVTzqOZRzcNZMwB18wAfEFQkPQAAAABJRU5ErkJggg==";
|
||||
}
|
||||
|
||||
let name = (username === undefined) ? displayName : `${displayName} (${username})`;
|
||||
if (name === undefined) {
|
||||
if (id !== undefined) {
|
||||
name = id;
|
||||
} else if (email !== undefined) {
|
||||
name = email;
|
||||
} else {
|
||||
name = linkedValue;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Row key={provider.name} style={{marginTop: '20px'}} >
|
||||
<Col style={{marginTop: '5px'}} span={3}>
|
||||
{
|
||||
Setting.getProviderLogo(provider)
|
||||
}
|
||||
<span style={{marginLeft: '5px'}}>
|
||||
{
|
||||
`${provider.type}:`
|
||||
}
|
||||
</span>
|
||||
</Col>
|
||||
<Col span={21} >
|
||||
<img style={{marginRight: '10px'}} width={30} height={30} src={avatarUrl} alt={name} />
|
||||
<span style={{width: '300px', display: "inline-block"}}>
|
||||
{
|
||||
linkedValue === "" ? (
|
||||
"(empty)"
|
||||
) : (
|
||||
profileUrl === "" ? name : (
|
||||
<a target="_blank" rel="noreferrer" href={profileUrl}>
|
||||
{
|
||||
name
|
||||
}
|
||||
</a>
|
||||
)
|
||||
)
|
||||
}
|
||||
</span>
|
||||
{
|
||||
linkedValue === "" ? (
|
||||
<a key={provider.displayName} href={Provider.getAuthUrl(this.state.application, provider, "link")}>
|
||||
<Button style={{marginLeft: '20px', width: '80px'}} type="primary">{i18next.t("user:Link")}</Button>
|
||||
</a>
|
||||
) : (
|
||||
<Button disabled={!providerItem.canUnlink} style={{marginLeft: '20px', width: '80px'}} onClick={() => this.unlinkUser(provider.type)}>{i18next.t("user:Unlink")}</Button>
|
||||
)
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
unlinked() {
|
||||
this.getUser();
|
||||
}
|
||||
|
||||
isSelfOrAdmin() {
|
||||
@ -344,7 +249,7 @@ class UserEditPage extends React.Component {
|
||||
<Col span={22} >
|
||||
<div style={{marginBottom: 20}}>
|
||||
{
|
||||
this.state.application?.providers.filter(providerItem => Setting.isProviderVisible(providerItem)).map((providerItem, index) => this.renderIdp(providerItem, providerItem.provider))
|
||||
this.state.application?.providers.filter(providerItem => Setting.isProviderVisible(providerItem)).map((providerItem, index) => <OAuthWidget user={this.state.user} application={this.state.application} providerItem={providerItem} onUnlinked={() => { return this.unlinked()}} />)
|
||||
}
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
179
web/src/common/OAuthWidget.js
Normal file
179
web/src/common/OAuthWidget.js
Normal file
@ -0,0 +1,179 @@
|
||||
// Copyright 2021 The casbin Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import React from "react";
|
||||
import {Button, Col, Row} from 'antd';
|
||||
import i18next from "i18next";
|
||||
import * as UserBackend from "../backend/UserBackend";
|
||||
import * as Setting from "../Setting";
|
||||
import * as Provider from "../auth/Provider";
|
||||
import * as AuthBackend from "../auth/AuthBackend";
|
||||
|
||||
class OAuthWidget extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
classes: props,
|
||||
addressOptions: [],
|
||||
affiliationOptions: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.getAddressOptions(this.props.application);
|
||||
this.getAffiliationOptions(this.props.application, this.props.user);
|
||||
}
|
||||
|
||||
getAddressOptions(application) {
|
||||
if (application.affiliationUrl === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
const addressUrl = application.affiliationUrl.split("|")[0];
|
||||
UserBackend.getAddressOptions(addressUrl)
|
||||
.then((addressOptions) => {
|
||||
this.setState({
|
||||
addressOptions: addressOptions,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getAffiliationOptions(application, user) {
|
||||
if (application.affiliationUrl === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
const affiliationUrl = application.affiliationUrl.split("|")[1];
|
||||
const code = user.address[user.address.length - 1];
|
||||
UserBackend.getAffiliationOptions(affiliationUrl, code)
|
||||
.then((affiliationOptions) => {
|
||||
this.setState({
|
||||
affiliationOptions: affiliationOptions,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
updateUserField(key, value) {
|
||||
this.props.onUpdateUserField(key, value);
|
||||
}
|
||||
|
||||
unlinked() {
|
||||
this.props.onUnlinked();
|
||||
}
|
||||
|
||||
getProviderLink(user, provider) {
|
||||
if (provider.type === "GitHub") {
|
||||
return `https://github.com/${this.getUserProperty(user, provider.type, "username")}`;
|
||||
} else if (provider.type === "Google") {
|
||||
return "https://mail.google.com";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
getUserProperty(user, providerType, propertyName) {
|
||||
const key = `oauth_${providerType}_${propertyName}`;
|
||||
return user.properties[key]
|
||||
}
|
||||
|
||||
unlinkUser(providerType) {
|
||||
const body = {
|
||||
providerType: providerType,
|
||||
};
|
||||
AuthBackend.unlink(body)
|
||||
.then((res) => {
|
||||
if (res.status === 'ok') {
|
||||
Setting.showMessage("success", `Unlinked successfully`);
|
||||
|
||||
this.unlinked();
|
||||
} else {
|
||||
Setting.showMessage("error", `Failed to unlink: ${res.msg}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renderIdp(user, application, providerItem) {
|
||||
const provider = providerItem.provider;
|
||||
const linkedValue = user[provider.type.toLowerCase()];
|
||||
const profileUrl = this.getProviderLink(user, provider);
|
||||
const id = this.getUserProperty(user, provider.type, "id");
|
||||
const username = this.getUserProperty(user, provider.type, "username");
|
||||
const displayName = this.getUserProperty(user, provider.type, "displayName");
|
||||
const email = this.getUserProperty(user, provider.type, "email");
|
||||
let avatarUrl = this.getUserProperty(user, provider.type, "avatarUrl");
|
||||
|
||||
if (avatarUrl === "" || avatarUrl === undefined) {
|
||||
avatarUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAAHElEQVR42mNkoAAwjmoe1TyqeVTzqOZRzcNZMwB18wAfEFQkPQAAAABJRU5ErkJggg==";
|
||||
}
|
||||
|
||||
let name = (username === undefined) ? displayName : `${displayName} (${username})`;
|
||||
if (name === undefined) {
|
||||
if (id !== undefined) {
|
||||
name = id;
|
||||
} else if (email !== undefined) {
|
||||
name = email;
|
||||
} else {
|
||||
name = linkedValue;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Row key={provider.name} style={{marginTop: '20px'}} >
|
||||
<Col style={{marginTop: '5px'}} span={3}>
|
||||
{
|
||||
Setting.getProviderLogo(provider)
|
||||
}
|
||||
<span style={{marginLeft: '5px'}}>
|
||||
{
|
||||
`${provider.type}:`
|
||||
}
|
||||
</span>
|
||||
</Col>
|
||||
<Col span={21} >
|
||||
<img style={{marginRight: '10px'}} width={30} height={30} src={avatarUrl} alt={name} />
|
||||
<span style={{width: '300px', display: "inline-block"}}>
|
||||
{
|
||||
linkedValue === "" ? (
|
||||
"(empty)"
|
||||
) : (
|
||||
profileUrl === "" ? name : (
|
||||
<a target="_blank" rel="noreferrer" href={profileUrl}>
|
||||
{
|
||||
name
|
||||
}
|
||||
</a>
|
||||
)
|
||||
)
|
||||
}
|
||||
</span>
|
||||
{
|
||||
linkedValue === "" ? (
|
||||
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "link")}>
|
||||
<Button style={{marginLeft: '20px', width: '80px'}} type="primary">{i18next.t("user:Link")}</Button>
|
||||
</a>
|
||||
) : (
|
||||
<Button disabled={!providerItem.canUnlink} style={{marginLeft: '20px', width: '80px'}} onClick={() => this.unlinkUser(provider.type)}>{i18next.t("user:Unlink")}</Button>
|
||||
)
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.renderIdp(this.props.user, this.props.application, this.props.providerItem)
|
||||
}
|
||||
}
|
||||
|
||||
export default OAuthWidget;
|
||||
Reference in New Issue
Block a user