docs: invite user flow (#9651)

# Which Problems Are Solved

Till now it was only possible to create a new user with either the
initial password, or send them a link to setup a password.
As an enduser I want to setup whatever authentication methods I have
available, e.g password, passkey, sso, etc.

As an administrator I also want to be able to setup a user, without
triggering an email, in cases where i setup the user who joins later on.

# How the Problems Are Solved

With the new users API and the login v2 we implemented those options.
The user will receive an invitaion email and be prompted to setup an
authentication method based on the settings configure on the
organization.
This PR adds the docs to that use case. 

<img width="967" alt="image"
src="https://github.com/user-attachments/assets/74397673-42ed-4ff1-9703-1b537dc342c6"
/>

<img width="967" alt="image"
src="https://github.com/user-attachments/assets/3ea4dace-56cd-4c04-a2e4-f728abee70b9"
/>

---------

Co-authored-by: Livio Spring <livio.a@gmail.com>

console/src/app/pages/users/user-create/user-create-v2/user-create-v2.component.html

@@ -21,6 +21,11 @@
           {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
         </mat-checkbox>
       </div>
+      <cnsl-form-field class="username">
+        <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
+        <input class="stretchInput" cnslInput formControlName="username" required />
+      </cnsl-form-field>
+
       <cnsl-form-field class="givenName">
         <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
         <input cnslInput formControlName="givenName" required />
@@ -29,14 +34,6 @@
         <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
         <input cnslInput formControlName="familyName" required />
       </cnsl-form-field>
-      <cnsl-form-field class="nickName">
-        <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
-        <input cnslInput formControlName="nickName" />
-      </cnsl-form-field>
-      <cnsl-form-field class="username">
-        <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
-        <input cnslInput formControlName="username" required />
-      </cnsl-form-field>
 
       <div class="authenticationFactor">
         <mat-radio-group

console/src/app/pages/users/user-create/user-create-v2/user-create-v2.component.scss

@@ -13,8 +13,8 @@
   grid-template-areas:
     'email email'
     'emailVerified emailVerified'
+    'username username'
     'givenName familyName'
-    'nickName username'
     'authenticationFactor authenticationFactor';
   column-gap: 1rem;
 }
@@ -35,10 +35,6 @@
   grid-area: familyName;
 }
 
-.nickName {
-  grid-area: nickName;
-}
-
 .username {
   grid-area: username;
 }

console/src/app/pages/users/user-create/user-create-v2/user-create-v2.component.ts

@@ -97,7 +97,6 @@ export class UserCreateV2Component implements OnInit {
       username: new FormControl('', { nonNullable: true, validators: [requiredValidator, minLengthValidator(2)] }),
       givenName: new FormControl('', { nonNullable: true, validators: [requiredValidator] }),
       familyName: new FormControl('', { nonNullable: true, validators: [requiredValidator] }),
-      nickName: new FormControl('', { nonNullable: true }),
       emailVerified: new FormControl(false, { nonNullable: true }),
       authenticationFactor: new FormControl<AuthenticationFactor['factor']>(authenticationFactor, {
         nonNullable: true,
@@ -188,7 +187,6 @@ export class UserCreateV2Component implements OnInit {
       profile: {
         givenName: userValues.givenName,
         familyName: userValues.familyName,
-        nickName: userValues.nickName,
       },
       email: {
         email: userValues.email,

docs/docs/guides/manage/console/_create-user.mdx

@@ -3,9 +3,34 @@ To create a new user, go to Users and click on **New**. Enter the required conta
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
+:::note
+If you started with Zitadel before version 3, you might have the "Human User [deprecated]" UI.
+In this case please enable the Feature Flag "Use V2 Api in Console for User creation" in the Default Settings.
+:::
+
 <Tabs>
     <TabItem value="human" label="Human User" default>
+        <img src="/docs/img/guides/console/invitehuman.png" width="680px" alt="Invite Human" />
+
+        When creating a new user you have different options.
+        First add the email, and select if the email address should be added automatically as "verified".
+
+        In the last section you can choose the authentication options:
+        - **Setup authentication later for this user**: This flow might be useful if an employee starts at a later point but you already want to prepare the account. The user will not have an authentication method, before they will be able to login, they need to setup a method.
+        - **Send an invitation E-Mail for authentication setup and E-Mail verification**: The user will receive an email and be able to setup an authentication method (e.g Password, Passkey, External SSO).
+            - When using the [Zitadel Login V1](/docs/guides/integrate/login/hosted-login) the user will be prompted to setup a password
+            - When using the [Zitadel Login V2](/docs/guides/integrate/login/hosted-login#hosted-login-version-2-beta) the user has the option to choose the authentication method (password, passkey, identity provider), based on the configuration of the organization
+                <img src="/docs/img/guides/console/setupauthmethod.png" width="680px" alt="Invite Human - Setup authentication method" />
+        - **Set an initial password for the user**: The user will receive an email and be able to setup an authentication method (e.g Password, Passkey, External SSO)
+
+    </TabItem>
+    <TabItem value="human_deprecated" label="Human User [deprecated]">
         <img src="/docs/img/guides/console/addhuman.png" width="680px" alt="Add Human" />
+
+        After a human user is created, by default, an initialization mail with a code is sent to the registered email. This code then has to be verified on first login.
+        If you want to omit this mail, you can check the **email verified** and **set initial password** toggle.
+        If no password is set initially, the initialization mail prompting the user to set his password is sent.
+
     </TabItem>
     <TabItem value="service" label="Service User">
         <img
@@ -16,10 +41,6 @@ import TabItem from "@theme/TabItem";
     </TabItem>
 </Tabs>
 
-After a human user is created, by default, an initialization mail with a code is sent to the registered email. This code then has to be verified on first login.
-If you want to omit this mail, you can check the **email verified** and **set initial password** toggle.
-If no password is set initially, the initialization mail prompting the user to set his password is sent.
-
 You can prompt the user to add a second factor method too by checking the **Force MFA** toggle in [Login behaviour settings](/docs/guides/manage/console/default-settings#login-behavior-and-access).
 
 When logged in, a user can then manage the profile in the console, adding a profile picture, external IDPs and Passwordless authentication devices.