web/flows: show cancel link when choosing authenticator chalenge

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts

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