* web: merge MFA devices and tokens into unified Credentials tab
Combines the separate "MFA Devices" and "Tokens and App passwords"
tabs into a single "Credentials" tab on the user settings page,
so users can manage all credentials from one place.
Fixes#21637
Signed-off-by: Bapuji Koraganti <bapuk.2008@gmail.com>
* add card title
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Bapuji Koraganti <bapuk.2008@gmail.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* web/admin: allow creating only binding for policies
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* dont show type selector if only one is allowed
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* do the same for stage wizard
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* minor unrelated fix: alignment in table desc
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add option to bind existing policy
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* adjust labels?
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* Clean up post-type select state. Types.
* Clean up brand form.
* Flesh out parse.
* Tidy textarea.
* Fix table alignment when images are present.
* Simplify radio.
* Fix form group layout, styles.
* Flesh out plural helper.
* Flesh out formatted user display name.
* Allow slotted HTML in page description.
* Clean up transclusion types.
* Allow null.
* Flesh out user activation toggle.
* Clean up activation labeling.
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
* Close dialog on navigation.
* web: update dialog, form, and sidebar styles with logical properties and scroll shadows
Migrate dialog padding CSS variables from physical (top/right/bottom/left) to logical
(block-start/inline-end/block-end/inline-start) naming. Add scroll shadow utility
class (ak-m-scroll-shadows) for scrollable regions. Rework radio input and form
control styles including transparent backgrounds, checkbox-style indicators, and
improved hover states. Refactor FormGroup marker to use CSS custom properties for
open/closed states. Move sidebar padding from nav container to scrollable list.
* web: refine elements and components for accessibility, type safety, and consistency
Add ARIA role and label to dialog body, apply scroll shadow classes to modal body,
sidebar nav, and wizard main. Update ak-status-label to support tri-state
(good/bad/null) rendering with ts-pattern matching and a neutral label. Simplify
FormGroup by removing wrapper div around default slot, adding part attributes for
header styling, and changing description to nullable type. Clean up LogViewer and
StaticTable with proper access modifiers, override annotations, and nullable item
types. Simplify ak-switch-input checked binding and remove unused slot attribute
from ak-radio-input help text.
* web: modernize application pages with modalInvoker and updated form patterns
Refactor ApplicationCheckAccessForm to use static form metadata properties
(verboseName, submitVerb, createLabel), formatAPISuccessMessage, and a private
CoreApi instance. Migrate ApplicationViewPage from ak-forms-modal slots to the
modalInvoker directive for both edit and check-access actions. Accept nullable
input in createPaginatedResponse for better null-safety. Fix casing of dropdown
menu items in ApplicationListPage.
* web: migrate remaining view pages to modalInvoker (#21592)
* Fix visibility check, search params.
* Add scroll shadow.
* Partial revert of input layout.
* Tidy groups.
* Fix check access form invoker, styles.
* Optional sizing.
* Lowercase
* Revise checkbox style.
* Close dialog on navigation.
* Fix padding.
* Touch up shadow heights.
* Migrate remaining view pages to modalInvoker, add e2e coverage.
* Fix alignment.
* Fix click handler, add placeholders.
* Fix issue where form field is not serialized.
* web/elements: rename hasSlotted to findSlotted and refactor host styles
Rename the slot-inspection helper on `AKElement` from `hasSlotted` to
`findSlotted` and return the first matching element rather than a
boolean, so callers can both check for presence and reach the node.
Update every call site in the tree (default callers pass no argument
instead of `null`).
Along the way, tidy `AKElement`'s host-style plumbing: expose
`hostStyles` as a getter/setter backed by a `CSSStyleSheet` cache and
move the adoption logic into `attachHostStyles` / `detachHostStyles`
class methods, so subclasses can share the lifecycle. Drop the now
unused `@localized` decorator import.
Also add a `findAssignedSlot` helper in `elements/utils/slots.ts` for
light-DOM → slot lookups, and give `EmptyState` an explicit
`display: block` so empty-state placement doesn't collapse when
wrapped.
* web/chips: tighten chip group rendering and add placeholder class
Make `ChipGroup` generic over its chip value type, expose a
`placeholder` property that renders an inline placeholder when the
default slot is empty, and intercept clicks that land on child chips
so outer handlers can tell "clicked the group" apart from "clicked a
chip". Give the host an explicit `display: block` so the group
participates in layout correctly.
Move the removal tooltip on `Chip` to the right so it doesn't clip at
the top of the row.
In `base/common.css`, add the `ak-m-placeholder` class used by the
new chip-group placeholder and extend `.ak-fade-in` with an opt-in
`ak-m-delayed` modifier that animates height alongside the fade via
`interpolate-size`, so loading cards can slide in without jank.
* web/elements: add scrollbar helpers and polish table styles
Introduce `elements/utils/scrollbars.ts` with `measureScrollbarWidth`
and `applyScrollbarClass`, and call it from `Interface` so the root
document picks up `ak-m-visible-scrollbars` / `ak-m-overlay-scrollbars`
depending on the platform. Add an `ak-m-thin-scrollbar` selector to
the thin-scrollbar rule in `base/scrollbars.css` so ad-hoc containers
can opt in.
Refresh `Table.css`: expose `search-form`, `search-input`,
`pagination-bottom`, and `table` parts; introduce
`--ak-c-table--expandable-overlay--Color` theming for expandable rows
(including a nested-table background pass); add an
`ak-c-table__actions` helper so per-row action buttons wrap
consistently; and teach the host to honor `display-box="contents"` so
tables embedded in `display: contents` parents still participate in
layout checks.
Drop the unused `elements/utils/isVisible.ts`; the only live
`isVisible` helpers live beside their callers under SearchSelect.
* web/buttons: support split-button Dropdown layout
Teach `ak-dropdown` to recognize a PatternFly split-button toggle —
look for `.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button:last-child`
first and fall back to the single-button selector — so a primary
action and a menu trigger can coexist in one dropdown. Drop the
workaround that skipped wiring menu-item click handlers: now that
dropdowns live inside native dialogs, letting a menu-item click
bubble no longer closes the parent modal. Switch the private fields
to `protected` so subclasses can reach them, and anchor the
AKRefreshEvent and outside-click listeners at `window` explicitly
(matching the new `@listen` default).
In `@listen`, flip the default target from `window` to `this`. A
component's own element is the more intuitive default for a decorator
attached to an instance method, and call sites that want the window
now opt in explicitly.
Extend `Dropdown/dropdown.css` with `--pf-c-dropdown__toggle--*`
padding variables so split-button variants get consistent spacing.
* web/forms: improve form ARIA scaffolding and tighten group styles
Add a sticky `ak-c-form__header` row to `Form.css` with a
`form-actions` part so form headers can host an inline title and
action cluster without each form reinventing the layout.
In `Form/form.css`, add a `.ak-m-content-center` variant for forms
that center their body inside a fixed-size container, and introduce a
PatternFly-compatible grid-based Radio label so the input and its
description align cleanly and the whole row is clickable.
Tighten the `FormGroup` summary spacing (use `spacer--sm` inline and
`spacer-xs` block) and hoist the high-contrast overrides onto the
open group so the details marker stays aligned.
Make `AKControlElement` abstract (requiring a `name`), rename
`isValid` → `valid`, declare it as implementing the new
`FormField<T>` interface, and mark it deprecated in favor of
`FormAssociatedElement`. Make `FormField` generic over the JSON
value type, extend `HTMLElement`, and drop the `Jsonifiable` runtime
import in favor of a type-only import. `HorizontalFormElement` now
searches for either legacy control elements or the new `FormField`
shape when picking its focus target.
* web/elements: migrate modal plumbing to the native <dialog> element
Replace the bespoke modal stack with an `<ak-modal>` built on the
browser's native `<dialog>`, and collect every piece of the new
infrastructure under `#elements/dialogs`:
* `ak-modal.ts` / `ak-modal.css` — the element + its PatternFly
compatible styles.
* `dialog.css` — the global `ak-c-dialog` token and backdrop rules,
imported via the new `components/Modal/modal.css` entry point
(replacing the old `base/modal.css` import in `base.css` and
`interface.global.css`).
* `shared.ts` — the `TransclusionChildElement` /
`TransclusionChildSymbol` contract plus the parent-side helpers
(`isTransclusionParentElement`, `slottedElementUpdatedAt`), so
forms and tables hosted inside a modal can signal re-render hints
to the dialog wrapper.
* `directives.ts` / `invokers.ts` / `utils.ts` — the
`modalInvoker`, `renderModal`, and `DialogInit` helpers that
declarative call sites use to open a modal from a button without
imperatively mounting the element.
* `components/` — the ready-made invoker buttons
(`ModalInvokerButton`, `IconEditButton`, `IconEditButtonByTagName`,
`IconPermissionButton`) and the `components.ts` barrel.
* `components/Modal/modal.css` — the short host wrapper that pulls
`dialog.css` into the bundled base stylesheet chain.
Rewire the existing modal consumers to use the new contract:
* `Form` now implements `TransclusionChildElement`, exposes
`verboseName`/`verboseNamePlural`/`createLabel`/`submitVerb`
statics, tracks visibility via `intersectionObserver`, and
forwards `asModalInvoker` / `showModal` through the new
`modalInvoker` / `renderModal` helpers. `ModalForm` and
`ModelForm` follow the same shape. `ModalButton` drops its own
`pf-c-modal-box` padding fix (the dialog handles it).
* `Table` implements `TransclusionChildElement`, dispatches refresh
via `AKRefreshEvent`, and exposes `display-box="contents"` so
tables embedded in dialogs participate in layout checks.
`TablePage` / `TableSearch` widen types and surface `search-form`
/ `search-input` parts for dialog-scoped styling.
* `ak-about-modal`, `ObjectPermissionModal`,
`RACLaunchEndpointModal`, the command palette, and the admin/user
interface roots all move off `#elements/modals` and onto
`#elements/dialogs`.
* `AdminSettingsForm` / `AdminSettingsPage` render their header /
actions through the new `ak-c-form__header` + `form-actions`
slots introduced in the prior Form CSS commit, and swap the
outermost `<section>` for `<main>` for better landmark semantics.
* `elements/utils/render-roots.ts` and
`elements/utils/unsafe.ts` gain dialog-aware helpers (notably a
directive-based replacement for the old `unsafe` builder).
* `base/globals.css` disables overscroll while any dialog is open
via `html[data-dialog-count]`; `package.json` adds the
`#elements/dialogs` barrel alias.
Delete the old `elements/modals/` directory (`ak-modal.ts`,
`shared.ts`, `styles.css`, `utils.ts`) and `styles/authentik/base/modal.css`
now that nothing imports them.
* web/wizards: refactor wizards to dialog-based flow
Rebuild the shared Wizard primitives on top of the new <dialog> contract:
split CreateWizard/utils out of Wizard, rename admin *Wizard.ts entry
points to ak-*-wizard.ts (Policy, Provider, Source, Stage,
PropertyMapping, ServiceConnection), and port the Application wizard
steps to the new WizardStep base. Adds the user wizard and recovery
invoker plus the refreshed Wizard component styles.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* web/admin: migrate forms and list pages to dialog-based modals
Port every admin form, list page, and RBAC surface to the new
TransclusionChildElement / asModalInvoker contract introduced with the
native <dialog> migration. Replace the old ModalButton-driven helpers
with the new modalInvoker/renderModal flow, add the shared
IconCopyButton/IconTokenCopyButton/IconEnrollmentTokenCopyButton
components (with .ak-c-button--icon__progress styling), and refresh
messages, notifications, flow inspector, and user portal consumers to
match. Includes small common/element utility updates picked up along
the way.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* web/test: update browser e2e tests for dialog-based flow
Adjust application, group, session, and user browser tests to the new
wizard and modal selectors introduced by the <dialog> migration and
relax a handful of timeouts that were tight against the old
ModalButton animation sequence.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix visibility detection.
* Fix layout, behavior.
* Fix type.
* Flesh out test revisions.
* Fix type.
* Format.
* Use plural path.
* Fix strict selector in Safari.
* Remove unused.
* Spellcheck.
* Partial type fix.
* Fix translation.
---------
Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
web/buttons: support split-button Dropdown and default @listen to element
Change the `@listen` decorator default target from `window` to `this`
so listeners bind to the host element by default — the more common
case for Lit components. Add explicit `target: window` to the five
existing call sites that dispatch on the window (ak-interface-admin,
APIDrawer, SidebarItem, FlowExecutor, and Dropdown's own refresh
listener).
Also add split-button support to the Dropdown component with
`SplitButtonSelector` / `ToggleButtonSelector` statics and
corresponding CSS padding variables.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Introduce `elements/utils/scrollbars.ts` with `measureScrollbarWidth`
and `applyScrollbarClass`, and call it from `Interface` so the root
document picks up `ak-m-visible-scrollbars` / `ak-m-overlay-scrollbars`
depending on the platform. Add an `ak-m-thin-scrollbar` selector to
`base/scrollbars.css` so ad-hoc containers can opt in.
Drop the unused `elements/utils/isVisible.ts`.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
web/elements: add viewport helpers and opt-in ancestor-box to intersection observer
Some lazy-loaded elements render with `display: contents` so they
don't produce a layout box of their own, which makes
`IntersectionObserver` report them as never visible. Add
`useAncestorBox` to the `intersectionObserver` decorator: when set
(or when the element sets `displayBox="contents"`), fall back to the
nearest ancestor that actually has a layout box and test that against
the viewport.
Extract the lookups into a new `elements/utils/viewport.ts` with
`findNearestBoxTarget` and `isInViewport` helpers that can be reused
outside the decorator.
Forward an optional second argument through to Playwright's
`waitForURL`, so tests can set per-call timeouts and other options
without abandoning the fixture helper.
web/styles: drop modified RedHat fonts and brighten the orange palette
Swap the custom "Modified" RedHat variable fonts for the upstream
variable files (`RedHatDisplayVF.woff2`, `RedHatTextVF.woff2`, plus
italics). The Safari font stack was rendering artifacts on the
modified faces, and the upstream files render identically on the
engines where the modified copies used to be needed.
Also refresh the `--pf-global--palette--orange-*` ramp in
`base/colors.css` with a more saturated oklab curve. The old values
leaned muted and washed out against the new dialog backdrops; the
new values match the branding guide and have enough chroma to be
distinguishable from the tan/gold palette.
web/styles: add ak-c-loading-skeleton component
Introduce `components/Skeleton/skeleton.css`, a small utility class
system for loading placeholders. `.ak-c-loading-skeleton` draws a
configurable grid of "bones" with a shimmer animation and an opt-in
fade-in that respects `prefers-reduced-motion`. The component is
configured with `--ak-c-skeleton--*` custom properties so individual
wizards / forms can size and tint skeletons without bespoke CSS.
No consumers yet; the follow-up wizard refactor uses it in place of
the current bullseye spinner during async step loading.
