Add HomePage.

web/src/App.js

@@ -30,7 +30,7 @@ import ApplicationEditPage from "./ApplicationEditPage";
 import Face from "./Face";
 import AccountPage from "./account/AccountPage";
 import LoginPage from "./account/LoginPage";
-import HomePage from "./HomePage";
+import HomePage from "./basic/HomePage";
 import CustomGithubCorner from "./CustomGithubCorner";
 
 const { Header, Footer } = Layout;
@@ -270,7 +270,7 @@ class App extends Component {
         </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="/" render={(props) => this.renderLoginIfNotLoggedIn(<HomePage account={this.state.account} 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} />)}/>

web/src/HomePage.js

@@ -1,32 +0,0 @@
-// 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";
-
-class HomePage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      classes: props,
-    };
-  }
-
-  render() {
-    return (
-      "home"
-    )
-  }
-}
-
-export default HomePage;

web/src/Setting.js

@@ -58,6 +58,10 @@ export function showMessage(type, text) {
   }
 }
 
+export function isAdminUser(account) {
+  return account.owner === "built-in";
+}
+
 export function deepCopy(obj) {
   return Object.assign({}, obj);
 }

web/src/basic/HomePage.js

@@ -0,0 +1,103 @@
+// 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 {Card, Col, Row} from "antd";
+import * as Setting from "../Setting";
+import SingleCard from "./SingleCard";
+
+class HomePage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  getItems() {
+    let items = [];
+    if (Setting.isAdminUser(this.props.account)) {
+      items = [
+        {link: "/organizations", name: "Organizations", organizer: "User containers"},
+        {link: "/users", name: "Users", organizer: "Users under all organizations"},
+        {link: "/providers", name: "Providers", organizer: "OAuth providers"},
+        {link: "/applications", name: "Applications", organizer: "Applications that requires authentication"},
+      ];
+    }
+
+    for (let i = 0; i < items.length; i ++) {
+      items[i].logo = `https://cdn.casbin.com/static/img${items[i].link}.png`;
+      items[i].createdTime = "";
+    }
+
+    return items
+  }
+
+  renderCards() {
+    const items = this.getItems();
+
+    if (Setting.isMobile()) {
+      return (
+        <Card bodyStyle={{padding: 0}}>
+          {
+            items.map(item => {
+              return (
+                <SingleCard logo={item.logo} link={item.link} title={item.name} desc={item.organizer} isSingle={items.length === 1} />
+              )
+            })
+          }
+        </Card>
+      )
+    } else {
+      return (
+        <div>
+          <Row>
+            <Col span={1}>
+            </Col>
+            <Col span={22}>
+              <Row style={{marginLeft: "-20px", marginRight: "-20px", marginTop: "20px"}} gutter={24}>
+                {
+                  items.map(item => {
+                    return (
+                      <SingleCard logo={item.logo} link={item.link} title={item.name} desc={item.organizer} time={item.createdTime} isSingle={items.length === 1} />
+                    )
+                  })
+                }
+              </Row>
+            </Col>
+            <Col span={1}>
+            </Col>
+          </Row>
+        </div>
+      )
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        &nbsp;
+        <Row style={{width: "100%"}}>
+          <Col span={24} style={{display: "flex", justifyContent:  "center"}} >
+            {
+              this.renderCards()
+            }
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default HomePage;

web/src/basic/SingleCard.js

@@ -0,0 +1,76 @@
+// 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 {Card, Col, Row} from "antd";
+import * as Setting from "../Setting";
+
+const { Meta } = Card;
+
+class SingleCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  renderCardMobile(logo, link, title, desc, time, isSingle) {
+    const gridStyle = {
+      width: '100vw',
+      textAlign: 'center',
+      cursor: 'pointer',
+    };
+
+    return (
+      <Card.Grid style={gridStyle} onClick={() => Setting.goToLink(link)}>
+        <img src={logo} alt="logo" height={60} style={{marginBottom: '20px'}}/>
+        <Meta
+          title={title}
+          description={desc}
+        />
+      </Card.Grid>
+    )
+  }
+
+  renderCard(logo, link, title, desc, time, isSingle) {
+    return (
+      <Col style={{paddingLeft: "20px", paddingRight: "20px", paddingBottom: "20px", marginBottom: "20px"}} span={6}>
+        <Card
+          hoverable
+          cover={
+            <img alt="logo" src={logo} width={"100%"} height={"100%"} />
+          }
+          onClick={() => Setting.goToLink(link)}
+          style={isSingle ? {width: "320px"} : null}
+        >
+          <Meta title={title} description={desc} />
+          <br/>
+          <br/>
+          <Meta title={""} description={Setting.getFormattedDateShort(time)} />
+        </Card>
+      </Col>
+    )
+  }
+
+  render() {
+    if (Setting.isMobile()) {
+      return this.renderCardMobile(this.props.logo, this.props.link, this.props.title, this.props.desc, this.props.time, this.props.isSingle);
+    } else {
+      return this.renderCard(this.props.logo, this.props.link, this.props.title, this.props.desc, this.props.time, this.props.isSingle);
+    }
+  }
+}
+
+export default SingleCard;