web/flow: general ux improvements (#8558)

* message fixes

* format

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* remove inline css, reword

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* don't rely on flow naming to show message

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix tests

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: roney <roney.dsilva@cdmx.in>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/providers/rac/ConnectionTokenList.ts

@@ -61,12 +61,12 @@ export class ConnectionTokenListPage extends Table<ConnectionToken> {
             }}
             .usedBy=${(item: ConnectionToken) => {
                 return new RacApi(DEFAULT_CONFIG).racConnectionTokensUsedByList({
-                    connectionTokenUuid: item.pk,
+                    connectionTokenUuid: item.pk || "",
                 });
             }}
             .delete=${(item: ConnectionToken) => {
                 return new RacApi(DEFAULT_CONFIG).racConnectionTokensDestroy({
-                    connectionTokenUuid: item.pk,
+                    connectionTokenUuid: item.pk || "",
                 });
             }}
         >

web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.stories.ts

@@ -0,0 +1,58 @@
+import type { StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+import "@patternfly/patternfly/components/Login/login.css";
+
+import { AuthenticatorTOTPChallenge, ChallengeChoices, UiThemeEnum } from "@goauthentik/api";
+
+import "../../../stories/flow-interface";
+import "./AuthenticatorTOTPStage";
+
+export default {
+    title: "Flow / Stages / AuthenticatorTOTPStage",
+};
+
+export const LoadingNoChallenge = () => {
+    return html`<ak-storybook-interface theme=${UiThemeEnum.Dark}>
+        <div class="pf-c-login">
+            <div class="pf-c-login__container">
+                <div class="pf-c-login__main">
+                    <ak-stage-authenticator-totp></ak-stage-authenticator-totp>
+                </div>
+            </div>
+        </div>
+    </ak-storybook-interface>`;
+};
+
+export const Challenge: StoryObj = {
+    render: ({ theme, challenge }) => {
+        return html`<ak-storybook-interface theme=${theme}>
+            <div class="pf-c-login">
+                <div class="pf-c-login__container">
+                    <div class="pf-c-login__main">
+                        <ak-stage-authenticator-totp
+                            .challenge=${challenge}
+                        ></ak-stage-authenticator-totp>
+                    </div>
+                </div></div
+        ></ak-storybook-interface>`;
+    },
+    args: {
+        theme: "automatic",
+        challenge: {
+            type: ChallengeChoices.Native,
+            pendingUser: "foo",
+            pendingUserAvatar: "https://picsum.photos/64",
+            configUrl: "",
+        } as AuthenticatorTOTPChallenge,
+    },
+    argTypes: {
+        theme: {
+            options: [UiThemeEnum.Automatic, UiThemeEnum.Light, UiThemeEnum.Dark],
+            control: {
+                type: "select",
+            },
+        },
+    },
+};

web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts

@@ -106,6 +106,11 @@ export class AuthenticatorTOTPStage extends BaseStage<
                             </button>
                         </div>
                     </ak-form-element>
+                    <p>
+                        ${msg(
+                            "Please scan the QR code above using the Microsoft Authenticator, Google Authenticator, or other authenticator apps on your device, and enter the code the device displays below to finish setting up the MFA device.",
+                        )}
+                    </p>
                     <ak-form-element
                         label="${msg("Code")}"
                         ?required="${true}"

web/src/flow/stages/identification/IdentificationStage.ts

@@ -5,7 +5,7 @@ import "@goauthentik/elements/forms/FormElement";
 import { BaseStage } from "@goauthentik/flow/stages/base";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement } from "lit/decorators.js";
 
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
@@ -17,6 +17,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import {
+    FlowDesignationEnum,
     IdentificationChallenge,
     IdentificationChallengeResponseRequest,
     LoginSource,
@@ -220,7 +221,16 @@ export class IdentificationStage extends BaseStage<
             [UserFieldsEnum.Upn]: msg("UPN"),
         };
         const label = OR_LIST_FORMATTERS.format(fields.map((f) => uiFields[f]));
-        return html`<ak-form-element
+        return html`${this.challenge.flowDesignation === FlowDesignationEnum.Recovery
+                ? html`
+                      <p>
+                          ${msg(
+                              "Enter the email associated with your account, and we'll send you a link to reset your password.",
+                          )}
+                      </p>
+                  `
+                : nothing}
+            <ak-form-element
                 label=${label}
                 ?required="${true}"
                 class="pf-c-form__group"