feat: extensible global notices

framework/core/js/src/common/components/Alert.tsx

@@ -20,6 +20,8 @@ export interface AlertAttrs extends ComponentAttrs {
   dismissible?: boolean;
   /** A callback to run when the alert is dismissed */
   ondismiss?: Function;
+  /** A class to assign to the container element */
+  containerClassName?: string;
 }
 
 /**
@@ -58,14 +60,16 @@ export default class Alert<T extends AlertAttrs = AlertAttrs> extends Component<
 
     return (
       <div {...attrs}>
-        {!!title && (
-          <div className="Alert-title">
-            {!!icon && <span className="Alert-title-icon">{iconHelper(icon)}</span>}
-            <span className="Alert-title-text">{title}</span>
-          </div>
-        )}
-        <span className="Alert-body">{content}</span>
-        <ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
+        <div className={classList('Alert-container', attrs.containerClassName)}>
+          {!!title && (
+            <div className="Alert-title">
+              {!!icon && <span className="Alert-title-icon">{iconHelper(icon)}</span>}
+              <span className="Alert-title-text">{title}</span>
+            </div>
+          )}
+          <span className="Alert-body">{content}</span>
+          <ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
+        </div>
       </div>
     );
   }

framework/core/js/src/forum/ForumApplication.tsx

@@ -9,7 +9,6 @@ import DiscussionRenamedNotification from './components/DiscussionRenamedNotific
 import CommentPost from './components/CommentPost';
 import DiscussionRenamedPost from './components/DiscussionRenamedPost';
 import routes, { ForumRoutes, makeRouteHelpers } from './routes';
-import alertEmailConfirmation from './utils/alertEmailConfirmation';
 import Application, { ApplicationData } from '../common/Application';
 import Navigation from '../common/components/Navigation';
 import NotificationListState from './states/NotificationListState';
@@ -24,6 +23,7 @@ import type Discussion from '../common/models/Discussion';
 import type NotificationModel from '../common/models/Notification';
 import type PostModel from '../common/models/Post';
 import extractText from '../common/utils/extractText';
+import Notices from './components/Notices';
 
 export interface ForumApplicationData extends ApplicationData {}
 
@@ -117,8 +117,7 @@ export default class ForumApplication extends Application {
     m.mount(document.getElementById('header-navigation')!, Navigation);
     m.mount(document.getElementById('header-primary')!, HeaderPrimary);
     m.mount(document.getElementById('header-secondary')!, HeaderSecondary);
-
-    alertEmailConfirmation(this);
+    m.mount(document.getElementById('notices')!, Notices);
 
     // 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.

framework/core/js/src/forum/components/DiscussionListItem.tsx

@@ -73,7 +73,10 @@ export default class DiscussionListItem<CustomAttrs extends IDiscussionListItemA
 
     const controls = DiscussionControls.controls(this.attrs.discussion, this).toArray();
 
-    items.add('controls', this.controlsView(controls), 100);
+    if (controls.length) {
+      items.add('controls', this.controlsView(controls), 100);
+    }
+
     items.add('slidableUnderneath', this.slidableUnderneathView(), 90);
     items.add('content', this.contentView(), 80);
 
@@ -82,16 +85,14 @@ export default class DiscussionListItem<CustomAttrs extends IDiscussionListItemA
 
   controlsView(controls: Mithril.ChildArray): Mithril.Children {
     return (
-      !!controls.length && (
-        <Dropdown
-          icon="fas fa-ellipsis-v"
-          className="DiscussionListItem-controls"
-          buttonClassName="Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right"
-          accessibleToggleLabel={app.translator.trans('core.forum.discussion_controls.toggle_dropdown_accessible_label')}
-        >
-          {controls}
-        </Dropdown>
-      )
+      <Dropdown
+        icon="fas fa-ellipsis-v"
+        className="DiscussionListItem-controls"
+        buttonClassName="Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right"
+        accessibleToggleLabel={app.translator.trans('core.forum.discussion_controls.toggle_dropdown_accessible_label')}
+      >
+        {controls}
+      </Dropdown>
     );
   }
 

framework/core/js/src/forum/components/Notices.tsx

@@ -0,0 +1,67 @@
+import app from '../app';
+import Component from '../../common/Component';
+import type Mithril from 'mithril';
+import ItemList from '../../common/utils/ItemList';
+import Alert from '../../common/components/Alert';
+import icon from '../../common/helpers/icon';
+import Button from '../../common/components/Button';
+
+export default class Notices extends Component {
+  private loading: boolean = false;
+  private sent: boolean = false;
+
+  view(): Mithril.Children {
+    return <div className="App-notices">{this.items().toArray()}</div>;
+  }
+
+  items(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    const user = app.session.user;
+
+    if (user && !user.isEmailConfirmed()) {
+      items.add(
+        'emailConfirmation',
+        <Alert
+          dismissible={false}
+          controls={[
+            <Button className="Button Button--link" onclick={this.onclickEmailConfirmation.bind(this)} loading={this.loading} disabled={this.sent}>
+              {this.sent
+                ? [icon('fas fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')]
+                : app.translator.trans('core.forum.user_email_confirmation.resend_button')}
+            </Button>,
+          ]}
+          className="Alert--emailConfirmation"
+          containerClassName="container"
+        >
+          {app.translator.trans('core.forum.user_email_confirmation.alert_message', { email: <strong>{user.email()}</strong> })}
+        </Alert>,
+        100
+      );
+    }
+
+    return items;
+  }
+
+  onclickEmailConfirmation() {
+    const user = app.session.user!;
+
+    this.loading = true;
+    m.redraw();
+
+    app
+      .request({
+        method: 'POST',
+        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation',
+      })
+      .then(() => {
+        this.loading = false;
+        this.sent = true;
+        m.redraw();
+      })
+      .catch(() => {
+        this.loading = false;
+        m.redraw();
+      });
+  }
+}

framework/core/js/src/forum/forum.ts

@@ -5,7 +5,6 @@ import './utils/PostControls';
 import './utils/slidable';
 import './utils/History';
 import './utils/DiscussionControls';
-import './utils/alertEmailConfirmation';
 import './utils/UserControls';
 import './utils/Pane';
 import './states/ComposerState';

framework/core/views/frontend/forum.blade.php

@@ -26,6 +26,8 @@
     </div>
 
     <main class="App-content">
+        <div id="notices"></div>
+
         <div id="content"></div>
 
         {!! $content !!}