New topic - show or hide password checkbox implementation

src/_data/toc/ui-components-guide.yml

@@ -53,7 +53,6 @@ pages:
 
         - label: ColumnsResize component
           url: /ui_comp_guide/components/ui-columns-resize.html
-          exclude_versions: ["2.2"]
 
         - label: ColumnsControls component
           url: /ui_comp_guide/components/ui-columnscontrols.html
@@ -285,6 +284,10 @@ pages:
         - label: Declare a custom UI component
           url: /ui_comp_guide/howto/new_component_declaration.html
 
+        - label: Show or Hide Password Checkbox
+          url: /ui_comp_guide/howto/show_or_hide_password_checkbox.html
+          exclude_versions: ["2.3"]
+
     - label: Troubleshoot
       children:
 

src/guides/v2.4/ui_comp_guide/howto/show_or_hide_password_checkbox.md

@@ -0,0 +1,96 @@
+---
+group: ui-components-guide
+title: Show or Hide Password Checkbox
+---
+
+This topic describes how you can implement the "show or hide" password checkbox functionality in custom forms.
+
+![Show or Hide Password Checkbox]({{ site.baseurl }}/common/images/ui_comps/show-or-hide-password-checkbox-v2.1.png)
+
+## Step 1: Add the HTML code
+
+Add the HTML code snippet which renders the "show or hide" password checkbox to the PHTML template file. It uses the `scope` custom knockout binding.
+
+Below is the HTML code snippet:
+
+```phtml
+<div class="field choice" data-bind="scope: 'showPassword'">
+    <!-- ko template: getTemplate() --><!-- /ko -->
+</div>
+```
+
+For more information about `Scope` binding, refer to [Scope Binding]({{ page.baseurl }}/ui_comp_guide/concepts/knockout-bindings.html#scope)
+
+## Step 2: Add the x-magento-init script
+
+Initialize the "show or hide" password checkbox using the `text/x-magento-init` script. It uses the scope binding name `showPassword` to initialize the component. Pass both the component javascript file path, and the password field id prefixed with #.
+
+```phtml
+<script type="text/x-magento-init">
+    {
+        "*": {
+            "Magento_Ui/js/core/app": {
+                "components": {
+                    "showPassword": {
+                        "component": "Magento_Customer/js/show-password",
+                        "passwordSelector": "#pass"
+                    }
+                }
+            }
+        }
+    }
+</script>
+```
+
+|Option|Description|Type|
+|--- |--- |--- |
+|`component`|The path to the component’s `.js` file, relative to RequireJS. Here the component path value is `Magento_Customer/js/show-password`|String|
+|`passwordSelector`|The id of the password input field. i.e. `#pass`.|String|
+
+## Example
+
+This example shows the custom implemented company login form template (PHTML file) with the "show or hide" password checkbox.
+
+```phtml
+<div class="block-content" aria-labelledby="block-company-login-heading">
+    <form class="form form-company-login" action="<?= $escaper->escapeUrl($block->getPostActionUrl()) ?>" method="post" id="company-login-form">
+        <?= $block->getBlockHtml('formkey') ?>
+        <fieldset class="fieldset login" data-hasrequired="<?= $escaper->escapeHtml(__('* Required Fields')) ?>">
+            <div class="field email required">
+                <label class="label" for="email"><span><?= $escaper->escapeHtml(__('Company Email')) ?></span></label>
+                <div class="control">
+                    <input name="login[username]" id="email" type="email" class="input-text" data-validate="{required:true, 'validate-email':true}">
+                </div>
+            </div>
+            <div class="field password required">
+                <label for="pass" class="label"><span><?= $escaper->escapeHtml(__('Password')) ?></span></label>
+                <div class="control">
+                    <input name="login[password]" type="password" class="input-text" id="pass" data-validate="{required:true}">
+                </div>
+            </div>
+            <div class="field choice" data-bind="scope: 'showPassword'">
+                <!-- ko template: getTemplate() --><!-- /ko -->
+            </div>
+            <div class="actions-toolbar">
+                <div class="primary">
+                    <button type="submit" class="action login primary" id="company-submit"><span><?= $escaper->escapeHtml(__('Company Sign In')) ?></span></button>
+                </div>
+            </div>
+        </fieldset>
+    </form>
+</div>
+<script type="text/x-magento-init">
+    {
+        "*": {
+            "Magento_Ui/js/core/app": {
+                "components": {
+                    "showPassword": {
+                        "component": "Magento_Customer/js/show-password",
+                        "passwordSelector": "#pass"
+                    }
+                }
+            }
+        }
+    }
+</script>
+```