Initial working extension

extensions/nicknames/js/admin.js

@@ -0,0 +1 @@
+export * from './src/admin';

extensions/nicknames/js/forum.js

@@ -0,0 +1 @@
+export * from './src/forum';

extensions/nicknames/js/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@flarum/nicknames",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "flarum-webpack-config": "^0.1.0-beta.10",
+    "webpack": "^4.26.0",
+    "webpack-cli": "^3.0.7"
+  },
+  "scripts": {
+    "dev": "webpack --mode development --watch",
+    "build": "webpack --mode production"
+  }
+}

extensions/nicknames/js/src/admin/index.js

@@ -0,0 +1,3 @@
+app.initializers.add('flarum/nickname', () => {
+  console.log('[flarum/nickname] Hello, admin!');
+});

extensions/nicknames/js/src/forum/components/NicknameModal.js

@@ -0,0 +1,63 @@
+import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
+import Stream from 'flarum/utils/Stream';
+
+export default class NicknameModal extends Modal {
+  oninit(vnode) {
+    super.oninit(vnode);
+    this.nickname = Stream(app.session.user.displayName());
+  }
+
+  className() {
+    return 'NickameModal Modal--small';
+  }
+
+  title() {
+    return app.translator.trans('flarum-nicknames.forum.nickname.change');
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <div className="Form Form--centered">
+          <div className="Form-group">
+            <input
+              type="text"
+              autocomplete="off"
+              name="nickname"
+              className="FormControl"
+              bidi={this.nickname}
+              disabled={this.loading} />
+          </div>
+          <div className="Form-group">
+            {Button.component({
+              className: 'Button Button--primary Button--block',
+              type: 'submit',
+              loading: this.loading,
+            }, app.translator.trans('flarum-nicknames.forum.nickname.submit_button'))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    if (this.nickname() === app.session.user.displayName()) {
+      this.hide();
+      return;
+    }
+
+    this.loading = true;
+
+    app.session.user.save({ nickname: this.nickname() }, {
+      errorHandler: this.onerror.bind(this),
+    })
+      .then(this.hide.bind(this))
+      .catch(() => {
+        this.loading = false;
+        m.redraw();
+      });
+  }
+}

extensions/nicknames/js/src/forum/index.js

@@ -0,0 +1,40 @@
+import { extend } from 'flarum/extend';
+import Button from 'flarum/components/Button';
+import EditUserModal from 'flarum/components/EditUserModal';
+import SettingsPage from 'flarum/components/SettingsPage';
+import extractText from 'flarum/utils/extractText';
+import Stream from 'flarum/utils/Stream';
+import NickNameModal from './components/NicknameModal';
+
+app.initializers.add('flarum/nicknames', () => {
+  extend(SettingsPage.prototype, 'accountItems', function (items) {
+    items.add('changeNickname',
+      <Button className="Button" onclick={() => app.modal.show(NickNameModal)}>
+        {app.translator.trans('flarum-nicknames.forum.settings.change_nickname_button')}
+      </Button>
+    );
+  });
+
+  extend(EditUserModal.prototype, 'oninit', function () {
+    this.nickname = Stream(this.attrs.user.displayName());
+  });
+
+  extend(EditUserModal.prototype, 'fields', function (items) {
+    items.add('nickname',
+      <div className="Form-group">
+        <label>{app.translator.trans('flarum-nicknames.forum.edit_user.password_heading')}</label>
+        <input className="FormControl"
+               placeholder={extractText(app.translator.trans('flarum-nicknames.forum.edit_user.password_text'))}
+               bidi={this.nickname} />
+      </div>, 100);
+  });
+
+  extend(EditUserModal.prototype, 'data', function (data) {
+    const user = this.attrs.user;
+    if (this.nickname() !== this.attrs.user.username()) {
+      data.nickname = this.nickname();
+    }
+  });
+
+
+});

extensions/nicknames/js/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('flarum-webpack-config')();