Improve login error handling.

controllers/auth.go

@@ -116,7 +116,10 @@ func (c *ApiController) Login() {
 		// https://github.com/golang/oauth2/issues/123#issuecomment-103715338
 		token, err := idProvider.GetToken(form.Code)
 		if err != nil {
-			panic(err)
+			resp = &Response{Status: "error", Msg: err.Error()}
+			c.Data["json"] = resp
+			c.ServeJSON()
+			return
 		}
 
 		if !token.Valid() {

web/src/auth/AuthCallback.js

@@ -24,6 +24,7 @@ class AuthCallback extends React.Component {
     super(props);
     this.state = {
       classes: props,
+      msg: null,
     };
   }
 
@@ -82,7 +83,10 @@ class AuthCallback extends React.Component {
             // Util.showMessage("success", `Authorization code: ${res.data}`);
           }
         } else {
-          Util.showMessage("error", `Log in failed：${res.msg}`);
+          // Util.showMessage("error", `Log in failed：${res.msg}`);
+          this.setState({
+            msg: res.msg,
+          });
         }
       });
   }
@@ -90,7 +94,13 @@ class AuthCallback extends React.Component {
   render() {
     return (
       <div style={{textAlign: "center"}}>
-        <Spin size="large" tip="Signing in..." style={{paddingTop: "10%"}} />
+        {
+          (this.state.msg === null) ? (
+            <Spin size="large" tip="Signing in..." style={{paddingTop: "10%"}} />
+          ) : (
+            Util.renderMessageLarge(this.state.msg)
+          )
+        }
       </div>
     )
   }

web/src/auth/Face.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Alert, Button, Checkbox, Col, Form, Input, Result, 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";
@@ -102,54 +102,9 @@ class Face extends React.Component {
       });
   };
 
-  renderMessage() {
-    if (this.state.msg !== null) {
-      return (
-        <div style={{display: "inline"}}>
-          <Alert
-            message="Login Error"
-            showIcon
-            description={this.state.msg}
-            type="error"
-            action={
-              <Button size="small" danger>
-                Detail
-              </Button>
-            }
-          />
-        </div>
-      )
-    } else {
-      return null;
-    }
-  }
-
-  renderMessageLarge() {
-    if (this.state.msg !== null) {
-      return (
-        <div style={{display: "inline"}}>
-          <Result
-            status="error"
-            title="Login Error"
-            subTitle={this.state.msg}
-            extra={[
-              <Button type="primary" key="details">
-                Details
-              </Button>,
-              <Button key="help">Help</Button>,
-            ]}
-          >
-          </Result>
-        </div>
-      )
-    } else {
-      return null;
-    }
-  }
-
   renderForm(application) {
     if (this.state.msg !== null) {
-      return this.renderMessage()
+      return Util.renderMessage(this.state.msg)
     }
 
     return (
@@ -250,7 +205,7 @@ class Face extends React.Component {
   render() {
     const application = this.getApplicationObj();
     if (application === null) {
-      return this.renderMessageLarge();
+      return Util.renderMessageLarge(this.state.msg);
     }
 
     return (

web/src/auth/Util.js

@@ -12,7 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {message} from "antd";
+import React from "react";
+import {Alert, Button, message, Result} from "antd";
 
 export function goToLink(link) {
   window.location.href = link;
@@ -26,6 +27,51 @@ export function showMessage(type, text) {
   }
 }
 
+export function renderMessage(msg) {
+  if (msg !== null) {
+    return (
+      <div style={{display: "inline"}}>
+        <Alert
+          message="Login Error"
+          showIcon
+          description={msg}
+          type="error"
+          action={
+            <Button size="small" danger>
+              Detail
+            </Button>
+          }
+        />
+      </div>
+    )
+  } else {
+    return null;
+  }
+}
+
+export function renderMessageLarge(msg) {
+  if (msg !== null) {
+    return (
+      <div style={{display: "inline"}}>
+        <Result
+          status="error"
+          title="Login Error"
+          subTitle={msg}
+          extra={[
+            <Button type="primary" key="details">
+              Details
+            </Button>,
+            <Button key="help">Help</Button>,
+          ]}
+        >
+        </Result>
+      </div>
+    )
+  } else {
+    return null;
+  }
+}
+
 export function trim(str, ch) {
   if (str === undefined) {
     return undefined;