From d2a9b2a34330eeea1bd25ddb20348e1c2bde5d30 Mon Sep 17 00:00:00 2001 From: Ken Sternberg Date: Mon, 4 Dec 2023 09:52:04 -0800 Subject: [PATCH 1/4] web: prettier had opinions about the README --- web/README.md | 94 +++++++++++++++++++++++++-------------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/web/README.md b/web/README.md index 254078922..9a8c1c846 100644 --- a/web/README.md +++ b/web/README.md @@ -7,25 +7,25 @@ for awhile, but at least let's get started. In Peter Naur's 1985 essay [Programming as Theory Building](https://pages.cs.wisc.edu/~remzi/Naur.pdf), programming is described as creating a mental -model of how a program *should* run, then writing the code to test if the program *can* run that +model of how a program _should_ run, then writing the code to test if the program _can_ run that way. -The mental model for the authentik UI is straightforward. There are five "applications" within the +The mental model for the authentik UI is straightforward. There are five "applications" within the UI, each with its own base URL, router, and responsibilities, and each application needs as many as three contexts in which to run. The three contexts corresponds to objects in the API's `model` section, so let's use those names. -- The root `Config`. The root configuration object of the server, containing mostly caching and - error reporting information. This is misleading, however; the `Config` object contains some user - information, specifically a list of permissions the current user (or "no user") has. -- The root `CurrentTenant`. This describes the `Brand` information UIs should use, such as themes, - logos, favicon, and specific default flows for logging in, logging out, and recovering a user - password. -- The current `SessionUser`, the person logged in: username, display name, and various states. - (Note: the authentik server permits administrators to "impersonate" any other user in order to - debug their authentikation experience. If impersonation is active, the `user` field reflects that - user, but it also includes a field, `original`, with the administrator's information.) +- The root `Config`. The root configuration object of the server, containing mostly caching and + error reporting information. This is misleading, however; the `Config` object contains some user + information, specifically a list of permissions the current user (or "no user") has. +- The root `CurrentTenant`. This describes the `Brand` information UIs should use, such as themes, + logos, favicon, and specific default flows for logging in, logging out, and recovering a user + password. +- The current `SessionUser`, the person logged in: username, display name, and various states. + (Note: the authentik server permits administrators to "impersonate" any other user in order to + debug their authentikation experience. If impersonation is active, the `user` field reflects that + user, but it also includes a field, `original`, with the administrator's information.) (There is a fourth context object, Version, but its use is limited to displaying version information and checking for upgrades. Just be aware that you will see it, but you will probably never interact @@ -36,55 +36,55 @@ insides are provided by third-party libraries (Patternfly and Rapidoc, respectiv three are actual applications. The descriptions below are wholly from the view of the user's experience: -- `Flow`: From a given URL, displays a form that requests information from the user to accomplish a - task. Some tasks require the user to be logged in, but many (such as logging in itself!) - obviously do not. -- `User`: Provides the user with access to the applications they can access, plus a few user - settings. -- `Admin`: Provides someone with super-user permissions access to the administrative functions of - the authentik server. +- `Flow`: From a given URL, displays a form that requests information from the user to accomplish a + task. Some tasks require the user to be logged in, but many (such as logging in itself!) + obviously do not. +- `User`: Provides the user with access to the applications they can access, plus a few user + settings. +- `Admin`: Provides someone with super-user permissions access to the administrative functions of + the authentik server. **Mental Model** -- Upon initialization, *every* authentik UI application fetches `Config` and `CurrentTenant`. `User` - and `Admin` will also attempt to load the `SessionUser`; if there is none, the user is kicked out - to the `Flow` for logging into authentik itself. -- `Config`, `CurrentTenant`, and `SessionUser`, are provided by the `@goauthentik/api` application, - not by the codebase under `./web`. (Where you are now). -- `Flow`, `User`, and `Admin` are all called `Interfaces` and are found in - `./web/src/flow/FlowInterface`, `./web/src/user/UserInterface`, `./web/src/admin/AdminInterface`, - respectively. +- Upon initialization, _every_ authentik UI application fetches `Config` and `CurrentTenant`. `User` + and `Admin` will also attempt to load the `SessionUser`; if there is none, the user is kicked out + to the `Flow` for logging into authentik itself. +- `Config`, `CurrentTenant`, and `SessionUser`, are provided by the `@goauthentik/api` application, + not by the codebase under `./web`. (Where you are now). +- `Flow`, `User`, and `Admin` are all called `Interfaces` and are found in + `./web/src/flow/FlowInterface`, `./web/src/user/UserInterface`, `./web/src/admin/AdminInterface`, + respectively. Inside each of these you will find, in a hierarchal order: -- The context layer described above - - A theme managing layer - - The orchestration layer: - - web socket handler for server-generated events - - The router - - Individual routes for each vertical slice and its relationship to other objects: +- The context layer described above + - A theme managing layer + - The orchestration layer: + - web socket handler for server-generated events + - The router + - Individual routes for each vertical slice and its relationship to other objects: Each slice corresponds to an object table on the server, and each slice _usually_ consists of the following: -- A paginated collection display, usually using the `Table` foundation (found in - `./web/src/elements/Table`) -- The ability to view an individual object from the collection, which you may be able to: - - Edit - - Delete -- A form for creating a new object -- Tabs showing that object's relationship to other objects - - Interactive elements for changing or deleting those relationships, or creating new ones. - - The ability to create new objects with which to have that relationship, if they're not part of - the core objects (such as User->MFA authenticator apps, since the latter is not a "core" object - and has no tab of its own). +- A paginated collection display, usually using the `Table` foundation (found in + `./web/src/elements/Table`) +- The ability to view an individual object from the collection, which you may be able to: + - Edit + - Delete +- A form for creating a new object +- Tabs showing that object's relationship to other objects + - Interactive elements for changing or deleting those relationships, or creating new ones. + - The ability to create new objects with which to have that relationship, if they're not part of + the core objects (such as User->MFA authenticator apps, since the latter is not a "core" object + and has no tab of its own). We are still a bit "all over the place" with respect to sub-units and common units; there are folders `common`, `elements`, and `components`, and ideally they would be: -- `common`: non-UI related libraries all of our applications need -- `elements`: UI elements shared among multiple applications that do not need context -- `components`: UI elements shared among multiple that use one or more context +- `common`: non-UI related libraries all of our applications need +- `elements`: UI elements shared among multiple applications that do not need context +- `components`: UI elements shared among multiple that use one or more context ... but at the moment there are some context-sensitive elements, and some UI-related stuff in `common`. From 297c29b2318cabe2c64aa0a1ac4f844652c4dfc4 Mon Sep 17 00:00:00 2001 From: Ken Sternberg Date: Mon, 4 Dec 2023 10:21:26 -0800 Subject: [PATCH 2/4] web: Jens requested that subscription be by default, and it's the right call. --- web/src/elements/Interface/authentikConfigProvider.ts | 2 +- web/src/elements/Interface/capabilitiesProvider.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/elements/Interface/authentikConfigProvider.ts b/web/src/elements/Interface/authentikConfigProvider.ts index 7fba78923..2f2bbcf43 100644 --- a/web/src/elements/Interface/authentikConfigProvider.ts +++ b/web/src/elements/Interface/authentikConfigProvider.ts @@ -10,7 +10,7 @@ type Constructor = new (...args: any[]) => T; export function WithAuthentikConfig>( superclass: T, - subscribe = false, + subscribe = true, ) { class WithAkConfigProvider extends superclass { @consume({ context: authentikConfigContext, subscribe }) diff --git a/web/src/elements/Interface/capabilitiesProvider.ts b/web/src/elements/Interface/capabilitiesProvider.ts index cf2740d9c..402653880 100644 --- a/web/src/elements/Interface/capabilitiesProvider.ts +++ b/web/src/elements/Interface/capabilitiesProvider.ts @@ -47,7 +47,7 @@ class WCC { export function WithCapabilitiesConfig>( superclass: T, - subscribe = false, + subscribe = true, ) { abstract class CapabilitiesContext extends superclass { @consume({ context: authentikConfigContext, subscribe }) From 03fde513138e254d6ef671174421f0cce8522864 Mon Sep 17 00:00:00 2001 From: Ken Sternberg Date: Mon, 4 Dec 2023 10:26:28 -0800 Subject: [PATCH 3/4] web: Jens requested that the default subscription state for contexts be , and it's the right call. --- .../ldap/ak-application-wizard-authentication-by-ldap.ts | 2 +- .../ak-application-wizard-authentication-by-radius.ts | 5 +---- web/src/admin/groups/RelatedUserList.ts | 4 +--- web/src/admin/providers/ldap/LDAPProviderForm.ts | 2 +- web/src/admin/providers/radius/RadiusProviderForm.ts | 9 +++------ web/src/admin/users/UserListPage.ts | 5 +---- web/src/elements/Interface/tenantProvider.ts | 2 +- web/src/elements/PageHeader.ts | 2 +- web/src/elements/sidebar/SidebarBrand.ts | 2 +- 9 files changed, 11 insertions(+), 22 deletions(-) diff --git a/web/src/admin/applications/wizard/methods/ldap/ak-application-wizard-authentication-by-ldap.ts b/web/src/admin/applications/wizard/methods/ldap/ak-application-wizard-authentication-by-ldap.ts index 8858f5bf4..5b23e06b7 100644 --- a/web/src/admin/applications/wizard/methods/ldap/ak-application-wizard-authentication-by-ldap.ts +++ b/web/src/admin/applications/wizard/methods/ldap/ak-application-wizard-authentication-by-ldap.ts @@ -31,7 +31,7 @@ import { } from "./LDAPOptionsAndHelp"; @customElement("ak-application-wizard-authentication-by-ldap") -export class ApplicationWizardApplicationDetails extends WithTenantConfig(BaseProviderPanel, true) { +export class ApplicationWizardApplicationDetails extends WithTenantConfig(BaseProviderPanel) { render() { const provider = this.wizard.provider as LDAPProvider | undefined; diff --git a/web/src/admin/applications/wizard/methods/radius/ak-application-wizard-authentication-by-radius.ts b/web/src/admin/applications/wizard/methods/radius/ak-application-wizard-authentication-by-radius.ts index ab4260df0..9de4b0c0d 100644 --- a/web/src/admin/applications/wizard/methods/radius/ak-application-wizard-authentication-by-radius.ts +++ b/web/src/admin/applications/wizard/methods/radius/ak-application-wizard-authentication-by-radius.ts @@ -16,10 +16,7 @@ import { FlowsInstancesListDesignationEnum, RadiusProvider } from "@goauthentik/ import BaseProviderPanel from "../BaseProviderPanel"; @customElement("ak-application-wizard-authentication-by-radius") -export class ApplicationWizardAuthenticationByRadius extends WithTenantConfig( - BaseProviderPanel, - true, -) { +export class ApplicationWizardAuthenticationByRadius extends WithTenantConfig(BaseProviderPanel) { render() { const provider = this.wizard.provider as RadiusProvider | undefined; diff --git a/web/src/admin/groups/RelatedUserList.ts b/web/src/admin/groups/RelatedUserList.ts index 5a1f0ebd8..7e2c7209c 100644 --- a/web/src/admin/groups/RelatedUserList.ts +++ b/web/src/admin/groups/RelatedUserList.ts @@ -111,9 +111,7 @@ export class RelatedUserAdd extends Form<{ users: number[] }> { @customElement("ak-user-related-list") export class RelatedUserList extends WithTenantConfig( - WithCapabilitiesConfig(Table, true), - true, -) { + WithCapabilitiesConfig(Table)) { expandable = true; checkbox = true; diff --git a/web/src/admin/providers/ldap/LDAPProviderForm.ts b/web/src/admin/providers/ldap/LDAPProviderForm.ts index 34c5005ea..c720bc8dc 100644 --- a/web/src/admin/providers/ldap/LDAPProviderForm.ts +++ b/web/src/admin/providers/ldap/LDAPProviderForm.ts @@ -25,7 +25,7 @@ import { } from "@goauthentik/api"; @customElement("ak-provider-ldap-form") -export class LDAPProviderFormPage extends WithTenantConfig(ModelForm, true) { +export class LDAPProviderFormPage extends WithTenantConfig(ModelForm) { async loadInstance(pk: number): Promise { return new ProvidersApi(DEFAULT_CONFIG).providersLdapRetrieve({ id: pk, diff --git a/web/src/admin/providers/radius/RadiusProviderForm.ts b/web/src/admin/providers/radius/RadiusProviderForm.ts index fda74ef46..c7a843cca 100644 --- a/web/src/admin/providers/radius/RadiusProviderForm.ts +++ b/web/src/admin/providers/radius/RadiusProviderForm.ts @@ -14,10 +14,7 @@ import { customElement } from "lit/decorators.js"; import { FlowsInstancesListDesignationEnum, ProvidersApi, RadiusProvider } from "@goauthentik/api"; @customElement("ak-provider-radius-form") -export class RadiusProviderFormPage extends WithTenantConfig( - ModelForm, - true, -) { +export class RadiusProviderFormPage extends WithTenantConfig(ModelForm) { loadInstance(pk: number): Promise { return new ProvidersApi(DEFAULT_CONFIG).providersRadiusRetrieve({ id: pk, @@ -89,7 +86,7 @@ export class RadiusProviderFormPage extends WithTenantConfig(

${msg( - "When enabled, code-based multi-factor authentication can be used by appending a semicolon and the TOTP code to the password. This should only be enabled if all users that will bind to this provider have a TOTP device configured, as otherwise a password may incorrectly be rejected if it contains a semicolon.", + "When enabled, code-based multi-factor authentication can be used by appending a semicolon and the TOTP code to the password. This should only be enabled if all users that will bind to this provider have a TOTP device configured, as otherwise a password may incorrectly be rejected if it contains a semicolon." )}

@@ -106,7 +103,7 @@ export class RadiusProviderFormPage extends WithTenantConfig( type="text" value="${first( this.instance?.sharedSecret, - randomString(128, ascii_letters + digits), + randomString(128, ascii_letters + digits) )}" class="pf-c-form-control" required diff --git a/web/src/admin/users/UserListPage.ts b/web/src/admin/users/UserListPage.ts index e90228722..afb88f3f6 100644 --- a/web/src/admin/users/UserListPage.ts +++ b/web/src/admin/users/UserListPage.ts @@ -91,10 +91,7 @@ const recoveryButtonStyles = css` `; @customElement("ak-user-list") -export class UserListPage extends WithTenantConfig( - WithCapabilitiesConfig(TablePage, true), - true, -) { +export class UserListPage extends WithTenantConfig(WithCapabilitiesConfig(TablePage)) { expandable = true; checkbox = true; diff --git a/web/src/elements/Interface/tenantProvider.ts b/web/src/elements/Interface/tenantProvider.ts index e1837935c..63d389048 100644 --- a/web/src/elements/Interface/tenantProvider.ts +++ b/web/src/elements/Interface/tenantProvider.ts @@ -10,7 +10,7 @@ type Constructor = abstract new (...args: any[]) => T; export function WithTenantConfig>( superclass: T, - subscribe = false, + subscribe = true, ) { abstract class WithTenantProvider extends superclass { @consume({ context: authentikTenantContext, subscribe }) diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts index ed8219ef9..e1d4b57c9 100644 --- a/web/src/elements/PageHeader.ts +++ b/web/src/elements/PageHeader.ts @@ -24,7 +24,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css"; import { EventsApi } from "@goauthentik/api"; @customElement("ak-page-header") -export class PageHeader extends WithTenantConfig(AKElement, true) { +export class PageHeader extends WithTenantConfig(AKElement) { @property() icon?: string; diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts index b603c3c75..b57d336f7 100644 --- a/web/src/elements/sidebar/SidebarBrand.ts +++ b/web/src/elements/sidebar/SidebarBrand.ts @@ -27,7 +27,7 @@ export const DefaultTenant: CurrentTenant = { }; @customElement("ak-sidebar-brand") -export class SidebarBrand extends WithTenantConfig(AKElement, true) { +export class SidebarBrand extends WithTenantConfig(AKElement) { static get styles(): CSSResult[] { return [ PFBase, From fc80596432a034c07d4d14ab1baa26244aee50f1 Mon Sep 17 00:00:00 2001 From: Ken Sternberg Date: Mon, 4 Dec 2023 10:32:16 -0800 Subject: [PATCH 4/4] web: prettier having opinions after merging with dependent branch --- web/src/admin/groups/RelatedUserList.ts | 3 +-- web/src/admin/providers/radius/RadiusProviderForm.ts | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/web/src/admin/groups/RelatedUserList.ts b/web/src/admin/groups/RelatedUserList.ts index 7e2c7209c..5e2c6b952 100644 --- a/web/src/admin/groups/RelatedUserList.ts +++ b/web/src/admin/groups/RelatedUserList.ts @@ -110,8 +110,7 @@ export class RelatedUserAdd extends Form<{ users: number[] }> { } @customElement("ak-user-related-list") -export class RelatedUserList extends WithTenantConfig( - WithCapabilitiesConfig(Table)) { +export class RelatedUserList extends WithTenantConfig(WithCapabilitiesConfig(Table)) { expandable = true; checkbox = true; diff --git a/web/src/admin/providers/radius/RadiusProviderForm.ts b/web/src/admin/providers/radius/RadiusProviderForm.ts index c7a843cca..8a95f10db 100644 --- a/web/src/admin/providers/radius/RadiusProviderForm.ts +++ b/web/src/admin/providers/radius/RadiusProviderForm.ts @@ -86,7 +86,7 @@ export class RadiusProviderFormPage extends WithTenantConfig(ModelForm

${msg( - "When enabled, code-based multi-factor authentication can be used by appending a semicolon and the TOTP code to the password. This should only be enabled if all users that will bind to this provider have a TOTP device configured, as otherwise a password may incorrectly be rejected if it contains a semicolon." + "When enabled, code-based multi-factor authentication can be used by appending a semicolon and the TOTP code to the password. This should only be enabled if all users that will bind to this provider have a TOTP device configured, as otherwise a password may incorrectly be rejected if it contains a semicolon.", )}

@@ -103,7 +103,7 @@ export class RadiusProviderFormPage extends WithTenantConfig(ModelForm