Integrate Branding capabilities to the Authentication, Recovery & My Account portals using `file_based` approach.

[brionmario]

Is your feature request related to a problem? Please describe.

ATM, there's no way to add branding to the Authentication, Recovery and My Account portal OOTB. The current approach to brand Authentication and Recovery is to go through a manual process that doesn't have any framework (https://is.docs.wso2.com/en/latest/references/extend/rebranding/rebrand-identity-server-uis/).

Describe the solution you would prefer It would be better to implement a structured OOTB branding support that's unified across the portals. This approach can be file-based, maybe based on a JSON file. And users could persist the branding per organization and app wise as well.

[brionmario]

Progress as per (09-06-2023)

Authentication / Recovery

Extensions folder structure.

extensions
└── branding
    ├── APP # app wise branding
    │   └── peoplehr
    │       └── en-US
    │           ├── branding-preference.json
    │           └── stylesheets
    │               └── override.css
    └── ORG # tenant wise branding
        ├── rusticfox.com
        │   └── en-US
        │       ├── branding-preference.json
        │       └── stylesheets
        │           └── override.css
        └── netflix.com
            └── en-US
                ├── branding-preference.json
                └── stylesheets
                    └── override.css

Sample rusticfox.com tenant's customization.

My Account

Extensions folder structure.

extensions
└── branding
    ├── rusticfox.com
    │   └── en-US
    │       ├── branding-preference.json
    │       └── stylesheets
    │           └── override.css
    └── netflix.com
        └── en-US
            ├── branding-preference.json
            └── stylesheets
                └── override.css

Sample rusticfox.com tenant's customization.

Structure of the branding-preference.json.

{
  "type": "ORG",
  "name": "netflixdemo",
  "locale": "en-US",
  "preference": {
    "configs": {
      "isBrandingEnabled": true,
      "removeDefaultBranding": false
    },
    "layout": {
      "activeLayout": "centered"
    },
    "organizationDetails": {
      "copyrightText": "© Netflix Inc 2023. All Rights Reserved.",
      "siteTitle": "Netflix",
      "supportEmail": "support@netflixdemo.com"
    },
    "theme": {
      "activeTheme": "DARK",
      "LIGHT": {
        "buttons": {
          "externalConnection": {
            "base": {
              "background": {
                "backgroundColor": "#FFFFFF"
              },
              "border": {
                "borderRadius": "4px"
              },
              "font": {
                "color": "#000000de"
              }
            }
          },
          "primary": {
            "base": {
              "border": {
                "borderRadius": "4px"
              },
              "font": {
                "color": "#ffffffe6"
              }
            }
          },
          "secondary": {
            "base": {
              "border": {
                "borderRadius": "4px"
              },
              "font": {
                "color": "#000000de"
              }
            }
          }
        },
        "colors": {
          "alerts": {
            "error": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#ffd8d8",
              "inverted": ""
            },
            "info": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#eff7fd",
              "inverted": ""
            },
            "neutral": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#f8f8f9",
              "inverted": ""
            },
            "warning": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#fff6e7",
              "inverted": ""
            }
          },
          "background": {
            "body": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#fbfbfb",
              "inverted": ""
            },
            "surface": {
              "contrastText": "",
              "dark": "#0000000d",
              "light": "#f9fafb",
              "main": "#ffffff",
              "inverted": "#212A32"
            }
          },
          "illustrations": {
            "accent1": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#3865B5",
              "inverted": ""
            },
            "accent2": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#19BECE",
              "inverted": ""
            },
            "accent3": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#FFFFFF",
              "inverted": ""
            },
            "primary": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#FF7300",
              "inverted": ""
            },
            "secondary": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#E0E1E2",
              "inverted": ""
            }
          },
          "outlined": {
            "default": "#dadce0"
          },
          "primary": {
            "contrastText": "",
            "dark": "",
            "light": "",
            "main": "#FF7300",
            "inverted": ""
          },
          "secondary": {
            "contrastText": "",
            "dark": "",
            "light": "",
            "main": "#E0E1E2",
            "inverted": ""
          },
          "text": {
            "primary": "#000000de",
            "secondary": "#00000066"
          }
        },
        "footer": {
          "border": {
            "borderColor": ""
          },
          "font": {
            "color": ""
          }
        },
        "images": {
          "favicon": {},
          "logo": {},
          "myAccountLogo": {
            "title": "Account"
          }
        },
        "inputs": {
          "base": {
            "background": {
              "backgroundColor": "#FFFFFF"
            },
            "border": {
              "borderColor": "",
              "borderRadius": "8px"
            },
            "font": {
              "color": ""
            },
            "labels": {
              "font": {
                "color": ""
              }
            }
          }
        },
        "loginBox": {
          "background": {
            "backgroundColor": ""
          },
          "border": {
            "borderColor": "",
            "borderRadius": "12px",
            "borderWidth": "1px"
          },
          "font": {
            "color": ""
          }
        },
        "page": {
          "background": {},
          "font": {}
        },
        "typography": {
          "font": {
            "fontFamily": "Gilmer"
          },
          "heading": {
            "font": {
              "color": ""
            }
          }
        },
        "loginPage": {
          "background": {
            "backgroundColor": ""
          },
          "font": {
            "color": ""
          }
        }
      },
      "DARK": {
        "buttons": {
          "externalConnection": {
            "base": {
              "background": {
                "backgroundColor": "#24292e"
              },
              "border": {
                "borderRadius": "4px"
              },
              "font": {
                "color": "#ffffff"
              }
            }
          },
          "primary": {
            "base": {
              "border": {
                "borderRadius": "4px"
              },
              "font": {
                "color": "#ffffff"
              }
            }
          },
          "secondary": {
            "base": {
              "border": {
                "borderRadius": "4px"
              },
              "font": {
                "color": "#000000"
              }
            }
          }
        },
        "colors": {
          "alerts": {
            "error": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#ff000054",
              "inverted": ""
            },
            "info": {
              "contrastText": "",
              "dark": "#01579b",
              "light": "#03a9f4",
              "main": "#1971c233",
              "inverted": ""
            },
            "neutral": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#343a4033",
              "inverted": ""
            },
            "warning": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#f08c0033",
              "inverted": ""
            }
          },
          "background": {
            "body": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#141414",
              "inverted": ""
            },
            "surface": {
              "contrastText": "",
              "dark": "#1e2021",
              "light": "#1c1c1c",
              "main": "#000000bf",
              "inverted": "#17191a"
            }
          },
          "illustrations": {
            "accent1": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#3865B5",
              "inverted": ""
            },
            "accent2": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#19BECE",
              "inverted": ""
            },
            "accent3": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#FFFFFF",
              "inverted": ""
            },
            "primary": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#e50914",
              "inverted": ""
            },
            "secondary": {
              "contrastText": "",
              "dark": "",
              "light": "",
              "main": "#E0E1E2",
              "inverted": ""
            }
          },
          "outlined": {
            "default": "#00000003"
          },
          "primary": {
            "contrastText": "",
            "dark": "",
            "light": "",
            "main": "#e50914",
            "inverted": ""
          },
          "secondary": {
            "contrastText": "",
            "dark": "",
            "light": "",
            "main": "#E0E1E2",
            "inverted": ""
          },
          "text": {
            "primary": "#ffffff",
            "secondary": "#b3b3b3"
          }
        },
        "footer": {
          "border": {
            "borderColor": ""
          },
          "font": {
            "color": ""
          }
        },
        "images": {
          "favicon": {
            "imgURL": "https://cdn.statically.io/gh/brionmario/asgardeo-branding/restructure/organizations/netflix/images/favicon.ico"
          },
          "logo": {
            "imgURL": "https://cdn.statically.io/gh/brionmario/asgardeo-branding/restructure/organizations/netflix/images/logo.png",
            "altText": "Logo "
          },
          "myAccountLogo": {
            "title": "Account",
            "imgURL": "https://cdn.statically.io/gh/brionmario/asgardeo-branding/restructure/organizations/netflix/images/logo.png",
            "altText": ""
          }
        },
        "inputs": {
          "base": {
            "background": {
              "backgroundColor": "#333333"
            },
            "border": {
              "borderColor": "",
              "borderRadius": "4px"
            },
            "font": {
              "color": ""
            },
            "labels": {
              "font": {
                "color": ""
              }
            }
          }
        },
        "loginBox": {
          "background": {
            "backgroundColor": ""
          },
          "border": {
            "borderColor": "",
            "borderRadius": "4px",
            "borderWidth": "1px"
          },
          "font": {
            "color": ""
          }
        },
        "page": {
          "background": {},
          "font": {}
        },
        "typography": {
          "font": {
            "fontFamily": "Netflix Sans,Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif",
            "importURL": "https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Rg.woff2"
          },
          "heading": {
            "font": {
              "color": ""
            }
          }
        },
        "loginPage": {
          "background": {
            "backgroundColor": ""
          },
          "font": {
            "color": ""
          }
        }
      }
    },
    "stylesheets": {
      "accountApp": "extensions/branding/ORG/netflix.com/en-US/stylesheets/override.css",
      "selfcareApp": "/myaccount/extensions/branding/netflix.com/en-US/stylesheets/override.css"
    },
    "urls": {
      "cookiePolicyURL": "",
      "privacyPolicyURL": ""
    }
  }
}

[brionmario]

Suggested Improvements

Assignee: @Yoshani

1. Folder Structure Improvements

• ATM, app wise theming has a higher level folder and that could conflict if two tenants have the same app but needs different branding.
• Currently, branding-preference.json is under locale folder i.e.en-US/branding-preference.json. We can improve this.

Suggested Structure

Authentication/ Recovery

extensions
└── branding
    ├── rusticfox.com
    │   ├── apps
    │   │   ├── logomaker
    │   │   │   ├── stylesheets
    │   │   │   │   └── override.css
    │   │   │   ├── branding-preference_en_US.json
    │   │   │   └── branding-preference_de_DE.json
    │   │   └── salesforce
    │   │       ├── stylesheets
    │   │       │   └── override.css
    │   │       ├── branding-preference_en_US.json
    │   │       └── branding-preference_de_DE.json
    │   ├── stylesheets
    │   │   └── override.css
    │   ├── branding-preference_en_US.json
    │   └── branding-preference_de_DE.json
    └── wso2.com
        ├── apps
        │   ├── peoplehr
        │   │   ├── stylesheets
        │   │   │   └── override.css
        │   │   ├── branding-preference_en_US.json
        │   │   └── branding-preference_de_DE.json
        │   └── opd-claims
        │       ├── stylesheets
        │       │   └── override.css
        │       ├── branding-preference_en_US.json
        │       └── branding-preference_de_DE.json
        ├── stylesheets
        │   └── override.css
        ├── branding-preference_en_US.json
        └── branding-preference_de_DE.json

My Account

extensions
└── branding
    ├── rusticfox.com
    │   ├── stylesheets
    │   │   └── override.css
    │   ├── branding-preference_en_US.json
    │   └── branding-preference_de_DE.json
    └── wso2.com
        ├── stylesheets
        │   └── override.css
        ├── branding-preference_en_US.json
        └── branding-preference_de_DE.json

2. Layout resolver improvements.

Currently, adding layouts should be done manually. (https://is.docs.wso2.com/en/latest/references/extend/rebranding/customizable-login-portal/)

We can make use of the activeLayout property in branding-preference.json to resolve prefered layout.

Logic: https://github.com/wso2/identity-apps/blob/master/java/apps/authentication-portal/src/main/webapp/includes/layout-resolver.jsp

[Yoshani]

Layout resolver improvements

Suggested structure

extensions
└── branding
    ├── rusticfox.com
    │   ├── apps
    │   │   ├── logomaker
    │   │   │   ├── stylesheets
    │   │   │   │   └── override.css
    │   │   │   ├── branding-preference_en_US.json
    │   │   │   ├── branding-preference_de_DE.json
    │   │   │   └── layouts
    │   │   │       ├── centered
    │   │   │       │   ├── body.ser
    │   │   │       │   └── body.html
    │   │   │       └── top-left
    │   │   │           ├── body.ser
    │   │   │           └── body.html
    │   │   └── salesforce
    │   │       ├── stylesheets
    │   │       │   └── override.css
    │   │       ├── branding-preference_en_US.json
    │   │       └── branding-preference_de_DE.json
    │   ├── stylesheets
    │   │   └── override.css
    │   ├── branding-preference_en_US.json
    │   ├── branding-preference_de_DE.json
    │   └── layouts
    │       └── bottom-right
    │           ├── body.ser
    │           └── body.html
    └── wso2.com
        ├── apps
        │   ├── peoplehr
        │   │   ├── stylesheets
        │   │   │   └── override.css
        │   │   ├── branding-preference_en_US.json
        │   │   ├── branding-preference_de_DE.json
        │   │   └── layouts
        │   │       └── custom
        │   │           ├── body.ser
        │   │           └── body.html
        │   └── opd-claims
        │       ├── stylesheets
        │       │   └── override.css
        │       ├── branding-preference_en_US.json
        │       └── branding-preference_de_DE.json
        ├── stylesheets
        │   └── override.css
        ├── branding-preference_en_US.json
        └── branding-preference_de_DE.json

The activeLayout property in branding-preference.json can be used to resolve the preferred layout.

The improvement also facilitates adding fully customised Product Header and Product Footer tenant-wise and app-wise by adding the customised product-title.jsp and product-footer.jsp files into the relevant layouts folder.

[Yoshani]

Final PRs

• https://github.com/wso2/identity-apps/pull/3931
• https://github.com/wso2/identity-apps/pull/3941
• https://github.com/wso2/identity-apps/pull/3943
• https://github.com/wso2/identity-apps/pull/3953
• https://github.com/wso2/identity-apps/pull/3956
• https://github.com/wso2/identity-apps/pull/3960

Docs PR

• https://github.com/wso2/docs-is/pull/3824

[asekawa]

• [x] Is this document impacted?
• [ ] Is the end-to-end (e2e) testing complete?
• [ ] Are unit tests available?
• [ ] Are integration tests available?
• [x] Has this feature been tested on the latest Jenkins build after merging the changes? (Please Attach Proof, Screenshots, Screen recordings)
• [x] Are all the relevant sub-tasks updated as complete (e.g., Cloud readiness tasks and migrations, docs)?
• [ ] Have demo sessions been completed? (If yes, please attach the recording link)
• [ ] Does this change impact the on-prem environment only or required to be specifically onboarded to Asgardeo?

[Yoshani]

Fix impacts on-prem environment only.