web/flows: improve authenticator styling (cherry-pick #8560)

web/.eslintignore

@@ -6,3 +6,4 @@ dist
 coverage
 src/locale-codes.ts
 storybook-static/
+src/locales/**

web/src/elements/EmptyState.ts

@@ -1,7 +1,7 @@
 import { AKElement } from "@goauthentik/elements/Base";
 import { PFSize } from "@goauthentik/elements/Spinner";
 
-import { CSSResult, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
@@ -23,7 +23,17 @@ export class EmptyState extends AKElement {
     header = "";
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFEmptyState, PFTitle];
+        return [
+            PFBase,
+            PFEmptyState,
+            PFTitle,
+            css`
+                i.pf-c-empty-state__icon {
+                    height: var(--pf-global--icon--FontSize--2xl);
+                    line-height: var(--pf-global--icon--FontSize--2xl);
+                }
+            `,
+        ];
     }
 
     render(): TemplateResult {

web/src/flow/FlowExecutor.ts

@@ -15,7 +15,7 @@ import "@goauthentik/flow/sources/apple/AppleLoginInit";
 import "@goauthentik/flow/sources/plex/PlexLoginInit";
 import "@goauthentik/flow/stages/FlowErrorStage";
 import "@goauthentik/flow/stages/RedirectStage";
-import { StageHost } from "@goauthentik/flow/stages/base";
+import { StageHost, SubmitOptions } from "@goauthentik/flow/stages/base";
 
 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html, nothing } from "lit";
@@ -189,12 +189,17 @@ export class FlowExecutor extends Interface implements StageHost {
         return globalAK()?.brand.uiTheme || UiThemeEnum.Automatic;
     }
 
-    async submit(payload?: FlowChallengeResponseRequest): Promise<boolean> {
+    async submit(
+        payload?: FlowChallengeResponseRequest,
+        options?: SubmitOptions,
+    ): Promise<boolean> {
         if (!payload) return Promise.reject();
         if (!this.challenge) return Promise.reject();
-        // @ts-ignore
+        // @ts-expect-error
         payload.component = this.challenge.component;
-        this.loading = true;
+        if (!options?.invisible) {
+            this.loading = true;
+        }
         try {
             const challenge = await new FlowsApi(DEFAULT_CONFIG).flowsExecutorSolve({
                 flowSlug: this.flowSlug,

web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts

@@ -40,6 +40,7 @@ export class AuthenticatorStaticStage extends BaseStage<
                     columns: 2;
                     -webkit-columns: 2;
                     -moz-columns: 2;
+                    column-width: 1em;
                     margin-left: var(--pf-global--spacer--xs);
                 }
                 ul li {

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

@@ -2,13 +2,12 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import "@goauthentik/flow/stages/authenticator_validate/AuthenticatorValidateStageCode";
 import "@goauthentik/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo";
 import "@goauthentik/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn";
-import { BaseStage, StageHost } from "@goauthentik/flow/stages/base";
+import { BaseStage, StageHost, SubmitOptions } from "@goauthentik/flow/stages/base";
 import { PasswordManagerPrefill } from "@goauthentik/flow/stages/identification/IdentificationStage";
 
 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
@@ -59,7 +58,7 @@ export class AuthenticatorValidateStage
         // We don't use this.submit here, as we don't want to advance the flow.
         // We just want to notify the backend which challenge has been selected.
         new FlowsApi(DEFAULT_CONFIG).flowsExecutorSolve({
-            flowSlug: this.host.flowSlug || "",
+            flowSlug: this.host?.flowSlug || "",
             query: window.location.search.substring(1),
             flowChallengeResponseRequest: {
                 // @ts-ignore
@@ -73,8 +72,11 @@ export class AuthenticatorValidateStage
         return this._selectedDeviceChallenge;
     }
 
-    submit(payload: AuthenticatorValidationChallengeResponseRequest): Promise<boolean> {
-        return this.host?.submit(payload) || Promise.resolve();
+    submit(
+        payload: AuthenticatorValidationChallengeResponseRequest,
+        options?: SubmitOptions,
+    ): Promise<boolean> {
+        return this.host?.submit(payload, options) || Promise.resolve();
     }
 
     static get styles(): CSSResult[] {
@@ -253,23 +255,7 @@ export class AuthenticatorValidateStage
                 ? this.renderDeviceChallenge()
                 : 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)}"
-                                          >${msg("Not you?")}</a
-                                      >
-                                  </div>
-                              </ak-form-static>
-                              <input
-                                  name="username"
-                                  autocomplete="username"
-                                  type="hidden"
-                                  value="${this.challenge.pendingUser}"
-                              />
+                              ${this.renderUserInfo()}
                               ${this.selectedDeviceChallenge
                                   ? ""
                                   : html`<p>${msg("Select an authentication method.")}</p>`}

web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts

@@ -1,59 +1,34 @@
+import { BaseDeviceStage } from "@goauthentik/app/flow/stages/authenticator_validate/base";
 import "@goauthentik/elements/EmptyState";
 import "@goauthentik/elements/forms/FormElement";
-import "@goauthentik/flow/FormStatic";
-import { AuthenticatorValidateStage } from "@goauthentik/flow/stages/authenticator_validate/AuthenticatorValidateStage";
-import { BaseStage } from "@goauthentik/flow/stages/base";
 import { PasswordManagerPrefill } from "@goauthentik/flow/stages/identification/IdentificationStage";
 
 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import PFForm from "@patternfly/patternfly/components/Form/form.css";
-import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
-import PFLogin from "@patternfly/patternfly/components/Login/login.css";
-import PFTitle from "@patternfly/patternfly/components/Title/title.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import { customElement } from "lit/decorators.js";
 
 import {
     AuthenticatorValidationChallenge,
     AuthenticatorValidationChallengeResponseRequest,
-    DeviceChallenge,
     DeviceClassesEnum,
 } from "@goauthentik/api";
 
 @customElement("ak-stage-authenticator-validate-code")
-export class AuthenticatorValidateStageWebCode extends BaseStage<
+export class AuthenticatorValidateStageWebCode extends BaseDeviceStage<
     AuthenticatorValidationChallenge,
     AuthenticatorValidationChallengeResponseRequest
 > {
-    @property({ attribute: false })
-    deviceChallenge?: DeviceChallenge;
-
-    @property({ type: Boolean })
-    showBackButton = false;
-
     static get styles(): CSSResult[] {
-        return [
-            PFBase,
-            PFLogin,
-            PFForm,
-            PFFormControl,
-            PFTitle,
-            PFButton,
-            css`
-                .icon-description {
-                    display: flex;
-                }
-                .icon-description i {
-                    font-size: 2em;
-                    padding: 0.25em;
-                    padding-right: 0.5em;
-                }
-            `,
-        ];
+        return super.styles.concat(css`
+            .icon-description {
+                display: flex;
+            }
+            .icon-description i {
+                font-size: 2em;
+                padding: 0.25em;
+                padding-right: 0.5em;
+            }
+        `);
     }
 
     render(): TemplateResult {
@@ -62,92 +37,62 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
             </ak-empty-state>`;
         }
         return html`<div class="pf-c-login__main-body">
-                <form
-                    class="pf-c-form"
-                    @submit=${(e: Event) => {
-                        this.submitForm(e);
-                    }}
+            <form
+                class="pf-c-form"
+                @submit=${(e: Event) => {
+                    this.submitForm(e);
+                }}
+            >
+                ${this.renderUserInfo()}
+                <div class="icon-description">
+                    <i
+                        class="fa ${this.deviceChallenge?.deviceClass == DeviceClassesEnum.Sms
+                            ? "fa-key"
+                            : "fa-mobile-alt"}"
+                        aria-hidden="true"
+                    ></i>
+                    ${this.deviceChallenge?.deviceClass == DeviceClassesEnum.Sms
+                        ? html`<p>${msg("A code has been sent to you via SMS.")}</p>`
+                        : html`<p>
+                              ${msg(
+                                  "Open your two-factor authenticator app to view your authentication code.",
+                              )}
+                          </p>`}
+                </div>
+                <ak-form-element
+                    label="${this.deviceChallenge?.deviceClass === DeviceClassesEnum.Static
+                        ? msg("Static token")
+                        : msg("Authentication code")}"
+                    ?required="${true}"
+                    class="pf-c-form__group"
+                    .errors=${(this.challenge?.responseErrors || {})["code"]}
                 >
-                    <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>
-                    <div class="icon-description">
-                        <i
-                            class="fa ${this.deviceChallenge?.deviceClass == DeviceClassesEnum.Sms
-                                ? "fa-key"
-                                : "fa-mobile-alt"}"
-                            aria-hidden="true"
-                        ></i>
-                        ${this.deviceChallenge?.deviceClass == DeviceClassesEnum.Sms
-                            ? html`<p>${msg("A code has been sent to you via SMS.")}</p>`
-                            : html`<p>
-                                  ${msg(
-                                      "Open your two-factor authenticator app to view your authentication code.",
-                                  )}
-                              </p>`}
-                    </div>
-                    <ak-form-element
-                        label="${this.deviceChallenge?.deviceClass === DeviceClassesEnum.Static
-                            ? msg("Static token")
-                            : msg("Authentication code")}"
-                        ?required="${true}"
-                        class="pf-c-form__group"
-                        .errors=${(this.challenge?.responseErrors || {})["code"]}
-                    >
-                        <!-- @ts-ignore -->
-                        <input
-                            type="text"
-                            name="code"
-                            inputmode="${this.deviceChallenge?.deviceClass ===
-                            DeviceClassesEnum.Static
-                                ? "text"
-                                : "numeric"}"
-                            pattern="${this.deviceChallenge?.deviceClass ===
-                            DeviceClassesEnum.Static
-                                ? "[0-9a-zA-Z]*"
-                                : "[0-9]*"}"
-                            placeholder="${msg("Please enter your code")}"
-                            autofocus=""
-                            autocomplete="one-time-code"
-                            class="pf-c-form-control"
-                            value="${PasswordManagerPrefill.totp || ""}"
-                            required
-                        />
-                    </ak-form-element>
+                    <!-- @ts-ignore -->
+                    <input
+                        type="text"
+                        name="code"
+                        inputmode="${this.deviceChallenge?.deviceClass === DeviceClassesEnum.Static
+                            ? "text"
+                            : "numeric"}"
+                        pattern="${this.deviceChallenge?.deviceClass === DeviceClassesEnum.Static
+                            ? "[0-9a-zA-Z]*"
+                            : "[0-9]*"}"
+                        placeholder="${msg("Please enter your code")}"
+                        autofocus=""
+                        autocomplete="one-time-code"
+                        class="pf-c-form-control"
+                        value="${PasswordManagerPrefill.totp || ""}"
+                        required
+                    />
+                </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>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links">
-                    ${this.showBackButton
-                        ? html`<li class="pf-c-login__main-footer-links-item">
-                              <button
-                                  class="pf-c-button pf-m-secondary pf-m-block"
-                                  @click=${() => {
-                                      if (!this.host) return;
-                                      (
-                                          this.host as AuthenticatorValidateStage
-                                      ).selectedDeviceChallenge = undefined;
-                                  }}
-                              >
-                                  ${msg("Return to device picker")}
-                              </button>
-                          </li>`
-                        : html``}
-                </ul>
-            </footer>`;
+                <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>
+                    ${this.renderReturnToDevicePicker()}
+                </div>
+            </form>
+        </div>`;
     }
 }