trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: fix display issues with challenges using pending_user_avatar 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-17 22:19:31 +01:00
parent a8d411a77b
commit a54fa7c9b1
7 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/flows/FormStatic.ts
View File

@ -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") @customElement("ak-form-static")
export class FormStatic extends LitElement { export class FormStatic extends LitElement {
@property()
userAvatar?: string;
@property()
user = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [css` return [PFAvatar, css`
/* Form with user */ /* Form with user */
.form-control-static { .form-control-static {
margin-top: var(--pf-global--spacer--sm); margin-top: var(--pf-global--spacer--sm);
@ -12,7 +21,7 @@ export class FormStatic extends LitElement {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.form-control-static slot[name=avatar] { .form-control-static .avatar {
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -30,7 +39,10 @@ export class FormStatic extends LitElement {
render(): TemplateResult { render(): TemplateResult {
return html` return html`
<div class="form-control-static"> <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> <slot name="link"></slot>
</div> </div>
`; `;

9
web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
View File

@ -54,11 +54,10 @@ export class AuthenticatorStaticStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}> <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<ak-form-static class="pf-c-form__group"> <ak-form-static
<div slot="avatar"> class="pf-c-form__group"
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> userAvatar="${this.challenge.pending_user_avatar}"
${this.challenge.pending_user} user=${this.challenge.pending_user}>
</div>
<div slot="link"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>

9
web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
View File

@ -43,11 +43,10 @@ export class AuthenticatorTOTPStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}> <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<ak-form-static class="pf-c-form__group"> <ak-form-static
<div slot="avatar"> class="pf-c-form__group"
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> userAvatar="${this.challenge.pending_user_avatar}"
${this.challenge.pending_user} user=${this.challenge.pending_user}>
</div>
<div slot="link"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>

9
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
View File

@ -39,11 +39,10 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
} }
return html`<div class="pf-c-login__main-body"> return html`<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}> <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<ak-form-static class="pf-c-form__group"> <ak-form-static
<div slot="avatar"> class="pf-c-form__group"
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> userAvatar="${this.challenge.pending_user_avatar}"
${this.challenge.pending_user} user=${this.challenge.pending_user}>
</div>
<div slot="link"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>

9
web/src/flows/stages/captcha/CaptchaStage.ts
View File

@ -73,11 +73,10 @@ export class CaptchaStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form"> <form class="pf-c-form">
<ak-form-static class="pf-c-form__group"> <ak-form-static
<div slot="avatar"> class="pf-c-form__group"
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> userAvatar="${this.challenge.pending_user_avatar}"
${this.challenge.pending_user} user=${this.challenge.pending_user}>
</div>
<div slot="link"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>

10
web/src/flows/stages/consent/ConsentStage.ts
View File

@ -48,16 +48,14 @@ export class ConsentStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}> <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<ak-form-static class="pf-c-form__group"> <ak-form-static
<div slot="avatar"> class="pf-c-form__group"
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> userAvatar="${this.challenge.pending_user_avatar}"
${this.challenge.pending_user} user=${this.challenge.pending_user}>
</div>
<div slot="link"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>
</ak-form-static> </ak-form-static>
<div class="pf-c-form__group"> <div class="pf-c-form__group">
<p id="header-text"> <p id="header-text">
${this.challenge.header_text} ${this.challenge.header_text}

10
web/src/flows/stages/password/PasswordStage.ts
View File

@ -42,16 +42,14 @@ export class PasswordStage extends BaseStage {
</header> </header>
<div class="pf-c-login__main-body"> <div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(e);}}> <form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(e);}}>
<ak-form-static class="pf-c-form__group"> <ak-form-static
<div slot="avatar"> class="pf-c-form__group"
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}"> userAvatar="${this.challenge.pending_user_avatar}"
${this.challenge.pending_user} user=${this.challenge.pending_user}>
</div>
<div slot="link"> <div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a> <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div> </div>
</ak-form-static> </ak-form-static>
<input name="username" autocomplete="username" type="hidden" value="${this.challenge.pending_user}"> <input name="username" autocomplete="username" type="hidden" value="${this.challenge.pending_user}">
<ak-form-element <ak-form-element
label="${gettext("Password")}" label="${gettext("Password")}"