web: provide 'show password' button

authentik/flows/tests/test_inspector.py

@@ -46,6 +46,7 @@ def test(self):
         self.assertJSONEqual(
             res.content,
             {
+                "allow_show_password": False,
                 "component": "ak-stage-identification",
                 "flow_info": {
                     "background": flow.background_url,

authentik/stages/identification/models.py

@@ -38,10 +38,11 @@ class IdentificationStage(Stage):
         help_text=_(
             (
                 "When set, shows a password field, instead of showing the "
-                "password field as seaprate step."
+                "password field as separate step."
             ),
         ),
     )
+
     case_insensitive_matching = models.BooleanField(
         default=True,
         help_text=_("When enabled, user fields are matched regardless of their casing."),

authentik/stages/identification/stage.py

@@ -65,6 +65,7 @@ class IdentificationChallenge(Challenge):
 
     user_fields = ListField(child=CharField(), allow_empty=True, allow_null=True)
     password_fields = BooleanField()
+    allow_show_password = BooleanField(default=False)
     application_pre = CharField(required=False)
     flow_designation = ChoiceField(FlowDesignation.choices)
 
@@ -199,6 +200,8 @@ def get_challenge(self) -> Challenge:
                 "primary_action": self.get_primary_action(),
                 "user_fields": current_stage.user_fields,
                 "password_fields": bool(current_stage.password_stage),
+                "allow_show_password": bool(current_stage.password_stage)
+                and current_stage.password_stage.allow_show_password,
                 "show_source_labels": current_stage.show_source_labels,
                 "flow_designation": self.executor.flow.designation,
             }

authentik/stages/password/api.py

@@ -16,6 +16,7 @@ class Meta:
             "backends",
             "configure_flow",
             "failed_attempts_before_cancel",
+            "allow_show_password",
         ]
 
 
@@ -28,6 +29,7 @@ class PasswordStageViewSet(UsedByMixin, ModelViewSet):
         "name",
         "configure_flow",
         "failed_attempts_before_cancel",
+        "allow_show_password",
     ]
     search_fields = ["name"]
     ordering = ["name"]

authentik/stages/password/migrations/0009_passwordstage_allow_show_password.py

@@ -0,0 +1,21 @@
+# Generated by Django 5.0.6 on 2024-07-02 18:14
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("authentik_stages_password", "0008_replace_inbuilt"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="passwordstage",
+            name="allow_show_password",
+            field=models.BooleanField(
+                default=False,
+                help_text="When enabled, provides a 'show password' button with the password input field.",
+            ),
+        ),
+    ]

authentik/stages/password/models.py

@@ -43,6 +43,12 @@ class PasswordStage(ConfigurableStage, Stage):
             "To lock the user out, use a reputation policy and a user_write stage."
         ),
     )
+    allow_show_password = models.BooleanField(
+        default=False,
+        help_text=_(
+            "When enabled, provides a 'show password' button with the password input field."
+        ),
+    )
 
     @property
     def serializer(self) -> type[BaseSerializer]:

authentik/stages/password/stage.py

@@ -9,7 +9,7 @@
 from django.urls import reverse
 from django.utils.translation import gettext as _
 from rest_framework.exceptions import ValidationError
-from rest_framework.fields import CharField
+from rest_framework.fields import BooleanField, CharField
 from sentry_sdk.hub import Hub
 from structlog.stdlib import get_logger
 
@@ -77,6 +77,8 @@ class PasswordChallenge(WithUserInfoChallenge):
 
     component = CharField(default="ak-stage-password")
 
+    allow_show_password = BooleanField(default=False)
+
 
 class PasswordChallengeResponse(ChallengeResponse):
     """Password challenge response"""
@@ -138,6 +140,7 @@ def get_challenge(self) -> Challenge:
         challenge = PasswordChallenge(
             data={
                 "type": ChallengeTypes.NATIVE.value,
+                "allow_show_password": self.executor.current_stage.allow_show_password,
             }
         )
         recovery_flow = Flow.objects.filter(designation=FlowDesignation.RECOVERY)

blueprints/schema.json

@@ -6905,7 +6905,7 @@
                 "password_stage": {
                     "type": "integer",
                     "title": "Password stage",
-                    "description": "When set, shows a password field, instead of showing the password field as seaprate step."
+                    "description": "When set, shows a password field, instead of showing the password field as separate step."
                 },
                 "case_insensitive_matching": {
                     "type": "boolean",
@@ -7207,6 +7207,11 @@
                     "maximum": 2147483647,
                     "title": "Failed attempts before cancel",
                     "description": "How many attempts a user has before the flow is canceled. To lock the user out, use a reputation policy and a user_write stage."
+                },
+                "allow_show_password": {
+                    "type": "boolean",
+                    "title": "Allow show password",
+                    "description": "When enabled, provides a 'show password' button with the password input field."
                 }
             },
             "required": []

schema.yml

@@ -29993,6 +29993,10 @@ paths:
       operationId: stages_password_list
       description: PasswordStage Viewset
       parameters:
+      - in: query
+        name: allow_show_password
+        schema:
+          type: boolean
       - in: query
         name: configure_flow
         schema:
@@ -37117,6 +37121,9 @@ components:
           nullable: true
         password_fields:
           type: boolean
+        allow_show_password:
+          type: boolean
+          default: false
         application_pre:
           type: string
         flow_designation:
@@ -37200,7 +37207,7 @@ components:
           format: uuid
           nullable: true
           description: When set, shows a password field, instead of showing the password
-            field as seaprate step.
+            field as separate step.
         case_insensitive_matching:
           type: boolean
           description: When enabled, user fields are matched regardless of their casing.
@@ -37268,7 +37275,7 @@ components:
           format: uuid
           nullable: true
           description: When set, shows a password field, instead of showing the password
-            field as seaprate step.
+            field as separate step.
         case_insensitive_matching:
           type: boolean
           description: When enabled, user fields are matched regardless of their casing.
@@ -41010,6 +41017,9 @@ components:
           type: string
         recovery_url:
           type: string
+        allow_show_password:
+          type: boolean
+          default: false
       required:
       - pending_user
       - pending_user_avatar
@@ -41293,6 +41303,10 @@ components:
           minimum: -2147483648
           description: How many attempts a user has before the flow is canceled. To
             lock the user out, use a reputation policy and a user_write stage.
+        allow_show_password:
+          type: boolean
+          description: When enabled, provides a 'show password' button with the password
+            input field.
       required:
       - backends
       - component
@@ -41329,6 +41343,10 @@ components:
           minimum: -2147483648
           description: How many attempts a user has before the flow is canceled. To
             lock the user out, use a reputation policy and a user_write stage.
+        allow_show_password:
+          type: boolean
+          description: When enabled, provides a 'show password' button with the password
+            input field.
       required:
       - backends
       - name
@@ -42150,7 +42168,7 @@ components:
           format: uuid
           nullable: true
           description: When set, shows a password field, instead of showing the password
-            field as seaprate step.
+            field as separate step.
         case_insensitive_matching:
           type: boolean
           description: When enabled, user fields are matched regardless of their casing.
@@ -42862,6 +42880,10 @@ components:
           minimum: -2147483648
           description: How many attempts a user has before the flow is canceled. To
             lock the user out, use a reputation policy and a user_write stage.
+        allow_show_password:
+          type: boolean
+          description: When enabled, provides a 'show password' button with the password
+            input field.
     PatchedPermissionAssignRequest:
       type: object
       description: Request to assign a new permission

web/src/admin/stages/password/PasswordStageForm.ts

@@ -2,6 +2,7 @@ import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
+import "@goauthentik/components/ak-switch-input.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
@@ -168,6 +169,12 @@ export class PasswordStageForm extends BaseStageForm<PasswordStage> {
                             )}
                         </p>
                     </ak-form-element-horizontal>
+                    <ak-switch-input
+                        name="allowShowPassword"
+                        label="Allow Show Password"
+                        ?checked=${this.instance?.allowShowPassword ?? false}
+                        help=${msg("Provide users with a 'show password' button.")}
+                    ></ak-switch-input>
                 </div>
             </ak-form-group>`;
     }

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

@@ -5,13 +5,14 @@ import "@goauthentik/elements/forms/FormElement";
 import { BaseStage } from "@goauthentik/flow/stages/base";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, PropertyValues, TemplateResult, css, html, nothing } from "lit";
-import { customElement } from "lit/decorators.js";
+import { CSSResult, PropertyValues, TemplateResult, css, html, nothing, render } from "lit";
+import { customElement, query } from "lit/decorators.js";
 
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 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 PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.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";
@@ -44,23 +45,39 @@ export class IdentificationStage extends BaseStage<
 > {
     form?: HTMLFormElement;
 
+    @query("ak-stage-identification-password")
+    passwordField!: HTMLInputElement;
+
+    @query("ak-stage-identification-toggle-password-visibility")
+    visibilityToggle!: HTMLButtonElement;
+
     static get styles(): CSSResult[] {
-        return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
+        return [
+            PFBase,
+            PFAlert,
+            PFInputGroup,
+            PFLogin,
+            PFForm,
+            PFFormControl,
+            PFTitle,
+            PFButton,
             /* login page's icons */
-            .pf-c-login__main-footer-links-item button {
-                background-color: transparent;
-                border: 0;
-                display: flex;
-                align-items: stretch;
-            }
-            .pf-c-login__main-footer-links-item img {
-                fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
-                width: 100px;
-                max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
-                height: 100%;
-                max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
-            }
-        `);
+            css`
+                .pf-c-login__main-footer-links-item button {
+                    background-color: transparent;
+                    border: 0;
+                    display: flex;
+                    align-items: stretch;
+                }
+                .pf-c-login__main-footer-links-item img {
+                    fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
+                    width: 100px;
+                    max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
+                    height: 100%;
+                    max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
+                }
+            `,
+        ];
     }
 
     updated(changedProperties: PropertyValues<this>) {
@@ -70,6 +87,35 @@ export class IdentificationStage extends BaseStage<
         }
     }
 
+    // See `ak-stage-password` for comments and documentation.
+    togglePasswordVisibility(ev: PointerEvent) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        if (!this.passwordField) {
+            return;
+        }
+        this.passwordField.type = this.passwordField.type === "password" ? "text" : "password";
+        this.renderPasswordVisibilityFeatures();
+    }
+
+    renderPasswordVisibilityFeatures() {
+        if (!this.visibilityToggle) {
+            return;
+        }
+        const show = this.passwordField.type === "password";
+        this.visibilityToggle?.setAttribute(
+            "aria-label",
+            show ? msg("Show password") : msg("Hide password"),
+        );
+        this.visibilityToggle?.querySelector("i")?.remove();
+        render(
+            show
+                ? html`<i class="fas fa-eye" aria-hidden="true"></i>`
+                : html`<i class="fas fa-eye-slash" aria-hidden="true"></i>`,
+            this.visibilityToggle,
+        );
+    }
+
     autoRedirect(): void {
         if (!this.challenge) return;
         // we only want to auto-redirect to a source if there's only one source
@@ -256,15 +302,30 @@ export class IdentificationStage extends BaseStage<
                           class="pf-c-form__group"
                           .errors=${(this.challenge.responseErrors || {})["password"]}
                       >
-                          <input
-                              type="password"
-                              name="password"
-                              placeholder="${msg("Password")}"
-                              autocomplete="current-password"
-                              class="pf-c-form-control"
-                              required
-                              value=${PasswordManagerPrefill.password || ""}
-                          />
+                          <div class="pf-c-input-group">
+                              <input
+                                  id="ak-stage-identification-password"
+                                  type="password"
+                                  name="password"
+                                  placeholder="${msg("Password")}"
+                                  autocomplete="current-password"
+                                  class="pf-c-form-control"
+                                  required
+                                  value=${PasswordManagerPrefill.password || ""}
+                              />
+                              ${this.challenge.allowShowPassword
+                                  ? html` <button
+                                        class="pf-c-button pf-m-control"
+                                        type="button"
+                                        id="ak-stage-identification-toggle-password-visibility"
+                                        aria-label=${msg("Show password")}
+                                        @click=${(ev: PointerEvent) =>
+                                            this.togglePasswordVisibility(ev)}
+                                    >
+                                        <i class="fas fa-eye" aria-hidden="true"></i>
+                                    </button>`
+                                  : nothing}
+                          </div>
                       </ak-form-element>
                   `
                 : nothing}