web/elements: add ?writeOnly flag for passwords etc

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

web/src/authentik.css

@@ -210,6 +210,9 @@ body {
         --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
         color: var(--ak-dark-foreground);
     }
+    .pf-c-form-control:disabled {
+        background-color: var(--ak-dark-background-light);
+    }
     .pf-c-form-control[readonly] {
         background-color: var(--ak-dark-background-light);
     }

web/src/elements/forms/Form.ts

@@ -108,6 +108,9 @@ export class Form<T> extends LitElement {
         const json: { [key: string]: unknown } = {};
         elements.forEach(element => {
             const values = form._serializeElementValues(element);
+            if (element.hidden) {
+                return;
+            }
             if (element.tagName.toLowerCase() === "select" && "multiple" in element.attributes) {
                 json[element.name] = values;
             } else if (element.tagName.toLowerCase() === "input" && element.type === "date") {

web/src/elements/forms/HorizontalFormElement.ts

@@ -1,13 +1,16 @@
 import { customElement, LitElement, CSSResult, property, css } from "lit-element";
 import { TemplateResult, html } from "lit-html";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import AKGlobal from "../../authentik.css";
+import { t } from "@lingui/macro";
 
 @customElement("ak-form-element-horizontal")
 export class HorizontalFormElement extends LitElement {
 
     static get styles(): CSSResult[] {
-        return [PFForm, PFFormControl, css`
+        return [PFBase, PFForm, PFFormControl, AKGlobal, css`
             .pf-c-form__group {
                 display: grid;
                 grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
@@ -24,6 +27,12 @@ export class HorizontalFormElement extends LitElement {
     @property({ type: Boolean })
     required = false;
 
+    @property({ type: Boolean })
+    writeOnly = false;
+
+    @property({ type: Boolean })
+    writeOnlyActivated = false;
+
     @property()
     errorMessage = "";
 
@@ -46,7 +55,17 @@ export class HorizontalFormElement extends LitElement {
                     (input as HTMLInputElement).name = this.name;
                     break;
                 default:
-                    break;
+                    return;
+            }
+            if (this.writeOnly && !this.writeOnlyActivated) {
+                const i = (input as HTMLInputElement);
+                i.setAttribute("hidden", "true");
+                const handler = (ev: Event) => {
+                    i.removeAttribute("hidden");
+                    this.writeOnlyActivated = true;
+                    i.parentElement?.removeEventListener("click", handler);
+                };
+                i.parentElement?.addEventListener("click", handler);
             }
         });
     }
@@ -60,8 +79,16 @@ export class HorizontalFormElement extends LitElement {
                 </label>
             </div>
             <div class="pf-c-form__group-control">
+                ${this.writeOnly && !this.writeOnlyActivated ?
+                    html`<div class="pf-c-form__horizontal-group">
+                        <input class="pf-c-form-control" type="password" disabled value="**************">
+                    </div>` :
+                    html``}
                 <slot class="pf-c-form__horizontal-group"></slot>
                 <div class="pf-c-form__horizontal-group">
+                    ${this.writeOnly ? html`<p class="pf-c-form__helper-text" aria-live="polite">${
+                        t`Click to change value`
+                    }</p>` : html``}
                     ${this.invalid ? html`<p class="pf-c-form__helper-text pf-m-error" aria-live="polite">${this.errorMessage}</p>` : html``}
                 </div>
             </div>

web/src/pages/crypto/CertificateKeyPairForm.ts

@@ -48,12 +48,14 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
             <ak-form-element-horizontal
                 label=${t`Certificate`}
                 name="certificateData"
+                ?writeOnly=${true}
                 ?required=${true}>
                 <textarea class="pf-c-form-control" required>${ifDefined(this.keyPair?.certificateData)}</textarea>
                 <p class="pf-c-form__helper-text">${t`PEM-encoded Certificate data.`}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 name="keyData"
+                ?writeOnly=${true}
                 label=${t`Private Key`}>
                 <textarea class="pf-c-form-control" >${ifDefined(this.keyPair?.keyData)}</textarea>
                 <p class="pf-c-form__helper-text">${t`Optional Private Key. If this is set, you can use this keypair for encryption.`}</p>

web/src/pages/sources/ldap/LDAPSourceForm.ts

@@ -34,7 +34,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
 
     send = (data: LDAPSource): Promise<LDAPSource> => {
         if (this.source) {
-            return new SourcesApi(DEFAULT_CONFIG).sourcesLdapUpdate({
+            return new SourcesApi(DEFAULT_CONFIG).sourcesLdapPartialUpdate({
                 slug: this.source.slug,
                 data: data
             });
@@ -119,6 +119,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
                     <ak-form-element-horizontal
                         label=${t`Bind Password`}
                         ?required=${true}
+                        ?writeOnly=${true}
                         name="bindPassword">
                         <input type="text" value="${ifDefined(this.source?.bindPassword)}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>

web/src/pages/stages/captcha/CaptchaStageForm.ts

@@ -32,7 +32,7 @@ export class CaptchaStageForm extends Form<CaptchaStage> {
 
     send = (data: CaptchaStage): Promise<CaptchaStage> => {
         if (this.stage) {
-            return new StagesApi(DEFAULT_CONFIG).stagesCaptchaUpdate({
+            return new StagesApi(DEFAULT_CONFIG).stagesCaptchaPartialUpdate({
                 stageUuid: this.stage.pk || "",
                 data: data
             });
@@ -66,6 +66,7 @@ export class CaptchaStageForm extends Form<CaptchaStage> {
                     <ak-form-element-horizontal
                         label=${t`Private Key`}
                         ?required=${true}
+                        ?writeOnly=${true}
                         name="privateKey">
                         <input type="text" value="${ifDefined(this.stage?.privateKey || "")}" class="pf-c-form-control" required>
                         <p class="pf-c-form__helper-text">${t`Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.`}</p>

web/src/pages/stages/email/EmailStageForm.ts

@@ -37,7 +37,7 @@ export class EmailStageForm extends Form<EmailStage> {
 
     send = (data: EmailStage): Promise<EmailStage> => {
         if (this.stage) {
-            return new StagesApi(DEFAULT_CONFIG).stagesEmailUpdate({
+            return new StagesApi(DEFAULT_CONFIG).stagesEmailPartialUpdate({
                 stageUuid: this.stage.pk || "",
                 data: data
             });
@@ -78,6 +78,7 @@ export class EmailStageForm extends Form<EmailStage> {
                     <ak-form-element-horizontal
                         label=${t`SMTP Password`}
                         ?required=${true}
+                        ?writeOnly=${true}
                         name="password">
                         <input type="text" value="${ifDefined(this.stage?.password || "")}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>