authentik/web/src/flows/FormStatic.ts

import { t } from "@lingui/macro";
import {
    css,
    CSSResult,
    customElement,
    html,
    LitElement,
    property,
    TemplateResult,
} from "lit-element";
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
import { ifDefined } from "lit-html/directives/if-defined";

@customElement("ak-form-static")
export class FormStatic extends LitElement {
    @property()
    userAvatar?: string;

    @property()
    user = "";

    static get styles(): CSSResult[] {
        return [
            PFAvatar,
            css`
                /* Form with user */
                .form-control-static {
                    margin-top: var(--pf-global--spacer--sm);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                .form-control-static .avatar {
                    display: flex;
                    align-items: center;
                }
                .form-control-static img {
                    margin-right: var(--pf-global--spacer--xs);
                }
                .form-control-static a {
                    padding-top: var(--pf-global--spacer--xs);
                    padding-bottom: var(--pf-global--spacer--xs);
                    line-height: var(--pf-global--spacer--xl);
                }
            `,
        ];
    }

    render(): TemplateResult {
        return html`
            <div class="form-control-static">
                <div class="avatar">
                    <img
                        class="pf-c-avatar"
                        src="${ifDefined(this.userAvatar)}"
                        alt="${t`User's avatar`}"
                    />
                    ${this.user}
                </div>
                <slot name="link"></slot>
            </div>
        `;
    }
}