Initial Commit

navigatecommerce · May 6, 2022 · 733d756 · 733d756
1 parent e404566
commit 733d756
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,43 @@
-# magento-2-passwordhideshow
+# Navigate Commerce Customer Form Password Hide Show module for Magento 2
 Customer Form Password Hide Show.
+
+## How to install Navigate_PasswordHideShow module
+
+### Composer Installation
+
+Run the following command in Magento 2 root directory to install Navigate_PasswordHideShow module via composer.
+
+#### Install
+
+```
+composer require navigate/magento-2-passwordhideshow
+php bin/magento setup:upgrade
+php bin/magento setup:static-content:deploy -f
+```
+
+#### Update
+
+```
+composer update navigate/magento-2-passwordhideshow
+php bin/magento setup:upgrade
+php bin/magento setup:static-content:deploy -f
+```
+
+Run below command if your store is in the production mode:
+
+```
+php bin/magento setup:di:compile
+```
+
+### Manual Installation
+
+If you prefer to install this module manually, kindly follow the steps described below - 
+
+- Download the latest version [here](https://github.com/navigatecommerce/magento-2-passwordhideshow/archive/refs/heads/main.zip) 
+- Create a folder path like this `app/code/Navigate/PasswordHideShow` and extract the `main.zip` file into it.
+- Navigate to Magento root directory and execute the below commands.
+
+```
+php bin/magento setup:upgrade
+php bin/magento setup:static-content:deploy -f
+```
diff --git a/composer.json b/composer.json
@@ -0,0 +1,26 @@
+{
+    "name": "navigate/magento-2-passwordhideshow",
+    "description": "Form Password HideShow by navigate",
+    "require": {
+        "php": "~7.0.13|~7.1.0|~7.2.0|~7.3.0|~7.4.0|~8.0.0|~8.1.1"
+    },
+    "type": "magento2-module",
+    "license": "proprietary",
+    "version": "1.0.0",
+    "authors": [
+        {
+          "name": "Navigate",
+          "email": "support@navigatecommerce.com",
+          "homepage": "https://www.navigatecommerce.com",
+          "role": "Technical Support"
+        }
+    ],
+    "autoload": {
+        "files": [
+            "registration.php"
+        ],
+        "psr-4": {
+            "Navigate\\PasswordHideShow\\": ""
+        }
+    }
+}  
diff --git a/etc/frontend/routes.xml b/etc/frontend/routes.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+	<router id="standard">
+		<route id="passwordhideshow" frontName="passwordhideshow">
+			<module name="Navigate_PasswordHideShow" />
+		</route>
+	</router>
+</config>
diff --git a/etc/module.xml b/etc/module.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+	<module name="Navigate_PasswordHideShow" setup_version="1.0.0"></module>
+</config>
diff --git a/registration.php b/registration.php
@@ -0,0 +1,7 @@
+<?php
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Navigate_PasswordHideShow',
+    __DIR__
+);
diff --git a/view/frontend/layout/customer_account_create.xml b/view/frontend/layout/customer_account_create.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Navigate_PasswordHideShow::css/navigate.css"/>
+    </head>
+    <body>
+        <referenceContainer name="content">
+            <block class="Magento\Framework\View\Element\Template" name="create-show-hide-password" template="Navigate_PasswordHideShow::registershowhidepwd.phtml"/>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/view/frontend/layout/customer_account_login.xml b/view/frontend/layout/customer_account_login.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Navigate_PasswordHideShow::css/navigate.css"/>
+    </head>
+    <body>
+        <referenceContainer name="content">
+            <block class="Magento\Framework\View\Element\Template" name="login-show-hide-password" template="Navigate_PasswordHideShow::loginshowhidepwd.phtml"/>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/view/frontend/templates/loginshowhidepwd.phtml b/view/frontend/templates/loginshowhidepwd.phtml
@@ -0,0 +1,17 @@
+<script type="text/javascript">
+require(['jquery', 'jquery/ui'], function($){
+    jQuery("#pass").before('<span toggle="#pass" class="toggle-password"><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye.png"); ?>" class="eye-open" /><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye-slash.png"); ?>" class="eye-close" style="display: none;"/></span>');
+    jQuery("body").on('click', '.toggle-password', function() {
+        var input = jQuery("#pass");
+        if (input.attr("type") === "password") {
+            input.attr("type", "text");
+            jQuery(".eye-close").show();
+            jQuery(".eye-open").hide();
+        } else {
+            jQuery(".eye-close").hide();
+            jQuery(".eye-open").show();
+            input.attr("type", "password");
+        }
+    });
+});
+</script>
diff --git a/view/frontend/templates/registershowhidepwd.phtml b/view/frontend/templates/registershowhidepwd.phtml
@@ -0,0 +1,30 @@
+<script type="text/javascript">
+require(['jquery', 'jquery/ui'], function($){
+    jQuery("#password").before('<span toggle="#password" class="toggle-password"><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye.png"); ?>" class="eye-open" /><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye-slash.png"); ?>" class="eye-close" style="display: none;"/></span>');
+    jQuery("#password-confirmation").before('<span toggle="#password-confirmation" class="toggle-password-confirmation"><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye.png"); ?>" class="eye-open-confirmation" /><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye-slash.png"); ?>" class="eye-close-confirmation" style="display: none;"/></span>');
+    jQuery("body").on('click', '.toggle-password', function() {
+        var input = jQuery("#password");
+        if (input.attr("type") === "password") {
+            input.attr("type", "text");
+            jQuery(".eye-close").show();
+            jQuery(".eye-open").hide();
+        } else {
+            jQuery(".eye-close").hide();
+            jQuery(".eye-open").show();
+            input.attr("type", "password");
+        }
+    });
+    jQuery("body").on('click', '.toggle-password-confirmation', function() {
+        var input = jQuery("#password-confirmation");
+        if (input.attr("type") === "password") {
+            input.attr("type", "text");
+            jQuery(".eye-close-confirmation").show();
+            jQuery(".eye-open-confirmation").hide();
+        } else {
+            jQuery(".eye-close-confirmation").hide();
+            jQuery(".eye-open-confirmation").show();
+            input.attr("type", "password");
+        }
+    });
+});
+</script>
diff --git a/view/frontend/web/css/navigate.css b/view/frontend/web/css/navigate.css
@@ -0,0 +1,16 @@
+.field.password .control, .field.confirmation .control{position:relative;}
+.toggle-password img, .toggle-password-confirmation img{ height:24px;}
+.toggle-password, .toggle-password-confirmation {
+    position: absolute;
+    height: 32px;
+    right: 0;
+    z-index: 3;
+    top: 0;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+    width: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/view/frontend/web/images/eye-slash.png b/view/frontend/web/images/eye-slash.png
diff --git a/view/frontend/web/images/eye.png b/view/frontend/web/images/eye.png