feat(docs): quickstart, clients and projects (#864)

* init screenshots

* Improve Users

* add screenshots

* start guide & clent & project improvements

* minor corrections to links

* minor typos

site/docs/administrate/02-organisations.en.md

@@ -34,7 +34,33 @@ Once you created your organisation you will receive a generated domain name from
 After the domain is verified your users can use both domain names to log-in. The user "coyote" can now use "coyote@acme.zitadel.ch" and "coyote@acme.ch".
 An organisation can have multiple domain names, but only one of it can be primary. The primary domain defines which login name ZITADEL displays to the user, and also what information gets asserted in access_tokens (preferred_username).
 
-> Screenshot here
+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">
+
+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">
+
+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">
+
+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">
+
+> 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">
+
+> 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">
+
+> This only works when the [user](administrate#Users) is member of this [organisation](administrate#Organisations)
 
 ### Audit organisation changes
 

site/docs/administrate/03-projects.en.md

@@ -38,7 +38,15 @@ To make it more easily to differentiate ZITADEL Console displays these both as s
 
 ### Manage a project
 
-> Screenshot here
+#### Create a project
+
+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">
+
+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">
 
 #### RBAC Settings
 

site/docs/administrate/04-clients.en.md

@@ -11,12 +11,31 @@ For example you could have a software project existing out of a web app and a mo
 
 Clients might use different protocols for integrating with an IAM. With ZITADEL it is possible to use OpenID Connect 1.0 / OAuth 2.0. In the future SAML 2.0 support is planned as well.
 
-> Screenshot here
+#### OIDC Configuration
 
-### Configure OpenID Connect 1.0 Client
+> Document Settings
+
+### Create a client
 
 To make configuration of a client easy we provide a wizard which generates a specification conferment setup.
 The wizard can be skipped for people who are needing special settings.
-For use cases where your configuration is not compliant we provide you a "dev mode" which disables conformance checks.
 
-> Screenshot here
+> For use cases where your configuration is not compliant we provide you a "dev mode" which disables conformance checks.
+
+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">
+
+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">
+
+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">

site/docs/administrate/06-users.en.md

@@ -4,32 +4,48 @@ title: Users
 
 ### What are users
 
-In ZITADEL there are different users. Some belong to dedicated organisations other belong to the global org. Some of them are human users others are machines.
+In **ZITADEL** there are different [users](administrate#Users). Some belong to dedicated [organisations](administrate#Organisations) other belong to the global [organisations](administrate#Organisations). Some of them are human [users](administrate#Users) others are machines.
-Nonetheless we treat them all the same in regard to roles management and audit trail.
+Nonetheless we treat them all the same in regard to [roles](administrate#Roles) management and audit trail.
 
 #### Human vs. Service Users
 
-The major difference between humane vs. machine users is the type of credentials who can be used.
+The major difference between humane vs. machine [users](administrate#Users) is the type of credentials who can be used.
-With machine users there is only a non interactive login process possible. As such we utilize “JWT as Authorization Grant”.
+With machine [users](administrate#Users) there is only a non interactive login process possible. As such we utilize “JWT as Authorization Grant”.
 
 > TODO Link to “JWT as Authorization Grant” explanation.
 
 ### How ZITADEL handles usernames
 
-ZITADEL is built around the concept of organisations. Each organisation has it's own pool of usernames which include human and service users.
+**ZITADEL** is built around the concept of [organisations](administrate#Organisations). Each [organisation](administrate#Organisations) has it's own pool of usernames which include human and service [users](administrate#Users).
-For example a user with the username `alice` can only exist once the org. `ACME`. ZITADEL will automatically generate a "logonname" for each user consisting of `{username}@{domainname}.{zitadeldomain}`. Without verifying the domain name this would result in the logonname `alice@acme.zitadel.ch`. If you use a dedicated ZITADEL replace `zitadel.ch` with your domain name.
+For example a [user](administrate#Users) with the username `road.runner` can only exist once the [organisation](administrate#Organisations) `ACME`. **ZITADEL** will automatically generate a "logonname" for each [user](administrate#Users) consisting of `{username}@{domainname}.{zitadeldomain}`. Without verifying the domain name this would result in the logonname `road.runner@acme.zitadel.ch`. If you use a dedicated **ZITADEL** replace `zitadel.ch` with your domain name.
 
-If someone verifies a domain name within the org. ZITADEL will generate additional logonames for each user with that domain. For example if the domain is `acme.ch` the resulting logonname would be `alice@acme.ch` and as well the generated one `alice@acme.zitadel.ch`.
+If someone verifies a domain name within the organisation **ZITADEL** will generate additional logonames for each [user](administrate#Users) with that domain. For example if the domain is `acme.ch` the resulting logonname would be `road.runner@acme.ch` and as well the generated one `road.runner@acme.zitadel.ch`.
 
-> Domain verification also removes the logonname from all users who might have used this combination in the global org.
+> Domain verification also removes the logonname from all [users](administrate#Users who might have used this combination in the global [organisation](administrate#Organisations).
-> Relating to example with `acme.ch` if a user in the global org, let's call him `bob` used `bob@acme.ch` this logonname will be replaced with `bob@randomvalue.tld`
+> Relating to example with `acme.ch` if a user in the global [organisation](administrate#Organisations), let's call him `coyote` used `coyote@acme.ch` this logonname will be replaced with `coyote@randomvalue.tld`
-> ZITADEL notifies the user about this change
+> **ZITADEL** notifies the user about this change
 
 ### Manage Users
 
-#### Create User
+#### Search Users
 
-> Screenshot here
+<img src="img/console_user_list_search.png" alt="User list Search" width="1000px" height="auto">
+
+Image 1: User List Search
+
+#### Create Users
+
+<img src="img/console_user_list.png" alt="User list" width="1000px" height="auto">
+
+Image 2: User List
+
+<img src="img/console_user_create_form.png" alt="User Create Form" width="1000px" height="auto">
+
+Image 3: User Create Form
+
+<img src="img/console_user_create_done.png" alt="User Create Done" width="1000px" height="auto">
+
+Image 4: User Create Done
 
 #### Set Password
 

site/docs/start/00-quick-start.en.md

@@ -7,19 +7,33 @@ description: A quick-start reference for the impatient reader.
 
 ### Try ZITADEL
 
-You can either use [ZITADEL.ch](https://zitadel.ch) or deploy a dedicated ZITADEL instance.
+You can either use [ZITADEL.ch](https://zitadel.ch) or deploy a dedicated **ZITADEL** instance.
 
 ### Use ZITADEL.ch
 
-To register your free organisation, visit this link [register organisation](https://accounts.zitadel.ch/register/org).
+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 mail with further instructions.
+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">
 
 #### Verify your domain name (optional)
 
+When you verify your domain you get the benefit that your [organisations](administrate#Organisations) [users](administrate#Users) can use this domain as **preferred loginname**. You find a more detailed explanation [How ZITADEL handles usernames](administrate#How_ZITADEL_handles_usernames).
+
+The verification process is documented [here](administrate#Verify_a_domain_name)
+
 #### Add Users to your organisation
 
+To add new user just follow [this guide](administrate#Create_Users)
+
 #### Setup an application
 
+First [create a project](administrate#Create_a_project)
+
+Then create within this [project](administrate#Projects) a [new client](administrate#Create_a_client)
+
+The wizard should provide some guidance what client is the proper for you. If you are still unsure consult our [Integration Guide](integrate#Overview)
+
 ### Use ORBOS to install ZITADEL
 
 > This will be added later on

site/docs/use/00-user.en.md

@@ -19,3 +19,17 @@ title: User Manual
 #### Auto Register
 
 #### Manage Account Linking
+
+### 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