diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index b1fcc94c..9d34e648 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -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 (
-
-
- {
- Setting.getProviderLogo(provider)
- }
-
- {
- `${provider.type}:`
- }
-
-
-
- 
-
- {
- linkedValue === "" ? (
- "(empty)"
- ) : (
- profileUrl === "" ? name : (
-
- {
- name
- }
-
- )
- )
- }
-
- {
- linkedValue === "" ? (
-
-
-
- ) : (
-
- )
- }
-
-
- )
+ unlinked() {
+ this.getUser();
}
isSelfOrAdmin() {
@@ -344,7 +249,7 @@ class UserEditPage extends React.Component {
{
- 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) => { return this.unlinked()}} />)
}
diff --git a/web/src/common/OAuthWidget.js b/web/src/common/OAuthWidget.js
new file mode 100644
index 00000000..7cc7fb48
--- /dev/null
+++ b/web/src/common/OAuthWidget.js
@@ -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 (
+
+
+ {
+ Setting.getProviderLogo(provider)
+ }
+
+ {
+ `${provider.type}:`
+ }
+
+
+
+
+
+ {
+ linkedValue === "" ? (
+ "(empty)"
+ ) : (
+ profileUrl === "" ? name : (
+
+ {
+ name
+ }
+
+ )
+ )
+ }
+
+ {
+ linkedValue === "" ? (
+
+
+
+ ) : (
+
+ )
+ }
+
+
+ )
+ }
+
+ render() {
+ return this.renderIdp(this.props.user, this.props.application, this.props.providerItem)
+ }
+}
+
+export default OAuthWidget;