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")
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>
`;

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

@ -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>

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

@ -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>

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">
<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>

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

@ -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>

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

@ -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}

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

@ -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")}"