Merge pull request #5287 from brionmario/feature-reg-flow

Author: himeshsiriwardana

en/asgardeo/docs/assets/img/guides/organization/self-registration/enable-self-registration-flow-builder-from-feature-preview.gif

@@ -0,0 +1,2 @@
+{% set product_name = "Asgardeo" %}
+{% include "../../../../includes/guides/user-self-service/self-register-flow.md" %}

en/asgardeo/docs/assets/img/guides/organization/self-registration/enable-self-registration-flow-builder-from-home.gif

@@ -368,6 +368,7 @@ nav:
           - Manage consents: guides/user-self-service/manage-consents.md
           - Manage login sessions: guides/user-self-service/manage-login-sessions.md
           - Self-register: guides/user-self-service/self-register.md
+          - Self-register Flow: guides/user-self-service/self-register-flow.md
           - Register passkeys: guides/user-self-service/register-passkey.md
           - Register Push Notification Device: guides/user-self-service/register-push-notification-device.md
           - Password recovery: guides/user-self-service/user-password-recovery.md

en/asgardeo/docs/assets/img/guides/organization/self-registration/self-register-flow-banner.png

@@ -0,0 +1,132 @@
+<h1>Self-register Flow Builder <div class="md-chip md-chip--preview"><span class="md-chip__label">Preview</span></div></h1>
+
+![Self register flow banner]({{base_path}}/assets/img/guides/organization/self-registration/self-register-flow-banner.png){: width="auto" style="display: block; margin: 0;"}
+
+!!! Note
+
+    The self-registration Flow Builder is currently in **Preview**. Some features may be subject to changes in future releases.
+
+The self-registration Flow Builder provides administrators with a powerful tool to create fully customizable user registration experiences. Whether you're building a simple registration form or a complex, multi-step flow, the builder gives you complete control over the design and process.
+
+It includes a variety of starter templates, widgets, steps, and components, allowing you to define exactly how users will interact with your registration process.
+
+---
+
+## Pre-requisites
+
+You need to **enable self-registration** inorder to try this out.
+
+!!! Note
+    Learn how administrators can [enable self-registration]({{base_path}}/guides/user-self-service/configure-self-service-portal/#enabledisable-the-my-account-portal) in an organization.
+
+## Get Started
+
+### Enabling the flow builder
+
+!!! Warning
+    Enabling the self-registration Flow Builder will override the exitsing self-registration experience in your organization. You can always revert back to the previous experience by [disabling the Flow Builder](#disabling the Flow Builder).
+
+To enable the self-registration Flow Builder, you have two options:
+
+#### Option 01: Enable from the Home page
+
+1. Navigate to the **Home** page.
+2. Click on the **Enable and try out** button inside the banner.
+3. In the feature preview dialog, toggle the feature status switch to **Enabled** mode and close the dialog.
+4. Click on the **Try out** button in the banner to access the Flow Builder.
+
+![Enable self-register flow builder from Home]({{base_path}}/assets/img/guides/organization/self-registration/enable-self-registration-flow-builder-from-home.gif){: width="auto" style="display: block; margin: 0;"}
+
+#### Option 02: Enable from the Feature Preview
+
+1. Click on the user dropdown in the top right corner.
+2. Select **Feature Preview**.
+3. In the feature preview dialog, toggle the feature status switch to **Enabled** mode and close the dialog.
+4. Go to **Login & Registration**.
+5. Click on the **Registration Flow** card.
+
+![Enable self-register flow builder from Feature Preview]({{base_path}}/assets/img/guides/organization/self-registration/enable-self-registration-flow-builder-from-feature-preview.gif){: width="auto" style="display: block; margin: 0;"}
+
+## Building your first flow
+
+The self-registration Flow Builder is designed to make creating user registration flows intuitive and efficient. With AI ✨ support, you can describe your ideal flow in natural language and let the builder generate it for you.
+
+Alternatively, you can start with pre-defined templates or build from scratch using the drag-and-drop interface. This flexibility allows you to create new flows or extend existing ones effortlessly.
+
+### Starter Templates
+
+Starter templates give you a quick start with pre-defined flows that are easily customizable. You can click on the `+` button next to the template to add it to the flow.
+
+![Self-register flow builder templates]({{base_path}}/assets/img/guides/organization/self-registration/self-registration-flow-builder-templates.gif){: width="auto" style="display: block; margin: 0;"}
+
+- **Generate with AI ✨**  
+  Describe your ideal registration flow in natural language, and Asgardeo will automatically generate a customized flow for you.
+  
+    ![Self-register flow builder AI]({{base_path}}/assets/img/guides/organization/self-registration/self-registration-flow-builder-generate-with-ai.png){: width="auto" style="display: block; margin: 0;"}
+
+- **Blank**
+  Start from scratch for full flexibility.
+
+- **Basic Details**  
+  Collect only basic user details such as name, email, and password.
+
+- **Basic + Google**  
+  Combine a basic form with Google sign-up for users preferring existing credentials.
+
+### Widgets
+
+Widgets are reusable components that enhance the registration flow. You can drag and drop widgets into your desired view to build a flow.
+
+![Self-register flow builder widgets]({{base_path}}/assets/img/guides/organization/self-registration/self-registration-flow-builder-widgets.gif){: width="auto" style="display: block; margin: 0;"}
+
+- **Username + Password**  
+  Traditional signup with username and password.
+
+- **Continue with Email OTP**  
+  Sign up with email and verify using a One-Time Password.
+
+- **Continue with Google**  
+  Sign up using Google credentials.
+
+### Steps
+
+Steps are the core building blocks of a registration flow. You can drag and drop steps to create a multi-step registration flow.
+
+![Self-register flow builder steps]({{base_path}}/assets/img/guides/organization/self-registration/self-registration-flow-builder-steps.gif){: width="auto" style="display: block; margin: 0;"}
+
+- **View**  
+  Each step acts as a view or section of the registration process.
+
+### Components
+
+Components are atomic UI elements added to steps. You can drag and drop components inside a step.
+
+!!! Note
+    Field components such as **Text Inputs**, **Email Inputs**, etc. has the following constraints:
+    
+    - They should be added inside a **Form** component.
+    - They should be mapped to a user Attribute. This can be done by clicking on the pensil icon on the element action panel and selcting the relevant attribute from the `Attribute` dropdown. Only attributes set as display on Self-Registration profile in the [Attribute Configurations]({{base_path}}/guides/users/attributes/manage-attributes) will be available for mapping.
+
+![Self-register flow builder components]({{base_path}}/assets/img/guides/organization/self-registration/self-registration-flow-builder-components.gif){: width="auto" style="display: block; margin: 0;"}
+
+- **Form** – Group fields for registration details  
+- **Text Input** – Basic input for names/usernames  
+- **Password Input** – Hidden input for passwords  
+- **Email Input** – Field for email addresses  
+- **Phone Input** – Collect phone numbers  
+- **Number Input** – For numeric values  
+- **Date Input** – Collect dates  
+- **OTP Input** – Enter One-Time Passwords  
+- **Checkbox** – For agreements like terms and conditions  
+- **Button** – Triggers actions (e.g., submit)  
+- **Text** – Add static instructions/explanations  
+- **Divider** – Visually separate sections  
+- **Image** – Add images like logos/icons
+
+### Disabling the flow builder
+
+If you want to revert back to the previous self-registration experience, you can disable the self-registration Flow Builder by following these steps:
+
+1. Click on the user dropdown in the top right corner.
+2. Select **Feature Preview**.
+3. In the feature preview dialog, toggle the feature status switch to **Disabled** mode and close the dialog.

en/asgardeo/docs/assets/img/guides/organization/self-registration/self-registration-flow-builder-components.gif

@@ -67,6 +67,22 @@
 
     --md-divider-color: var(--colors-mystic);
     --md-surface-fg-color: var(--colors-white);
+    
+    /* START OF - Chip Colors */
+    --md-chip-bg-color: var(--md-primary-fg-color);
+    --md-chip-beta-bg-color: linear-gradient(131deg, rgba(143, 197, 246, 0.30) 0%, rgba(72, 141, 180, 0.30) 100%);
+    --md-chip-beta-border-color: #488DB4;
+    --md-chip-beta-text-color: linear-gradient(93deg, #488DB4 0%, #1F3D4E 100%);
+    --md-chip-preview-bg-color: linear-gradient(131deg, rgba(233, 95, 255, 0.30) 0%, rgba(140, 57, 153, 0.30) 100%);
+    --md-chip-preview-border-color: #8C3999;
+    --md-chip-preview-text-color: linear-gradient(93deg, #8C3999 0%, #2F1333 100%);
+    --md-chip-new-bg-color: linear-gradient(131deg, rgba(117, 237, 161, 0.30) 28.46%, rgba(52, 146, 86, 0.30) 119.09%);
+    --md-chip-new-border-color: #349256;
+    --md-chip-new-text-color: linear-gradient(93deg, #349256 28.46%, #102C1A 119.09%);
+    --md-chip-premium-bg-color: linear-gradient(131deg, rgba(224, 184, 52, 0.30) 25.98%, rgba(181, 138, 0, 0.30) 112.91%);
+    --md-chip-premium-border-color: #928934;
+    --md-chip-premium-text-color: linear-gradient(93deg, #928934 28.46%, #2C2910 119.09%);
+    /* END OF - Chip Colors */
 }
 
 :root,
@@ -109,6 +125,13 @@
     --md-divider-color: rgba(255, 255, 255, var(--md-divider-opacity));
     --md-surface-fg-color: var(--colors-shark);
     --md-default-box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
+    
+    /* START OF - Chip Colors */
+    --md-chip-beta-text-color: linear-gradient(93deg, #adcddf 0%, #59859e 100%);
+    --md-chip-preview-text-color: linear-gradient(93deg, #ef85ff 0%, #e1bae7 100%);
+    --md-chip-new-text-color: linear-gradient(93deg, #5bb77c 28.46%, #65d48d 119.09%);
+    --md-chip-premium-text-color: linear-gradient(93deg, #d9d07c 28.46%, #867f46 119.09%);
+    /* END OF - Chip Colors */
 }
 
 @supports selector(::-webkit-scrollbar) {
@@ -602,6 +625,91 @@
     margin-bottom: 15px;
 }
 
+.md-chip {
+    max-width: 100%;
+    font-family: Gilmer, sans-serif;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-default-fg-color);
+    background: var(--md-chip-bg-color);
+    cursor: default;
+    vertical-align: middle;
+    box-sizing: border-box;
+    font-size: 0.6125rem;
+    height: 24px;
+    border-radius: 6px;
+    white-space: nowrap;
+    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    outline: 0px;
+    text-decoration: none;
+    border-width: 0px;
+    border-style: initial;
+    border-color: initial;
+    border-image: initial;
+    padding: 0px;
+}
+
+.md-chip__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 12px;
+    padding-right: 12px;
+    white-space: nowrap;
+}
+
+.md-chip--beta {
+    background: var(--md-chip-beta-bg-color);
+    border: 1px solid var(--md-chip-beta-border-color);
+    color: var(--md-chip-beta-text-color);
+}
+
+.md-chip--beta .md-chip__label {
+    background-image: var(--md-chip-beta-text-color);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.md-chip--preview {
+    background: var(--md-chip-preview-bg-color);
+    border: 1px solid var(--md-chip-preview-border-color);
+    color: var(--md-chip-preview-text-color);
+}
+
+.md-chip--preview .md-chip__label {
+    background-image: var(--md-chip-preview-text-color);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.md-chip--new {
+    background: var(--md-chip-new-bg-color);
+    border: 1px solid var(--md-chip-new-border-color);
+    color: var(--md-chip-new-text-color);
+}
+
+.md-chip--new .md-chip__label {
+    background-image: var(--md-chip-new-text-color);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.md-chip--premium {
+    background: var(--md-chip-premium-bg-color);
+    border: 1px solid var(--md-chip-premium-border-color);
+    color: var(--md-chip-premium-text-color);
+}
+
+.md-chip--premium .md-chip__label {
+    background-image: var(--md-chip-premium-text-color);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
 /* Media query breakpoints
 
     $base_px: 16px;