This repository has been archived on 2024-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
authentik/web/src
Ken Sternberg 73751e5cd9
web: refactor status label to separate component (#7407)
* web: break circular dependency between AKElement & Interface.

This commit changes the way the root node of the web application shell is
discovered by child components, such that the base class shared by both
no longer results in a circular dependency between the two models.

I've run this in isolation and have seen no failures of discovery; the identity
token exists as soon as the Interface is constructed and is found by every item
on the page.

* web: fix broken typescript references

This built... and then it didn't?  Anyway, the current fix is to
provide type information the AkInterface for the data that consumers
require.

* A quality of life thing: `<ak-status-label good>`

There's an idiom throughout the UI:

``` HTML
<ak-label color=${item.enabled ? PFColor.Green : PFColor.Red}>
      ${item.enabled ? msg("Yes") : msg("No")}
      </ak-label>
```

There are two problems with this.

- Repeating the conditional multiple times is error-prone
- The color scheme doesn't communicate much.

There are uses for ak-label that aren't like this, but I'm focusing on this particular use case,
which occurs about 20 times throughout the UI.

Since it's so common, let's isolate the most common case: `<ak-status-label good />` gives you the
"good" status, and `<ak-status-label/>` gives you the "bad" status, which is the default (no
arguments to the function).

There wasn't much clarity in the system for when to use orange vs red vs grey, but looking through
the use cases, it became clear that Red meant fail/inaccessible, Orange meant "Warning, but not
blocking," and Grey just means "info: this thing is off".

So let's define that with meaning: there are three types, error, warning, and info. Which
corresponds to debugging levels, but whatever, nerds grok that stuff.

So that example at the top becomes

```<ak-status-label ?good=${item.enabled}></ak-status-label>```

... and we can now more clearly understand what that conveys.

There is some heavy tension in this case: this is an easier and quicker-to-write solution to
informing the user of a binary status in an iconic way, but the developer has to remember that it
exists.

Story provided, and changes to the existing uses of the existing idiom provided.

* Added the 'compact label' story to storybook.
2023-11-20 11:24:48 -08:00
..
admin web: refactor status label to separate component (#7407) 2023-11-20 11:24:48 -08:00
assets/images web/flows: update flow background (#7232) 2023-10-19 23:53:27 +02:00
common web: refactor sidebar capabilities for categorical subsections (#7482) 2023-11-20 10:24:59 -08:00
components web: refactor status label to separate component (#7407) 2023-11-20 11:24:48 -08:00
elements web: refactor status label to separate component (#7407) 2023-11-20 11:24:48 -08:00
flow web/flows: don't auto-redirect to first source when passwordless is configured (#7579) 2023-11-15 14:52:48 +01:00
locales web: Replace lingui.js with lit-localize (#5761) 2023-06-02 08:08:36 -07:00
polyfill web: bump @formatjs/intl-listformat from 7.2.2 to 7.3.0 in /web (#5866) 2023-06-08 13:28:15 +02:00
standalone web: refactor locale handler into top-level context handler (#6022) 2023-07-07 14:23:10 +00:00
stories web/flows: add more stories (#6444) 2023-08-03 17:27:58 +02:00
user web: refactor status label to separate component (#7407) 2023-11-20 11:24:48 -08:00
custom.css *: add placeholder custom.css to easily allow user customisation 2022-02-14 20:05:00 +01:00
global.d.ts web/elements: pass full Markdown object to ak-markdown, get title from metadata 2021-12-16 12:18:43 +01:00
locale-codes.ts web: locales: rename fr_FR to fr to match transifex 2023-10-02 13:31:21 +02:00