Files
authentik/web/src/admin/enterprise/EnterpriseLicenseForm.ts
Ken Sternberg 3c2ce40afd web/admin: Text and Textarea Fields that "hide" their contents until prompted (#15024)
* web: Add InvalidationFlow to Radius Provider dialogues

## What

- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
  - Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
    to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`

## Note

Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.

* This (temporary) change is needed to prevent the unit tests from failing.

\# What

\# Why

\# How

\# Designs

\# Test Steps

\# Other Notes

* Revert "This (temporary) change is needed to prevent the unit tests from failing."

This reverts commit dddde09be5.

* web/admin: Provide `hidden` text and textarea components

## Details

This commit provides two new elements (technically, since they're API-unaware), one for `<input
type="text">`, and one for `<textarea>`, that provide for the ability to create fields that are (or
can be) hidden. A new boolean attribute, `revealed`, shows the state of the component (the content
is therefore *not* revealed by default).

It also includes a third new element, `ak-visibility-toggle`, that creates a hide/show toggle with
all the right icons, styling, and eventing.  It's straightforward, and isolating it improved the
DX of everything that uses that feature by quite a bit.

Storybook stories (with autodoc documentation) have been provided for `ak-hidden-text-input`,
`ak-hidden-textarea-input`, and `ak-visibility-toggle`.

## Maintenance Notice

As a maintenance detail, the field `ak-private-text` has been renamed `ak-secret-text` to reflect
its usage, and the places where it was used have all been changed to reflect that update.

* web/component: embed styling (for now) to handle the lightDom/shadowDom/slot conflicts in HorizontalLightComponent and HorizontalFormElement

* Comments and Types. I really shouldn't have to catch this stuff with my eyeballs.

* fix typo

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

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2025-06-14 01:48:34 +02:00

80 lines
2.7 KiB
TypeScript

import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { EVENT_REFRESH_ENTERPRISE } from "@goauthentik/common/constants";
import "@goauthentik/components/ak-secret-textarea-input.js";
import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { EnterpriseApi, License } from "@goauthentik/api";
@customElement("ak-enterprise-license-form")
export class EnterpriseLicenseForm extends ModelForm<License, string> {
@state()
installID?: string;
loadInstance(pk: string): Promise<License> {
return new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseRetrieve({
licenseUuid: pk,
});
}
getSuccessMessage(): string {
return this.instance
? msg("Successfully updated license.")
: msg("Successfully created license.");
}
async load(): Promise<void> {
this.installID = (
await new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseInstallIdRetrieve()
).installId;
}
async send(data: License): Promise<License> {
return (
this.instance
? new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicensePartialUpdate({
licenseUuid: this.instance.licenseUuid || "",
patchedLicenseRequest: data,
})
: new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseCreate({
licenseRequest: data,
})
).then((data) => {
window.dispatchEvent(new CustomEvent(EVENT_REFRESH_ENTERPRISE));
return data;
});
}
renderForm(): TemplateResult {
return html` <ak-form-element-horizontal label=${msg("Install ID")}>
<input
class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
readonly
type="text"
value="${ifDefined(this.installID)}"
/>
</ak-form-element-horizontal>
<ak-secret-textarea-input
name="key"
?revealed=${this.instance === undefined}
label=${msg("License key")}
input-hint="code"
>
</ak-secret-textarea-input>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ak-enterprise-license-form": EnterpriseLicenseForm;
}
}