web: Fix dangling div. (#15478)

This commit is contained in:
Teffen Ellis
2025-07-09 22:00:18 +02:00
committed by GitHub
parent 80ad97b28d
commit d8a3098329
6 changed files with 150 additions and 163 deletions
+43 -47
View File
@@ -25,52 +25,48 @@ export class SessionEnd extends BaseStage<SessionEndChallenge, unknown> {
render(): TemplateResult {
return html`<ak-flow-card .challenge=${this.challenge}>
<form class="pf-c-form">
<ak-form-static
class="pf-c-form__group"
userAvatar="${this.challenge.pendingUserAvatar}"
user=${this.challenge.pendingUser}
>
<div slot="link">
<a href="${ifDefined(this.challenge.flowInfo?.cancelUrl)}"
>${msg("Not you?")}</a
>
</div>
</ak-form-static>
<p>
${msg(
str`You've logged out of ${this.challenge.applicationName}. You can go back to the overview to launch another application, or log out of your authentik account.`,
)}
</p>
<a href="${globalAK().api.base}" class="pf-c-button pf-m-primary">
${msg("Go back to overview")}
</a>
${
this.challenge.invalidationFlowUrl
? html`
<a
href="${this.challenge.invalidationFlowUrl}"
class="pf-c-button pf-m-secondary"
id="logout"
>
${msg(str`Log out of ${this.challenge.brandName}`)}
</a>
`
: nothing
}
${
this.challenge.applicationLaunchUrl && this.challenge.applicationName
? html`
<a
href="${this.challenge.applicationLaunchUrl}"
class="pf-c-button pf-m-secondary"
>
${msg(str`Log back into ${this.challenge.applicationName}`)}
</a>
`
: nothing
}
</form>
</div></ak-flow-card>`;
<form class="pf-c-form">
<ak-form-static
class="pf-c-form__group"
userAvatar="${this.challenge.pendingUserAvatar}"
user=${this.challenge.pendingUser}
>
<div slot="link">
<a href="${ifDefined(this.challenge.flowInfo?.cancelUrl)}"
>${msg("Not you?")}</a
>
</div>
</ak-form-static>
<p>
${msg(
str`You've logged out of ${this.challenge.applicationName}. You can go back to the overview to launch another application, or log out of your authentik account.`,
)}
</p>
<a href="${globalAK().api.base}" class="pf-c-button pf-m-primary">
${msg("Go back to overview")}
</a>
${this.challenge.invalidationFlowUrl
? html`
<a
href="${this.challenge.invalidationFlowUrl}"
class="pf-c-button pf-m-secondary"
id="logout"
>
${msg(str`Log out of ${this.challenge.brandName}`)}
</a>
`
: nothing}
${this.challenge.applicationLaunchUrl && this.challenge.applicationName
? html`
<a
href="${this.challenge.applicationLaunchUrl}"
class="pf-c-button pf-m-secondary"
>
${msg(str`Log back into ${this.challenge.applicationName}`)}
</a>
`
: nothing}
</form>
</ak-flow-card>`;
}
}
+30 -31
View File
@@ -30,40 +30,39 @@ export class OAuth2DeviceCode extends BaseStage<
render(): TemplateResult {
return html`<ak-flow-card .challenge=${this.challenge}>
<form
class="pf-c-form"
@submit=${(e: Event) => {
this.submitForm(e);
}}
<form
class="pf-c-form"
@submit=${(e: Event) => {
this.submitForm(e);
}}
>
<p>${msg("Enter the code shown on your device.")}</p>
<ak-form-element
label="${msg("Code")}"
required
class="pf-c-form__group"
.errors=${(this.challenge?.responseErrors || {}).code}
>
<p>${msg("Enter the code shown on your device.")}</p>
<ak-form-element
label="${msg("Code")}"
<input
type="text"
name="code"
inputmode="numeric"
pattern="[0-9]*"
placeholder="${msg("Please enter your Code")}"
autofocus=""
autocomplete="off"
class="pf-c-form-control"
value=""
required
class="pf-c-form__group"
.errors=${(this.challenge?.responseErrors || {}).code}
>
<input
type="text"
name="code"
inputmode="numeric"
pattern="[0-9]*"
placeholder="${msg("Please enter your Code")}"
autofocus=""
autocomplete="off"
class="pf-c-form-control"
value=""
required
/>
</ak-form-element>
/>
</ak-form-element>
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${msg("Continue")}
</button>
</div>
</form>
</div>
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${msg("Continue")}
</button>
</div>
</form>
</ak-flow-card>`;
}
}
+11 -16
View File
@@ -22,22 +22,17 @@ export class FlowFrameStage extends BaseStage<FrameChallenge, FrameChallengeResp
render(): TemplateResult {
return html`<ak-flow-card .challenge=${this.challenge}>
${
this.challenge.loadingOverlay
? html`<ak-empty-state loading
>${this.challenge.loadingText
? html`<span>${this.challenge.loadingText}</span>`
: nothing}
</ak-empty-state>`
: nothing
}
<iframe
style=${
this.challenge.loadingOverlay ? "width:0;height:0;position:absolute;" : ""
}
src=${this.challenge.url}
></iframe>
</div>
${this.challenge.loadingOverlay
? html`<ak-empty-state loading
>${this.challenge.loadingText
? html`<span>${this.challenge.loadingText}</span>`
: nothing}
</ak-empty-state>`
: nothing}
<iframe
style=${this.challenge.loadingOverlay ? "width:0;height:0;position:absolute;" : ""}
src=${this.challenge.url}
></iframe>
</ak-flow-card>`;
}
}
@@ -32,48 +32,47 @@ export class AuthenticatorSMSStage extends BaseStage<
renderPhoneNumber(): TemplateResult {
return html`<ak-flow-card .challenge=${this.challenge}>
<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"
userAvatar="${this.challenge.pendingUserAvatar}"
user=${this.challenge.pendingUser}
>
<ak-form-static
class="pf-c-form__group"
userAvatar="${this.challenge.pendingUserAvatar}"
user=${this.challenge.pendingUser}
>
<div slot="link">
<a href="${ifDefined(this.challenge.flowInfo?.cancelUrl)}"
>${msg("Not you?")}</a
>
</div>
</ak-form-static>
<ak-form-element
label="${msg("Phone number")}"
required
class="pf-c-form__group"
.errors=${(this.challenge?.responseErrors || {}).phone_number}
>
<input
type="tel"
name="phoneNumber"
placeholder="${msg("Please enter your Phone number.")}"
autofocus=""
autocomplete="tel"
class="pf-c-form-control"
required
/>
</ak-form-element>
${this.renderNonFieldErrors()}
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${msg("Continue")}
</button>
<div slot="link">
<a href="${ifDefined(this.challenge.flowInfo?.cancelUrl)}"
>${msg("Not you?")}</a
>
</div>
</form>
</div>
</ak-flow-card>`;
</ak-form-static>
<ak-form-element
label="${msg("Phone number")}"
required
class="pf-c-form__group"
.errors=${(this.challenge?.responseErrors || {}).phone_number}
>
<input
type="tel"
name="phoneNumber"
placeholder="${msg("Please enter your Phone number.")}"
autofocus=""
autocomplete="tel"
class="pf-c-form-control"
required
/>
</ak-form-element>
${this.renderNonFieldErrors()}
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${msg("Continue")}
</button>
</div>
</form>
</ak-flow-card>`;
}
renderCode(): TemplateResult {
+15 -16
View File
@@ -335,22 +335,21 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
renderMain() {
return html`<ak-flow-card .challenge=${this.challenge}>
<form class="pf-c-form">
<ak-form-static
class="pf-c-form__group"
userAvatar="${this.challenge.pendingUserAvatar}"
user=${this.challenge.pendingUser}
>
<div slot="link">
<a href="${ifDefined(this.challenge.flowInfo?.cancelUrl)}"
>${msg("Not you?")}</a
>
</div>
</ak-form-static>
${this.renderBody()}
</form>
</div>
</ak-flow-card>`;
<form class="pf-c-form">
<ak-form-static
class="pf-c-form__group"
userAvatar="${this.challenge.pendingUserAvatar}"
user=${this.challenge.pendingUser}
>
<div slot="link">
<a href="${ifDefined(this.challenge.flowInfo?.cancelUrl)}"
>${msg("Not you?")}</a
>
</div>
</ak-form-static>
${this.renderBody()}
</form>
</ak-flow-card>`;
}
render() {
@@ -65,19 +65,18 @@ export class UserSettingsPromptStage extends PromptStage {
render(): TemplateResult {
return html`<ak-flow-card .challenge=${this.challenge}>
<form
class="pf-c-form"
@submit=${(e: Event) => {
this.submitForm(e);
}}
>
${this.challenge.fields.map((prompt) => {
return this.renderField(prompt);
})}
${this.renderNonFieldErrors()} ${this.renderContinue()}
</form>
</div>
</ak-flow-card>`;
<form
class="pf-c-form"
@submit=${(e: Event) => {
this.submitForm(e);
}}
>
${this.challenge.fields.map((prompt) => {
return this.renderField(prompt);
})}
${this.renderNonFieldErrors()} ${this.renderContinue()}
</form>
</ak-flow-card>`;
}
}