a01bb551d0
web/standards: fix boolean attribute abuse ( #14662 )
...
* 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/maintenance: correct the usage of boolean (false) attributes
## What
Just cleaning up a bad habit; we have a lot of `?attribute=${true|false}` (or, more alarmingly,
`.attribute=${true|false}`. These should just be `attribute` or be missing; anything else is
unnecessary.
Where the attribute is `true` by default, no changes have been made; there are only a few of them,
and they require re-working of the logic to assist with the changes. Booleans should never be `true` by
default, and if you absolutely cannot find an alternative phrasing that makes having them be `false`
by default a valid choice, they should be `reflect: true` to make their presence visible to screen
readers and debuggers.
## Why
Removing non-standard HTML uses from web components matches our programming standards and is an
important step toward the Authentik Elements NPM package, as well as the Schema-Driven Forms update.
## Boring excessive detail.
Because there are literally hundreds of changes, I've documented the boring ones here.
Changes that do *not* meet the basic criteria of "made the component comply with the standards" are
commented in the PR.
Here are all the Boolean property declarations in the system, delta the ones that declare `= true`;
those are documented at the bottom of this commit, and are not addressed in this PR. This
information is included to guide your decision making. The second block, below, documents the
actual changes made to component declarations throughout our code. The third block, at the bottom,
documents changes not made due to logic and effort constraints.
```
components/ak-switch-input.ts:
@property({ type: Boolean })
checked: boolean = false;
--
components/ak-switch-input.ts:
@property({ type: Boolean })
required = false;
--
components/ak-file-input.ts:
@property({ type: Boolean })
required = false;
--
components/HorizontalLightComponent.ts:
@property({ type: Boolean })
required = false;
--
components/ak-multi-select.ts:
@property({ type: Boolean })
required = false;
--
elements/TreeView.ts:
@property({ type: Boolean })
open = false;
--
components/ak-status-label.ts:
@property({ type: Boolean })
good = false;
--
components/ak-status-label.ts:
@property({ type: Boolean })
compact = false;
--
elements/CodeMirror.ts:
@property({ type: Boolean })
readOnly = false;
--
elements/buttons/ModalButton.ts:
@property({ type: Boolean })
open = false;
--
elements/EmptyState.ts:
@property({ type: Boolean })
fullHeight = false;
--
elements/Tabs.ts:
@property({ type: Boolean })
vertical = false;
--
elements/ak-checkbox-group/ak-checkbox-group.ts:
@property({ type: Boolean })
required = false;
--
elements/Label.ts:
@property({ type: Boolean })
compact = false;
--
elements/forms/FormGroup.ts:
@property({ type: Boolean, reflect: true })
expanded = false;
--
elements/Expand.ts:
@property({ type: Boolean })
expanded = false;
--
elements/forms/HorizontalFormElement.ts:
@property({ type: Boolean })
required = false;
--
elements/forms/HorizontalFormElement.ts:
@property({ type: Boolean })
slugMode = false;
--
elements/forms/SearchSelect/ak-portal.ts:
@property({ type: Boolean, reflect: true })
open = false;
--
elements/Alert.ts:
@property({ type: Boolean })
inline = false;
--
elements/forms/SearchSelect/ak-search-select-view.ts:
@property({ type: Boolean, reflect: true })
open = false;
--
elements/forms/SearchSelect/ak-search-select-view.ts:
@property({ type: Boolean })
blankable = false;
--
elements/sidebar/SidebarItem.ts:
@property({ type: Boolean })
expanded = false;
--
admin/stages/StageWizard.ts:
@property({ type: Boolean })
showBindingPage = false;
--
elements/forms/FormElement.ts:
@property({ type: Boolean })
required = false;
--
admin/common/ak-flow-search/FlowSearch.ts:
@property({ type: Boolean })
required?: boolean = false;
--
admin/applications/ProviderSelectModal.ts:
@property({ type: Boolean })
backchannel = false;
--
elements/forms/SearchSelect/SearchSelect.ts:
@property({ type: Boolean })
blankable = false;
--
admin/applications/components/ak-provider-search-input.ts:
@property({ type: Boolean })
required = false;
--
admin/applications/components/ak-provider-search-input.ts:
@property({ type: Boolean })
blankable = false;
--
admin/applications/components/ak-backchannel-input.ts:
@property({ type: Boolean })
required = false;
--
admin/policies/PolicyWizard.ts:
@property({ type: Boolean })
showBindingPage = false;
```
The attribute 'required' is an HTML native, and is false by default.
Here are all the change pairs around HTML attrbutes:
```
$ git diff | rg -A 1 '\?(backchannel|blankable|checked|compact|expanded|fullHeight|good|inline|open|readOnly|required|showBindingPage|slugMode|vertical)\b'
- ?required=${true}
+ required
- <ak-provider-select-table ?backchannel=${true} .confirm=${this.confirm}>
+ <ak-provider-select-table backchannel .confirm=${this.confirm}>
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${false}
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}>
+ return html` <ak-form-element-horizontal label=${msg("Name")} name="name" required>
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Severity")} ?required=${true} name="severity">
+ <ak-form-element-horizontal label=${msg("Severity")} required name="severity">
- ?showBindingPage=${true}
+ showBindingPage
- ?showBindingPage=${true}
+ showBindingPage
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Title")} ?required=${true} name="title">
+ <ak-form-element-horizontal label=${msg("Title")} required name="title">
- <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
+ <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Stage")} ?required=${true} name="stage">
+ <ak-form-element-horizontal label=${msg("Stage")} required name="stage">
- <ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order">
+ <ak-form-element-horizontal label=${msg("Order")} required name="order">
- ?required=${true}
+ required
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
+ <ak-form-element-horizontal label=${msg("Type")} required name="type">
- ?blankable=${true}
+ blankable
- <ak-label color=${PFColor.Green} ?compact=${true}>
+ <ak-label color=${PFColor.Green} compact>
- ? html`<ak-label color=${PFColor.Red} ?compact=${true}
+ ? html`<ak-label color=${PFColor.Red} compact
- : html`<ak-label color=${PFColor.Green} ?compact=${true}
+ : html`<ak-label color=${PFColor.Green} compact
- ? html`<ak-label color=${PFColor.Orange} ?compact=${true}>
+ ? html`<ak-label color=${PFColor.Orange} compact>
- : html`<ak-label color=${PFColor.Green} ?compact=${true}>
+ : html`<ak-label color=${PFColor.Green} compact>
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Docker URL")} ?required=${true} name="url">
+ <ak-form-element-horizontal label=${msg("Docker URL")} required name="url">
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?showBindingPage=${true}
+ showBindingPage
- ?showBindingPage=${true}
+ showBindingPage
- ?blankable=${true}
+ blankable
- ?blankable=${true}
+ blankable
- ?blankable=${true}
+ blankable
- <ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order">
+ <ak-form-element-horizontal label=${msg("Order")} required name="order">
- <ak-form-element-horizontal label=${msg("Timeout")} ?required=${true} name="timeout">
+ <ak-form-element-horizontal label=${msg("Timeout")} required name="timeout">
- ? html`<ak-label color=${PFColor.Green} ?compact=${true}>
+ ? html`<ak-label color=${PFColor.Green} compact>
- : html`<ak-label color=${PFColor.Orange} ?compact=${true}>
+ : html`<ak-label color=${PFColor.Orange} compact>
- return html`<ak-form-element-horizontal label=${msg("User")} ?required=${true} name="user">
+ return html`<ak-form-element-horizontal label=${msg("User")} required name="user">
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?blankable=${true}
+ blankable
- ?blankable=${true}
+ blankable
- ?blankable=${true}
+ blankable
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?readOnly=${true}
+ readOnly
- return html`<ak-empty-state loading ?fullHeight=${true}></ak-empty-state>`;
+ return html`<ak-empty-state loading fullHeight></ak-empty-state>`;
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- ?blankable=${true}
+ blankable
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- ?blankable=${true}
+ blankable
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- <ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}>
+ <ak-form-element-horizontal label=${msg("Name")} name="name" required>
- <ak-form-element-horizontal label=${msg("Protocol")} ?required=${true} name="protocol">
+ <ak-form-element-horizontal label=${msg("Protocol")} required name="protocol">
- <ak-form-element-horizontal label=${msg("Host")} name="host" ?required=${true}>
+ <ak-form-element-horizontal label=${msg("Host")} name="host" required>
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${false}
- ?blankable=${true}
+ blankable
- ?blankable=${true}
+ blankable
- return html`<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html`<ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?readOnly=${true}
+ readOnly
- ?blankable=${true}
+ blankable
- return html`<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html`<ak-form-element-horizontal label=${msg("Name")} required name="name">
- : html`<ak-label color=${PFColor.Orange} ?compact=${true}>
+ : html`<ak-label color=${PFColor.Orange} compact>
- <ak-label color=${PFColor.Grey} ?compact=${true}> ${msg("Built-in")}</ak-label>
+ <ak-label color=${PFColor.Grey} compact> ${msg("Built-in")}</ak-label>
- return html`<ak-empty-state loading ?fullHeight=${true}></ak-empty-state>`;
+ return html`<ak-empty-state loading fullHeight></ak-empty-state>`;
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-group ?expanded=${false}>
+ <ak-form-group>
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
+ <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
+ <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
+ <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
+ <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- ?required=${true}
+ required
- ?readOnly=${true}
+ readOnly
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
+ <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
- <ak-form-group ?expanded=${true}>
+ <ak-form-group expanded>
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("SMTP Host")} ?required=${true} name="host">
+ <ak-form-element-horizontal label=${msg("SMTP Host")} required name="host">
- <ak-form-element-horizontal label=${msg("SMTP Port")} ?required=${true} name="port">
+ <ak-form-element-horizontal label=${msg("SMTP Port")} required name="port">
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-alert ?inline=${true}>
+ <ak-alert inline>
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Mode")} ?required=${true} name="mode">
+ <ak-form-element-horizontal label=${msg("Mode")} required name="mode">
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("SMTP Host")} ?required=${true} name="host">
+ <ak-form-element-horizontal label=${msg("SMTP Host")} required name="host">
- <ak-form-element-horizontal label=${msg("SMTP Port")} ?required=${true} name="port">
+ <ak-form-element-horizontal label=${msg("SMTP Port")} required name="port">
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?slugMode=${true}
+ slugMode
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Expires")} ?required=${true} name="expires">
+ <ak-form-element-horizontal label=${msg("Expires")} required name="expires">
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Field Key")} ?required=${true} name="fieldKey">
+ <ak-form-element-horizontal label=${msg("Field Key")} required name="fieldKey">
- <ak-form-element-horizontal label=${msg("Label")} ?required=${true} name="label">
+ <ak-form-element-horizontal label=${msg("Label")} required name="label">
- <ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
+ <ak-form-element-horizontal label=${msg("Type")} required name="type">
- <ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order">
+ <ak-form-element-horizontal label=${msg("Order")} required name="order">
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Source")} ?required=${true} name="source">
+ <ak-form-element-horizontal label=${msg("Source")} required name="source">
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
- <ak-alert ?inline=${true}>
+ <ak-alert inline>
- ?required=${true}
+ required
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?blankable=${true}
+ blankable
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("User")} ?required=${true} name="user">
+ <ak-form-element-horizontal label=${msg("User")} required name="user">
- <ak-form-element-horizontal label=${msg("Intent")} ?required=${true} name="intent">
+ <ak-form-element-horizontal label=${msg("Intent")} required name="intent">
- ?required=${true}
+ required
- <input class="pf-c-switch__input" type="checkbox" ?checked=${true} />
+ <input class="pf-c-switch__input" type="checkbox" checked />
- <input class="pf-c-switch__input" type="checkbox" ?checked=${true} />
+ <input class="pf-c-switch__input" type="checkbox" checked />
- ?required=${true}
+ required
- <ak-form-element-horizontal label=${msg("User type")} ?required=${true} name="type">
+ <ak-form-element-horizontal label=${msg("User type")} required name="type">
- <ak-form-element-horizontal label=${msg("Path")} ?required=${true} name="path">
+ <ak-form-element-horizontal label=${msg("Path")} required name="path">
- ?required=${true}
+ required
- ?required=${true}
+ required
- <ak-tabs pageIdentifier="userCredentialsTokens" ?vertical=${true}>
+ <ak-tabs pageIdentifier="userCredentialsTokens" vertical>
- <ak-status-label ?good=${true}></ak-status-label>
+ <ak-status-label good></ak-status-label>
- ?open=${true}
+ open
- ?blankable=${true}
+ blankable
- <ak-tabs ?vertical="${true}">
+ <ak-tabs vertical>
- return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+ return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
- ?required=${true}
+ required
```
The following issues are the `true` by default Booleans. As mentioned, these are **not addressed** by this PR.
```
elements/table/Table.ts::
@property({ type: Boolean })
paginated = true;
elements/forms/ModalForm.ts::
@property({ type: Boolean })
closeAfterSuccessfulSubmit = true;
elements/forms/ModalForm.ts::
@property({ type: Boolean })
showSubmitButton = true;
elements/CodeMirror.ts::
@property({ type: Boolean })
parseValue = true;
elements/LoadingOverlay.ts::
@property({ type: Boolean })
loading = true;
admin/stages/authenticator_validate/AuthenticatorValidateStageForm.ts::
@property({ type: Boolean })
showConfigurationStages = true;
elements/user/sources/SourceSettings.ts::
@property({ type: Boolean })
canConnect = true;
admin/outposts/OutpostHealthSimple.ts::
@property({ attribute: false })
showVersion = true;
elements/wizard/Wizard.ts::
@property({ type: Boolean })
canCancel = true;
elements/wizard/Wizard.ts::
@property({ type: Boolean })
canBack = true;
```
* Prettier had opinions.
* Caught during code review.
* Merged incorrectly; not sure what went wrong, but this re-applies the removal of the syntax from the current LDAPSourceForm.ts from to this branch.
2025-06-06 23:06:25 +00:00
40f598f3f1
web: (ESLint) No else return ( #14558 )
...
web: (ESLint) no-else-return.
2025-05-19 19:34:51 +02:00
f70635c295
web: Clean up browser-only module imports that crash WebDriverIO. ( #14330 )
...
* web: Clean up browser-only module imports that crash WebDriverIO.
* web: Clarify slug format output.
2025-05-02 20:04:05 -04:00
ee58cf0c1c
web: add HTMLTagNameElementMaps to everything to activate lit analyzer ( #10217 )
...
* web: fix esbuild issue with style sheets
Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).
Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.
In standard mode, the following warning appears on the console when running a Flow:
```
Autofocus processing was blocked because a document already has a focused element.
```
In compatibility mode, the following **error** appears on the console when running a Flow:
```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
at initDomMutationObservers (crawler-inject.js:1106:18)
at crawler-inject.js:1114:24
at Array.forEach (<anonymous>)
at initDomMutationObservers (crawler-inject.js:1114:10)
at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```
Despite this error, nothing seems to be broken and flows work as anticipated.
* web: add more linting
* A reliable test for the extra code needed in analyzer, passing shellcheck
* web: re-enable custom-element-manifest and enable component checking in Typescript
This commit includes a monkeypatch to allow custom-element-manifest (CEM) to work correctly again
despite our rich collection of mixins, reactive controllers, symbol-oriented event handlers, and the
like. With that monkeypatch in place, we can now create the CEM manifest file and then exploit it so
that IDEs and the Typescript compilation pass can tell when a component is being used incorrectly;
when the wrong types are being passed to it, or when a required attribute is not initialized.
* Added building the manifest to the build process, rather than storing it. It is not appreciably slow.
* web: the most boring PR in the universe: Add HTMLTagNameElementMap to everyhing
This commit adds HTMLTagNameElementMap entries to every web component in the front end. Activating
and associating the HTMLTagNamElementMap with its class has enabled
[LitAnalyzer](https://github.com/runem/lit-analyzer/tree/master/packages/lit-analyzer ) to reveal a
*lot* of basic problems within the UI, the most popular of which is "missing import." We usually get
away with it because the object being imported was already registered with the browser elsewhere,
but it still surprises me that we haven't gotten any complaints over things like:
```
./src/flow/stages/base.ts
Missing import for <ak-form-static>
96: <ak-form-static
no-missing-import
```
Given how early and fundamental that seems to be in our code, I'd have expected to hear _something_
about it.
I have not enabled most of the possible checks because, well, there are just a ton of warnings when
I do. I'd like to get in and fix those.
Aside from this, I have also _removed_ `customElement` declarations from anything declared as an
`abstract class`. It makes no sense to try and instantiate something that cannot, by definition, be
instantiated. If the class is capable of running on its own, it's not abstract, it just needs to be
overridden in child classes. Before removing the declaration I did check to make sure no other
piece of code was even *trying* to instantiate it, and so far I have detected no failures. Those
elements were:
- elements/forms/Form.ts
- element-/wizard/WizardFormPage.ts
The one that blows my mind, though, is this:
```
src/elements/forms/ProxyForm.ts
6-@customElement("ak-proxy-form")
7:export abstract class ProxyForm extends Form<unknown> {
```
Which, despite being `abstract`, is somehow instantiable?
```
src/admin/outposts/ServiceConnectionListPage.ts: <ak-proxy-form
src/admin/providers/ProviderListPage.ts: <ak-proxy-form
src/admin/sources/SourceWizard.ts: <ak-proxy-form
src/admin/sources/SourceListPage.ts: <ak-proxy-form
src/admin/providers/ProviderWizard.ts: <ak-proxy-form type=${type.component}></ak-proxy-form>
src/admin/stages/StageListPage.ts: <ak-proxy-form
```
I've made a note to investigate.
I've started a new folder where all of my one-off tools for *how* a certain PR was run. It has a
README describing what it's for, and the first tool, `add-htmlelementtagnamemaps-to-everything`, is
its first entry. That tool is also documented internally.
``` Gilbert & Sullivan
I've got a little list,
I've got a little list,
Of all the code that would never be missed,
The duplicate code of cute-and-paste,
The weak abstractions that lead to waste,
The embedded templates-- you get the gist,
There ain't none of 'em that will ever be missed,
And that's why I've got them on my list!
```
2024-07-15 10:54:22 -07:00
b181c551a5
web: expressing success ( #7830 )
...
* web: expressing success
Ever see an idiom that just, I dunno, *annoyed* you?
Automated tools for the win.
* web: repetition, repetition, repetition! [throws chair]
* web: giving the de-duplication treatment to policy mappings.
* Created a BaseStageForm with success message and canonical primary key type for for Providers, Sources, and Stages.
2023-12-13 16:13:28 +01:00
b503379319
web: fix form default submit handler ( #7122 )
...
* web/elements: rename renderInlineForm to renderForm set submit handler to empty function
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* fix all kinds of forms not using the form inheritance correctly
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
2023-10-12 15:12:46 +02:00
af200a6bf9
web: cleanup ( #6664 )
...
* web: remove <p> used for padding and do it properly
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* web: remove .form-help-text as it didn't change anything
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* move data-list styling to correct scope
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* remove title from navbar for docs-only build
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
2023-08-29 18:24:11 +02:00
44a057ed9c
web: Replace lingui.js with lit-localize ( #5761 )
...
* \#\# Details
web: replace lingui with lit/localize
\#\# Changes
This rather massive shift replaces the lingui and `t()` syntax with lit-localize, XLIFF, and the `msg()`
syntax used by lit-localize. 90% of this work was mechanized; simple perl scripts found and replaced
all uses of `t()` with the appropriate corresponding syntax for `msg()` and `msg(str())`.
The XLIFF files were auto-generated from the PO files. They have not been audited, and they should be
checked over by professional translators. The actual _strings_ have not been changed, but as this was
a mechanized change there is always the possibility of mis-translation-- not by the translator, but by
the script.
* web: revise lit/localize: fix two installation issues.
* web: revise localization
TL;DR:
- Replaced all of Lingui's `t()` syntax with `msg()` syntax.
- Mechanically (i.e with a script) converted all of the PO files to XLIFF files
- Refactored the localization code to be a bit smarter:
- the function `getBestMatchLocale` takes the locale lists and a requested locale, and returns the
first match of:
- The locale's code exactly matches the requested locale
- The locale code exactly matches the prefix of the requested locale (i.e the "en" part of "en-US")
- the locale code's prefix exactly matches the prefix of the requested locale
This function is passed to lit-locate's `loadLocale()`.
- `activateLocale()` just calls `loadLocale()` now.
- `autodetectLanguage` searches the following, and picks the first that returns a valid locale
object, before passing it to `loadLocale()`:
- The User's settings
- A `?locale=` component found in `window.location.search`
- The `window.navigator.language` field
- English
The `msg()` only runs when it's run. This seems obvious, but it means that you cannot cache
strings at load time; they must be kept inside functions that are re-run so that the `msg()` engine
can look up the strings in the preferred language of the user at that moment.
You can use thunks-of-strings if you really need them that way.
* Including the 'xliff-converter' in case anyone wants to review it.
* The xliff-converter is tagged as 'xliff-converter', but has been
deleted.
\#\# Details
- Resolves #5171
\#\# Changes
\#\#\# New Features
- Adds a "Add an Application" to the LibraryView if there are no applications and the user is an administrator.
\#\#\# Breaking Changes
- Adds breaking change which causes \<issue\>.
\#\# Checklist
- [ ] Local tests pass (`ak test authentik/`)
- [ ] The code has been formatted (`make lint-fix`)
If an API change has been made
- [ ] The API schema has been updated (`make gen-build`)
If changes to the frontend have been made
- [ ] The code has been formatted (`make web`)
- [ ] The translation files have been updated (`make i18n-extract`)
If applicable
- [ ] The documentation has been updated
- [ ] The documentation has been formatted (`make website`)
* web: fix redundant locales for zh suite.
* web: prettier pass for locale update
* web: localization moderization
Changed the names of the lit-localize commands to make it clear they're
part of the localization effort, and not just "build" and "extract".
* update transifex config
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* fix package lock?
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* use build not compile
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* web: conversion to lit-localize
The CI produced a list of problems that I hadn't caught earlier,
due to a typo ("localize build" is correct, "localize compile" is
not) I had left in package.json. They were minor and linty, but
it was still wise to fix them.
* web: replace lingui with lit/locale
This commit fixes some minor linting issues that were hidden by a typo in package.json. The
issues were not apparently problematic from a Javascript point of view, but they pointed
to sloppy thinking in the progression of types through the system, so I cleaned them
up and formalized the types from LocaleModule to AkLocale.
* web: replace lingui with lit/localize
One problem that has repeatedly come up is that localize's templates do not produce
JavaScript that conforms with our shop style. I've replaced `build-locale` with
a two-step that builds the locale *and* ensures that it conforms to the shop style
via `prettier` every time.
* web: replace lingui with lit-locale
This commit applies the most recent bundle of translations to the
new lit-locale aspect component. It also revises the algorithm
for *finding* the correct locale, replacing the complex fall-back
with some rather straightforward regular expressions.
In the case of Chinese, the fallback comes at the end of the
selection list, which may not be, er, politically valuable
(since Taiwan and Hong Kong come before, being exceptions that
need to be tested). If we need a different order for presentation,
that'll be a future feature.
* web: replace lingui with lit/locale
Well, that was embarassing.
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
Co-authored-by: Jens Langhammer <jens@goauthentik.io >
2023-06-02 08:08:36 -07:00
fef841a458
web/admin: always override send method instead of assigning ( #5426 )
...
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
2023-04-30 19:55:29 +03:00
243be8f7bb
web/admin: default to disable policy execution logging
...
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
2023-02-08 23:26:06 +01:00
ddbd8153e2
web: migrate checkbox to switch ( #4409 )
...
* start migrating to switch
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* general cleanup
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* remove broken Create provider
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* migrate all
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
* migrate table selectors, fix dark theme
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
Signed-off-by: Jens Langhammer <jens@goauthentik.io >
2023-01-11 13:37:49 +01:00
4a91a7d2e2
web: re-organise frontend and cleanup common code ( #3572 )
...
* fix repo in api client
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* web: re-organise files to match their interface
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* core: include version in script tags
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* cleanup maybe broken
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* revert rename
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* web: get rid of Client.ts
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* move more to common
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* more moving
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* format
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* unfuck files that vscode fucked, thanks
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* move more
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* finish moving (maybe)
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* ok more moving
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* fix more stuff that vs code destroyed
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* get rid "web" prefix for virtual package
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* fix locales
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* use custom base element
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* fix css file
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* don't run autoDetectLanguage when importing locale
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* fix circular dependencies
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
* web: fix build
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org >
2022-09-15 00:05:21 +02:00