From a54fa7c9b1e508f2b229cbd9c2bc1068df52afd6 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 17 Mar 2021 22:19:31 +0100
Subject: [PATCH] web: fix display issues with challenges using
 pending_user_avatar

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/flows/FormStatic.ts                   | 20 +++++++++++++++----
 .../AuthenticatorStaticStage.ts               |  9 ++++-----
 .../AuthenticatorTOTPStage.ts                 |  9 ++++-----
 .../AuthenticatorValidateStageCode.ts         |  9 ++++-----
 web/src/flows/stages/captcha/CaptchaStage.ts  |  9 ++++-----
 web/src/flows/stages/consent/ConsentStage.ts  | 10 ++++------
 .../flows/stages/password/PasswordStage.ts    | 10 ++++------
 7 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/web/src/flows/FormStatic.ts b/web/src/flows/FormStatic.ts
index 44c222817..ae52f6434 100644
--- a/web/src/flows/FormStatic.ts
+++ b/web/src/flows/FormStatic.ts
@@ -1,10 +1,19 @@
-import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+import { gettext } from "django";
+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 [css`
+        return [PFAvatar, css`
             /* Form with user */
             .form-control-static {
                 margin-top: var(--pf-global--spacer--sm);
@@ -12,7 +21,7 @@ export class FormStatic extends LitElement {
                 align-items: center;
                 justify-content: space-between;
             }
-            .form-control-static slot[name=avatar] {
+            .form-control-static .avatar {
                 display: flex;
                 align-items: center;
             }
@@ -30,7 +39,10 @@ export class FormStatic extends LitElement {
     render(): TemplateResult {
         return html`
             <div class="form-control-static">
-                <slot name="avatar"></slot>
+                <div class="avatar">
+                    <img class="pf-c-avatar" src="${ifDefined(this.userAvatar)}" alt="${gettext("User's avatar")}">
+                    ${this.user}
+                </div>
                 <slot name="link"></slot>
             </div>
         `;
diff --git a/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
index 55b5ac2f4..deeee208d 100644
--- a/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
+++ b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
@@ -54,11 +54,10 @@ export class AuthenticatorStaticStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <ak-form-static class="pf-c-form__group">
-                        <div slot="avatar">
-                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                            ${this.challenge.pending_user}
-                        </div>
+                    <ak-form-static
+                        class="pf-c-form__group"
+                        userAvatar="${this.challenge.pending_user_avatar}"
+                        user=${this.challenge.pending_user}>
                         <div slot="link">
                             <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                         </div>
diff --git a/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts b/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
index be9d34853..3a93c8db9 100644
--- a/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+++ b/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
@@ -43,11 +43,10 @@ export class AuthenticatorTOTPStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <ak-form-static class="pf-c-form__group">
-                        <div slot="avatar">
-                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                            ${this.challenge.pending_user}
-                        </div>
+                    <ak-form-static
+                        class="pf-c-form__group"
+                        userAvatar="${this.challenge.pending_user_avatar}"
+                        user=${this.challenge.pending_user}>
                         <div slot="link">
                             <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                         </div>
diff --git a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
index d9b9908c4..0a094ce4f 100644
--- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
@@ -39,11 +39,10 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
         }
         return html`<div class="pf-c-login__main-body">
             <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                <ak-form-static class="pf-c-form__group">
-                    <div slot="avatar">
-                        <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                        ${this.challenge.pending_user}
-                    </div>
+                <ak-form-static
+                    class="pf-c-form__group"
+                    userAvatar="${this.challenge.pending_user_avatar}"
+                    user=${this.challenge.pending_user}>
                     <div slot="link">
                         <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                     </div>
diff --git a/web/src/flows/stages/captcha/CaptchaStage.ts b/web/src/flows/stages/captcha/CaptchaStage.ts
index 629027748..f36689ee2 100644
--- a/web/src/flows/stages/captcha/CaptchaStage.ts
+++ b/web/src/flows/stages/captcha/CaptchaStage.ts
@@ -73,11 +73,10 @@ export class CaptchaStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form">
-                    <ak-form-static class="pf-c-form__group">
-                        <div slot="avatar">
-                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                            ${this.challenge.pending_user}
-                        </div>
+                    <ak-form-static
+                        class="pf-c-form__group"
+                        userAvatar="${this.challenge.pending_user_avatar}"
+                        user=${this.challenge.pending_user}>
                         <div slot="link">
                             <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                         </div>
diff --git a/web/src/flows/stages/consent/ConsentStage.ts b/web/src/flows/stages/consent/ConsentStage.ts
index d37d37fac..9e0d3a93d 100644
--- a/web/src/flows/stages/consent/ConsentStage.ts
+++ b/web/src/flows/stages/consent/ConsentStage.ts
@@ -48,16 +48,14 @@ export class ConsentStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <ak-form-static class="pf-c-form__group">
-                        <div slot="avatar">
-                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                            ${this.challenge.pending_user}
-                        </div>
+                    <ak-form-static
+                        class="pf-c-form__group"
+                        userAvatar="${this.challenge.pending_user_avatar}"
+                        user=${this.challenge.pending_user}>
                         <div slot="link">
                             <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                         </div>
                     </ak-form-static>
-
                     <div class="pf-c-form__group">
                         <p id="header-text">
                             ${this.challenge.header_text}
diff --git a/web/src/flows/stages/password/PasswordStage.ts b/web/src/flows/stages/password/PasswordStage.ts
index dad08f969..868e84193 100644
--- a/web/src/flows/stages/password/PasswordStage.ts
+++ b/web/src/flows/stages/password/PasswordStage.ts
@@ -42,16 +42,14 @@ export class PasswordStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(e);}}>
-                    <ak-form-static class="pf-c-form__group">
-                        <div slot="avatar">
-                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                            ${this.challenge.pending_user}
-                        </div>
+                    <ak-form-static
+                        class="pf-c-form__group"
+                        userAvatar="${this.challenge.pending_user_avatar}"
+                        user=${this.challenge.pending_user}>
                         <div slot="link">
                             <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                         </div>
                     </ak-form-static>
-
                     <input name="username" autocomplete="username" type="hidden" value="${this.challenge.pending_user}">
                     <ak-form-element
                         label="${gettext("Password")}"