Add RegisterPage and ResultPage.

web/src/App.js

@@ -33,6 +33,8 @@ import HomePage from "./basic/HomePage";
 import CustomGithubCorner from "./CustomGithubCorner";
 
 import * as Auth from "./auth/Auth";
+import RegisterPage from "./auth/RegisterPage";
+import ResultPage from "./auth/ResultPage";
 import LoginPage from "./auth/LoginPage";
 import SelfLoginPage from "./auth/SelfLoginPage";
 import * as AuthBackend from "./auth/AuthBackend";
@@ -49,6 +51,7 @@ class App extends Component {
       classes: props,
       selectedMenuKey: 0,
       account: undefined,
+      uri: null,
     };
 
     Setting.initServerUrl();
@@ -65,9 +68,20 @@ class App extends Component {
     this.getAccount();
   }
 
+  componentDidUpdate() {
+    // eslint-disable-next-line no-restricted-globals
+    const uri = location.pathname;
+    if (this.state.uri !== uri) {
+      this.updateMenuKey();
+    }
+  }
+
   updateMenuKey() {
     // eslint-disable-next-line no-restricted-globals
     const uri = location.pathname;
+    this.setState({
+      uri: uri,
+    });
     if (uri === '/') {
       this.setState({ selectedMenuKey: 0 });
     } else if (uri.includes('organizations')) {
@@ -80,6 +94,12 @@ class App extends Component {
       this.setState({ selectedMenuKey: 4 });
     } else if (uri.includes('tokens')) {
       this.setState({ selectedMenuKey: 5 });
+    } else if (uri.includes('register')) {
+      this.setState({ selectedMenuKey: 100 });
+    } else if (uri.includes('login')) {
+      this.setState({ selectedMenuKey: 101 });
+    } else if (uri.includes('result')) {
+      this.setState({ selectedMenuKey: 100 });
     } else {
       this.setState({ selectedMenuKey: -1 });
     }
@@ -116,7 +136,7 @@ class App extends Component {
 
           Setting.goToLink("/");
         } else {
-          Setting.showMessage("error", `Logout failed: ${res.msg}`);
+          Setting.showMessage("error", `Failed to log out: ${res.msg}`);
         }
       });
   }
@@ -277,7 +297,7 @@ class App extends Component {
           <Menu
             // theme="dark"
             mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
-            defaultSelectedKeys={[`${this.state.selectedMenuKey}`]}
+            selectedKeys={[`${this.state.selectedMenuKey}`]}
             style={{ lineHeight: '64px' }}
           >
             {
@@ -289,6 +309,8 @@ class App extends Component {
           </Menu>
         </Header>
         <Switch>
+          <Route exact path="/register" render={(props) => this.renderHomeIfLoggedIn(<RegisterPage onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>
+          <Route exact path="/result" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
           <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>
           <Route exact path="/callback" component={AuthCallback}/>
           <Route exact path="/" render={(props) => this.renderLoginIfNotLoggedIn(<HomePage account={this.state.account} onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>

web/src/auth/LoginPage.js

@@ -88,7 +88,7 @@ class LoginPage extends React.Component {
         if (res.status === 'ok') {
           const responseType = this.state.type;
           if (responseType === "login") {
-            this.props.onLoggedIn();
+            // this.props.onLoggedIn();
             Util.showMessage("success", `Logged in successfully`);
             Util.goToLink("/");
           } else if (responseType === "code") {
@@ -97,7 +97,7 @@ class LoginPage extends React.Component {
             // Util.showMessage("success", `Authorization code: ${res.data}`);
           }
         } else {
-          Util.showMessage("error", `Log in failed：${res.msg}`);
+          Util.showMessage("error", `Failed to log in: ${res.msg}`);
         }
       });
   };

web/src/auth/RegisterPage.js

@@ -0,0 +1,249 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import {Form, Input, Select, Checkbox, Button, Row, Col} from 'antd';
+import * as Setting from "../Setting";
+import * as AuthBackend from "./AuthBackend";
+import i18next from "i18next";
+import {Link} from "react-router-dom";
+
+const { Option } = Select;
+
+const formItemLayout = {
+  labelCol: {
+    xs: {
+      span: 24,
+    },
+    sm: {
+      span: 8,
+    },
+  },
+  wrapperCol: {
+    xs: {
+      span: 24,
+    },
+    sm: {
+      span: 16,
+    },
+  },
+};
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 8,
+    },
+  },
+};
+
+class RegisterPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+
+    this.form = React.createRef();
+  }
+
+  onFinish(values) {
+    AuthBackend.register(values)
+      .then((res) => {
+        if (res.status === 'ok') {
+          this.props.history.push('/result');
+        } else {
+          Setting.showMessage("error", `Failed to register: ${res.msg}`);
+        }
+      });
+  }
+
+  onFinishFailed(values, errorFields, outOfDate) {
+    this.form.current.scrollToField(errorFields[0].name);
+  }
+
+  renderForm() {
+    const prefixSelector = (
+      <Form.Item name="prefix" noStyle>
+        <Select
+          style={{
+            width: 80,
+          }}
+        >
+          <Option value="001">+001</Option>
+        </Select>
+      </Form.Item>
+    );
+
+    return (
+      <Form
+        {...formItemLayout}
+        ref={this.form}
+        name="register"
+        onFinish={(values) => this.onFinish(values)}
+        onFinishFailed={(errorInfo) => this.onFinishFailed(errorInfo.values, errorInfo.errorFields, errorInfo.outOfDate)}
+        initialValues={{
+          prefix: '001',
+        }}
+        style={{width: !Setting.isMobile() ? "400px" : "250px"}}
+        size="large"
+      >
+        <Form.Item
+          name="username"
+          label="Username"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your username',
+              whitespace: true,
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="name"
+          label="Real Name"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your real name',
+              whitespace: true,
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="Affiliation"
+          label="affiliation"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your affiliation',
+              whitespace: true,
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="email"
+          label="Email"
+          rules={[
+            {
+              type: 'email',
+              message: 'The input is not valid Email!',
+            },
+            {
+              required: true,
+              message: 'Please input your Email',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="Password"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your password',
+            },
+          ]}
+          hasFeedback
+        >
+          <Input.Password />
+        </Form.Item>
+        <Form.Item
+          name="confirm"
+          label="Confirm"
+          dependencies={['password']}
+          hasFeedback
+          rules={[
+            {
+              required: true,
+              message: 'Please confirm your password',
+            },
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (!value || getFieldValue('password') === value) {
+                  return Promise.resolve();
+                }
+
+                return Promise.reject('Your confirmed password is inconsistent with the password');
+              },
+            }),
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
+        <Form.Item
+          name="cellphone"
+          label="Cellphone"
+          rules={[
+            {
+              required: true,
+              message: 'Please confirm your cellphone',
+            },
+          ]}
+        >
+          <Input
+            addonBefore={prefixSelector}
+            style={{
+              width: '100%',
+            }}
+          />
+        </Form.Item>
+        <Form.Item name="agreement" valuePropName="checked" {...tailFormItemLayout}>
+          <Checkbox>
+            Accept <a href="/agreement">Terms of Use</a>
+          </Checkbox>
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout}>
+          <Button type="primary" htmlType="submit">
+            Register
+          </Button>
+          &nbsp;&nbsp;&nbsp;Have account?
+          <Link to="/login">
+            <a href="/login">sign in now</a>
+          </Link>
+        </Form.Item>
+      </Form>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        &nbsp;
+        <Row>
+          <Col span={24} style={{display: "flex", justifyContent:  "center"}} >
+            {
+              this.renderForm()
+            }
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default RegisterPage;

web/src/auth/ResultPage.js

@@ -0,0 +1,46 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import { Result, Button } from 'antd';
+
+class ResultPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <Result
+          status="success"
+          title="Your account is registered"
+          subTitle="Please click the below button to login"
+          extra={[
+            <a href="/login">
+              <Button type="primary" key="console">
+                Login
+              </Button>
+            </a>
+          ]}
+        />
+      </div>
+    );
+  }
+}
+
+export default ResultPage;