Ken Sternberg fcf752905b web: ak-checkbox-group for short, static, multi-select events (#9138)
* 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: ak-checkbox-group for short, static, multi-select events

Implements a checkbox groups web component, wholly independent of the API
(although it does implement the 'data-ak-control' protocol, including the
`json()` method that makes it easier to send the data to the Form handler).  The
controller works much like multi-select: `value` returns an array of strings,
the `name` attribute associated with whatever it is you're asking about.

The `required` property only works if you give the whole item a name, as if it
were an input.  Otherwise, it does nothing.

Giving it a `name` also activates the browser standard `formAssociated`
protocol; it works just fine for ordinary HTML forms, and presents to that
protocol the `FormValue` type, so any form using it will automagically convert
it into the CGI (Common Gateway Interface) format of, to use the example from
Storybook:

```
ak-test-checkgroup-input=funky&ak-test-checkgroup-input=invalid
```

Note that the classic CGI format is not automatically key/value; keys can appear
multiple times, and indicate that the value is an array of strings.  Most modern
appservers understand this format. Some do not.

There's a full and complete JSDOC-like comment documenting the component.  I
have even provided CSSPart sections for everything: the wrapper, each line, the
input and its associated label.  The brave or foolhardy can mangle the CSS to
their hearts' content without having to know a thing about Patternfly.

* fix styling alignment with top line

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

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2024-04-05 09:47:38 -07:00
2024-04-05 13:26:57 +02:00
2024-01-23 14:28:06 +01:00
2023-03-06 19:39:08 +01:00
2024-03-04 21:25:25 +01:00
2024-01-23 15:01:46 +01:00
2024-03-04 21:25:25 +01:00
2023-04-19 16:13:45 +02:00
2024-02-28 00:59:04 +01:00

authentik logo


Join Discord GitHub Workflow Status GitHub Workflow Status GitHub Workflow Status Code Coverage Docker pulls Latest version

What is authentik?

authentik is an open-source Identity Provider that emphasizes flexibility and versatility. It can be seamlessly integrated into existing environments to support new protocols. authentik is also a great solution for implementing sign-up, recovery, and other similar features in your application, saving you the hassle of dealing with them.

Installation

For small/test setups it is recommended to use Docker Compose; refer to the documentation.

For bigger setups, there is a Helm Chart here. This is documented here.

Screenshots

Light Dark

Development

See Developer Documentation

Security

See SECURITY.md

Adoption and Contributions

Your organization uses authentik? We'd love to add your logo to the readme and our website! Email us @ hello@goauthentik.io or open a GitHub Issue/PR! For more information on how to contribute to authentik, please refer to our CONTRIBUTING.md file.

Languages
Python 54.4%
TypeScript 34.9%
Go 4.2%
CSS 2.2%
Rust 1.9%
Other 2.3%