diff --git a/web/src/authentik.css b/web/src/authentik.css index 29559ee42..8a3f65d3c 100644 --- a/web/src/authentik.css +++ b/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); } diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts index ee0ebf3c7..87b3bd26b 100644 --- a/web/src/elements/forms/Form.ts +++ b/web/src/elements/forms/Form.ts @@ -108,6 +108,9 @@ export class Form 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") { diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts index 5e7497e4c..17e66b99d 100644 --- a/web/src/elements/forms/HorizontalFormElement.ts +++ b/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 {
+ ${this.writeOnly && !this.writeOnlyActivated ? + html`
+ +
` : + html``}
+ ${this.writeOnly ? html`

${ + t`Click to change value` + }

` : html``} ${this.invalid ? html`

${this.errorMessage}

` : html``}
diff --git a/web/src/pages/crypto/CertificateKeyPairForm.ts b/web/src/pages/crypto/CertificateKeyPairForm.ts index 833955273..c59f4b8b5 100644 --- a/web/src/pages/crypto/CertificateKeyPairForm.ts +++ b/web/src/pages/crypto/CertificateKeyPairForm.ts @@ -48,12 +48,14 @@ export class CertificateKeyPairForm extends Form {

${t`PEM-encoded Certificate data.`}

${t`Optional Private Key. If this is set, you can use this keypair for encryption.`}

diff --git a/web/src/pages/sources/ldap/LDAPSourceForm.ts b/web/src/pages/sources/ldap/LDAPSourceForm.ts index 4218b26e2..7f416da71 100644 --- a/web/src/pages/sources/ldap/LDAPSourceForm.ts +++ b/web/src/pages/sources/ldap/LDAPSourceForm.ts @@ -34,7 +34,7 @@ export class LDAPSourceForm extends Form { send = (data: LDAPSource): Promise => { 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 { diff --git a/web/src/pages/stages/captcha/CaptchaStageForm.ts b/web/src/pages/stages/captcha/CaptchaStageForm.ts index 418918674..d9a1ec4fe 100644 --- a/web/src/pages/stages/captcha/CaptchaStageForm.ts +++ b/web/src/pages/stages/captcha/CaptchaStageForm.ts @@ -32,7 +32,7 @@ export class CaptchaStageForm extends Form { send = (data: CaptchaStage): Promise => { 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 {

${t`Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.`}

diff --git a/web/src/pages/stages/email/EmailStageForm.ts b/web/src/pages/stages/email/EmailStageForm.ts index e360591e8..63d4d7f9a 100644 --- a/web/src/pages/stages/email/EmailStageForm.ts +++ b/web/src/pages/stages/email/EmailStageForm.ts @@ -37,7 +37,7 @@ export class EmailStageForm extends Form { send = (data: EmailStage): Promise => { 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 {