feat/DOCS-5404-update-partials-docs

main/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts.mdx

@@ -21,32 +21,37 @@ Customize Signup and Login Prompts supports two use cases: **custom content** an
 
 **Data capture** uses form elements dynamically added to the signup and login prompts, which is useful for collecting and validating user consent or user-produced data like surname.
 
-Data capture is available for database connections authenticated by password . When using a <Tooltip tip="Passwordless: Form of authentication that does not rely on a password as the first factor." cta="View Glossary" href="/docs/glossary?term=passwordless">passwordless</Tooltip> connection, data capture is available when authenticating by email or SMS one-time password. Passkeys and magic links are not yet supported.
 
 <Warning>
 Only use Signup and Login Prompt Customizations to convey or collect sensitive or regulated data as permitted under your agreement with Okta.
 </Warning>
 
 #### Terminology
 
-A **prompt** is a specific step in a given authentication flow. Each prompt has at least one **screen** and, depending on tenant configuration, each supported screen has either four or six **entry points,** which arelocations in the screen where custom code (**partials**) can be inserted.
+A **prompt** is a specific step in a given authentication flow. Each prompt has at least one **screen** and, depending on tenant configuration, each supported screen has either four or six **entry points,** which are locations in the screen where custom code (**partials**) can be inserted.
 
 The following prompts can be customized:
 
-* `signup`
-* `signup-id`
-* `signup-password`
+**Login screens**
 * `login`
 * `login-id`
 * `login-password`
-* `login-passwordless`
+* `login-passwordless-sms-otp`
+* `login-passwordless-email-code`
+* `passkey-enrollment`
+* `passkey-enrollment-local`
 
-  + `login-passwordless-sms-otp`
-  + `login-passwordless-email-code`
+**Signup screens**
+* `signup`
+* `signup-id`
+* `signup-password`
+* `customized-consent`
+* `passkey-enrollment`
+* `passkey-enrollment-local`
 
-Partials support HTML, CSS, Javascript, and [Liquid syntax](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) to power conditional logic and dynamic variables. In addition, any Liquid variable that is available to the [Page Template](/docs/customize/login-pages/universal-login/customize-templates) is also supported.
+Partials support HTML, CSS, JavaScript, and [Liquid syntax](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) to power conditional logic and dynamic variables. In addition, any Liquid variable that is available to the [Page Template](/docs/customize/login-pages/universal-login/customize-templates) is also supported.
 
-These entry points available when a database or passwordless connection is enabled:
+These entry points are available when a database or passwordless connection is enabled:
 
 * `form-content-start`
 * `form-content-end`
@@ -60,9 +65,35 @@ The following entry points are available when at least one social or enterprise
 
 <Frame>![Screenshots of each Custom Prompt option and their partials](/docs/images/cdy7uua7fh8z/7sQVWVbaTp4VMW4nJjsn2G/74d0b30da7b034bd695274dbd146964b/Custom_Prompts.png)</Frame>
 
-#### Use the Management API to Manage Partials
+#### Use the Auth0 Dashboard to manage Partials
+
+Use the Dashboard to insert custom fields and content into Login and Signup screens using partials.
+
+1. Navigate to [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/universal-login/customize-partials), and select **Enhance screens with partials**.
+2. Select the **Screen** to customize with the partials editor. 
+<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
+**Screens** can have the following **Rendering modes**:
+* **STANDARD**: The `screen` is rendered using the default [Universal Login](/docs/customize/login-pages/universal-login) UI; you can use partials to insert code snippets and [template variables](/docs/customize/login-pages/universal-login/customize-templates#page-template-variables). 
+* **ADVANCED**: The `screen` is rendered using [ACUL](/docs/customize/login-pages/advanced-customizations) and partials do not apply.
+* **ADVANCED (FILTERED)**: The `screen` is rendered with ACUL applied to specific applications and organizations; partials only apply to `screens` excluded from ACUL filters.
+</Callout>
+3. Select **<svg style={{ display: 'inline' }} width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sc-ezjryM"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 6a2 2 0 11-4 0 2 2 0 014 0zM3 14a2 2 0 100-4 2 2 0 000 4zM3 20a2 2 0 100-4 2 2 0 000 4zM8 13h15v-2H8v2zM23 7H8V5h15v2zM8 19h15v-2H8v2z"  fill="inherit"></path></svg>** **ENTRY POINTS** to insert code snippets and template variables. 
+
+4. Select **<svg style={{ display: 'inline' }} width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sc-bQCGiA"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.457 6.207L3.664 12l5.793 5.793-1.414 1.414-6.5-6.5a1 1 0 010-1.414l6.5-6.5 1.414 1.414zM14.543 6.207L20.336 12l-5.793 5.793 1.414 1.414 6.5-6.5a1 1 0 000-1.414l-6.5-6.5-1.414 1.414z" fill="inherit"></path></svg>** to add **CODE SNIPPETS** to the selected entry point. 
+
+5. Select **\{ }** to add **TEMPLATE VARIABLES** to the selected entry point. 
+
+6. Select **<svg style={{ display: 'inline' }} width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sc-hKiGeM"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.152 3a1 1 0 011-1H21a1 1 0 011 1v5.078a1 1 0 01-1 1h-4.848a1 1 0 01-1-1V3zm2 1v3.078H20V4h-2.848z" fill="currentColor"></path><path d="M8.554 5.75c-1.265 0-2.369 1.089-2.369 2.53v5.28h-2V8.28c0-2.457 1.913-4.53 4.37-4.53 2.455 0 4.368 2.073 4.368 4.53v7.478c0 1.416 1.085 2.484 2.327 2.484 1.241 0 2.326-1.068 2.326-2.484v-5.324h2v5.324c0 2.432-1.894 4.484-4.326 4.484-2.433 0-4.327-2.052-4.327-4.484V8.28c0-1.441-1.104-2.53-2.369-2.53z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2 15.922a1 1 0 011-1h4.848a1 1 0 011 1V21a1 1 0 01-1 1H3a1 1 0 01-1-1v-5.078zm2 1V20h2.848v-3.078H4z" fill="inherit"></path></svg>** **ACTIONS** to add [Actions](/docs/customize/actions/actions-overview) and apply custom logic using your partials fields and content. 
+
+7. Select **Save and Publish** to update your **Screen**.
+
+
+<Frame>![[partials]](/docs/images/universal-login/partials-editor.png)</Frame>
 
-Partials can be a maximum of 10,000 characters and are managed by the [Auth0 Management API](https://auth0.com/docs/api/management/v2/prompts/put-partials) at `/v2/prompts/{prompts_name}/partials`. Every prompt must specify the `Screen` when adding, updating, or deleting a partial. Below is an example call to view all existing partials for a prompt, noting that `ulp-container` prefix is not required when referencing entry points in API calls.
+
+#### Use the Management API to manage Partials
+
+Partials can be a maximum of 10,000 characters. You can manage Partials using the [Auth0 Management API](https://auth0.com/docs/api/management/v2/prompts/put-partials) at `/v2/prompts/{prompts_name}/partials`. Every prompt must specify the `screen` when adding, updating, or deleting a partial. Below is an example call to view all existing partials for a prompt, noting that `ulp-container` prefix is not required when referencing entry points in API calls.
 
 ```json lines
 GET /api/v2/prompts/signup-id/partials
@@ -277,42 +308,43 @@ Below is an example call to add a variable for the text of a terms of service ch
 
 ##### Use a Custom Text Variable in a Partial
 
-Custom text variables are referenced in partials using the `prompts.screen.text` object; the reference for the `var-tos` example in the previous section is `prompt.screen.texts.varTos`. See below for an example of how to use a previously created variable in a partial on the Signup ID Prompt, noting that the Management API's `var-tos` variable is referenced as `varTos` in the partial.
+Custom text variables are referenced in partials using the `prompts.screen.text` object; the reference for the `var-tos` example in the previous section is `prompt.screen.text.varTos`. See below for an example of how to use a previously created variable in a partial on the Signup ID Prompt, noting that the Management API's `var-tos` variable is referenced as `varTos` in the partial.
 
-```json lines
+```html
 # PUT api/v2/prompts/signup/partials
-{
-  "signup": {
-    "form-content-end": "<div class='ulp-field'><input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'><label for='terms-of-service'>{{ prompt.screen.texts.varTos }}</label></div>"
-  }
-}
+<div class='ulp-field'>
+  <input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'>
+  <label for='terms-of-service'>{{ prompt.screen.texts.varTos }}</label>
+</div>
 ```
 
 
-
-
-
-
 #### Validate and Save Captured Data
 
-Data captured by custom form elements is available in Actions, and Auth0 recommends that the collected data be validated.
+Data captured by custom form elements is available in Actions, and Auth0 recommends validating the data collected
 
 <Warning>
 
-When using custom form elements, you must include the `ulp-` prefix with any input names to ensure the data can be used with Actions.
+When using custom form elements, you must include the `ulp-` prefix with any input names to ensure the data is available to [Actions](/docs/customize/actions/actions-overview).
 
 </Warning>
 
 Each Action receives the captured data as an object on the `event.request.body`. Customers can return a validation error by using the `api.validation.error` function.
 
 When using a database connection:
 
-* Data from the Signup Prompts is accessible on the Pre User Registration trigger, and if a validation error is returned, the user is prevented from registering.
-* Data from Login Prompts is accessible on the Post Login trigger, and if a validation error is returned, the validation error is forwarded to the customer’s application error page.
+* Data from the Signup Prompts is accessible on the [`pre-user-registration`](/docs/customize/actions/explore-triggers/signup-and-login-triggers/pre-user-registration-trigger) trigger. A validation error from the trigger prevents the user from registering. 
+* Data from Login Prompts is accessible on the [`post-login`](/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) trigger. Validation errors are forwarded to the customer’s application error page.
 
 When using a Passwordless connection:
 
-* Data from both the Signup and Login Prompts is accessible on the Post Login trigger, and if a validation error is returned, the validation error is forwarded to the customer’s application error page.
+* Data from both the Signup and Login Prompts is accessible on the [`post-login`](/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) trigger. Validation errors are forwarded to the customer’s application error page.
+
+When using `passkey` prompts:
+
+* Data from the `passkey-enrollment` prompt is accessible on the [`pre-user-registration`](/docs/customize/actions/explore-triggers/signup-and-login-triggers/pre-user-registration-trigger) trigger. A validation error from the trigger prevents the user from registering. 
+* The `passkey-enrollment` and `passkey-enrollment-local` prompts never capture data on the Post Login trigger.
+* Data from the `passkey-enrollment-local` prompt is not accessible since it is always displayed after the [`post-login`](/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) trigger is run.
 
 <Warning>