Add error handling to face page.

web/src/auth/Face.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Alert, Button, Checkbox, Col, Form, Input, Row} from "antd";
+import {Alert, Button, Checkbox, Col, Form, Input, Result, Row} from "antd";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as AuthBackend from "./AuthBackend";
 import * as Provider from "./Provider";
@@ -98,12 +98,12 @@ class Face extends React.Component {
       });
   };
 
-  renderForm(application) {
+  renderMessage() {
     if (this.state.msg !== null) {
       return (
         <div style={{display: "inline"}}>
           <Alert
-            message="Error"
+            message="Login Error"
             showIcon
             description={this.state.msg}
             type="error"
@@ -115,6 +115,37 @@ class Face extends React.Component {
           />
         </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 (
@@ -215,7 +246,7 @@ class Face extends React.Component {
   render() {
     const application = this.getApplicationObj();
     if (application === null) {
-      return null;
+      return this.renderMessageLarge();
     }
 
     return (