docs: update outdated screenshots (#11630)

# Which Problems Are Solved

Update outdated screenshots in the docs. 

# How the Problems Are Solved

By replacing the outdated ones with current screenshots

# Additional Changes
Replace the usage of "authorization" with "role assignments" in docs
where it was previously missed.

# Additional Context
- Follow-up for PR https://github.com/zitadel/zitadel/pull/11588
- there are some more docs to be updated, which will be done in a
following PR

---------

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Gayathri Vijayan
2026-02-20 12:33:49 +01:00
committed by GitHub
co-authored by Copilot
parent 1494f91f80
commit 9b2507832a
51 changed files with 21 additions and 27 deletions
@@ -1,4 +1,4 @@
In order to access this route, you must create the role `read:messages` in your ZITADEL project and also create an authorization for the service account you created by adding the role to the user. Follow these steps to do so:
In order to access this route, you must create the role `read:messages` in your ZITADEL project and also assign a role to the service account you created by adding the role to the user. Follow these steps to do so:
1. Go to your project and select **Roles**. Click **New**.
@@ -12,7 +12,7 @@ In order to access this route, you must create the role `read:messages` in your
![](../../../public/img/examples/secure-api/service-account-jwt/scopes/3.png)
4. To assign this role to a user, click on **Authorizations**.
4. To assign this role to a user, click on **Role Assignments**.
![](../../../public/img/examples/secure-api/service-account-jwt/scopes/4.png)
@@ -20,7 +20,7 @@ In order to access this route, you must create the role `read:messages` in your
![](../../../public/img/examples/secure-api/service-account-jwt/scopes/5.png)
6. Select the project where this authorization is applicable.
6. Select the project where this role assignment is applicable.
![](../../../public/img/examples/secure-api/service-account-jwt/scopes/6.png)
7. Click **Continue**.
@@ -167,7 +167,7 @@ Give `Alice Admin` the roles `reader` and `admin`.
You should be able to log in to the Demo Application with `Alice Admin` and see all granted projects.
You can log out and log in with `Eric Employee` and you should only have access to the granted projects, but not to the Authorizations tab.
You can log out and log in with `Eric Employee` and you should only have access to the granted projects, but not to the `Role Assignments` tab.
## What next
@@ -176,4 +176,4 @@ You could create another project (eg, `Data Cube`) and grant that project to the
You could also build out the code (PRs welcome :wink:) for this application, for example:
- Create a mock `datacube-web` application and show how SSO between the portal and the application works with ZITADEL.
- Implement a feature in the Authorization tab to assign roles directly from the customer portal.
- Implement a feature in the `Role Assignments` tab to assign roles directly from the customer portal.
@@ -42,9 +42,9 @@ If none of the roles is provided as a user, the user in Django will not be creat
![Project roles in management console](../../../public/img/django/project-roles.png)
Finally, we can assign the roles to users in the project's authorizations tab.
Finally, we can assign the roles to users in the project's `Role Assignments` tab.
![Project authorizations in management console](../../../public/img/django/project-authorizations.png)
![Project role assignments in management console](../../../public/img/django/project-authorizations.png)
### Set up application and obtain secrets
@@ -198,7 +198,7 @@ Never store and commit secrets in the ".env" or settings.py file
### Authentication and authorization
To check the authentication and authorization the views in the polls application are extended with decorators:
To check the authentication and authorization, the views in the polls application are extended with decorators:
```python reference
https://github.com/zitadel/example-python-django-oidc/blob/main/mysite/views.py
+4 -4
View File
@@ -62,7 +62,7 @@ Give the service account a name and a username. Select `Bearer` as *Access Token
![](../../../public/img/go/api-create_service_user.png)
### Create service account and personal access token (PAT)
### Create a service account and a personal access token (PAT)
Once done, from the left panel of the user management, click on Personal Access Token and create a new one.
@@ -205,11 +205,11 @@ Finally, create the role as shown below:
![Create project role in management console](../../../public/img/go/api-project-role.png)
After you have created the role, let's grant it the user, who requested the tasks.
Click on `Authorization` in the navigation and create a new one by selecting the user and the `admin` role.
After you have created the role, let's grant it to the user who requested the tasks.
Click on `Role Assignments` in the navigation and create a new one by selecting the user and the `admin` role.
After successful creation, it should look like:
![Created authorization in management console](../../../public/img/go/api-project-auth.png)
![Created role assignment in management console](../../../public/img/go/api-project-auth.png)
So you should now be able to add a new task:
@@ -226,11 +226,11 @@ Finally, create the role as shown below:
![Create project role in management console](../../../public/img/java-spring/api-project-role.png)
After you have created the role, let's grant it the user, who requested the tasks.
Click on `Authorization` in the navigation and create a new one by selecting the user and the `admin` role.
After you have created the role, let's grant it to the user who requested the tasks.
Click on `Role Assignments` in the navigation and create a new one by selecting the user and the `admin` role.
After successful creation, it should look like:
![Created authorization in management console](../../../public/img/java-spring/api-project-auth.png)
![Created role assignment in management console](../../../public/img/java-spring/api-project-auth.png)
So you should now be able to add a new task:
@@ -24,7 +24,7 @@ Before we can start building our application, we have to do a few setup steps in
<ServiceAccountJWT components={props.components} />
### Give Service Account an authorization
### Assign a role to the Service Account
<ServiceAccountRole components={props.components} />
@@ -11,7 +11,7 @@ import SetupPython from '../imports/_setup_python.mdx';
This integration guide demonstrates the recommended way to incorporate ZITADEL into your Django Python application.
It explains how to check the token validity in the API and how to check for permissions.
By the end of this guide, your application will have three different endpoint which are public, private(valid token) and private-scoped(valid token with specific role).
By the end of this guide, your application will have three different endpoints that are public, private (valid token) and private-scoped (valid token with a specific role).
<Callout>
This documentation references our [example](https://github.com/zitadel/example-django-python-oauth) on GitHub.
@@ -19,7 +19,7 @@ This documentation references our [example](https://github.com/zitadel/example-d
## ZITADEL setup
Before we can start building our application, we have to do a few setup steps in ZITADEL Management Console.
Before we can start building our application, we have to do a few setup steps in the ZITADEL Management Console.
### Create application
@@ -29,7 +29,7 @@ Before we can start building our application, we have to do a few setup steps in
<ServiceAccountJWT components={props.components} />
### Give Service Account an authorization
### Assign a role to the Service Account
<ServiceAccountRole components={props.components} />
@@ -187,7 +187,7 @@ CLIENT_SECRET = "NVAp70IqiGmJldbS...."
![](../../../public/img/python-flask/3.png)
1. Create a service account and a Personal Access Token (PAT) for that user by following [this guide](/guides/integrate/service-accounts/personal-access-token#create-a-service-account-with-a-pat).
2. To enable authorization, follow [this guide](/guides/manage/console/roles) to create a role `read:messages` on your project.
2. To assign roles, follow [this guide](/guides/manage/console/roles) to create a role `read:messages` on your project.
3. Next, add the role `read:messages` to the service account you created. Follow this [guide](/guides/manage/console/roles#role-assignments) for more information on creating a role assignment.
### Run the API
@@ -31,16 +31,10 @@ Make sure that your admins have a [Administrator role](/guides/manage/console/ad
### Create a customer
You do have two different options to create a new Organization.
1. If you are on a specific organization, click the dropdown in the header and press click "+ New Organization"
1. Create a new Organization. Click the dropdown in the header and click "+ New Organization" to be redirected to the create organization screen.
<img src="/docs/img/guides/solution-scenarios/create-org-dropdown.png" alt="Create Organization Dropdown"/>
2. If you are on the instance level, go to the Organization tab and click the "+ New" button above the Organization list.
<img src="/docs/img/guides/solution-scenarios/org-list-add-new.png" alt="Organization List - Add new Organization"/>
No matter which option you choose you will be redirected to the create organization screen.
If the setting "Use your personal account as organization owner" is enabled, your user will automatically get the role "ORG_OWNER" in the organization.
Give the organization a name and create it.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 310 KiB

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 345 KiB

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 347 KiB

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 627 KiB

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 382 KiB

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 270 KiB

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 353 KiB

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 295 KiB

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 356 KiB

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 333 KiB

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 275 KiB

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 193 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 293 KiB

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 294 KiB

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 321 KiB

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 346 KiB

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 310 KiB

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 348 KiB

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 355 KiB

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 260 KiB

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 248 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 273 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 247 KiB

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 268 KiB

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 253 KiB

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 486 KiB

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 388 KiB

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 474 KiB

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 498 KiB

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 194 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 43 KiB