* web: patternfly hints as ak-web-component
Patternfly 5's "Hints" React Component, but ported to web components.
The discovery that CSS Custom Properties are still available in
child components, even if they're within independent ShadowDOMs,
made this fairly easy to port from Handlebars to Lit-HTML. Moving
the definitions into `:host` and the applications into the root DIV
of the component made duplicating the Patternfly 5 structure
straightforward.
Despite the [Patternfly
Elements]documentation](https://patternflyelements.org/docs/develop/create/),
there's a lot to Patternfly Elements that isn't well documented,
such as their slot controller, which near as I can tell just makes
it easy to determine if a slot with the given name is actually being
used by the client code, but it's hard to tell why, other than that it
provides an easy way to determine if some CSS should be included.
* Pre-commit fixes.
* web: fix some issues with styling found while testing.
* web: separated the "with Title" and "without Title" stories.
* Added footer story, fixed some CSS.
* web: hint controller
Add the `ShowHintController`. This ReactiveController takes a token
in its constructor, and looks in LocalStorage for that token and
an associated value. If that value is not `undefined`, it sets the
field `this.host.showHint` to the value found.
It also provides a `render()` method that provides an `ak-hint-footer`
with a checkbox and the "Don't show this message again," and responds
to clicks on the checkbox by setting the `this.hint.showHint` and
LocalStorage values to "false".
An example web component using it has been supplied.
* web: support dark mode for hints.
This was nifty. Still not entirely sure about the `theme="dark"`
rippling through the product, but in this case it works quite well.
All it took was defining the alternative dark mode values in a CSS
entry, `:host([theme="dark"]) { ... }` and exploiting Patternfly's
already intensely atomized CSS Custom Properties properly.
* web: revise colors to use more of the Authentik dark-mode style.
* Update web/src/components/ak-hint/ak-hint.ts
Signed-off-by: Jens L. <jens@beryju.org>
* remove any
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens L. <jens@beryju.org>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens L <jens@goauthentik.io>
* web: begin refactoring the application for future development
This commit:
- Deletes a bit of code.
- Extracts *all* of the Locale logic into a single folder, turns management of the Locale files over
to Lit itself, and restricts our responsibility to setting the locale on startup and when the user
changes the locale. We do this by converting a lot of internal calls into events; a request to
change a locale isn't a function call, it's an event emitted asking `REQUEST_LOCALE_CHANGE`. We've
even eliminated the `DETECT_LOCALE_CHANGE` event, which redrew elements with text in them, since
Lit's own `@localized()` decorator does that for us automagically.
- We wrap our interfaces in an `ak-locale-context` that handles the startup and listens for the
`REQUEST_LOCALE_CHANGE` event.
- ... and that's pretty much it. Adding `@localized()` as a default behavior to `AKElement` means
no more custom localization is needed *anywhere*.
* web: improve the localization experience
This commit fixes the Storybook story for the localization context component,
and fixes the localization initialization pass so that it is only called once
per interface environment initialization. Since all our interfaces share the
same environment (the Django server), this preserves functionality across
all interfaces.
---------
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
