Reorganize things, add sidebar and topbar

maubot/management/frontend/src/Login.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React, { Component } from "react"
-import Spinner from "./Spinner"
+import Spinner from "./components/Spinner"
 import api from "./api"
 
 class Login extends Component {

maubot/management/frontend/src/MaubotRouter.js

@@ -14,11 +14,11 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React, { Component } from "react"
-import { BrowserRouter as Router, Route, Redirect } from "react-router-dom"
-import PrivateRoute from "./PrivateRoute"
-import Home from "./Home"
+import { BrowserRouter as Router, Switch } from "react-router-dom"
+import PrivateRoute from "./components/PrivateRoute"
+import Dashboard from "./dashboard"
 import Login from "./Login"
-import Spinner from "./Spinner"
+import Spinner from "./components/Spinner"
 import api from "./api"
 
 class MaubotRouter extends Component {
@@ -43,6 +43,8 @@ class MaubotRouter extends Component {
             if (username) {
                 localStorage.username = username
                 this.setState({ authed: true })
+            } else {
+                localStorage.accessToken = undefined
             }
         } catch (err) {
             console.error(err)
@@ -60,10 +62,11 @@ class MaubotRouter extends Component {
         }
         return <Router>
             <div className={`maubot-wrapper ${this.state.authed ? "authenticated" : ""}`}>
-                <Route path="/" exact render={() => <Redirect to={{ pathname: "/dashboard" }}/>}/>
-                <PrivateRoute path="/dashboard" component={Home} authed={this.state.authed}/>
+                <Switch>
                     <PrivateRoute path="/login" render={() => <Login onLogin={this.login}/>}
-                              authed={!this.state.authed} to="/dashboard"/>
+                                  authed={!this.state.authed} to="/"/>
+                    <PrivateRoute path="/" component={Dashboard} authed={this.state.authed}/>
+                </Switch>
             </div>
         </Router>
     }

maubot/management/frontend/src/dashboard/client/ListEntry.js

@@ -0,0 +1,30 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import React from "react"
+import { Link } from "react-router-dom"
+import { ReactComponent as ChevronRight } from "../../res/chevron-right.svg"
+
+const ClientListEntry = ({ client }) => (
+    <Link className="client entry" to={`/client/${client.id}`}>
+        <img className="avatar"
+             src={`${client.homeserver}/_matrix/media/r0/download/${client.avatar_url.substr("mxc://".length)}`}
+             alt={client.id.substr(1, 1)}/>
+        <span className="displayname">{client.displayname || client.id}</span>
+        <ChevronRight/>
+    </Link>
+)
+
+export default ClientListEntry

maubot/management/frontend/src/dashboard/client/View.js

@@ -15,12 +15,10 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React, { Component } from "react"
 
-class Home extends Component {
+class ClientView extends Component {
     render() {
-        return <main>
-            Hello, {localStorage.username}
-        </main>
+        return <div>{this.props.client.displayname}</div>
     }
 }
 
-export default Home
+export default ClientView

maubot/management/frontend/src/dashboard/index.js

@@ -0,0 +1,105 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import React, { Component } from "react"
+import { Route, Redirect } from "react-router-dom"
+import api from "../api"
+import InstanceListEntry from "./instance/ListEntry"
+import InstanceView from "./instance/View"
+import ClientListEntry from "./client/ListEntry"
+import ClientView from "./client/View"
+import PluginListEntry from "./plugin/ListEntry"
+import PluginView from "./plugin/View"
+
+class Dashboard extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            instances: {},
+            clients: {},
+            plugins: {},
+        }
+        global.maubot = this
+    }
+
+    async componentWillMount() {
+        const [instanceList, clientList, pluginList] = await Promise.all([
+            api.getInstances(), api.getClients(), api.getPlugins()])
+        const instances = {}
+        for (const instance of instanceList) {
+            instances[instance.id] = instance
+        }
+        const clients = {}
+        for (const client of clientList) {
+            clients[client.id] = client
+        }
+        const plugins = {}
+        for (const plugin of pluginList) {
+            plugins[plugin.id] = plugin
+        }
+        this.setState({ instances, clients, plugins })
+    }
+
+    renderList(field, type) {
+        return Object.values(this.state[field + "s"]).map(entry =>
+            React.createElement(type, { key: entry.id, [field]: entry }))
+    }
+
+    renderView(field, type, id) {
+        const entry = this.state[field + "s"][id]
+        if (!entry) {
+            return "Not found :("
+        }
+        return React.createElement(type, { [field]: entry })
+    }
+
+    render() {
+        return <div className="dashboard">
+            <div className="title">
+                <img src="/favicon.png" alt=""/>
+                Maubot Manager
+            </div>
+            <div className="topbar">
+                {localStorage.username}
+            </div>
+            <nav className="sidebar">
+                <div className="instances list">
+                    <h3 className="title">Instances</h3>
+                    {this.renderList("instance", InstanceListEntry)}
+                </div>
+                <div className="clients list">
+                    <h3 className="title">Clients</h3>
+                    {this.renderList("client", ClientListEntry)}
+                </div>
+                <div className="plugins list">
+                    <h3 className="title">Plugins</h3>
+                    {this.renderList("plugin", PluginListEntry)}
+                </div>
+            </nav>
+            <main>
+                <Route path="/" exact render={() => "Hello, World!"}/>
+                <Route path="/instance/:id" render={({ match }) =>
+                    this.renderView("instance", InstanceView, match.params.id)}/>
+                <Route path="/client/:id" render={({ match }) =>
+                    this.renderView("client", ClientView, match.params.id)}/>
+                <Route path="/plugin/:id" render={({ match }) =>
+                    this.renderView("plugin", PluginView, match.params.id)}/>
+                <Route render={() => <Redirect to={{ pathname: "/" }}/>}/>
+            </main>
+        </div>
+    }
+}
+
+export default Dashboard

maubot/management/frontend/src/dashboard/instance/ListEntry.js

@@ -0,0 +1,27 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import React from "react"
+import { Link } from "react-router-dom"
+import { ReactComponent as ChevronRight } from "../../res/chevron-right.svg"
+
+const InstanceListEntry = ({ instance }) => (
+    <Link className="instance entry" to={`/instance/${instance.id}`}>
+        <span className="id">{instance.id}</span>
+        <ChevronRight/>
+    </Link>
+)
+
+export default InstanceListEntry

maubot/management/frontend/src/dashboard/instance/View.js

@@ -0,0 +1,24 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import React, { Component } from "react"
+
+class InstanceView extends Component {
+    render() {
+        return <div>{this.props.instance.id}</div>
+    }
+}
+
+export default InstanceView

maubot/management/frontend/src/dashboard/plugin/ListEntry.js

@@ -0,0 +1,27 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import React from "react"
+import { Link } from "react-router-dom"
+import { ReactComponent as ChevronRight } from "../../res/chevron-right.svg"
+
+const PluginListEntry = ({ plugin }) => (
+    <Link className="plugin entry" to={`/plugin/${plugin.id}`}>
+        <span className="id">{plugin.id}</span>
+        <ChevronRight/>
+    </Link>
+)
+
+export default PluginListEntry

maubot/management/frontend/src/dashboard/plugin/View.js

@@ -0,0 +1,24 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import React, { Component } from "react"
+
+class PluginView extends Component {
+    render() {
+        return <div>{this.props.plugin.id}</div>
+    }
+}
+
+export default PluginView

maubot/management/frontend/src/res/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

maubot/management/frontend/src/style/base/elements.sass

@@ -36,9 +36,9 @@
     text-decoration: none
 
 =main-color-button()
-    background-color: $main-color
+    background-color: $primary
     &:hover
-        background-color: $dark-color
+        background-color: $primary-dark
 
 .button
     +button
@@ -92,7 +92,7 @@
     resize: vertical
 
     &:hover, &:focus
-        border-color: $main-color
+        border-color: $primary
 
     &:focus
         border-width: 2px
@@ -101,8 +101,8 @@
 .input, .textarea
     +input
 
-=notification($color: $error-color)
+=notification($border: $error-dark, $background: transparentize($error-light, 0.5))
     padding: 1rem
     border-radius: .25rem
-    border: 2px solid $color
-    background-color: lighten($color, 25%)
+    border: 2px solid $border
+    background-color: $background

maubot/management/frontend/src/style/base/vars.sass

@@ -13,16 +13,18 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-$main-color: darken(#50D367, 10%)
-$dark-color: darken($main-color, 10%)
-$light-color: lighten($main-color, 10%)
-$alt-color: darken(#47B9D7, 10%)
-$dark-alt-color: darken($alt-color, 10%)
-$border-color: #CCC
-$error-color: #D35067
+$primary: #00C853
+$primary-dark: #009624
+$primary-light: #5EFC82
+$secondary: #00B8D4
+$secondary-dark: #0088A3
+$secondary-light: #62EBFF
+$error: #B71C1C
+$error-dark: #7F0000
+$error-light: #F05545
+
+$border-color: #DDD
 $text-color: #212121
 $background-color: #FAFAFA
 $inverted-text-color: $background-color
 $font-stack: sans-serif
-$max-width: 42.5rem
-$header-height: 3.5rem

maubot/management/frontend/src/style/index.sass

@@ -20,3 +20,4 @@
 @import base/elements
 
 @import pages/login
+@import pages/dashboard

maubot/management/frontend/src/style/pages/dashboard-grid.css

@@ -0,0 +1,6 @@
+.dashboard {
+    grid-template:
+        [row1-start] "title topbar" 3.5rem [row1-end]
+        [row2-start] "sidebar main" auto [row2-end]
+        / 15rem auto;
+}

maubot/management/frontend/src/style/pages/dashboard.sass

@@ -0,0 +1,57 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+@import "dashboard-grid"
+
+.dashboard
+    display: grid
+    height: 100%
+
+    > .title
+        grid-area: title
+        display: flex
+        align-items: center
+        justify-content: center
+
+        font-size: 1.35rem
+        font-weight: bold
+
+        color: $text-color
+
+        z-index: 1
+
+        background-color: $background-color
+        border-right: 1px solid $primary
+        border-bottom: 1px solid $border-color
+
+        > img
+            max-width: 2rem
+            margin-right: .5rem
+
+    > .topbar
+        grid-area: topbar
+        display: flex
+        align-items: center
+        justify-content: center
+        background-color: $primary
+        width: 110%
+        margin: 0 -5%
+        box-shadow: 0 .25rem .25rem rgba(0, 0, 0, .25)
+
+
+    @import "sidebar"
+
+    > .dashboard
+        grid-area: main

maubot/management/frontend/src/style/pages/login.sass

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 .maubot-wrapper:not(.authenticated)
-    background-color: $main-color
+    background-color: $primary
 
     text-align: center
 
@@ -29,7 +29,7 @@
     margin-top: 3rem
 
     h1
-        color: $main-color
+        color: $primary
         margin: 3rem 0
 
     input, button
@@ -53,5 +53,5 @@
         height: 26.5rem
 
         .error
-            +notification($error-color)
+            +notification($error)
             margin: .5rem 2.5rem

maubot/management/frontend/src/style/pages/sidebar.sass

@@ -0,0 +1,53 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+> .sidebar
+    grid-area: sidebar
+    background-color: $background-color
+
+    border-right: 1px solid $border-color
+    padding: .5rem
+
+    div.list
+        margin-bottom: 1.5rem
+
+        h3.title
+            margin: 0
+
+        a.entry
+            display: block
+            color: $text-color
+            text-decoration: none
+
+            &:not(:hover) > svg
+                display: none
+
+            > svg
+                float: right
+
+            padding: .25rem
+
+            &.client
+                padding: .25rem
+
+                img.avatar
+                    max-height: 1.5rem
+                    border-radius: 100%
+                    vertical-align: middle
+
+                span.displayname
+                    margin-left: .25rem
+                    vertical-align: middle