Add login and account pages.

object/organization.go

@@ -24,9 +24,8 @@ type Organization struct {
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
 	CreatedTime string `xorm:"varchar(100)" json:"createdTime"`
 
-	DisplayName string   `xorm:"varchar(100)" json:"displayName"`
+	DisplayName string `xorm:"varchar(100)" json:"displayName"`
-	WebsiteUrl  string   `xorm:"varchar(100)" json:"websiteUrl"`
+	WebsiteUrl  string `xorm:"varchar(100)" json:"websiteUrl"`
-	Members     []string `xorm:"varchar(100)" json:"members"`
 }
 
 func GetOrganizations(owner string) []*Organization {

web/src/App.js

@@ -28,6 +28,9 @@ import ProviderEditPage from "./ProviderEditPage";
 import ApplicationListPage from "./ApplicationListPage";
 import ApplicationEditPage from "./ApplicationEditPage";
 import Face from "./Face";
+import AccountPage from "./account/AccountPage";
+import LoginPage from "./account/LoginPage";
+import HomePage from "./HomePage";
 
 const { Header, Footer } = Layout;
 
@@ -175,9 +178,9 @@ class App extends Component {
   renderMenu() {
     let res = [];
 
-    // if (this.state.account === null || this.state.account === undefined) {
+    if (this.state.account === null || this.state.account === undefined) {
-    //   return [];
+      return [];
-    // }
+    }
 
     res.push(
       <Menu.Item key="0">
@@ -218,7 +221,7 @@ class App extends Component {
     return res;
   }
 
-  renderHomeIfLogined(component) {
+  renderHomeIfLoggedIn(component) {
     if (this.state.account !== null && this.state.account !== undefined) {
       return <Redirect to='/' />
     } else {
@@ -265,6 +268,9 @@ class App extends Component {
           </Menu>
         </Header>
         <Switch>
+          <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<LoginPage onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>
+          <Route exact path="/" render={(props) => this.renderLoginIfNotLoggedIn(<HomePage onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>
+          <Route exact path="/account" render={(props) => this.renderLoginIfNotLoggedIn(<AccountPage account={this.state.account} {...props} />)}/>
           <Route exact path="/organizations" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationListPage account={this.state.account} {...props} />)}/>
           <Route exact path="/organizations/:organizationName" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationEditPage account={this.state.account} {...props} />)}/>
           <Route exact path="/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)}/>
@@ -303,7 +309,7 @@ class App extends Component {
     if (this.isDoorPages()) {
       return (
         <Switch>
-          <Route exact path="/doors/:applicationName" component={Face}/>
+          <Route exact path="/doors/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<Face account={this.state.account} onLoggedIn={this.onLoggedIn.bind(this)} {...props} />)}/>
         </Switch>
       )
     }

web/src/ApplicationListPage.js

@@ -73,7 +73,7 @@ class ApplicationListPage extends React.Component {
         title: 'Name',
         dataIndex: 'name',
         key: 'name',
-        width: '120px',
+        width: '150px',
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
@@ -104,7 +104,7 @@ class ApplicationListPage extends React.Component {
         title: 'Logo',
         dataIndex: 'logo',
         key: 'logo',
-        width: '100px',
+        width: '250px',
         render: (text, record, index) => {
           return (
             <a target="_blank" href={text}>

web/src/Face.js

@@ -10,7 +10,7 @@ class Face extends React.Component {
     super(props);
     this.state = {
       classes: props,
-      applicationName: props.match === undefined ? null : props.match.params.applicationName,
+      applicationName: props.applicationName !== undefined ? props.applicationName : (props.match === undefined ? null : props.match.params.applicationName),
       application: null,
     };
   }

web/src/HomePage.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+class HomePage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  render() {
+    return (
+      "home"
+    )
+  }
+}
+
+export default HomePage;

web/src/account/AccountPage.js

@@ -0,0 +1,77 @@
+import React from "react";
+import {Col, Descriptions, Row} from 'antd';
+import * as AccountBackend from "../backend/AccountBackend";
+import * as Setting from "../Setting";
+
+class AccountPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      username: props.match.params.username,
+      user: null,
+    };
+  }
+
+  componentWillMount() {
+    this.getUser();
+  }
+
+  getUser() {
+    if (this.state.username !== undefined) {
+      AccountBackend.getUser(this.state.username)
+        .then((user) => {
+          this.setState({
+            user: user,
+          });
+        });
+    }
+  }
+
+  renderValue(key) {
+    if (this.props.account === null || this.props.account === undefined) {
+      return <a href={"/login"}>Please sign in first</a>
+    } else if (this.state.user !== null) {
+      return this.state.user[key];
+    } else {
+      return this.props.account[key];
+    }
+  }
+
+  renderContent() {
+    return (
+      <div>
+        &nbsp;
+        <Descriptions title="My Account" bordered>
+          <Descriptions.Item label="Username">{this.renderValue("name")}</Descriptions.Item>
+          <Descriptions.Item label="Organization">{this.renderValue("owner")}</Descriptions.Item>
+          <Descriptions.Item label="Created At">{Setting.getFormattedDate(this.renderValue("createdTime"))}</Descriptions.Item>
+          <Descriptions.Item label="Password Type">{this.renderValue("passwordType")}</Descriptions.Item>
+          <Descriptions.Item label="Display Name">{this.renderValue("displayName")}</Descriptions.Item>
+          <Descriptions.Item label="E-mail">{this.renderValue("email")}</Descriptions.Item>
+          <Descriptions.Item label="Phone">{this.renderValue("phone")}</Descriptions.Item>
+        </Descriptions>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Row style={{width: "100%"}}>
+          <Col span={1}>
+          </Col>
+          <Col span={22}>
+            {
+              this.renderContent()
+            }
+          </Col>
+          <Col span={1}>
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default AccountPage;

web/src/account/LoginPage.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Face from "../Face";
+
+class LoginPage extends React.Component {
+  render() {
+    return (
+      <Face applicationName={"app-built-in"} account={this.props.account} onLoggedIn={this.props.onLoggedIn.bind(this)} {...this.props} />
+    )
+  }
+}
+
+export default LoginPage;