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

View File

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