static: replace server-side alerts with webcomponent

passbook/core/templates/base/page.html

@@ -7,7 +7,7 @@
 {% load passbook_utils %}
 
 {% block body %}
-{% include 'partials/messages.html' %}
+<pb-messages url="{% url 'passbook_api:messages-list' %}"></pb-messages>
 <div class="pf-c-page" id="page-default-nav-example">
     <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">{% trans 'Skip to content' %}</a>
     <header role="banner" class="pf-c-page__header ws-page-header">

passbook/core/templates/login/base.html

@@ -1,7 +1,7 @@
 {% load static %}
 {% load i18n %}
 
-{% include 'partials/messages.html' %}
+<pb-messages url="{% url 'passbook_api:messages-list' %}"></pb-messages>
 
 <header class="pf-c-login__main-header">
     <h1 class="pf-c-title pf-m-3xl">

passbook/core/templates/login/base_full.html

@@ -18,7 +18,7 @@
         </filter>
     </svg>
 </div>
-{% include 'partials/messages.html' %}
+<pb-messages url="{% url 'passbook_api:messages-list' %}"></pb-messages>
 <div class="pf-c-login">
     <div class="pf-c-login__container">
         <header class="pf-c-login__header">

passbook/core/templates/partials/messages.html

@@ -1,22 +0,0 @@
-<ul class="pf-c-alert-group pf-m-toast">
-    {% for msg in messages %}
-    <li class="pf-c-alert-group__item">
-        <div class="pf-c-alert pf-m-{{ msg.level_tag }} {% if msg.level_tag == 'error' %}pf-m-danger{% endif %}">
-            <div class="pf-c-alert__icon">
-                {% if msg.level_tag == 'error' %}
-                <i class="fas fa-exclamation-circle"></i>
-                {% elif msg.level_tag == 'warning' %}
-                <i class="fas fa-exclamation-triangle"></i>
-                {% elif msg.level_tag == 'success' %}
-                <i class="fas fa-check-circle"></i>
-                {% elif msg.level_tag == 'info' %}
-                <i class="fas fa-info"></i>
-                {% endif %}
-            </div>
-            <h4 class="pf-c-alert__title">
-                {{ msg.message|safe }}
-            </h4>
-        </div>
-    </li>
-    {% endfor %}
-</ul>

passbook/static/static/src/Messages.js

@@ -0,0 +1,57 @@
+import { LitElement, html } from 'lit-element';
+
+const LEVEL_ICON_MAP = {
+    "error": "fas fa-exclamation-circle",
+    "warning": "fas fa-exclamation-triangle",
+    "success": "fas fa-check-circle",
+    "info": "fas fa-info",
+};
+
+let ID = function () {
+    return '_' + Math.random().toString(36).substr(2, 9);
+};
+
+class Messages extends LitElement {
+
+    static get properties() {
+        return {
+            url: { type: String },
+            messages: { type: Array },
+        };
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+
+    firstUpdated() {
+        fetch(this.url).then(r => r.json()).then(r => this.messages = r);
+    }
+
+    renderMessage(message) {
+        const id = `pb-message-${ID()}`;
+        const item = html`<li id=${id} class="pf-c-alert-group__item">
+            <div class="pf-c-alert pf-m-${message.level_tag} ${message.level_tag === 'error' ? 'pf-m-danger': ''}">
+                <div class="pf-c-alert__icon">
+                    <i class="${LEVEL_ICON_MAP[message.level_tag]}">
+                </div>
+                <p class="pf-c-alert__title">
+                    ${message.message}
+                </p>
+            </div>
+        </li>`;
+        setTimeout(() => {
+            this.querySelector(`#${id}`).remove();
+        }, 1500);
+        return item;
+    }
+
+    render() {
+        if (this.messages === undefined) {
+            return html`<ul class="pf-c-alert-group pf-m-toast"></ul>`;
+        }
+        return html`<ul class="pf-c-alert-group pf-m-toast">${this.messages.map(item => this.renderMessage(item))}</ul>`;
+    }
+}
+
+customElements.define('pb-messages', Messages);

passbook/static/static/src/passbook.js

@@ -1,5 +1,6 @@
 import './FetchFillSlot.js';
 import './ActionButton.js';
+import './Messages.js';
 
 // Button Dropdowns
 document.querySelectorAll("button.pf-c-dropdown__toggle").forEach((b) => {