feat(admin): setting page

js/src/admin/components/SettingsPage.js

@@ -0,0 +1,70 @@
+import app from 'flarum/admin/app';
+import ExtensionPage from 'flarum/admin/components/ExtensionPage';
+import Button from 'flarum/common/components/Button';
+import IndexPage from "../pages/IndexPage";
+import ClientsPage from "../pages/ClientsPage";
+import ScopesPage from "../pages/ScopesPage";
+export default class SettingsPage extends ExtensionPage {
+    content() {
+        const page = m.route.param().page || 'index';
+
+        return (
+            <div className="ExtensionPage-settings OAuthCenter">
+                <div className={"oauth-menu"}>
+                    <div className={"container"}>
+                        {this.menuButtons(page)}
+                    </div>
+                </div>
+
+                <div className="container OAuthCenterPage-container">
+                    {this.pageContent(page)}
+                </div>
+            </div>
+        );
+    }
+
+    // Return button menus
+    menuButtons(page) {
+        return [
+            Button.component({
+                className: `Button ${page === 'index' ? 'item-selected' : ''}`,
+                onclick: () => m.route.set(
+                    app.route('extension', {
+                        id: 'foskym-oauth-center'
+                    })
+                ),
+                icon: 'fas fa-home',
+            }, app.translator.trans('foskym-oauth-center.admin.page.index')),
+            Button.component({
+                className: `Button ${page === 'clients' ? 'item-selected' : ''}`,
+                onclick: () => m.route.set(
+                    app.route('extension', {
+                        id: 'foskym-oauth-center',
+                        page: 'clients'
+                    })
+                ),
+                icon: 'fas fa-network-wired',
+            }, app.translator.trans('foskym-oauth-center.admin.page.clients')),
+            Button.component({
+                className: `Button ${page === 'scopes' ? 'item-selected' : ''}`,
+                onclick: () => m.route.set(
+                    app.route('extension', {
+                        id: 'foskym-oauth-center',
+                        page: 'scopes'
+                    })
+                ),
+                icon: 'fas fa-user-lock',
+            }, app.translator.trans('foskym-oauth-center.admin.page.scopes')),
+        ];
+    }
+
+
+    pageContent(page) {
+        if (page == 'clients') {
+            return <ClientsPage />
+        } else if (page == 'scopes') {
+            return <ScopesPage />
+        }
+        return <IndexPage />
+    }
+}

js/src/admin/index.js

@@ -0,0 +1,7 @@
+import app from 'flarum/admin/app';
+import SettingsPage from './components/SettingsPage';
+app.initializers.add('foskym/flarum-oauth-center', () => {
+  app.extensionData
+    .for('foskym-oauth-center')
+    .registerPage(SettingsPage);
+});

js/src/admin/index.ts

@@ -1,5 +0,0 @@
-import app from 'flarum/admin/app';
-
-app.initializers.add('foskym/flarum-oauth-center', () => {
-  console.log('[foskym/flarum-oauth-center] Hello, admin!');
-});

js/src/admin/pages/ClientsPage.js

@@ -0,0 +1,11 @@
+import Page from 'flarum/common/components/Page';
+
+export default class ClientsPage extends Page {
+    view() {
+        return (
+            <div>
+                <h2>Clients Page</h2>
+            </div>
+        );
+    }
+}

js/src/admin/pages/IndexPage.js

@@ -0,0 +1,11 @@
+import Page from 'flarum/common/components/Page';
+
+export default class IndexPage extends Page {
+    view() {
+        return (
+            <div>
+                <h2>Index Page</h2>
+            </div>
+        );
+    }
+}

js/src/admin/pages/ScopesPage.js

@@ -0,0 +1,11 @@
+import Page from 'flarum/common/components/Page';
+
+export default class ScopesPage extends Page {
+    view() {
+        return (
+            <div>
+                <h2>Scopes Page</h2>
+            </div>
+        );
+    }
+}

less/admin.less

@@ -0,0 +1,35 @@
+.OAuthCenter {
+  padding-top: 0 !important;
+  margin-top: 0 !important;
+
+  .hidden {
+    display: none;
+  }
+
+  .pull-right {
+    float: right;
+  }
+
+  .oauth-menu {
+    background: @control-bg;
+    margin-bottom: 15px;
+
+
+    .Button {
+      padding: 12px 13px;
+      border-radius: 0;
+
+      &.item-selected {
+        background: darken(@control-bg, 10%);
+      }
+    }
+  }
+}
+@media (min-width: 992px) {
+  .OAuthCenter {
+    .OAuthCenterPage-container {
+      max-width: 600px;
+      margin: 0;
+    }
+  }
+}

locale/zh-Hans.yml

@@ -1,5 +1,9 @@
 foskym-oauth-center:
   admin:
+    page:
+      index: 首页
+      clients: 应用管理
+      scopes: 权限管理
 
   forum:
     page: