mirror of
https://github.com/zitadel/zitadel.git
synced 2025-08-15 01:57:41 +00:00
docs: image gallery viewer (#905)
* 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
@@ -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)
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user