update: forum/utils/alertEmailConfirmation

- ResendButton has been expanded into a full(er) component to avoid storing component instances, ContainedAlert has been removed
flarum · Aug 10, 2020 · e0fce1c · e0fce1c
1 parent 643dcb6
commit e0fce1c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/js/src/forum/ForumApplication.js b/js/src/forum/ForumApplication.js
@@ -121,7 +121,7 @@ export default class ForumApplication extends Application {
     m.route.prefix = '';
     super.mount(this.forum.attribute('basePath'));
 
-    // alertEmailConfirmation(this);
+    alertEmailConfirmation(this);
 
     // Route the home link back home when clicked. We do not want it to register
     // if the user is opening it in a new tab, however.

diff --git a/js/src/forum/utils/alertEmailConfirmation.js b/js/src/forum/utils/alertEmailConfirmation.js
@@ -1,6 +1,7 @@
 import Alert from '../../common/components/Alert';
 import Button from '../../common/components/Button';
 import icon from '../../common/helpers/icon';
+import Component from '../../common/Component';
 
 /**
  * Shows an alert if the user has not yet confirmed their email address.
@@ -12,11 +13,26 @@ export default function alertEmailConfirmation(app) {
 
   if (!user || user.isEmailConfirmed()) return;
 
-  const resendButton = Button.component({
-    className: 'Button Button--link',
-    children: app.translator.trans('core.forum.user_email_confirmation.resend_button'),
-    onclick: function () {
-      resendButton.props.loading = true;
+  class ResendButton extends Component {
+    oninit(vnode) {
+      super.oninit(vnode);
+
+      this.loading = false;
+      this.disabled = false;
+
+      this.content = app.translator.trans('core.forum.user_email_confirmation.resend_button');
+    }
+
+    view(vnode) {
+      return (
+        <Button class="Button Button--link" onclick={this.onclick.bind(this)} loading={this.loading} disabled={this.disabled}>
+          {this.content}
+        </Button>
+      );
+    }
+
+    onclick() {
+      this.loading = true;
       m.redraw();
 
       app
@@ -25,34 +41,25 @@ export default function alertEmailConfirmation(app) {
           url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation',
         })
         .then(() => {
-          resendButton.props.loading = false;
-          resendButton.props.children = [icon('fas fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
-          resendButton.props.disabled = true;
+          this.loading = false;
+          this.content = [icon('fas fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
+          this.disabled = true;
           m.redraw();
         })
         .catch(() => {
-          resendButton.props.loading = false;
+          this.loading = false;
           m.redraw();
         });
-    },
-  });
-
-  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_email_confirmation.alert_message', { email: <strong>{user.email()}</strong> }),
-      controls: [resendButton],
-    })
-  );
+  m.mount($('<div/>').insertBefore('#content')[0], {
+    view: () => (
+      <div className="container">
+        <Alert dismissible={false} controls={[ResendButton.component()]}>
+          {app.translator.trans('core.forum.user_email_confirmation.alert_message', { email: <strong>{user.email()}</strong> })}
+        </Alert>
+      </div>
+    ),
+  });
 }