web: provide 'show password' button

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

@@ -6,12 +6,14 @@ import { BaseStage } from "@goauthentik/flow/stages/base";
 
 import { msg, str } from "@lit/localize";
 import { CSSResult, PropertyValues, TemplateResult, css, html, nothing } from "lit";
+import { query } from "lit/decorators.js";
 import { customElement } 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 +46,36 @@ export class IdentificationStage extends BaseStage<
 > {
     form?: HTMLFormElement;
 
+    @query("#ak-stage-identification-password")
+    password!: HTMLInputElement;
+
     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 +85,14 @@ export class IdentificationStage extends BaseStage<
         }
     }
 
+    togglePasswordVisibility(ev: PointerEvent) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        // State is saved in the DOM, and read from the DOM. Directly affects the DOM,
+        // so no `.requestUpdate()` required. Effect is immediately visible.
+        this.password.type = this.password.type === "password" ? "text" : "password";
+    }
+
     autoRedirect(): void {
         if (!this.challenge) return;
         // we only want to auto-redirect to a source if there's only one source
@@ -208,6 +231,8 @@ export class IdentificationStage extends BaseStage<
     }
 
     renderInput(): TemplateResult {
+        const passwordHidden = this.password?.type === "password";
+
         let type: "text" | "email" = "text";
         if (!this.challenge?.userFields || this.challenge.userFields.length === 0) {
             return html`<p>${msg("Select one of the options below to continue.")}</p>`;
@@ -256,15 +281,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 || ""}
+                              />
+                              <button
+                                  class="pf-c-button pf-m-control"
+                                  type="button"
+                                  aria-label=${passwordHidden
+                                      ? msg("Show password")
+                                      : msg("Hide Password")}
+                                  @click=${(ev: PointerEvent) => this.togglePasswordVisibility(ev)}
+                              >
+                                  ${passwordHidden
+                                      ? html`<i class="fas fa-eye" aria-hidden="true"></i>`
+                                      : html`<i class="fas fa-eye-slash" aria-hidden="true"></i>`}
+                              </button>
+                          </div>
                       </ak-form-element>
                   `
                 : nothing}

web/src/flow/stages/password/PasswordStage.ts

@@ -7,11 +7,13 @@ import { PasswordManagerPrefill } from "@goauthentik/flow/stages/identification/
 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
+import { query } 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 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";
@@ -21,20 +23,32 @@ import { PasswordChallenge, PasswordChallengeResponseRequest } from "@goauthenti
 @customElement("ak-stage-password")
 export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChallengeResponseRequest> {
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
+        return [PFBase, PFLogin, PFInputGroup, PFForm, PFFormControl, PFButton, PFTitle];
     }
 
     input?: HTMLInputElement;
 
     timer?: number;
 
+    @query("#ak-stage-password-input")
+    password!: HTMLInputElement;
+
     hasError(field: string): boolean {
         const errors = (this.challenge?.responseErrors || {})[field];
         return (errors || []).length > 0;
     }
 
+    togglePasswordVisibility(ev: PointerEvent) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        // State is saved in the DOM, and read from the DOM. Directly affects the DOM,
+        // so no `.requestUpdate()` required. Effect is immediately visible.
+        this.password.type = this.password.type === "password" ? "text" : "password";
+    }
+
     renderInput(): HTMLInputElement {
         this.input = document.createElement("input");
+        this.input.id = "ak-stage-password-input";
         this.input.type = "password";
         this.input.name = "password";
         this.input.placeholder = msg("Please enter your password");
@@ -78,6 +92,8 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
     }
 
     render(): TemplateResult {
+        const passwordHidden = this.password?.type === "password";
+
         if (!this.challenge) {
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
@@ -115,7 +131,21 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
                         class="pf-c-form__group"
                         .errors=${(this.challenge?.responseErrors || {})["password"]}
                     >
-                        ${this.renderInput()}
+                        <div class="pf-c-input-group">
+                            ${this.renderInput()}
+                            <button
+                                class="pf-c-button pf-m-control"
+                                type="button"
+                                aria-label=${passwordHidden
+                                    ? msg("Show password")
+                                    : msg("Hide Password")}
+                                @click=${(ev: PointerEvent) => this.togglePasswordVisibility(ev)}
+                            >
+                                ${passwordHidden
+                                    ? html`<i class="fas fa-eye" aria-hidden="true"></i>`
+                                    : html`<i class="fas fa-eye-slash" aria-hidden="true"></i>`}
+                            </button>
+                        </div>
                     </ak-form-element>
 
                     ${this.challenge.recoveryUrl