web: prettier did a thing
This commit is contained in:
parent
6cf2de8a7c
commit
c52fa631b4
|
@ -7,25 +7,25 @@ for awhile, but at least let's get started.
|
||||||
|
|
||||||
In Peter Naur's 1985 essay [Programming as Theory
|
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
|
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.
|
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
|
UI, each with its own base URL, router, and responsibilities, and each application needs as many as
|
||||||
three contexts in which to run.
|
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 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
|
- 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
|
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.
|
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,
|
- 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
|
logos, favicon, and specific default flows for logging in, logging out, and recovering a user
|
||||||
password.
|
password.
|
||||||
- The current `SessionUser`, the person logged in: username, display name, and various states.
|
- 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
|
(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
|
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.)
|
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
|
(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
|
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
|
three are actual applications. The descriptions below are wholly from the view of the user's
|
||||||
experience:
|
experience:
|
||||||
|
|
||||||
- `Flow`: From a given URL, displays a form that requests information from the user to accomplish a
|
- `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!)
|
task. Some tasks require the user to be logged in, but many (such as logging in itself!)
|
||||||
obviously do not.
|
obviously do not.
|
||||||
- `User`: Provides the user with access to the applications they can access, plus a few user
|
- `User`: Provides the user with access to the applications they can access, plus a few user
|
||||||
settings.
|
settings.
|
||||||
- `Admin`: Provides someone with super-user permissions access to the administrative functions of
|
- `Admin`: Provides someone with super-user permissions access to the administrative functions of
|
||||||
the authentik server.
|
the authentik server.
|
||||||
|
|
||||||
**Mental Model**
|
**Mental Model**
|
||||||
|
|
||||||
- Upon initialization, *every* authentik UI application fetches `Config` and `CurrentTenant`. `User`
|
- 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
|
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.
|
to the `Flow` for logging into authentik itself.
|
||||||
- `Config`, `CurrentTenant`, and `SessionUser`, are provided by the `@goauthentik/api` application,
|
- `Config`, `CurrentTenant`, and `SessionUser`, are provided by the `@goauthentik/api` application,
|
||||||
not by the codebase under `./web`. (Where you are now).
|
not by the codebase under `./web`. (Where you are now).
|
||||||
- `Flow`, `User`, and `Admin` are all called `Interfaces` and are found in
|
- `Flow`, `User`, and `Admin` are all called `Interfaces` and are found in
|
||||||
`./web/src/flow/FlowInterface`, `./web/src/user/UserInterface`, `./web/src/admin/AdminInterface`,
|
`./web/src/flow/FlowInterface`, `./web/src/user/UserInterface`, `./web/src/admin/AdminInterface`,
|
||||||
respectively.
|
respectively.
|
||||||
|
|
||||||
Inside each of these you will find, in a hierarchal order:
|
Inside each of these you will find, in a hierarchal order:
|
||||||
|
|
||||||
- The context layer described above
|
- The context layer described above
|
||||||
- A theme managing layer
|
- A theme managing layer
|
||||||
- The orchestration layer:
|
- The orchestration layer:
|
||||||
- web socket handler for server-generated events
|
- web socket handler for server-generated events
|
||||||
- The router
|
- The router
|
||||||
- Individual routes for each vertical slice and its relationship to other objects:
|
- 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
|
Each slice corresponds to an object table on the server, and each slice _usually_ consists of the
|
||||||
following:
|
following:
|
||||||
|
|
||||||
- A paginated collection display, usually using the `Table` foundation (found in
|
- A paginated collection display, usually using the `Table` foundation (found in
|
||||||
`./web/src/elements/Table`)
|
`./web/src/elements/Table`)
|
||||||
- The ability to view an individual object from the collection, which you may be able to:
|
- The ability to view an individual object from the collection, which you may be able to:
|
||||||
- Edit
|
- Edit
|
||||||
- Delete
|
- Delete
|
||||||
- A form for creating a new object
|
- A form for creating a new object
|
||||||
- Tabs showing that object's relationship to other objects
|
- Tabs showing that object's relationship to other objects
|
||||||
- Interactive elements for changing or deleting those relationships, or creating new ones.
|
- 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 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
|
the core objects (such as User->MFA authenticator apps, since the latter is not a "core" object
|
||||||
and has no tab of its own).
|
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
|
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:
|
folders `common`, `elements`, and `components`, and ideally they would be:
|
||||||
|
|
||||||
- `common`: non-UI related libraries all of our applications need
|
- `common`: non-UI related libraries all of our applications need
|
||||||
- `elements`: UI elements shared among multiple applications that do not need context
|
- `elements`: UI elements shared among multiple applications that do not need context
|
||||||
- `components`: UI elements shared among multiple that use one or more 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
|
... but at the moment there are some context-sensitive elements, and some UI-related stuff in
|
||||||
`common`.
|
`common`.
|
||||||
|
|
Reference in New Issue