Make profile edit more intuitive. Fixes #60

js/src/forum/panes/ProfileConfigurePane.js

@@ -1,6 +1,7 @@
 import app from 'flarum/app';
 import UserPage from 'flarum/components/UserPage';
 import Button from 'flarum/components/Button';
+import Link from 'flarum/components/Link';
 import TypeFactory from './../types/TypeFactory';
 
 /* global m */
@@ -13,9 +14,14 @@ export default class ProfileConfigurePane extends UserPage {
         this.loadUser(app.session.user.username());
         this.enforceProfileCompletion = app.forum.attribute('masquerade.force-profile-completion') || false;
         this.profileCompleted = app.forum.attribute('masquerade.profile-completed') || false;
+        this.profileNowCompleted = false; // Show "after required" text
         this.fields = [];
         this.answers = {};
         this.load();
+
+        // Show disabled state if everything is saved
+        // Unless the profile isn't complete, in which case show enabled button so it's obvious you will need to save
+        this.dirty = !this.profileCompleted;
     }
 
     content() {
@@ -45,9 +51,20 @@ export default class ProfileConfigurePane extends UserPage {
                         type: 'submit',
                         className: 'Button Button--primary',
                         loading: this.loading,
+                        disabled: !this.dirty,
                     },
                     app.translator.trans('fof-masquerade.forum.buttons.save-profile')
                 ),
+                this.profileNowCompleted
+                    ? m(
+                          'span.Masquerade-NowCompleted',
+                          app.translator.trans('fof-masquerade.forum.alerts.profile-completed', {
+                              a: m(Link, {
+                                  href: app.route('index'),
+                              }),
+                          })
+                      )
+                    : null,
             ]
         );
     }
@@ -71,6 +88,7 @@ export default class ProfileConfigurePane extends UserPage {
 
     set(field, value) {
         this.answers[field.id()] = value;
+        this.dirty = true;
     }
 
     update(e) {
@@ -83,7 +101,15 @@ export default class ProfileConfigurePane extends UserPage {
             url: app.forum.attribute('apiUrl') + '/masquerade/configure',
             body: this.answers,
         })
-            .then(this.parseResponse.bind(this))
+            .then((response) => {
+                this.dirty = false;
+                if (!this.profileCompleted) {
+                    this.profileCompleted = true;
+                    this.profileNowCompleted = true;
+                }
+
+                this.parseResponse(response);
+            })
             .catch(() => {
                 this.loading = false;
                 m.redraw();

js/src/forum/types/BaseField.js

@@ -45,8 +45,8 @@ export default class BaseField {
     }
 
     editorField() {
-        return m('fieldset.Field', [
-            m('legend', [this.field.icon() ? [icon(this.field.icon()), ' '] : null, this.field.name(), this.field.required() ? ' *' : null]),
+        return m('.Form-group.Field', [
+            m('label', [this.field.icon() ? [icon(this.field.icon()), ' '] : null, this.field.name(), this.field.required() ? ' *' : null]),
             m('.FormField', [
                 this.field.prefix() ? m('.prefix', this.field.prefix()) : null,
                 this.editorInput(),

resources/less/forum.less

@@ -1,38 +1,22 @@
 .ProfileConfigurePane {
-    min-height: 100vh;
-    padding: 20px 0;
-
     .Fields {
         margin: 10px 0;
 
-        fieldset.Field {
-            margin: 0 5px;
-            padding: 5px;
-
-            legend {
-                margin: 10px 10px 0;
-                width: 100%;
-                > span {
-                    cursor: pointer;
-                }
-            }
-
-            .FormField {
-                .prefix {
-                    float: left;
-                    width: 30%;
-
-                    display: block;
-                    height: 36px;
-                    padding: 8px 13px;
-                    font-size: 13px;
-                    line-height: 1.5;
-                    color: @muted-color;
-                    background-color: @control-bg;
-                    border: 2px solid transparent;
-                    border-radius: @border-radius;
-                    -webkit-appearance: none;
-                }
+        .FormField {
+            .prefix {
+                float: left;
+                width: 30%;
+
+                display: block;
+                height: 36px;
+                padding: 8px 13px;
+                font-size: 13px;
+                line-height: 1.5;
+                color: @muted-color;
+                background-color: @control-bg;
+                border: 2px solid transparent;
+                border-radius: @border-radius;
+                -webkit-appearance: none;
             }
         }
     }
@@ -49,15 +33,22 @@
 .Masquerade-Bio {
     .Masquerade-Bio-Set {
         width: 100%;
+
         .Masquerade-Bio-Field {
             display: inline-block;
             padding: .1em .2em;
             font-weight: bold;
             min-width: 30%;
         }
+
         .Masquerade-Bio-Answer {
             display: inline-block;
             width: 50%;
         }
     }
 }
+
+.Masquerade-NowCompleted {
+    display: inline-block;
+    margin-left: 20px;
+}

resources/locale/en.yml

@@ -3,6 +3,7 @@ fof-masquerade:
         alerts:
             profile-completion-required: >
                 Please complete the necessary profile fields below.
+            profile-completed: Profile completed! <a>Proceed to homepage</a>
         buttons:
             view-profile: View profile
             save-profile: Save