From 0f69f4f07c2ebbe2efb347afef242695d40de6e9 Mon Sep 17 00:00:00 2001 From: Yang Luo Date: Sun, 20 Jun 2021 00:42:32 +0800 Subject: [PATCH] Refactor our OAuthWidget.js --- web/src/UserEditPage.js | 103 +------------------ web/src/common/OAuthWidget.js | 179 ++++++++++++++++++++++++++++++++++ 2 files changed, 183 insertions(+), 99 deletions(-) create mode 100644 web/src/common/OAuthWidget.js 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}:` - } - - - - {name} - - { - 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}:` + } + + + + {name} + + { + linkedValue === "" ? ( + "(empty)" + ) : ( + profileUrl === "" ? name : ( + + { + name + } + + ) + ) + } + + { + linkedValue === "" ? ( + + + + ) : ( + + ) + } + + + ) + } + + render() { + return this.renderIdp(this.props.user, this.props.application, this.props.providerItem) + } +} + +export default OAuthWidget;