Tweak user email confirmation alert

- Make sure is_activated is serialized to a bool (otherwise "0" will evaluate to true)
- Remove "error" class from message so it's more friendly
- Make the alert more prominent by mounting it into a new div at the top of the page
- Add loading UX to the resend button

framework/core/js/forum/dist/app.js

@@ -28386,32 +28386,67 @@ System.register('flarum/helpers/userOnline', ['flarum/helpers/icon'], function (
 });;
 'use strict';
 
-System.register('flarum/initializers/alertEmailConfirmation', ['flarum/components/Alert', 'flarum/components/Button'], function (_export, _context) {
-  var Alert, Button;
+System.register('flarum/initializers/alertEmailConfirmation', ['flarum/components/Alert', 'flarum/components/Button', 'flarum/helpers/icon'], function (_export, _context) {
+  var Alert, Button, icon;
   function alertEmailConfirmation(app) {
     var user = app.session.user;
 
     if (!user || user.isActivated()) return;
 
-    var alert = void 0;
-
     var resendButton = Button.component({
       className: 'Button Button--link',
-      children: app.translator.trans('core.forum.user_confirmation.resend_button'),
+      children: app.translator.trans('core.forum.user_email_confirmation.resend_button'),
       onclick: function onclick() {
+        resendButton.props.loading = true;
+        m.redraw();
+
         app.request({
           method: 'POST',
           url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation'
         }).then(function () {
-          return app.alerts.dismiss(alert);
+          resendButton.props.loading = false;
+          resendButton.props.children = [icon('check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
+          resendButton.props.disabled = true;
+          m.redraw();
+        }).catch(function () {
+          resendButton.props.loading = false;
+          m.redraw();
         });
       }
     });
 
-    app.alerts.show(alert = new Alert({
-      type: 'error',
+    var ContainedAlert = function (_Alert) {
+      babelHelpers.inherits(ContainedAlert, _Alert);
+
+      function ContainedAlert() {
+        babelHelpers.classCallCheck(this, ContainedAlert);
+        return babelHelpers.possibleConstructorReturn(this, Object.getPrototypeOf(ContainedAlert).apply(this, arguments));
+      }
+
+      babelHelpers.createClass(ContainedAlert, [{
+        key: 'view',
+        value: function view() {
+          var vdom = babelHelpers.get(Object.getPrototypeOf(ContainedAlert.prototype), 'view', this).call(this);
+
+          vdom.children = [m(
+            'div',
+            { className: 'container' },
+            vdom.children
+          )];
+
+          return vdom;
+        }
+      }]);
+      return ContainedAlert;
+    }(Alert);
+
+    m.mount($('<div/>').insertBefore('#content')[0], ContainedAlert.component({
       dismissible: false,
-      children: app.translator.trans('core.forum.user_confirmation.alert_message'),
+      children: app.translator.trans('core.forum.user_email_confirmation.alert_message', { email: m(
+          'strong',
+          null,
+          user.email()
+        ) }),
       controls: [resendButton]
     }));
   }
@@ -28423,6 +28458,8 @@ System.register('flarum/initializers/alertEmailConfirmation', ['flarum/component
       Alert = _flarumComponentsAlert.default;
     }, function (_flarumComponentsButton) {
       Button = _flarumComponentsButton.default;
+    }, function (_flarumHelpersIcon) {
+      icon = _flarumHelpersIcon.default;
     }],
     execute: function () {}
   };

framework/core/js/forum/src/initializers/alertEmailConfirmation.js

@@ -1,9 +1,9 @@
 import Alert from 'flarum/components/Alert';
 import Button from 'flarum/components/Button';
+import icon from 'flarum/helpers/icon';
 
 /**
- * The `alertEmailConfirmation` initializer shows an Alert if loggend in
- * user's email is not confirmed
+ * Shows an alert if the user has not yet confirmed their email address.
  *
  * @param {ForumApp} app
  */
@@ -12,24 +12,43 @@ export default function alertEmailConfirmation(app) {
 
   if (!user || user.isActivated()) return;
 
-  let alert;
-
   const resendButton = Button.component({
     className: 'Button Button--link',
-    children: app.translator.trans('core.forum.user_confirmation.resend_button'),
-    onclick: () => {
+    children: app.translator.trans('core.forum.user_email_confirmation.resend_button'),
+    onclick: function() {
+      resendButton.props.loading = true;
+      m.redraw();
+
       app.request({
         method: 'POST',
         url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation',
-      }).then(() => app.alerts.dismiss(alert));
+      }).then(() => {
+        resendButton.props.loading = false;
+        resendButton.props.children = [icon('check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
+        resendButton.props.disabled = true;
+        m.redraw();
+      }).catch(() => {
+        resendButton.props.loading = false;
+        m.redraw();
+      });
     }
   });
 
-  app.alerts.show(
-    alert = new Alert({
-      type: 'error',
+  class ContainedAlert extends Alert {
+    view() {
+      const vdom = super.view();
+
+      vdom.children = [<div className="container">{vdom.children}</div>];
+
+      return vdom;
+    }
+  }
+
+  m.mount(
+    $('<div/>').insertBefore('#content')[0],
+    ContainedAlert.component({
       dismissible: false,
-      children: app.translator.trans('core.forum.user_confirmation.alert_message'),
+      children: app.translator.trans('core.forum.user_email_confirmation.alert_message', {email: <strong>{user.email()}</strong>}),
       controls: [resendButton]
     })
   );

framework/core/src/Api/Serializer/CurrentUserSerializer.php

@@ -20,7 +20,7 @@ class CurrentUserSerializer extends UserSerializer
         $attributes = parent::getDefaultAttributes($user);
 
         $attributes += [
-            'isActivated'              => $user->is_activated,
+            'isActivated'              => (bool) $user->is_activated,
             'email'                    => $user->email,
             'readTime'                 => $this->formatDate($user->read_time),
             'unreadNotificationsCount' => (int) $user->getUnreadNotificationsCount(),

framework/core/src/Api/Serializer/UserSerializer.php

@@ -55,7 +55,7 @@ class UserSerializer extends UserBasicSerializer
 
         if ($canEdit || $this->actor->id === $user->id) {
             $attributes += [
-                'isActivated' => $user->is_activated,
+                'isActivated' => (bool) $user->is_activated,
                 'email'       => $user->email
             ];
         }