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

web/flows: show cancel link when choosing authenticator chalenge 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-10-20 15:09:01 +02:00
parent c10ce5c679
commit 0db4716e92
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
View File

@ -2,6 +2,7 @@ import { t } from "@lingui/macro";
import { css, CSSResult, html, TemplateResult } from "lit"; import { css, CSSResult, html, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import AKGlobal from "../../../authentik.css"; import AKGlobal from "../../../authentik.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
@ -65,6 +66,9 @@ export class AuthenticatorValidateStage
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css` return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css`
ul {
padding-top: 1rem;
}
ul > li:not(:last-child) { ul > li:not(:last-child) {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -75,7 +79,7 @@ export class AuthenticatorValidateStage
i { i {
font-size: 1.5rem; font-size: 1.5rem;
padding: 1rem 0; padding: 1rem 0;
width: 5rem; width: 3rem;
} }
.right { .right {
display: flex; display: flex;
@ -205,15 +209,34 @@ export class AuthenticatorValidateStage
} }
return html`<header class="pf-c-login__main-header"> return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1> <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
${this.selectedDeviceChallenge
? ""
: html`<p class="pf-c-login__main-header-desc">
${t`Select an authentication method.`}
</p>`}
</header> </header>
${this.selectedDeviceChallenge ${this.selectedDeviceChallenge
? this.renderDeviceChallenge() ? this.renderDeviceChallenge()
: html`<div class="pf-c-login__main-body">${this.renderDevicePicker()}</div> : html`<div class="pf-c-login__main-body">
<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)}"
>${t`Not you?`}</a
>
</div>
</ak-form-static>
<input
name="username"
autocomplete="username"
type="hidden"
value="${this.challenge.pendingUser}"
/>
${this.selectedDeviceChallenge
? ""
: html`<p>${t`Select an authentication method.`}</p>`}
</form>
${this.renderDevicePicker()}
</div>
<footer class="pf-c-login__main-footer"> <footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links"></ul> <ul class="pf-c-login__main-footer-links"></ul>
</footer>`}`; </footer>`}`;