Improve login failure handling.

controllers/auth.go

@@ -164,7 +164,7 @@ func (c *ApiController) Login() {
 					c.ServeJSON()
 					return
 				} else {
-					resp = &Response{Status: "error", Msg: "need sign up"}
+					resp = &Response{Status: "error", Msg: fmt.Sprintf("the account for provider: %s and username: %s does not exist, please register an account first", provider.Type, userInfo.Username)}
 					c.Data["json"] = resp
 					c.ServeJSON()
 					return

web/src/App.js

@@ -134,7 +134,7 @@ class App extends Component {
 
           Setting.showMessage("success", `Successfully logged out, redirected to homepage`);
 
-          Setting.goToLink("/");
+          Setting.goToLinkSoft(this, "/");
         } else {
           Setting.showMessage("error", `Failed to log out: ${res.msg}`);
         }
@@ -292,7 +292,11 @@ class App extends Component {
       <div>
         <Header style={{ padding: '0', marginBottom: '3px'}}>
           {
-            Setting.isMobile() ? null : <a className="logo" href={"/"} />
+            Setting.isMobile() ? null : (
+              <Link to={"/"}>
+                <div className="logo" />
+              </Link>
+            )
           }
           <Menu
             // theme="dark"

web/src/ApplicationEditPage.js

@@ -241,7 +241,7 @@ class ApplicationEditPage extends React.Component {
             {i18next.t("general:Providers")}:
           </Col>
           <Col span={22} >
-            <Select mode="tags" style={{width: '100%'}}
+            <Select virtual={false} mode="tags" style={{width: '100%'}}
                     value={this.state.application.providers}
                     onChange={value => {
                       this.updateApplicationField('providers', value);

web/src/Setting.js

@@ -51,6 +51,10 @@ export function goToLink(link) {
   window.location.href = link;
 }
 
+export function goToLinkSoft(ths, link) {
+  ths.props.history.push(link);
+}
+
 export function showMessage(type, text) {
   if (type === "") {
     return;

web/src/auth/AuthCallback.js

@@ -18,6 +18,7 @@ import {withRouter} from "react-router-dom";
 import * as AuthBackend from "./AuthBackend";
 import * as Util from "./Util";
 import {authConfig} from "./Auth";
+import * as Setting from "../Setting";
 
 class AuthCallback extends React.Component {
   constructor(props) {
@@ -75,21 +76,17 @@ class AuthCallback extends React.Component {
           const responseType = this.getResponseType();
           if (responseType === "login") {
             Util.showMessage("success", `Logged in successfully`);
-            Util.goToLink("/");
+            Setting.goToLinkSoft(this, "/");
           } else if (responseType === "code") {
             const code = res.data;
-            Util.goToLink(`${oAuthParams.redirectUri}?code=${code}&state=${oAuthParams.state}`);
+            Setting.goToLink(`${oAuthParams.redirectUri}?code=${code}&state=${oAuthParams.state}`);
             // Util.showMessage("success", `Authorization code: ${res.data}`);
           }
         } else {
-          if (res.msg === "need sign up") {
+          // Util.showMessage("error", `Log in failed：${res.msg}`);
-            Util.goToLink("/register");
+          this.setState({
-          } else {
+            msg: res.msg,
-            // Util.showMessage("error", `Log in failed：${res.msg}`);
+          });
-            this.setState({
-              msg: res.msg,
-            });
-          }
         }
       });
   }
@@ -101,7 +98,7 @@ class AuthCallback extends React.Component {
           (this.state.msg === null) ? (
             <Spin size="large" tip="Signing in..." style={{paddingTop: "10%"}} />
           ) : (
-            Util.renderMessageLarge(this.state.msg)
+            Util.renderMessageLarge(this, this.state.msg)
           )
         }
       </div>

web/src/auth/LoginPage.js

@@ -19,6 +19,7 @@ import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as AuthBackend from "./AuthBackend";
 import * as Provider from "./Provider";
 import * as Util from "./Util";
+import * as Setting from "../Setting";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -90,10 +91,10 @@ class LoginPage extends React.Component {
           const responseType = this.state.type;
           if (responseType === "login") {
             Util.showMessage("success", `Logged in successfully`);
-            Util.goToLink("/");
+            Setting.goToLink("/");
           } else if (responseType === "code") {
             const code = res.data;
-            Util.goToLink(`${oAuthParams.redirectUri}?code=${code}&state=${oAuthParams.state}`);
+            Setting.goToLink(`${oAuthParams.redirectUri}?code=${code}&state=${oAuthParams.state}`);
             // Util.showMessage("success", `Authorization code: ${res.data}`);
           }
         } else {
@@ -208,7 +209,7 @@ class LoginPage extends React.Component {
   render() {
     const application = this.getApplicationObj();
     if (application === null) {
-      return Util.renderMessageLarge(this.state.msg);
+      return Util.renderMessageLarge(this, this.state.msg);
     }
 
     return (

web/src/auth/Util.js

@@ -16,10 +16,6 @@ import React from "react";
 import {Alert, Button, message, Result} from "antd";
 import * as Setting from "../Setting";
 
-export function goToLink(link) {
-  window.location.href = link;
-}
-
 export function showMessage(type, text) {
   if (type === "success") {
     message.success(text);
@@ -50,7 +46,7 @@ export function renderMessage(msg) {
   }
 }
 
-export function renderMessageLarge(msg) {
+export function renderMessageLarge(ths, msg) {
   if (msg !== null) {
     return (
       <div style={{display: "inline"}}>
@@ -59,11 +55,11 @@ export function renderMessageLarge(msg) {
           title="Login Error"
           subTitle={msg}
           extra={[
-            <Button key="home" onClick={() => Setting.goToLink("/")}>
+            <Button key="home" onClick={() => Setting.goToLinkSoft(ths, "/")}>
               Home
             </Button>,
-            <Button type="primary" key="help" onClick={() => Setting.goToLink("/help")}>
+            <Button type="primary" key="register" onClick={() => Setting.goToLinkSoft(ths, "/register")}>
-              Help
+              Register
             </Button>,
           ]}
         >

web/src/basic/SingleCard.js

@@ -15,6 +15,7 @@
 import React from "react";
 import {Card, Col, Row} from "antd";
 import * as Setting from "../Setting";
+import {withRouter} from "react-router-dom";
 
 const { Meta } = Card;
 
@@ -34,7 +35,7 @@ class SingleCard extends React.Component {
     };
 
     return (
-      <Card.Grid style={gridStyle} onClick={() => Setting.goToLink(link)}>
+      <Card.Grid style={gridStyle} onClick={() => Setting.goToLinkSoft(this, link)}>
         <img src={logo} alt="logo" height={60} style={{marginBottom: '20px'}}/>
         <Meta
           title={title}
@@ -52,7 +53,7 @@ class SingleCard extends React.Component {
           cover={
             <img alt="logo" src={logo} width={"100%"} height={"100%"} />
           }
-          onClick={() => Setting.goToLink(link)}
+          onClick={() => Setting.goToLinkSoft(this, link)}
           style={isSingle ? {width: "320px"} : null}
         >
           <Meta title={title} description={desc} />
@@ -73,4 +74,4 @@ class SingleCard extends React.Component {
   }
 }
 
-export default SingleCard;
+export default withRouter(SingleCard);