Add face.

web/src/ApplicationEditPage.js

@@ -4,6 +4,7 @@ import {LinkOutlined} from "@ant-design/icons";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as Setting from "./Setting";
 import * as ProviderBackend from "./backend/ProviderBackend";
+import Face from "./Face";
 
 const { Option } = Select;
 
@@ -129,6 +130,16 @@ class ApplicationEditPage extends React.Component {
             </Select>
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Face Preview:
+          </Col>
+          <Col span={22} >
+            <div style={{width: "500px", height: "600px", border: "1px solid rgb(217,217,217)"}}>
+              <Face application={this.state.application} />
+            </div>
+          </Col>
+        </Row>
       </Card>
     )
   }

web/src/Face.js

@@ -0,0 +1,82 @@
+import React from "react";
+import {Button, Checkbox, Col, Form, Input, Row} from "antd";
+import {LockOutlined, UserOutlined} from "@ant-design/icons";
+
+class Face extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  renderForm() {
+    return (
+      <Form
+        name="normal_login"
+        initialValues={{ remember: true }}
+        // onFinish={this.onFinish.bind(this)}
+        style={{width: "250px"}}
+        size="large"
+      >
+        <Form.Item
+          name="username"
+          rules={[{ required: true, message: 'Please input your Username!' }]}
+        >
+          <Input
+            prefix={<UserOutlined className="site-form-item-icon" />}
+            placeholder="username"
+          />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          rules={[{ required: true, message: 'Please input your Password!' }]}
+        >
+          <Input
+            prefix={<LockOutlined className="site-form-item-icon" />}
+            type="password"
+            placeholder="password"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Form.Item name="remember" valuePropName="checked" noStyle>
+            <Checkbox style={{float: "left"}}>Auto login</Checkbox>
+          </Form.Item>
+          <a style={{float: "right"}} href="">
+            Forgot password?
+          </a>
+        </Form.Item>
+
+        <Form.Item>
+          <Button
+            type="primary"
+            htmlType="submit"
+            style={{width: "100%"}}
+          >
+            Login
+          </Button>
+          <div style={{float: "right"}}>
+            No account yet, <a href="/register">sign up now</a>
+          </div>
+        </Form.Item>
+      </Form>
+    );
+  }
+
+  render() {
+    return (
+      <Row>
+        <Col span={24} style={{display: "flex", justifyContent:  "center"}} >
+          <div style={{marginTop: "80px", textAlign: "center"}}>
+            <img src={this.props.application.logo} alt={this.props.application.displayName} style={{marginBottom: '50px'}}/>
+            {
+              this.renderForm(this.props.application)
+            }
+          </div>
+        </Col>
+      </Row>
+    )
+  }
+}
+
+export default Face;