Add extensions page

js/src/admin/components/AddExtensionModal.tsx

@@ -0,0 +1,24 @@
+import app from '../app';
+import Modal from '../../common/components/Modal';
+
+export default class AddExtensionModal extends Modal {
+  className() {
+    return 'AddExtensionModal Modal--small';
+  }
+
+  title() {
+    return app.translator.trans('core.admin.add_extension.title');
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <p>{app.translator.trans('core.admin.add_extension.temporary_text')}</p>
+        <p>
+          {app.translator.trans('core.admin.add_extension.install_text', { a: <a href="https://discuss.flarum.org/t/extensions" target="_blank" /> })}
+        </p>
+        <p>{app.translator.trans('core.admin.add_extension.developer_text', { a: <a href="http://flarum.org/docs/extend" target="_blank" /> })}</p>
+      </div>
+    );
+  }
+}

js/src/admin/components/AdminNav.tsx

@@ -70,12 +70,15 @@ export default class AdminNav<T> extends Component<T> {
             })
         );
 
-        // items.add('extensions', AdminLinkButton.component({
+        items.add(
-        //   href: app.route('extensions'),
+            'extensions',
-        //   icon: 'fas fa-puzzle-piece',
+            AdminLinkButton.component({
-        //   children: app.translator.trans('core.admin.nav.extensions_button'),
+                href: app.route('extensions'),
-        //   description: app.translator.trans('core.admin.nav.extensions_text')
+                icon: 'fas fa-puzzle-piece',
-        // }));
+                children: app.translator.trans('core.admin.nav.extensions_button'),
+                description: app.translator.trans('core.admin.nav.extensions_text'),
+            })
+        );
 
         return items;
     }

js/src/admin/components/ExtensionsPage.tsx

@@ -0,0 +1,130 @@
+import app from '../app';
+
+import Page from './Page';
+import Button from '../../common/components/Button';
+import Dropdown from '../../common/components/Dropdown';
+import AddExtensionModal from './AddExtensionModal';
+import LoadingModal from './LoadingModal';
+import ItemList from '../../common/utils/ItemList';
+import icon from '../../common/helpers/icon';
+
+export default class ExtensionsPage extends Page {
+    view() {
+        return (
+            <div className="ExtensionsPage">
+                <div className="ExtensionsPage-header">
+                    <div className="container">
+                        {Button.component({
+                            children: app.translator.trans('core.admin.extensions.add_button'),
+                            icon: 'fas fa-plus',
+                            className: 'Button Button--primary',
+                            onclick: () => app.modal.show(AddExtensionModal),
+                        })}
+                    </div>
+                </div>
+
+                <div className="ExtensionsPage-list">
+                    <div className="container">
+                        <ul className="ExtensionList">
+                            {Object.keys(app.data.extensions).map((id) => {
+                                const extension = app.data.extensions[id];
+                                const controls = this.controlItems(extension.id).toArray();
+
+                                return (
+                                    <li className={'ExtensionListItem ' + (!this.isEnabled(extension.id) ? 'disabled' : '')}>
+                                        <div className="ExtensionListItem-content">
+                                            <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
+                                                {extension.icon ? icon(extension.icon.name) : ''}
+                                            </span>
+                                            {controls.length ? (
+                                                <Dropdown
+                                                    className="ExtensionListItem-controls"
+                                                    buttonClassName="Button Button--icon Button--flat"
+                                                    menuClassName="Dropdown-menu--right"
+                                                    icon="fas fa-ellipsis-h"
+                                                >
+                                                    {controls}
+                                                </Dropdown>
+                                            ) : (
+                                                ''
+                                            )}
+                                            <div className="ExtensionListItem-main">
+                                                <label className="ExtensionListItem-title">
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={this.isEnabled(extension.id)}
+                                                        onclick={this.toggle.bind(this, extension.id)}
+                                                    />{' '}
+                                                    {extension.extra['flarum-extension'].title}
+                                                </label>
+                                                <div className="ExtensionListItem-version">{extension.version}</div>
+                                                <div className="ExtensionListItem-description">{extension.description}</div>
+                                            </div>
+                                        </div>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    controlItems(name) {
+        const items = new ItemList();
+        const enabled = this.isEnabled(name);
+
+        if (app.extensionSettings[name]) {
+            items.add(
+                'settings',
+                Button.component({
+                    icon: 'fas fa-cog',
+                    children: app.translator.trans('core.admin.extensions.settings_button'),
+                    onclick: app.extensionSettings[name],
+                })
+            );
+        }
+
+        if (!enabled) {
+            items.add(
+                'uninstall',
+                Button.component({
+                    icon: 'far fa-trash-alt',
+                    children: app.translator.trans('core.admin.extensions.uninstall_button'),
+                    onclick: () => {
+                        app.request({
+                            url: app.forum.attribute('apiUrl') + '/extensions/' + name,
+                            method: 'DELETE',
+                        }).then(() => window.location.reload());
+
+                        app.modal.show(LoadingModal);
+                    },
+                })
+            );
+        }
+
+        return items;
+    }
+
+    isEnabled(name) {
+        const enabled = JSON.parse(app.data.settings.extensions_enabled);
+
+        return enabled.indexOf(name) !== -1;
+    }
+
+    toggle(id) {
+        const enabled = this.isEnabled(id);
+
+        app.request({
+            url: app.forum.attribute('apiUrl') + '/extensions/' + id,
+            method: 'PATCH',
+            body: { enabled: !enabled },
+        }).then(() => {
+            if (!enabled) localStorage.setItem('enabledExtension', id);
+            window.location.reload();
+        });
+
+        app.modal.show(LoadingModal);
+    }
+}

js/src/admin/routes.ts

@@ -3,6 +3,7 @@ import DashboardPage from './components/DashboardPage';
 import MailPage from './components/MailPage';
 import PermissionsPage from './components/PermissionsPage';
 import AppearancePage from './components/AppearancePage';
+import ExtensionsPage from './components/ExtensionsPage';
 
 export default (app) => {
     app.routes = {
@@ -11,5 +12,6 @@ export default (app) => {
         mail: { path: '/mail', component: MailPage },
         permissions: { path: '/permissions', component: PermissionsPage },
         appearance: { path: '/appearance', component: AppearancePage },
+        extensions: { path: '/extensions', component: ExtensionsPage },
     };
 };