Add Unlink API.

web/src/Setting.js

@@ -171,3 +171,10 @@ export function getClickable(text) {
     </a>
   )
 }
+
+export function getIdpLogo(idp) {
+  const url = `https://cdn.jsdelivr.net/gh/casbin/static/img/social_${idp}.png`;
+  return (
+    <img width={30} height={30} src={url} alt={idp} />
+  )
+}

web/src/UserEditPage.js

@@ -20,6 +20,7 @@ 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";
 
 const { Option } = Select;
 
@@ -75,6 +76,74 @@ class UserEditPage extends React.Component {
     });
   }
 
+  linkUser(providerType) {
+  }
+
+  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}`);
+        }
+      });
+  }
+
+  getIdpLink(idp, username) {
+    if (idp === "github") {
+      return `https://github.com/${username}`;
+    } else if (idp === "google") {
+      return "https://mail.google.com";
+    } else {
+      return "";
+    }
+  }
+
+  renderIdp(idp) {
+    return (
+      <Row style={{marginTop: '20px'}} >
+        <Col style={{marginTop: '5px'}} span={2}>
+          {
+            Setting.getIdpLogo(idp.toLowerCase())
+          }
+          <span style={{marginLeft: '5px'}}>
+            {
+              `${idp}:`
+            }
+          </span>
+        </Col>
+        <Col span={22} >
+          <span style={{width: '200px', display: "inline-block"}}>
+            {
+              this.state.user[idp.toLowerCase()] === "" ? (
+                "(empty)"
+              ) : (
+                <a target="_blank" rel="noreferrer" href={this.getIdpLink(idp.toLowerCase(), this.state.user[idp.toLowerCase()])}>
+                  {
+                    this.state.user[idp.toLowerCase()]
+                  }
+                </a>
+              )
+            }
+          </span>
+          {
+            this.state.user[idp.toLowerCase()] === "" ? (
+              <Button style={{marginLeft: '20px', width: '80px'}} type="primary" onClick={() => this.linkUser(idp)}>Link</Button>
+            ) : (
+              <Button style={{marginLeft: '20px', width: '80px'}} onClick={() => this.unlinkUser(idp)}>Unlink</Button>
+            )
+          }
+        </Col>
+      </Row>
+    )
+  }
+
   renderUser() {
     return (
       <Card size="small" title={
@@ -216,22 +285,18 @@ class UserEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={2}>
-            GitHub:
-          </Col>
-          <Col span={22} >
-            <Input value={this.state.user.github} disabled={true} />
-          </Col>
-        </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={2}>
-            Google:
-          </Col>
-          <Col span={22} >
-            <Input value={this.state.user.google} disabled={true} />
-          </Col>
-        </Row>
+        {
+          this.renderIdp("GitHub")
+        }
+        {
+          this.renderIdp("Google")
+        }
+        {
+          this.renderIdp("QQ")
+        }
+        {
+          this.renderIdp("WeChat")
+        }
         {
           !Setting.isAdminUser(this.props.account) ? null : (
             <React.Fragment>

web/src/auth/AuthBackend.js

@@ -56,16 +56,17 @@ export function logout() {
   }).then(res => res.json());
 }
 
+export function unlink(values) {
+  return fetch(`${authConfig.serverUrl}/api/unlink`, {
+    method: 'POST',
+    credentials: "include",
+    body: JSON.stringify(values),
+  }).then(res => res.json());
+}
+
 export function getApplication(owner, name) {
   return fetch(`${authConfig.serverUrl}/api/get-application?id=${owner}/${encodeURIComponent(name)}`, {
     method: "GET",
     credentials: "include"
   }).then(res => res.json());
 }
-
-export function getUsers(owner) {
-  return fetch(`${authConfig.serverUrl}/api/get-users?owner=${owner}`, {
-    method: "GET",
-    credentials: "include"
-  }).then(res => res.json());
-}

web/src/auth/LoginPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Card, Checkbox, Col, Form, Input, Row} from "antd";
+import {Button, Checkbox, Col, Form, Input, Row} from "antd";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as AuthBackend from "./AuthBackend";
 import * as Provider from "./Provider";