web/flows: show cancel link when choosing authenticator chalenge
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
c10ce5c679
commit
0db4716e92
|
@ -2,6 +2,7 @@ import { t } from "@lingui/macro";
|
|||
|
||||
import { css, CSSResult, html, TemplateResult } from "lit";
|
||||
import { customElement, state } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
|
||||
import AKGlobal from "../../../authentik.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
|
@ -65,6 +66,9 @@ export class AuthenticatorValidateStage
|
|||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css`
|
||||
ul {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
ul > li:not(:last-child) {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
@ -75,7 +79,7 @@ export class AuthenticatorValidateStage
|
|||
i {
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
width: 5rem;
|
||||
width: 3rem;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
|
@ -205,15 +209,34 @@ export class AuthenticatorValidateStage
|
|||
}
|
||||
return html`<header class="pf-c-login__main-header">
|
||||
<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>
|
||||
${this.selectedDeviceChallenge
|
||||
? 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">
|
||||
<ul class="pf-c-login__main-footer-links"></ul>
|
||||
</footer>`}`;
|
||||
|
|
Reference in New Issue