Added Basics page

js/src/admin/components/AdminNav.tsx

@@ -30,12 +30,15 @@ export default class AdminNav<T> extends Component<T> {
             })
         );
 
-        // items.add('basics', AdminLinkButton.component({
-        //   href: app.route('basics'),
-        //   icon: 'fas fa-pencil-alt',
-        //   children: app.translator.trans('core.admin.nav.basics_button'),
-        //   description: app.translator.trans('core.admin.nav.basics_text')
-        // }));
+        items.add(
+            'basics',
+            AdminLinkButton.component({
+                href: app.route('basics'),
+                icon: 'fas fa-pencil-alt',
+                children: app.translator.trans('core.admin.nav.basics_button'),
+                description: app.translator.trans('core.admin.nav.basics_text'),
+            })
+        );
 
         // items.add('mail', AdminLinkButton.component({
         //   href: app.route('mail'),

js/src/admin/components/BasicsPage.tsx

@@ -0,0 +1,193 @@
+import app from '../app';
+
+import Page from './Page';
+import FieldSet from '../../common/components/FieldSet';
+import Select from '../../common/components/Select';
+import Button from '../../common/components/Button';
+import Alert from '../../common/components/Alert';
+import saveSettings from '../utils/saveSettings';
+import ItemList from '../../common/utils/ItemList';
+import Switch from '../../common/components/Switch';
+
+import Stream from 'mithril/stream';
+
+export default class BasicsPage extends Page {
+    loading: boolean = false;
+    fields: string[] = [
+        'forum_title',
+        'forum_description',
+        'default_locale',
+        'show_language_selector',
+        'default_route',
+        'welcome_title',
+        'welcome_message',
+    ];
+
+    values: { [key: string]: Stream<any> } = {};
+
+    localeOptions: object = {};
+
+    successAlert: Alert;
+
+    oninit(vnode) {
+        super.oninit(vnode);
+
+        const settings = app.data.settings;
+        this.fields.forEach((key) => (this.values[key] = m.prop(settings[key])));
+
+        const locales = app.data.locales;
+        for (const i in locales) {
+            this.localeOptions[i] = `${locales[i]} (${i})`;
+        }
+
+        if (typeof this.values.show_language_selector() !== 'number') this.values.show_language_selector(1);
+    }
+
+    view() {
+        return (
+            <div className="BasicsPage">
+                <div className="container">
+                    <form onsubmit={this.onsubmit.bind(this)}>
+                        {FieldSet.component({
+                            label: app.translator.trans('core.admin.basics.forum_title_heading'),
+                            children: [
+                                <input
+                                    className="FormControl"
+                                    value={this.values.forum_title()}
+                                    oninput={m.withAttr('value', this.values.forum_title)}
+                                />,
+                            ],
+                        })}
+
+                        {FieldSet.component({
+                            label: app.translator.trans('core.admin.basics.forum_description_heading'),
+                            children: [
+                                <div className="helpText">{app.translator.trans('core.admin.basics.forum_description_text')}</div>,
+                                <textarea
+                                    className="FormControl"
+                                    value={this.values.forum_description()}
+                                    oninput={m.withAttr('value', this.values.forum_description)}
+                                />,
+                            ],
+                        })}
+
+                        {Object.keys(this.localeOptions).length > 1
+                            ? FieldSet.component({
+                                  label: app.translator.trans('core.admin.basics.default_language_heading'),
+                                  children: [
+                                      Select.component({
+                                          options: this.localeOptions,
+                                          value: this.values.default_locale(),
+                                          onchange: this.values.default_locale,
+                                      }),
+                                      Switch.component({
+                                          state: this.values.show_language_selector(),
+                                          onchange: this.values.show_language_selector,
+                                          children: app.translator.trans('core.admin.basics.show_language_selector_label'),
+                                      }),
+                                  ],
+                              })
+                            : ''}
+
+                        {FieldSet.component({
+                            label: app.translator.trans('core.admin.basics.home_page_heading'),
+                            className: 'BasicsPage-homePage',
+                            children: [
+                                <div className="helpText">{app.translator.trans('core.admin.basics.home_page_text')}</div>,
+                                this.homePageItems()
+                                    .toArray()
+                                    .map(({ path, label }) => (
+                                        <label className="checkbox">
+                                            <input
+                                                type="radio"
+                                                name="homePage"
+                                                value={path}
+                                                checked={this.values.default_route() === path}
+                                                onclick={m.withAttr('value', this.values.default_route)}
+                                            />
+                                            {label}
+                                        </label>
+                                    )),
+                            ],
+                        })}
+
+                        {FieldSet.component({
+                            label: app.translator.trans('core.admin.basics.welcome_banner_heading'),
+                            className: 'BasicsPage-welcomeBanner',
+                            children: [
+                                <div className="helpText">{app.translator.trans('core.admin.basics.welcome_banner_text')}</div>,
+                                <div className="BasicsPage-welcomeBanner-input">
+                                    <input
+                                        className="FormControl"
+                                        value={this.values.welcome_title()}
+                                        oninput={m.withAttr('value', this.values.welcome_title)}
+                                    />
+                                    <textarea
+                                        className="FormControl"
+                                        value={this.values.welcome_message()}
+                                        oninput={m.withAttr('value', this.values.welcome_message)}
+                                    />
+                                </div>,
+                            ],
+                        })}
+
+                        {Button.component({
+                            type: 'submit',
+                            className: 'Button Button--primary',
+                            children: app.translator.trans('core.admin.basics.submit_button'),
+                            loading: this.loading,
+                            disabled: !this.changed(),
+                        })}
+                    </form>
+                </div>
+            </div>
+        );
+    }
+
+    changed() {
+        return this.fields.some((key) => this.values[key]() !== app.data.settings[key]);
+    }
+
+    /**
+     * Build a list of options for the default homepage. Each option must be an
+     * object with `path` and `label` properties.
+     *
+     * @return {ItemList}
+     * @public
+     */
+    homePageItems() {
+        const items = new ItemList();
+
+        items.add('allDiscussions', {
+            path: '/all',
+            label: app.translator.trans('core.admin.basics.all_discussions_label'),
+        });
+
+        return items;
+    }
+
+    onsubmit(e) {
+        e.preventDefault();
+
+        if (this.loading) return;
+
+        this.loading = true;
+        app.alerts.dismiss(this.successAlert);
+
+        const settings = {};
+
+        this.fields.forEach((key) => (settings[key] = this.values[key]()));
+
+        saveSettings(settings)
+            .then(() => {
+                app.alerts.show(
+                    (this.successAlert = Alert.component({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') }))
+                );
+            })
+            .catch(() => {})
+            .then(() => {
+                this.loading = false;
+                m.redraw();
+            });
+    }
+}

js/src/admin/routes.ts

@@ -1,7 +1,9 @@
+import BasicsPage from './components/BasicsPage';
 import DashboardPage from './components/DashboardPage';
 
 export default (app) => {
     app.routes = {
         dashboard: { path: '/', component: DashboardPage },
+        basics: { path: '/basics', component: BasicsPage },
     };
 };