Merge branch 'master' into next

web/src/elements/messages/Message.ts

@@ -46,6 +46,15 @@ export class Message extends LitElement {
                 <p class="pf-c-alert__title">
                     ${this.message?.message}
                 </p>
+                <div class="pf-c-alert__action">
+                    <button class="pf-c-button pf-m-plain" type="button" @click=${() => {
+                        if (!this.message) return;
+                        if (!this.onRemove) return;
+                        this.onRemove(this.message);
+                    }}>
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                    </button>
+                </div>
             </div>
         </li>`;
     }

web/src/elements/messages/MessageContainer.ts

@@ -8,7 +8,7 @@ export function showMessage(message: APIMessage): void {
     if (!container) {
         throw new Error("failed to find message container");
     }
-    container.messages.push(message);
+    container.addMessage(message);
     container.requestUpdate();
 }
 
@@ -34,6 +34,14 @@ export class MessageContainer extends LitElement {
         }
     }
 
+    // add a new message, but only if the message isn't currently shown.
+    addMessage(message: APIMessage): void {
+        const matchingMessages = this.messages.filter(m => m.message == message.message);
+        if (matchingMessages.length < 1) {
+            this.messages.push(message);
+        }
+    }
+
     connect(): void {
         if (navigator.webdriver) return;
         const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
@@ -60,7 +68,7 @@ export class MessageContainer extends LitElement {
         });
         this.messageSocket.addEventListener("message", (e) => {
             const data = JSON.parse(e.data);
-            this.messages.push(data);
+            this.addMessage(data);
             this.requestUpdate();
         });
         this.messageSocket.addEventListener("error", (e) => {
@@ -76,8 +84,8 @@ export class MessageContainer extends LitElement {
                     .message=${m}
                     .onRemove=${(m: APIMessage) => {
                         this.messages = this.messages.filter((v) => v !== m);
-                            this.requestUpdate();
-                        }}>
+                        this.requestUpdate();
+                    }}>
                     </ak-message>`;
                 })}
         </ul>`;

web/src/elements/router/RouterOutlet.ts

@@ -50,18 +50,17 @@ export class RouterOutlet extends LitElement {
         if (activeUrl === "") {
             activeUrl = this.defaultUrl || "/";
             window.location.hash = `#${activeUrl}`;
-            console.debug(`authentik/router: set to ${window.location.hash}`);
+            console.debug(`authentik/router: defaulted URL to ${window.location.hash}`);
             return;
         }
         let matchedRoute: RouteMatch | null = null;
         ROUTES.some((route) => {
-            console.debug(`authentik/router: matching ${activeUrl} against ${route.url}`);
             const match = route.url.exec(activeUrl);
             if (match != null) {
                 matchedRoute = new RouteMatch(route);
                 matchedRoute.arguments = match.groups || {};
                 matchedRoute.fullUrl = activeUrl;
-                console.debug(`authentik/router: found match ${matchedRoute}`);
+                console.debug("authentik/router: found match ", matchedRoute);
                 return true;
             }
         });