website/docs: enhance customization docs (#15081)
* drafty * rearrange everything * fix links * fixed link * more links to fix * tweaks * not sure * Optimised images with calibre/image-actions * Update website/docs/add-secure-apps/providers/rac/index.md Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/_global/global.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/sys-mgmt/brands.md Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/_global/global.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/add-secure-apps/providers/rac/index.md Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/_global/global.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/user-admin/customization.mdx Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/user-admin/customization.mdx Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/user-admin/customization.mdx Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/user-admin/customization.mdx Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/user-admin/customization.mdx Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/netlify.toml Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/flow/customization.mdx Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * tweak * separated admin and user again * so many busted things, now unbusted * redirect yesterday's redirects * dewi edits * tweak to bump build * revert package.json change * links, tweaks * Optimised images with calibre/image-actions * Update website/docs/customize/interfaces/admin/customization_admin_ui.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/admin/customization_admin_ui.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/flow/customization_flow.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/flow/customization_flow.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/user/customization_user_ui.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/customize/interfaces/admin/customization_admin_ui.mdx Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * simplify sidebar Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix redirect indent Signed-off-by: Jens Langhammer <jens@goauthentik.io> * rename files Signed-off-by: Jens Langhammer <jens@goauthentik.io> * flows -> flow interface Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Jens Langhammer <jens@goauthentik.io> Co-authored-by: Tana M Berry <tana@goauthentik.io> Co-authored-by: authentik-automation[bot] <135050075+authentik-automation[bot]@users.noreply.github.com> Co-authored-by: Dewi Roberts <dewi@goauthentik.io> Co-authored-by: Dominic R <dominic@sdko.org> Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Tana M Berry
@ -6,8 +6,8 @@ You can customize the behaviour, look, and available resources for your authenti
|
||||
|
||||
- [Policies](./policies/working_with_policies.md)
|
||||
- Interfaces:
|
||||
- [Flows](./interfaces/flow/customization.mdx)
|
||||
- [User interface](./interfaces/user/customization.mdx)
|
||||
- [Admin interface](./interfaces/admin/customization.mdx)
|
||||
- [Flow interface](./interfaces/flow)
|
||||
- [User interface](./interfaces/user)
|
||||
- [Admin interface](./interfaces/admin)
|
||||
- [Blueprints](./blueprints/index.mdx)
|
||||
- [Branding](./branding.md)
|
||||
|
||||
19
website/docs/customize/interfaces/_enabledfeatureslist.mdx
Normal file
19
website/docs/customize/interfaces/_enabledfeatureslist.mdx
Normal file
@ -0,0 +1,19 @@
|
||||
### Enabling/disabling features
|
||||
|
||||
The features listed below can be enabled or disabled through attributes set on the Brand. By default, all of the listed features are enabled. To disable a specific feature, set its value to `false`.
|
||||
|
||||
#### `settings.enabledFeatures.apiDrawer`
|
||||
|
||||
Display the API Request drawer in the upper tool bar.
|
||||
|
||||
#### `settings.enabledFeatures.notificationDrawer`
|
||||
|
||||
Display the Notification drawer in the upper tool bar.
|
||||
|
||||
#### `settings.enabledFeatures.settings`
|
||||
|
||||
Display the Settings link in the upper tool bar.
|
||||
|
||||
#### `settings.enabledFeatures.search`
|
||||
|
||||
Display the Search bar in the upper tool bar.
|
||||
36
website/docs/customize/interfaces/_generalattributes.mdx
Normal file
36
website/docs/customize/interfaces/_generalattributes.mdx
Normal file
@ -0,0 +1,36 @@
|
||||
### General settings (both Admin and User interfaces)
|
||||
|
||||
#### `settings.navbar.userDisplay`
|
||||
|
||||
Configure what is shown in the top right corner. Defaults to `username`. Available options: `username`, `name`, `email`
|
||||
|
||||
#### `settings.theme.base`
|
||||
|
||||
Configure the base color scheme or toggle between dark and light modes. The default setting is `automatic`, which adapts based on the user’s browser preference. Available options: `automatic`, `dark`, `light`.
|
||||
|
||||
**Example**:
|
||||
|
||||
```
|
||||
settings:
|
||||
theme:
|
||||
base: dark
|
||||
```
|
||||
|
||||
#### `settings.theme.background`
|
||||
|
||||
Optional CSS that is applied to the background of the User interface, for example to set a custom background color, gradient, or image.
|
||||
|
||||
```yaml
|
||||
settings:
|
||||
theme:
|
||||
background: >
|
||||
background: url('https://picsum.photos/1920/1080');
|
||||
filter: blur(8px);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
```
|
||||
|
||||
#### `settings.locale`
|
||||
|
||||
The locale which can be configured in the user settings by default. This can be used to preset locales for groups of users, but still let them choose their own preferred locale.
|
||||
@ -1,3 +1,11 @@
|
||||
### Global customization
|
||||
## Global customization
|
||||
|
||||
See [Brand Settings](../../../sys-mgmt/brands.md#branding-settings)
|
||||
To customize the following brand settings, log in to the Admin interface and navigate to **System > Brands > Brand settings**.
|
||||
|
||||
- Title
|
||||
- Logo
|
||||
- Favicon
|
||||
- Default flow background image
|
||||
- Custom CSS
|
||||
|
||||
For more details, see the [Brand settings](../../../sys-mgmt/brands.md#branding-settings) documentation.
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
@ -1,17 +0,0 @@
|
||||
# Customization
|
||||
|
||||
### `settings.pagination.perPage`
|
||||
|
||||
How many items should be retrieved per page. Defaults to 20.
|
||||
|
||||
### `settings.defaults.userPath`
|
||||
|
||||
Default user path which is opened when opening the user list. Defaults to `users`.
|
||||
|
||||
### `settings.theme.base`
|
||||
|
||||
Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`.
|
||||
|
||||
import Global from "../_global/global.mdx";
|
||||
|
||||
<Global />
|
||||
46
website/docs/customize/interfaces/admin/index.mdx
Normal file
46
website/docs/customize/interfaces/admin/index.mdx
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Customize the Admin interface
|
||||
sidebar_label: Admin interface
|
||||
---
|
||||
|
||||
The Admin interface can be customized using attributes configured in [Brands](../../../sys-mgmt/brands.md)
|
||||
|
||||
To add, remove, or modify attributes for a brand, log in to the Admin interface and navigate to **System > Brands > Other global settings > Attributes**.
|
||||
|
||||
Most attributes defined in a brand apply to _both_ the User and Admin interfaces. However, any settings that are specific to only the Admin interface are explicitly noted as such below.
|
||||
|
||||
The following screenshot shows the syntax for setting several attributes for a brand: dark mode, a 3-column display of applications on **My applications** page of the User interface, and hiding the API and Notifications drawers from the Admin interface tool bar.
|
||||
|
||||
|
||||
|
||||
## Custom settings
|
||||
|
||||
The following settings for attributes are grouped by:
|
||||
|
||||
- `enabledFeatures` settings
|
||||
- General settings (used on both the Admin interface and the User interface)
|
||||
- Admin interface only
|
||||
|
||||
import Enabledfeatureslist from "../\_enabledfeatureslist.mdx";
|
||||
|
||||
<Enabledfeatureslist />
|
||||
|
||||
import Generalattributes from "../\_generalattributes.mdx";
|
||||
|
||||
<Generalattributes />
|
||||
|
||||
### Settings for the Admin interface only
|
||||
|
||||
The following settings can only be used to customize the Admin interface, not the User interface.
|
||||
|
||||
#### `settings.pagination.perPage`
|
||||
|
||||
How many items should be retrieved per page. Defaults to 20.
|
||||
|
||||
#### `settings.defaults.userPath`
|
||||
|
||||
Default user path which is used when opening the user list. Defaults to `users`.
|
||||
|
||||
import Global from "../_global/global.mdx";
|
||||
|
||||
<Global />
|
||||
@ -1,11 +0,0 @@
|
||||
# Customization
|
||||
|
||||
Since flows can be executed authenticated or unauthenticated, the default settings can be set via brands _attributes_.
|
||||
|
||||
### `settings.theme.base`
|
||||
|
||||
Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`.
|
||||
|
||||
import Global from "../_global/global.mdx";
|
||||
|
||||
<Global />
|
||||
19
website/docs/customize/interfaces/flow/index.mdx
Normal file
19
website/docs/customize/interfaces/flow/index.mdx
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Customize a flow
|
||||
sidebar_label: Flow interface
|
||||
---
|
||||
|
||||
Typically, settings for flows are defined as defaults in the [Brand settings](../../../sys-mgmt/brands.md). However, it’s important to note that some flows are executed before the specific user is authenticated and thus before authentik can determine which user is viewing the flow (for example, the `default-authentication-flow`!). Consequently, using default settings for all flows ensures a more consistent user experience.
|
||||
|
||||
Two settings that you can configure per flow are the _background image_ for the flow, and the _layout_.
|
||||
|
||||
## Customize a flow's background image
|
||||
|
||||
You can define a:
|
||||
|
||||
- Default background image for all flows, set in the instance's [brand](../../../sys-mgmt/brands.md)
|
||||
- A background image for [one or more specific flows](../../../add-secure-apps/flows-stages/flow/index.md#flow-configuration-options) (overrides the default)
|
||||
|
||||
## Set the layout for a flow
|
||||
|
||||
To define the layout for a flow, edit the flow and under **Appearance settings > Layout** select how the UI displays the flow when it is executed; with stacked elements, content left or right, and sidebar left or right.
|
||||
@ -1,64 +0,0 @@
|
||||
# Customization
|
||||
|
||||
The user interface can be customized through attributes, and will be inherited from a users' groups.
|
||||
|
||||
## Enabling/disabling features
|
||||
|
||||
The following features can be enabled/disabled. By default, all of them are enabled:
|
||||
|
||||
- `settings.enabledFeatures.apiDrawer`
|
||||
|
||||
API Request drawer in navbar
|
||||
|
||||
- `settings.enabledFeatures.notificationDrawer`
|
||||
|
||||
Notification drawer in navbar
|
||||
|
||||
- `settings.enabledFeatures.settings`
|
||||
|
||||
Settings link in navbar
|
||||
|
||||
- `settings.enabledFeatures.applicationEdit`
|
||||
|
||||
Application edit in library (only shown when user is superuser)
|
||||
|
||||
- `settings.enabledFeatures.search`
|
||||
|
||||
Search bar
|
||||
|
||||
## Other configuration
|
||||
|
||||
### `settings.navbar.userDisplay`
|
||||
|
||||
Configure what is shown in the top right corner. Defaults to `username`. Choices: `username`, `name`, `email`
|
||||
|
||||
### `settings.theme.base`
|
||||
|
||||
Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`.
|
||||
|
||||
### `settings.theme.background`
|
||||
|
||||
Optional CSS which is applied in the background of the background of the user interface; for example
|
||||
|
||||
```yaml
|
||||
settings:
|
||||
theme:
|
||||
background: >
|
||||
background: url('https://picsum.photos/1920/1080');
|
||||
filter: blur(8px);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
```
|
||||
|
||||
### `settings.layout.type`
|
||||
|
||||
Which layout to use for the _My applications_ view. Defaults to `row`. Choices: `row`, `2-column`, `3-column`
|
||||
|
||||
### `settings.locale`
|
||||
|
||||
The locale which can be configured in the user settings by default. This can be used to preset locales for groups of users, but still let them choose their own preferred locale
|
||||
|
||||
import Global from "../_global/global.mdx";
|
||||
|
||||
<Global />
|
||||
44
website/docs/customize/interfaces/user/index.mdx
Normal file
44
website/docs/customize/interfaces/user/index.mdx
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Customize the User interface
|
||||
sidebar_label: User interface
|
||||
---
|
||||
|
||||
The User interface can be customized using attributes configured in [Brands](../../../sys-mgmt/brands.md).
|
||||
|
||||
To add, remove, or modify attributes for a brand, log in as an administrator and navigate to **System > Brands > Other global settings > Attributes**.
|
||||
|
||||
Most attributes defined in a brand apply to _both_ the User and Admin interfaces. However, any settings that are specific to only one interface are explicitly noted as such below.
|
||||
|
||||
The following screenshot shows the syntax for setting several attributes for a brand: light mode, a 3-column display of applications on **My applications** page, hiding the API drawer and the Notification drawer from the tool bar, and disallowing users to edit the applications on **My applications** page.
|
||||
|
||||
|
||||
|
||||
## Custom settings
|
||||
|
||||
The following settings for attributes are grouped by:
|
||||
|
||||
- `enabledFeatures` settings
|
||||
- General attributes (used on both the Admin interface and the User interface)
|
||||
- User interface only
|
||||
|
||||
import Enabledfeatureslist from "../\_enabledfeatureslist.mdx";
|
||||
|
||||
<Enabledfeatureslist />
|
||||
|
||||
#### `settings.enabledFeatures.applicationEdit` (User interface only)
|
||||
|
||||
Display the Edit option for each application on the **My applications** page (only shown when user is superuser).
|
||||
|
||||
import Generalattributes from "../\_generalattributes.mdx";
|
||||
|
||||
<Generalattributes />
|
||||
|
||||
### Settings for the User interface only
|
||||
|
||||
#### `settings.layout.type`
|
||||
|
||||
Which layout to use for the **My applications** page. Defaults to `row`. Choices: `row`, `2-column`, `3-column`
|
||||
|
||||
import Global from "../_global/global.mdx";
|
||||
|
||||
<Global />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Reference in New Issue
Block a user