habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'web/config-provider' into web/config-provider-2-tenant

Browse Source 
* web/config-provider: (23 commits)
  web: Added a README with a description of the applications' "mental model," essentially an architectural description.
  stages/email: improve error handling for incorrect template syntax (#7758)
  core: bump github.com/go-openapi/strfmt from 0.21.7 to 0.21.8 (#7768)
  website: bump postcss from 8.4.31 to 8.4.32 in /website (#7770)
  web: bump the eslint group in /tests/wdio with 1 update (#7773)
  website: bump @types/react from 18.2.39 to 18.2.41 in /website (#7769)
  web: bump the eslint group in /web with 1 update (#7772)
  website: fix typos in example URLs (#7774)
  root: include ca-certificates in container (#7763)
  root: don't show warning when app has no URLs to import (#7765)
  web: revert storybook (#7764)
  web: bump the eslint group in /web with 2 updates (#7730)
  website: bump @types/react from 18.2.38 to 18.2.39 in /website (#7720)
  web: bump the storybook group in /web with 5 updates (#7750)
  website/blog: fix email syntax (#7753)
  web: bump the wdio group in /tests/wdio with 3 updates (#7751)
  web: bump the babel group in /web with 3 updates (#7741)
  web: bump the sentry group in /web with 2 updates (#7747)
  web: bump pyright from 1.1.337 to 1.1.338 in /web (#7743)
  website: bump the docusaurus group in /website with 9 updates (#7746)
  ...
This commit is contained in:
Ken Sternberg
2023-12-04 09:46:55 -08:00
parent 115e2f3dcb d4b80c17e8
commit 6cf2de8a7c
22 changed files with 3824 additions and 1643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
web/README.md
View File

@ -3,6 +3,92 @@
This is the default UI for the authentik server. The documentation is going to be a little sparse
for awhile, but at least let's get started.
# The Theory of the authentik UI
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
way.
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.)
(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
with it.)
There are five applications. Two (`loading` and `api-browser`) are trivial applications whose
insides are provided by third-party libraries (Patternfly and Rapidoc, respectively). The other
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.
**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.
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:
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).
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
... but at the moment there are some context-sensitive elements, and some UI-related stuff in
`common`.
# Comments
**NOTE:** The comments in this section are for specific changes to this repository that cannot be

3730
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
web/package.json
View File

@ -37,7 +37,7 @@
"@codemirror/legacy-modes": "^6.3.3",
"@codemirror/theme-one-dark": "^6.1.2",
"@formatjs/intl-listformat": "^7.5.3",
"@fortawesome/fontawesome-free": "^6.5.0",
"@fortawesome/fontawesome-free": "^6.5.1",
"@goauthentik/api": "^2023.10.4-1700591367",
"@lit-labs/context": "^0.4.0",
"@lit-labs/task": "^3.1.0",
@ -45,8 +45,8 @@
"@open-wc/lit-helpers": "^0.6.0",
"@patternfly/elements": "^2.4.0",
"@patternfly/patternfly": "^4.224.2",
"@sentry/browser": "^7.83.0",
"@sentry/tracing": "^7.83.0",
"@sentry/browser": "^7.84.0",
"@sentry/tracing": "^7.84.0",
"@webcomponents/webcomponentsjs": "^2.8.0",
"base64-js": "^1.5.1",
"chart.js": "^4.4.0",
@ -64,13 +64,13 @@
"yaml": "^2.3.4"
},
"devDependencies": {
"@babel/core": "^7.23.3",
"@babel/core": "^7.23.5",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "^7.23.3",
"@babel/plugin-proposal-decorators": "^7.23.5",
"@babel/plugin-transform-private-methods": "^7.23.3",
"@babel/plugin-transform-private-property-in-object": "^7.23.4",
"@babel/plugin-transform-runtime": "^7.23.4",
"@babel/preset-env": "^7.23.3",
"@babel/preset-env": "^7.23.5",
"@babel/preset-typescript": "^7.23.3",
"@hcaptcha/types": "^1.0.3",
"@jackfranklin/rollup-plugin-markdown": "^0.4.0",
@ -82,21 +82,21 @@
"@rollup/plugin-replace": "^5.0.5",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^11.1.5",
"@storybook/addon-essentials": "^7.6.0",
"@storybook/addon-links": "^7.6.0",
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/blocks": "^7.1.1",
"@storybook/web-components": "^7.6.0",
"@storybook/web-components-vite": "^7.6.0",
"@storybook/web-components": "^7.5.3",
"@storybook/web-components-vite": "^7.5.3",
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@types/chart.js": "^2.9.41",
"@types/codemirror": "5.60.15",
"@types/grecaptcha": "^3.0.7",
"@typescript-eslint/eslint-plugin": "^6.13.0",
"@typescript-eslint/parser": "^6.13.0",
"@typescript-eslint/eslint-plugin": "^6.13.1",
"@typescript-eslint/parser": "^6.13.1",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-tsconfig-paths": "^1.0.3",
"cross-env": "^7.0.3",
"eslint": "^8.54.0",
"eslint": "^8.55.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-custom-elements": "0.0.8",
"eslint-plugin-lit": "^1.10.1",
@ -106,14 +106,14 @@
"npm-run-all": "^4.1.5",
"prettier": "^3.1.0",
"pseudolocale": "^2.0.0",
"pyright": "^1.1.337",
"pyright": "^1.1.338",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rollup": "^4.6.0",
"rollup": "^4.6.1",
"rollup-plugin-copy": "^3.5.0",
"rollup-plugin-cssimport": "^1.0.3",
"rollup-plugin-postcss-lit": "^2.1.0",
"storybook": "^7.6.0",
"storybook": "^7.5.3",
"storybook-addon-mock": "^4.3.0",
"ts-lit-plugin": "^2.0.1",
"tslib": "^2.6.2",