web/admin: make message container bottom aligned for admin interface (#14816)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

authentik/core/templates/if/admin.html

@@ -10,7 +10,7 @@
 {% endblock %}
 
 {% block body %}
-<ak-message-container></ak-message-container>
+<ak-message-container alignment="bottom"></ak-message-container>
 <ak-interface-admin>
     <ak-loading></ak-loading>
 </ak-interface-admin>

web/src/admin/DebugPage.ts

@@ -67,6 +67,17 @@ export class DebugPage extends AKElement {
                             >
                                 POST System
                             </button>
+                            <button
+                                class="pf-c-button pf-m-primary"
+                                @click=${() => {
+                                    showMessage({
+                                        level: MessageLevel.info,
+                                        message: `lorem ipsum ${Date.now()}`,
+                                    });
+                                }}
+                            >
+                                Message
+                            </button>
                         </div>
                     </div>
                 </div>

web/src/elements/messages/MessageContainer.ts

@@ -80,6 +80,9 @@ export class MessageContainer extends AKElement {
     @property({ attribute: false })
     messages: APIMessage[] = [];
 
+    @property()
+    alignment: "top" | "bottom" = "top";
+
     static get styles(): CSSResult[] {
         return [
             PFBase,
@@ -89,6 +92,10 @@ export class MessageContainer extends AKElement {
                 ak-message {
                     display: block;
                 }
+                :host([alignment="bottom"]) .pf-c-alert-group.pf-m-toast {
+                    bottom: var(--pf-c-alert-group--m-toast--Top);
+                    top: unset;
+                }
             `,
         ];
     }
@@ -120,16 +127,18 @@ export class MessageContainer extends AKElement {
 
     render(): TemplateResult {
         return html`<ul class="pf-c-alert-group pf-m-toast">
-            ${this.messages.map((message) => {
+            ${Array.from(this.messages)
-                return html`<ak-message
+                .reverse()
-                    .message=${message}
+                .map((message) => {
-                    .onRemove=${(m: APIMessage) => {
+                    return html`<ak-message
-                        this.messages = this.messages.filter((v) => v !== m);
+                        .message=${message}
-                        this.requestUpdate();
+                        .onRemove=${(m: APIMessage) => {
-                    }}
+                            this.messages = this.messages.filter((v) => v !== m);
-                >
+                            this.requestUpdate();
-                </ak-message>`;
+                        }}
-            })}
+                    >
+                    </ak-message>`;
+                })}
         </ul>`;
     }
 }