refactor(alert messages): custom icons without js

frontend/src/utils/alerts/alert-icons.js

@@ -1,20 +0,0 @@
-//
-// Fontawesome icons to be used on alerts.
-//
-// If you want to add new icons stick to the format of the existing ones.
-// They are necessary due to weird unicode conversions during transpilation.
-// https://fontawesome.com/icons
-
-export const ALERT_ICONS = {
-  calendarcheck: '"\\f274"',
-  calendartimes: '"\\f273"',
-  checkmark: '"\\f058"',
-  cross: '"\\f00d"',
-  deregistered: '"\\f273"',
-  exclamation: '"\\f06a"',
-  info: '"\\f05a"',
-  registered: '"\\f274"',
-  userplus: '"\\f234"',
-  userslash: '"\\f506"',
-  warning: '"\\f071"',
-};

frontend/src/utils/alerts/alerts.js

@@ -1,6 +1,5 @@
 import { Utility } from '../../core/utility';
 import './alerts.scss';
-import { ALERT_ICONS } from './alert-icons';
 
 const ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
 const ALERTS_ELEVATED_CLASS = 'alerts--elevated';
@@ -20,7 +19,6 @@ const ALERT_AUTOCLOSING_MATCHER = '.alert-info, .alert-success';
 /*
  * Dataset-Inputs:
  *  - decay (data-decay): Custom time (in seconds) for this alert to stay visible
- *  - icon (data-icon): Custom icon (from the list in alert-icons.js) to show on the alert
  */
 
 @Utility({
@@ -94,13 +92,6 @@ export class Alerts {
       this._toggleAlert(alertElement);
     });
 
-    const customIcon = alertElement.dataset.icon;
-    if (customIcon && ALERT_ICONS[customIcon]) {
-      alertElement.style.setProperty('--alert-icon', ALERT_ICONS[customIcon]);
-    } else if (customIcon) {
-      throw new Error('Alert: Custom icon "' + customIcon + '" could not be found!');
-    }
-
     if (autoHideDelay > 0 && alertElement.matches(ALERT_AUTOCLOSING_MATCHER)) {
       window.setTimeout(() => this._toggleAlert(alertElement), autoHideDelay * 1000);
     }

frontend/src/utils/alerts/alerts.scss

@@ -32,6 +32,10 @@
     font-size: 30px;
     transform: translateX(-50%);
   }
+
+  &:hover::before {
+    color: var(--color-grey-medium);
+  }
 }
 
 .alerts--elevated {
@@ -68,6 +72,10 @@
 
 .alert a {
   color: var(--color-lightwhite);
+
+  &:hover {
+    color: var(--color-grey);
+  }
 }
 
 @keyframes slide-in-alert {
@@ -124,9 +132,9 @@
   z-index: 40;
 
   &::before {
-    content: var(--alert-icon, var(--alert-icon-default, '\f05a'));
+    /* content: var(--alert-icon, var(--alert-icon-default, '\f05a')); */
     position: absolute;
-    font-family: 'Font Awesome 5 Free';
+    /* font-family: 'Font Awesome 5 Free'; */
     font-size: 24px;
     top: 50%;
     left: 50%;
@@ -188,23 +196,26 @@
 .alert-success {
   background-color: var(--color-success);
 
-  .alert__icon::before {
+  /* .alert__icon::before {
-    --alert-icon-default: '\f058';
+   *   --alert-icon-default: '\f058';
-  }
+   * }
+   */
 }
 
 .alert-warning {
   background-color: var(--color-warning);
 
-  .alert__icon::before {
+  /* .alert__icon::before {
-    --alert-icon-default: '\f06a';
+   *   --alert-icon-default: '\f06a';
-  }
+   * }
+   */
 }
 
 .alert-error {
   background-color: var(--color-error);
 
-  .alert__icon::before {
+  /* .alert__icon::before {
-    --alert-icon-default: '\f071';
+   *   --alert-icon-default: '\f071';
-  }
+   * }
+   */
 }

src/Foundation.hs

@@ -1216,10 +1216,8 @@ instance Yesod UniWorX where
             , massInputShortcircuit
             ]
 
-          lift . bracketOnError getMessages (mapM_ addMessage') $ \msgs -> do
+          lift . bracketOnError getMessages (mapM_ addMessage') $
-            -- @gkleen: the following line is redundant, but what does this block do anyway?
+            addCustomHeader HeaderAlerts . decodeUtf8 . urlEncode True . toStrict . JSON.encode
-            -- Just msgs' <- return . forM msgs $ \(msgState, content) -> Message <$> fromPathPiece msgState <*> return content
-            addCustomHeader HeaderAlerts . decodeUtf8 . urlEncode True . toStrict $ JSON.encode msgs
 
     -- Since we implement `errorHandler` ourselves we don't need `defaultMessageWidget`
     defaultMessageWidget _title _body = error "defaultMessageWidget: undefined"
@@ -2839,6 +2837,12 @@ instance YesodAuth UniWorX where
 
     authHttpManager = Yesod.getHttpManager
 
+    onLogin = addMessageI Success Auth.NowLoggedIn
+
+    onErrorHtml dest msg = do
+      addMessage Error $ toHtml msg
+      redirect dest
+
     renderAuthMessage _ _ = Auth.germanMessage -- TODO
 
 instance YesodAuthPersist UniWorX

templates/widgets/alerts/alerts.hamlet

@@ -2,14 +2,8 @@ $newline never
 <div #alerts-1 .alerts uw-alerts>
   <div .alerts__toggler>
   $forall Message{..} <- mmsgs
-    $with icn <- maybeAttribute "data-icon" iconJS messageIcon
+    <div .alert .alert-#{toPathPiece messageStatus}>
-      <div .alert .alert-#{toPathPiece messageStatus} *{icn}>
+      <div .alert__closer>
-        <div .alert__closer>
+      <div .alert__icon .fas .fa-fw .fa-#{maybe "info-circle" iconText messageIcon}>
-        <div .alert__icon>
+      <div .alert__content>
-        <div .alert__content>
+        #{messageContent}
-          #{messageContent}
-        <!--
-            TODO:
-            If a custom icon is set for this alert then add "data-icon=#{icon}" to the .alert element.
-            A list of available icons can be found in frontend/src/utils/alerts/alert-icons.js
-        -->