web: fix display issues with challenges using pending_user_avatar
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
a8d411a77b
commit
a54fa7c9b1
|
@ -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>
|
||||
`;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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")}"
|
||||
|
|
Reference in New Issue