TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-14 12:48:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: image gallery viewer (#905)

Browse Source 
* add assets, photoswipe html element to body

* add single script, gallery for multiple items

* update docs for image gallery

* fix relative links

* inject image script on mount

* replace inline script

* remove facebook, twitter, pinterest sharing

* fix hover on share

* fix start img aspect radio, reduce size

* right align json script

* right align go script

* change script background
This commit is contained in:
Max Peintner
2020-10-26 13:03:51 +01:00
committed by GitHub
parent 524a6d4467
commit 22d4c345be
28 changed files with 1181 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
site/docs/administrate/02-organisations.en.md
View File

@@ -37,28 +37,76 @@ An organisation can have multiple domain names, but only one of it can be primar
Browse to your [organisation](administrate#Organisations) by visiting [https://console.zitadel.ch/org](https://console.zitadel.ch/org).
Add the domain to your [organisation](administrate#Organisations) by clicking the button **Add Domain**.
<img src="img/console_org_domain_default.png" alt="Organisation Overview" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_org_domain_default.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_org_domain_default.png" itemprop="thumbnail" alt="Organisation Overview" />
</a>
<figcaption itemprop="caption description">Organisation Overview</figcaption>
</figure>
</div>
Input the domain in the input field and click **Add**
<img src="img/console_org_domain_add.png" alt="Organisation Add Domain" width="1000px" height="auto">
<img src="img/console_org_domain_added.png" alt="Organisation Domain Added" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_org_domain_add.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_org_domain_add.png" itemprop="thumbnail" alt="Organisation Add Domain" />
</a>
<figcaption itemprop="caption description">Organisation Add Domain</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_org_domain_added.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_org_domain_added.png" itemprop="thumbnail" alt="Organisation Domain Added" />
</a>
<figcaption itemprop="caption description">Organisation Domain Added</figcaption>
</figure>
</div>
To start the domain verification click the domain name and a dialog will appear, where you can choose between DNS or HTTP challenge methods.
<img src="img/console_org_domain_verify.png" alt="Organisation Domain Verify" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_org_domain_verify.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_org_domain_verify.png" itemprop="thumbnail" alt="Organisation Domain Verify" />
</a>
<figcaption itemprop="caption description">Organisation Domain Verify</figcaption>
</figure>
</div>
For example, create a TXT record with your DNS provider for the used domain an click verify. **ZITADEL** will then proceed an check your DNS.
<img src="img/console_org_domain_verify_dns.png" alt="Organisation Domain Verify DNS" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_org_domain_verify_dns.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_org_domain_verify_dns.png" itemprop="thumbnail" alt="Organisation Domain Verify DNS" />
</a>
<figcaption itemprop="caption description">Organisation Domain Verify DNS</figcaption>
</figure>
</div>
> Do not delete the verification code **ZITADEL** will recheck the ownership from time to time
When the verification is successful you have the option to activate the domain by clicking **Set as primary**
<img src="img/console_org_domain_verified.png" alt="Organisation Domain Verified" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_org_domain_verified.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_org_domain_verified.png" itemprop="thumbnail" alt="Organization Domain Verified" />
</a>
<figcaption itemprop="caption description">Organisation verified</figcaption>
</figure>
</div>
> This changes the **preferred loginnames** of your [users](administrate#Users) as indicated [here](administrate#How_ZITADEL_handles_usernames).
Gratulations your are done! You can check this by visiting [https://console.zitadel.ch/users/me](https://console.zitadel.ch/users/me)
<img src="img/console_user_personal_info.png" alt="User Personal Information" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_user_personal_info.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_user_personal_info.png" itemprop="thumbnail" alt="User Personal Information" />
</a>
<figcaption itemprop="caption description">User Personal Information</figcaption>
</figure>
</div>
> This only works when the [user](administrate#Users) is member of this [organisation](administrate#Organisations)

18
site/docs/administrate/03-projects.en.md
View File

@@ -42,11 +42,25 @@ To make it more easily to differentiate ZITADEL Console displays these both as s
To create your project go to [https://console.zitadel.ch/projects](https://console.zitadel.ch/projects)
<img src="img/console_projects_empty.png" alt="Manage Projects" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_projects_empty.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_projects_empty.png" itemprop="thumbnail" alt="Manage Projects" />
</a>
<figcaption itemprop="caption description">Manage Projects</figcaption>
</figure>
</div>
Create a new project with name which explains what's the intended use of this project.
<img src="img/console_projects_my_first_project.png" alt="Manage Projects" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_projects_my_first_project.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_projects_my_first_project.png" itemprop="thumbnail" alt="Manage Projects" />
</a>
<figcaption itemprop="caption description">Manage Projects</figcaption>
</figure>
</div>
#### RBAC Settings

51
site/docs/administrate/04-clients.en.md
View File

@@ -24,18 +24,51 @@ The wizard can be skipped for people who are needing special settings.
To create a new client start by browsing to your [project](administrate#Projects), this is normally something like [https://console.zitadel.ch/projects/78562301657017889](https://console.zitadel.ch/projects/78562301657017889)
<img src="img/console_projects_my_first_project.png" alt="Manage Clients" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_projects_my_first_project.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_projects_my_first_project.png" itemprop="thumbnail" alt="Manage Clients" />
</a>
<figcaption itemprop="caption description">Manage Clients</figcaption>
</figure>
</div>
Click the **New** button and a wizard will appear which will guide you through the process.
<img src="img/console_clients_my_first_spa_wizard_1.png" alt="Client Wizard" width="1000px" height="auto">
<img src="img/console_clients_my_first_spa_wizard_2.png" alt="Client Wizard" width="1000px" height="auto">
<img src="img/console_clients_my_first_spa_wizard_3.png" alt="Client Wizard" width="1000px" height="auto">
<img src="img/console_clients_my_first_spa_wizard_4.png" alt="Client Wizard" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_wizard_1.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_wizard_1.png" itemprop="thumbnail" alt="Client Wizard 1" />
</a>
<figcaption itemprop="caption description">Client Wizard 1</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_wizard_2.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_wizard_2.png" itemprop="thumbnail" alt="Client Wizard 2" />
</a>
<figcaption itemprop="caption description">Client Wizard 2</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_wizard_3.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_wizard_3.png" itemprop="thumbnail" alt="Client Wizard 3" />
</a>
<figcaption itemprop="caption description">Client Wizard 3</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_wizard_4.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_wizard_4.png" itemprop="thumbnail" alt="Client Wizard 4" />
</a>
<figcaption itemprop="caption description">Client Wizard 4</figcaption>
</figure>
</div>
When the wizard is complete, the clients configuration will be displayed and you can now use this client.
<img src="img/console_clients_my_first_spa_config.png" alt="Client Wizard" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_config.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_config.png" itemprop="thumbnail" alt="Client Wizard Complete" />
</a>
<figcaption itemprop="caption description">Client Wizard Complete</figcaption>
</figure>
</div>

36
site/docs/administrate/06-users.en.md
View File

@@ -29,21 +29,49 @@ If someone verifies a domain name within the organisation **ZITADEL** will gener
#### Search Users
<img src="img/console_user_list_search.png" alt="User list Search" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_user_list_search.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_user_list_search.png" itemprop="thumbnail" alt="User list Search" />
</a>
<figcaption itemprop="caption description">User list Search</figcaption>
</figure>
</div>
Image 1: User List Search
#### Create Users
<img src="img/console_user_list.png" alt="User list" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_user_list.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_user_list.png" itemprop="thumbnail" alt="User list" />
</a>
<figcaption itemprop="caption description">User list</figcaption>
</figure>
</div>
Image 2: User List
<img src="img/console_user_create_form.png" alt="User Create Form" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_user_create_form.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_user_create_form.png" itemprop="thumbnail" alt="User Create Form" />
</a>
<figcaption itemprop="caption description">User Create Form</figcaption>
</figure>
</div>
Image 3: User Create Form
<img src="img/console_user_create_done.png" alt="User Create Done" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_user_create_done.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_user_create_done.png" itemprop="thumbnail" alt="User Create Done" />
</a>
<figcaption itemprop="caption description">User Create Done</figcaption>
</figure>
</div>
Image 4: User Create Done

4
site/docs/develop/00-overview.en.md
View File

@@ -7,6 +7,8 @@ description: …
### APIs
---
ZITADEL provides three API's for different use cases. These API's are built with GRPC and then generate a REST service.
Each services proto definition is located in the source control on GitHub.
As we generate the REST services and Swagger file out of the proto definition we recommend that you rely on the proto file.
@@ -27,6 +29,8 @@ See below for an example with the call **GetMyUser**.
}
```
---
As you can see the `GetMyUser` function is also available as REST service under the path `/users/me`.
In the table below you can see the URI of those calls.

2
site/docs/documentation/03-openidoauth.en.md
View File

@@ -18,7 +18,7 @@ Under normal circumstances **ZITADEL** need four domain names to operate properl
#### OpenID Connect 1.0 Discovery
The OpenID Connect Discovery Endpoint is located with the issuer domain.
For example with [zitadel.ch](zitadel.ch) this would be the domain [issuer.zitadel.ch](issuer.zitadel.ch). This would give us [https://issuer.zitadel.ch/.well-known/openid-configuration](https://issuer.zitadel.ch/.well-known/openid-configuration).
For example with [zitadel.ch](https://zitadel.ch) this would be the domain [issuer.zitadel.ch](https://issuer.zitadel.ch). This would give us [https://issuer.zitadel.ch/.well-known/openid-configuration](https://issuer.zitadel.ch/.well-known/openid-configuration).
**Link to spec.** [OpenID Connect Discovery 1.0 incorporating errata set 1](https://openid.net/specs/openid-connect-discovery-1_0.html)

4
site/docs/integrate/01-openidoauth.en.md
View File

@@ -23,6 +23,8 @@ In the OIDC and OAuth world this client profile is called "native application"
### How to consume authorizations in your application or service
---
With ZITADEL you can manage the [roles](administrate#Roles) a [project](administrate#Projects) supplies to your users in the form of authorizations.
On the [project](administrate#Projects) it can be configured how **project roles** are supplied to the [clients](administrate#Clients).
By default ZITADEL asserts the claim **urn:zitadel:iam:org:project:roles** to the [Userinfo Endpoint](documentation#userinfo_endpoint)
@@ -39,4 +41,6 @@ By default ZITADEL asserts the claim **urn:zitadel:iam:org:project:roles** to th
}
```
---
For more details about how **ZITADEL** treats [scopes](documentation#Scopes) and [claims](documentation#Claims) see the [documentations](documentation).

9
site/docs/start/00-quick-start.en.md
View File

@@ -14,7 +14,14 @@ You can either use [ZITADEL.ch](https://zitadel.ch) or deploy a dedicated **ZITA
To register your free [organisation](administrate#Organisations), visit this link [register organisation](https://accounts.zitadel.ch/register/org).
After accepting the TOS and filling out all the required fields you will receive a email with further instructions.
<img src="img/accounts_org_register.png" alt="Organisation Register" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/accounts_org_register.png" itemprop="contentUrl" data-size="1472x1000">
<img src="img/accounts_org_register.png" itemprop="thumbnail" alt="Organisation Overview" />
</a>
<figcaption itemprop="caption description">Organisation Register</figcaption>
</figure>
</div>
#### Verify your domain name (optional)

31
site/docs/use/00-user.en.md
View File

@@ -22,14 +22,23 @@ title: User Manual
### Login User
<img src="img/accounts_page.png" alt="Login Username" width="1000px" height="auto">
Image: Login Username
<img src="img/accounts_password.png" alt="Login Password" width="1000px" height="auto">
Image: Login Password
<img src="img/accounts_otp_verify.png" alt="Login OTP" width="1000px" height="auto">
Image: Login OTP
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/accounts_page.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/accounts_page.png" itemprop="thumbnail" alt="Login Username" />
</a>
<figcaption itemprop="caption description">Login Username</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/accounts_password.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/accounts_password.png" itemprop="thumbnail" alt="Login Password" />
</a>
<figcaption itemprop="caption description">Login Password</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/accounts_otp_verify.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/accounts_otp_verify.png" itemprop="thumbnail" alt="Login OTP" />
</a>
<figcaption itemprop="caption description">Login OTP</figcaption>
</figure>
</div>