From 6124f56fb343493cd0712025deca07b5c940921f Mon Sep 17 00:00:00 2001 From: wso2 Date: Fri, 3 Nov 2023 11:10:26 +0530 Subject: [PATCH] updated rebranding docs --- .../docs/assets/code-samples/localize.jsp | 181 ++++++++++++++++++ .../rebranding/customizable-login-portal.md | 42 ++-- 2 files changed, 205 insertions(+), 18 deletions(-) create mode 100644 en/identity-server/6.1.0/docs/assets/code-samples/localize.jsp diff --git a/en/identity-server/6.1.0/docs/assets/code-samples/localize.jsp b/en/identity-server/6.1.0/docs/assets/code-samples/localize.jsp new file mode 100644 index 0000000000..850b1432a0 --- /dev/null +++ b/en/identity-server/6.1.0/docs/assets/code-samples/localize.jsp @@ -0,0 +1,181 @@ +<%-- + ~ Copyright (c) 2019, WSO2 LLC. (http://www.wso2.com) All Rights Reserved. + ~ + ~ WSO2 LLC. licenses this file to you under the Apache License, + ~ Version 2.0 (the "License"); you may not use this file except + ~ in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, + ~ software distributed under the License is distributed on an + ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + ~ KIND, either express or implied. See the License for the + ~ specific language governing permissions and limitations + ~ under the License. +--%> + +<%@ page import="org.wso2.carbon.identity.application.authentication.endpoint.util.AuthenticationEndpointUtil" %> +<%@ page import="org.wso2.carbon.identity.application.authentication.endpoint.util.EncodedControl" %> +<%@ page import="java.nio.charset.StandardCharsets" %> +<%@ page import="java.util.*" %> +<%@ page import="org.json.JSONObject" %> +<%@ page import="java.util.Calendar" %> +<%@ page import="org.apache.commons.lang.StringUtils" %> +<%@ page import="org.owasp.encoder.Encode" %> + +<% + String lang = "en_US"; // Default lang is en_US + String COOKIE_NAME = "ui_lang"; + Locale browserLocale = request.getLocale(); + Locale userLocale = browserLocale; + String uiLocaleFromURL = request.getParameter("ui_locales"); + String localeFromCookie = null; + String BUNDLE = "org.wso2.carbon.identity.application.authentication.endpoint.i18n.Resources"; + + // Check cookie for the user selected language first + Cookie[] cookies = request.getCookies(); + if (cookies != null) { + for (Cookie cookie : cookies) { + if (cookie.getName().equals(COOKIE_NAME)) { + localeFromCookie = cookie.getValue(); + } + } + } + + // Set lang from the priority order + if (localeFromCookie != null) { + lang = localeFromCookie; + + try { + String langStr = "en"; + String langLocale = "US"; + + if (lang.contains("_")) { + langStr = lang.split("_")[0]; + langLocale = lang.split("_")[1]; + } else if (lang.contains("-")) { + langStr = lang.split("-")[0]; + langLocale = lang.split("-")[1]; + } + + userLocale = new Locale(langStr, langLocale); + } catch (Exception e) { + // In case the language is defined but not in the correct format + userLocale = browserLocale; + } + } else if (uiLocaleFromURL != null) { + for (String localeStr : uiLocaleFromURL.split(" ")) { + String langStr = "en"; + String langLocale = "US"; + + if (localeStr.contains("_")) { + langStr = localeStr.split("_")[0]; + langLocale = localeStr.split("_")[1]; + } else if (localeStr.contains("-")) { + langStr = localeStr.split("-")[0]; + langLocale = localeStr.split("-")[1]; + } + + Locale tempLocale = new Locale(langStr, langLocale); + + // Trying to find out whether we have resource bundle for the given locale + try { + ResourceBundle foundBundle = ResourceBundle.getBundle(BUNDLE, tempLocale); + + // If so, setting the userLocale to that locale. If not, set the browser locale as user locale + // Currently, we only care about the language - we do not compare about country locales since our + // supported locale set is limited. + if (tempLocale.getLanguage().equals(foundBundle.getLocale().getLanguage())) { + userLocale = tempLocale; + break; + } else if (tempLocale.getLanguage().equals("en") && foundBundle.getLocale().getLanguage().equals("")) { + // When the given locale is en - which is our fallback one, we have to handle it separately because + // returns and empty string as locale language + userLocale = tempLocale; + break; + } else { + userLocale = browserLocale; + } + } catch (Exception e) { + userLocale = browserLocale; + } + } + } else { + userLocale = browserLocale; + } + + ResourceBundle resourceBundle = ResourceBundle.getBundle(BUNDLE, userLocale, new + EncodedControl(StandardCharsets.UTF_8.toString())); +%> + +<%! + /** + * Get the localized string for the given key. + * Interacts with both the `resourceBundle` & the custom text from the Branding API. + * + * @param resourceBundle Resource bundle. + * @param customText Custom text. + * @param key Key of the localized string. + * @return Localized string. + */ + public String i18n(ResourceBundle resourceBundle, JSONObject customText, String key) { + return i18n(resourceBundle, customText, key, null, true); + } + + /** + * Get the localized string for the given key. + * Interacts with both the `resourceBundle` & the custom text from the Branding API. + * Overloaded method with default value. + * + * @param resourceBundle Resource bundle. + * @param customText Custom text. + * @param key Key of the localized string. + * @param defaultValue Default value. + * @return Localized string. + */ + public String i18n(ResourceBundle resourceBundle, JSONObject customText, String key, String defaultValue) { + return i18n(resourceBundle, customText, key, defaultValue, true); + } + + /** + * Get the localized string for the given key. + * Interacts with both the `resourceBundle` & the custom text from the Branding API. + * Overloaded method with default value with the ability to not fallback to resource bundle and return "" as default. + * + * @param resourceBundle Resource bundle. + * @param customText Custom text. + * @param key Key of the localized string. + * @param defaultValue Default value. + * @param shouldFallbackToResourceBundle Should fallback to resource bundle. + * @return Localized string. + */ + public String i18n(ResourceBundle resourceBundle, JSONObject customText, String key, String defaultValue, boolean shouldFallbackToResourceBundle) { + String localizedString = null; + Calendar calendar = Calendar.getInstance(); + int currentYear = calendar.get(Calendar.YEAR); + + try { + if (customText != null && customText.has(key)) { + localizedString = Encode.forHtmlContent(customText.getString(key)); + } else { + if (StringUtils.isNotBlank(defaultValue)) { + localizedString = Encode.forHtmlContent(defaultValue); + } else if (shouldFallbackToResourceBundle) { + localizedString = AuthenticationEndpointUtil.i18n(resourceBundle, key); + } else { + localizedString = ""; + } + } + } catch (Exception e) { + // Return the key itself as a fallback + localizedString = Encode.forHtmlContent(key); + } + + // Replace newline characters with actual line breaks + localizedString = localizedString.replace("\\n", "\n"); + + return localizedString.replace("{{currentYear}}", String.valueOf(currentYear)); + } +%> diff --git a/en/identity-server/6.1.0/docs/references/extend/rebranding/customizable-login-portal.md b/en/identity-server/6.1.0/docs/references/extend/rebranding/customizable-login-portal.md index e4aee39996..49946d0c89 100644 --- a/en/identity-server/6.1.0/docs/references/extend/rebranding/customizable-login-portal.md +++ b/en/identity-server/6.1.0/docs/references/extend/rebranding/customizable-login-portal.md @@ -7,7 +7,7 @@ All UIs are available in the `authenticationendpoint`, `accountrecoveryendpoint` ## General components of the UI All pages of WSO2 Identity Server are separated into three general components as shown below. You can reference these components when you write the custom layout using a special notation. - + - Login page ![Login Page]({{base_path}}/assets/img/references/login-page-labelled.png) @@ -20,31 +20,31 @@ All pages of WSO2 Identity Server are separated into three general components as This section includes details about the special syntax that can be used when writing a custom layout code. - **Condition block** - + ![Condition Block]({{base_path}}/assets/img/references/condition-block.png) This is similar to an `IF` block. This condition block will activate or deactivate according to the value of the `isPolicyPage` variable. - + - If the value of `isPolicyPage` is `true` or any non-empty string, then the content inside the block will be executed. - For all other values including null and undefined, the content of the block will not be executed. - **Not Condition Block** ![Not Condition Block]({{base_path}}/assets/img/references/not-condition-block.png) - + This is similar to an `IF` block with a NOT condition. - + - If the value of `isPolicyPage` is `false`, an empty string, null or undefined, the content inside the block will be executed. - For all other values, the content of the block will not be executed. - **Component Syntax** - + ![Component Syntax]({{base_path}}/assets/img/references/component-syntax.png) This syntax will be used to indicate the position of the general component in the custom layout code. The component syntaxes will be replaced with actual content at runtime. - **Data Syntax** - + ![Data Syntax]({{base_path}}/assets/img/references/data-syntax.png) This syntax can be used to add data to the layout code. The value stored in the `containerSize` variable will be converted to a string and placed in the corresponding location at runtime. All data syntax values will be sanitized before adding to the layout code. @@ -96,32 +96,38 @@ To add a custom layout to the login page: 1. Navigate to `webapps/authenticationendpoint/extensions/layouts/custom/` and follow the instructions provided below: - 1. Copy the code snippet from the [html file](https://github.com/wso2/docs-is/tree/master/en/docs/assets/code-samples/body.html) into the `body.html` file. + 1. Copy the code snippet from the [html file](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/body.html) into the `body.html` file. + + 2. Copy the code snippet from the [css file](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/style.css) into the `styles.css` file. - 2. Copy the code snippet from the [css file](https://github.com/wso2/docs-is/tree/master/en/docs/assets/code-samples/style.css) into the `styles.css` file. + 3. Copy the code snippet from the [javascript file](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/script.js) into the `script.js` file. - 3. Copy the code snippet from the [javascript file](https://github.com/wso2/docs-is/tree/master/en/docs/assets/code-samples/script.js) into the `script.js` file. + 4. Copy the [illustration.svg](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/illustration.svg) file into the `assets` folder. - 4. Copy the [illustration.svg](https://github.com/wso2/docs-is/tree/master/en/docs/assets/code-samples/illustration.svg) file into the `assets` folder. +2. Navigate to the `webapps/authenticationendpoint/includes` folder and copy the `product-title.jsp`, `product-footer.jsp`, and `localize.jsp` files to the `webapps/authenticationendpoint/extensions` folder as follows: -2. Navigate to the `webapps/authenticationendpoint/includes` folder and copy the `product-title.jsp` and `product-footer.jsp` files to the `webapps/authenticationendpoint/extensions` folder as follows: + 1. Copy content from the [`jsp` file containing the project title](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/project-title-1.jsp) to the `webapps/authenticationendpoint/extensions/product-title.jsp` file of the app. - 1. Copy content from the [`jsp` file containing the project title](https://github.com/wso2/docs-is/tree/master/en/docs/assets/code-samples/project-title-1.jsp) to the `webapps/authenticationendpoint/extensions/product-title.jsp` file of the app. + 2. Copy content from the [`jsp` file containing the project footer](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/product-footer-1.jsp) to the `webapps/authenticationendpoint/extensions/product-footer.jsp` file of the app. - 2. Copy content from the [`jsp` file containing the project footer](https://github.com/wso2/docs-is/tree/master/en/docs/assets/code-samples/product-footer-1.jsp) to the `webapps/authenticationendpoint/extensions/product-footer.jsp` file of the app. + 3. Copy content from the [`jsp` file containing the localization data](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/localize.jsp) to the `webapps/authenticationendpoint/extensions/localize.jsp` file of the app. !!! note Repeat the above steps for `accountrecoveryendpoint` and `x509certificateauthenticationendpoint` as well. You will be copying the following files: - - - [Project title](https://github.com/wso2/docs-is/tree/master/en/docs/assets/code-samples/product-title-2.jsp). + - [Project title](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/product-title-2.jsp) + + - [Project footer](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/product-footer-2.jsp) + + - [Localize](https://github.com/wso2/docs-is/tree/master/en/identity-server/6.1.0/docs/assets/code-samples/localize.jsp) - - [Project footer](https://github.com/wso2/docs-is/tree/master/en/docs/assets/code-samples/product-footer-2.jsp) + !!! note "Adding extra customization" + If you require further customization for additional branding features, you can incorporate any of the files located within the [includes](https://github.com/wso2/identity-apps/tree/b749362e912c6be8c79794b2769c758f0403e66d/identity-apps-core/apps/authentication-portal/src/main/webapp/includes) folder. 3. Build the source code. - 1. Copy the `/repository/deployment/server/webapps/authenticationendpoint/extensions/layouts/custom` directory and place it into the `/components/login-portal-layouts/layouts `directory. + 1. Copy the `/repository/deployment/server/webapps/authenticationendpoint/extensions/layouts/custom` directory and place it into the `/components/login-portal-layouts/layouts` directory. 2. Navigate to `/components/login-portal-layouts` directory and build the source code using `mvn clean install` command (Build should be succeeded for further steps).